Skip to content

Commit

Permalink
Merge pull request #39 from Dear-project/Feature/#8-FindProfessor
Browse files Browse the repository at this point in the history 
Feature/#8 find professor
  • Loading branch information
@wjzlskxk
wjzlskxk authored Jul 11, 2024
2 parents db92245 + 7927e3a commit d654467
Show file tree
Hide file tree
Showing 9 changed files with 209 additions and 186 deletions.
3 changes: 2 additions & 1 deletion src/asset/ProfessorProfile.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.
82 changes: 46 additions & 36 deletions src/components/home/matching/professorDetail/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,49 +5,59 @@ import * as S from "./style";
import Image from "next/image";
import Avartar from "src/asset/Avatar.svg";
import BestRecommandImg from "src/asset/BestRecommand.svg";
import Subject from "src/asset/Subject.png";
import useMatching from "@/hooks/matching/useMatching";
import { useParams } from "next/navigation";

const index = () => {
const { ...professor } = useMatching();
const { id } = useParams();
const professorDetailList = professor.getProfessorDetail();
const schoolInfo =
professorDetailList?.data.schoolName +
" " +
professorDetailList?.data.lclass +
" " +
professorDetailList?.data.mclass;
return (
<S.ProfessorDetailWrap>
<S.Main>
<S.InfoWrap>
<S.UtilityWrap>
<S.ProfileWrap>
<Image src={Avartar} alt="프로필 이미지" />
<S.ProffesorInfoWrap>
<div>
{professorDetailList?.data.img !== undefined ? (
<Image src={professorDetailList.data.img} alt="" />
) : (
<Image src={Avartar} alt="교수 프로필 이미지" width={100} height={100} />
)}
<div>
<h1>{professorDetailList?.data.name}</h1>
<span>{schoolInfo}</span>
<Image src={BestRecommandImg} alt="최다추천 이미지" width={70} height={30} />
</div>
</div>
<S.ChatButton onClick={() => professor.postMatching(1)}>채팅하기</S.ChatButton>
</S.ProffesorInfoWrap>
<S.CarrerAndReviewWrap>
<S.CarrerWrap>
<h1>경력</h1>
<div>
<div>
<h1>이해준 교수</h1>
<span>영남이공대 박승철 헤어과</span>
<span>2021.02.01</span>
<span>포항 제철고등학교 졸업</span>
</div>
<S.BestRecommandIcon>
<Image src={BestRecommandImg} alt="최다 추천" />
</S.BestRecommandIcon>
</S.ProfileWrap>
<S.ButtonWrap>
<button>채팅하기</button>
</S.ButtonWrap>
</S.UtilityWrap>
<S.OneLiner>헤어 봉사하는것을 좋아합니다.</S.OneLiner>
<S.Subject>
<Image src={Subject} alt="전문과목" />
<span>전문과목 : 수능영어, 고등진로</span>
</S.Subject>
</S.InfoWrap>
<S.CareerWrap>
<h1>경력</h1>
<S.Careers>
<span>2021.02.02</span>
<span>포항 제철 고등학교 졸업</span>
</S.Careers>
<S.Careers>
<span>2021.02.02</span>
<span>포항 제철 고등학교 졸업</span>
</S.Careers>
<S.Careers>
<span>2021.02.02</span>
<span>포항 제철 고등학교 졸업</span>
</S.Careers>
</S.CareerWrap>
<div>
<span>2021.02.01</span>
<span>영남이공대학교 박승철 헤어과 입학</span>
</div>
<div>
<span>2021.02.01</span>
<span>포항 제철고등학교 졸업</span>
</div>
</div>
</S.CarrerWrap>
<S.ReviewWrap>
<h1>후기</h1>
</S.ReviewWrap>
</S.CarrerAndReviewWrap>
</S.Main>
</S.ProfessorDetailWrap>
);
Expand Down
218 changes: 101 additions & 117 deletions src/components/home/matching/professorDetail/style.ts
View file
Original file line number Diff line number Diff line change
@@ -1,181 +1,165 @@
import { theme } from "@/styles/theme";
import styled from "styled-components";

export const ProfessorDetailWrap = styled.div`
width: 100%;
height: 100vh;
max-width: 1920px;
max-height: 1080px;
display: flex;
flex-direction: column;
align-items: center;
`;

export const Main = styled.div`
width: 80%;
width: 90%;
height: 100%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
gap: 60px;
`;

export const InfoWrap = styled.div`
width: 90%;
height: 30%;
display: flex;
flex-direction: column;
export const ProffesorInfoWrap = styled.div`
width: 80%;
height: 20%;
gap: 10px;
`;
border-radius: 50px;
background: #fff;
export const UtilityWrap = styled.div`
display: flex;
justify-content: space-between;
width: 100%;
height: 75%;
align-items: center;
`;

export const ProfileWrap = styled.div`
width: 40%;
height: 80%;
display: flex;
align-items: center;
gap: 15px;
img {
width: 70px;
height: 70px;
padding-left: 20px;
}
justify-content: space-between;
div {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
gap: 20px;
h1 {
color: var(--Black, #000);
font-size: 38px;
font-weight: 700;
position: relative;
margin: 0;
img {
padding-left: 20px;
}
span {
color: var(--Gray500, #aaa);
font-size: 23px;
font-weight: 600;
align-items: center;
div {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
h1 {
font-size: 2.5rem;
font-weight: ${theme.fontWeight.bold};
}
span {
font-size: 1.6rem;
font-weight: ${theme.fontWeight.semibold};
color: ${theme.colors.gray500};
}
img {
position: absolute;
left: 80%;
bottom: 80%;
}
}
}
`;

export const BestRecommandIcon = styled.div`
position: absolute;
top: 3%;
left: 41%;
`;

export const ButtonWrap = styled.div`
width: 60%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
export const ChatButton = styled.button`
width: 17%;
height: 35%;
button {
width: 30%;
height: 35%;
background: ${theme.colors.new};
border-radius: var(--Large, 12px);
background: var(--New, #0e2764);
border-radius: 15px;
color: var(--White, #fff);
font-family: Pretendard;
font-size: 25px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
`;
padding: 2%;
margin-right: 3%;
export const OneLiner = styled.span`
color: var(--Gray500, #aaa);
font-family: Pretendard;
font-size: 25px;
font-weight: 500;
display: flex;
font-size: 1.6rem;
font-weight: ${theme.fontWeight.bold};
color: ${theme.colors.white};
padding-left: 20px;
`;
cursor: pointer;
export const Subject = styled.div`
display: flex;
align-items: center;
justify-content: center;
`;

img {
width: 20px;
height: 20px;
background: transparent;
padding-left: 20px;
}
export const CarrerAndReviewWrap = styled.div`
width: 100%;
height: 60%;
span {
color: var(--Gray600, #787878);
font-family: Pretendard;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
display: flex;
align-items: flex-start;
justify-content: center;
justify-content: space-evenly;
`;

export const CareerWrap = styled.div`
width: 83%;
height: 70%;
export const CarrerWrap = styled.div`
width: 34%;
height: 55%;
border-radius: 2.5rem;
background: ${theme.colors.white};
display: flex;
padding: 20px 38px;
flex-direction: column;
align-items: flex-start;
gap: 30px;
justify-content: space-evenly;
padding-left: 1%;
h1 {
color: var(--Black, #000);
font-family: Pretendard;
font-size: 36px;
font-style: normal;
font-weight: 800;
line-height: normal;
font-size: 35px;
font-weight: ${theme.fontWeight.extrabold};
}
div {
width: 100%;
display: flex;
flex-direction: column;
gap: 30px;
div {
width: 90%;
display: flex;
flex-direction: row;
justify-content: space-between;
span {
font-size: 1.2rem;
font-weight: ${theme.fontWeight.semibold};
&:nth-child(2) {
display: flex;
align-self: flex-start;
}
}
}
}
`;

export const Careers = styled.div`
width: 40%;
height: 5%;
export const ReviewWrap = styled.div`
width: 35%;
height: 80%;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 40px;
background: ${theme.colors.white};
span {
color: var(--Black, #000);
font-family: Pretendard;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
h1 {
font-size: 35px;
font-weight: ${theme.fontWeight.extrabold};
}
`;
Loading

0 comments on commit d654467

Please sign in to comment.