Skip to content

Commit

Permalink
Merge pull request #90 from JangGusWjd/dev/mentoring-ui
Browse files Browse the repository at this point in the history 
[FE-DEV] 멘토링 첫 페이지, 리스트 페이지, 후기 남기기 모달 UI 구현
  • Loading branch information
@JangGusWjd
JangGusWjd authored Jul 17, 2024
2 parents f01ebcc + 9910b4e commit 3e79fa1
Show file tree
Hide file tree
Showing 14 changed files with 511 additions and 1 deletion.
3 changes: 3 additions & 0 deletions src/assets/icon/close.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/icon/mentoring.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/icon/review-star.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/img/mentoring1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/img/mentoring2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/img/mentoring3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
167 changes: 167 additions & 0 deletions src/components/mentoring/MentorAll.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
import { useState } from "react";
import { ReactComponent as CloseIcon } from "../../assets/icon/close.svg";
import { ReactComponent as StarIcon } from "../../assets/icon/review-star.svg";
import "../../styles/mentoring/MentorAll.scss";

const data = [
{
img: "https://watermark.lovepik.com/photo/20211202/large/lovepik-foreign-teacher-smiles-and-writes-a-blackboard-picture_501383572.jpg",
name: "장현정",
title: "멘토링 제목",
content:
"멘토링 내용 멘토링 내용 멘토링 내용 멘토링 내용 멘토링 내용 멘토링 내용",
max: 5,
apply_count: 4,
},
{
img: "https://watermark.lovepik.com/photo/20211202/large/lovepik-foreign-teacher-smiles-and-writes-a-blackboard-picture_501383572.jpg",
name: "장현정",
title: "멘토링 제목",
content:
"멘토링 내용 멘토링 내용 멘토링 내용 멘토링 내용 멘토링 내용 멘토링 내용",
max: 5,
apply_count: 4,
},
{
img: "https://watermark.lovepik.com/photo/20211202/large/lovepik-foreign-teacher-smiles-and-writes-a-blackboard-picture_501383572.jpg",
name: "장현정",
title: "멘토링 제목",
content:
"멘토링 내용 멘토링 내용 멘토링 내용 멘토링 내용 멘토링 내용 멘토링 내용",
max: 5,
apply_count: 4,
},
{
img: "https://watermark.lovepik.com/photo/20211202/large/lovepik-foreign-teacher-smiles-and-writes-a-blackboard-picture_501383572.jpg",
name: "장현정",
title: "멘토링 제목",
content:
"멘토링 내용 멘토링 내용 멘토링 내용 멘토링 내용 멘토링 내용 멘토링 내용",
max: 5,
apply_count: 4,
},
];

const MentorAll = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [recommendation, setRecommendation] = useState("");
const [rating, setRating] = useState(0);

const openModal = () => {
setIsModalOpen(true);
};

const closeModal = () => {
setIsModalOpen(false);
};

const handleRating = (index: number) => {
setRating(index + 1);
};

const handleRecommendation = (choice: string) => {
setRecommendation(choice);
};

return (
<div className="mentor-list-container">
<div className="mentor">
<h1>"멘토"로 참여중인 프로그램</h1>
<div className="container">
{data.map((item, index) => (
<div className="mentoring-content" key={index}>
<div className="img-box">
<img src={item.img} alt="user" />
</div>
<div className="content-box">
<div>
<h1>👩🏻‍🏫&nbsp;{item.name}</h1>
<h2>{item.title}</h2>
<p>{item.content}</p>
<span>
신청인원 | {item.apply_count} / {item.max} 명
</span>
</div>
<div className="button">
<button>확정</button>
</div>
</div>
</div>
))}
</div>
</div>
<div className="mentee">
<h1>"멘티"로 참여중인 프로그램</h1>
<div className="container">
{data.map((item, index) => (
<div className="mentoring-content" key={index}>
<div className="img-box">
<img src={item.img} alt="user" />
</div>
<div className="content-box">
<div>
<h1>👩🏻‍🏫&nbsp;{item.name}</h1>
<h2>{item.title}</h2>
<p>{item.content}</p>
<span>
신청인원 | {item.apply_count} / {item.max} 명
</span>
</div>
<div className="button">
<p onClick={openModal}>후기 남기기</p>
</div>
</div>
</div>
))}
</div>
</div>
{isModalOpen && (
<div className="modal-background">
<div className="modal-container">
<div className="top">
<h1>멘토링에 대한 후기를 작성해주세요.</h1>
<CloseIcon onClick={closeModal} style={{ cursor: "pointer" }} />
</div>
<form className="middle">
<h1>멘토링 제목</h1>
<div className="star">
{[...Array(5)].map((_, index) => (
<div
key={index}
onClick={() => handleRating(index)}
style={{ cursor: "pointer" }}
className={index < rating ? "filled" : ""}
>
<StarIcon />
</div>
))}
</div>
<label htmlFor="review">멘토에게 하고 싶은 말</label>
<textarea id="review" />
<div className="recommend">
<p>다른 멘티에게 추천하나요?</p>
<div>
<span
onClick={() => handleRecommendation("no")}
className={recommendation === "no" ? "selected" : ""}
>
아니오
</span>
<span
onClick={() => handleRecommendation("yes")}
className={recommendation === "yes" ? "selected" : ""}
>
예
</span>
</div>
</div>
<button>후기 등록</button>
</form>
</div>
</div>
)}
</div>
);
};

export default MentorAll;
47 changes: 47 additions & 0 deletions src/components/mentoring/MentorMain.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import "../../styles/mentoring/MentorMain.scss";
import { useNavigate } from "react-router-dom";

const MentorMain = () => {
const navigate = useNavigate();
const goMentorAll = () => {
navigate("/main/mentoring/all");
};
return (
<div className="mentor-main-container">
<div className="mentor-main-top">
<img src={require("../../assets/img/mentoring1.png")} alt="img" />
<h1>
메이저인에서 <br />
나에게 맞는 멘토링을 찾아보세요.
</h1>
</div>
<div className="mentor-main-middle">
<p onClick={goMentorAll} style={{ cursor: "pointer" }}>
참여중인 멘토링 전체보기 <span>&gt;</span>
</p>
</div>
<div className="mentor-main-bottom">
<div className="mento-apply">
<h1>멘토 등록</h1>
<img src={require("../../assets/img/mentoring2.png")} alt="img" />
<p>
자신만의 경험, 지식, 노하우를 바탕으로 도움이 필요한 멘티들을 위해
멘토가 되어주세요.
</p>
<button>멘토 등록하러 가기</button>
</div>
<div className="mentee-apply">
<h1>멘티 신청</h1>
<img src={require("../../assets/img/mentoring3.png")} alt="img" />
<p>
학습, 대인관계, 학교생활, 취업상담 등 도움이 필요한 분야의 멘토링을
신청하세요.
</p>
<button>나에게 맞는 멘토링 신청하기</button>
</div>
</div>
</div>
);
};

export default MentorMain;
13 changes: 13 additions & 0 deletions src/components/navbar/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { ReactComponent as HomeIcon } from "../../assets/icon/home.svg";
import { ReactComponent as StudyIcon } from "../../assets/icon/study.svg";
import { ReactComponent as CommunityIcon } from "../../assets/icon/community.svg";
import { ReactComponent as BookIcon } from "../../assets/icon/book.svg";
import { ReactComponent as MentoringIcon } from "../../assets/icon/mentoring.svg";
import { ReactComponent as MypageIcon } from "../../assets/icon/mypage.svg";
import { useAuth } from "../../hooks/useAuth";
import { useRecoilValue } from "recoil";
Expand Down Expand Up @@ -130,6 +131,18 @@ const Navbar = () => {
/>
<p>중고거래</p>
</StyledLink>
<StyledLink
to="/main/mentoring"
onClick={(e) => handleClick(e, "/main/mentoring")}
className={location.pathname === "/main/mentoring" ? "active" : ""}
>
<MentoringIcon
fill={
location.pathname === "/main/mentoring" ? "#1b1c3a" : "#9b9b9b"
}
/>
<p>멘토링</p>
</StyledLink>
<StyledLink
to="/main/mypage"
onClick={(e) => handleClick(e, "/main/mypage")}
Expand Down
33 changes: 33 additions & 0 deletions src/pages/mentoring/MentorApp.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import MentorMain from "../../components/mentoring/MentorMain";
import MentorAll from "../../components/mentoring/MentorAll";
import styled from "styled-components";
import { Routes, Route } from "react-router-dom";

const MainContainer = styled.div`
width: 90%;
`;

const MentorApp = () => {
return (
<Routes>
<Route
path="/"
element={
<MainContainer>
<MentorMain />
</MainContainer>
}
/>
<Route
path="/all"
element={
<MainContainer>
<MentorAll />
</MainContainer>
}
/>
</Routes>
);
};

export default MentorApp;
2 changes: 2 additions & 0 deletions src/router/RouterApp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import CommunityApp from "../pages/community/CommunityApp";
import CommunityDetail from "../components/community/CommunityDetail";
import TradeApp from "../pages/trade/TradeApp";
import TradeDetail from "../components/trade/TradeDetail";
import MentorApp from "../pages/mentoring/MentorApp";
import MyPageApp from "../pages/mypage/MyPageApp";
import LoginApp from "../pages/login/LoginApp";
import SignUpApp from "../pages/signup/SignUpApp";
Expand Down Expand Up @@ -83,6 +84,7 @@ const RouterApp = () => {
<Route path="trade/*" element={<TradeApp />}>
<Route path=":tradeId" element={<TradeDetail />} />
</Route>
<Route path="mentoring/*" element={<MentorApp />} />
<Route path="mypage" element={<MyPageApp />} />
</>
)}
Expand Down
Loading

0 comments on commit 3e79fa1

Please sign in to comment.