Skip to content

Commit eb945a2

Browse files
parkjoohyung0826parkjoohyung0826
committed
feat: 트랙 소개 레이아웃 UI 수정 및 헤더 모달창 추가가
1 parent 33889f9 commit eb945a2

File tree

8 files changed

+120
-82
lines changed

8 files changed

+120
-82
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Header/Header.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import { useCallback } from 'react';
1+
import { useCallback, useState } from 'react';
22
import { useNavigate } from 'react-router';
33
import * as S from './Header.styled';
4+
import Popup from '../Popup/Popup';
45

56
export default function Header() {
7+
const [isPopupOpen, setPopupOpen] = useState(false);
68
const navigate = useNavigate();
79
const onContainerClick = useCallback(() => {
810
}, []);
@@ -15,13 +17,13 @@ export default function Header() {
1517
<S.NavItem onClick={() => navigate('/')}>
1618
홈
1719
</S.NavItem>
18-
<S.NavItem onClick={() => navigate('/blog-project')}>
20+
<S.NavItem onClick={() => setPopupOpen(true)}>
1921
블로그 / 프로젝트
2022
</S.NavItem>
21-
<S.NavItem onClick={() => navigate('/news')}>
23+
<S.NavItem onClick={() => setPopupOpen(true)}>
2224
소식
2325
</S.NavItem>
24-
<S.NavItem onClick={() => navigate('/faq')}>
26+
<S.NavItem onClick={() => setPopupOpen(true)}>
2527
FAQ
2628
</S.NavItem>
2729
<S.NavItem onClick={() => navigate('/apply')}>
@@ -31,6 +33,13 @@ export default function Header() {
3133

3234
{/* 파밍로그 버튼 */}
3335
<S.FarmingLogButton onClick={onContainerClick}>파밍로그</S.FarmingLogButton>
36+
37+
<Popup
38+
isOpen={isPopupOpen}
39+
onClose={() => setPopupOpen(false)}
40+
title={"아직 오픈되지 않았습니다."}
41+
content={"오픈픈 예정: 2025년 4월"}
42+
/>
3443
</S.HeaderContainer>
3544
);
3645
}

‎src/pages/Main/BottomInfo/BottomInfo.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import GitHubIcon from '@/assets/githubLogo2.png';
44
import InstagramIcon from '@/assets/InstagramLogo2.png';
55
import LinktreeIcon from '@/assets/LinktreeLogo.png';
66
import DGUIcon from "@/assets/DGULogo.png"
7+
import Popup from '@/components/Popup/Popup';
78

89
const BottomInfo = () => {
910
const [isPopupOpen, setPopupOpen] = useState(false);
@@ -64,16 +65,12 @@ const BottomInfo = () => {
6465
</S.NotificationContainer>
6566
</S.RequirementsBox>
6667

67-
{/* 팝업 -> 나중에 공용 컴포넌트로 뺄까 고민 중*/}
68-
{isPopupOpen && (
69-
<S.PopupOverlay onClick={() => setPopupOpen(false)}>
70-
<S.PopupBox onClick={(e) => e.stopPropagation()}>
71-
<S.PopupText>지금은 모집 기간이 아닙니다.</S.PopupText>
72-
<S.PopupText>공개 모집 예정: 2025년 2월</S.PopupText>
73-
<S.PopupCloseButton onClick={() => setPopupOpen(false)}>확인</S.PopupCloseButton>
74-
</S.PopupBox>
75-
</S.PopupOverlay>
76-
)}
68+
<Popup
69+
isOpen={isPopupOpen}
70+
onClose={() => setPopupOpen(false)}
71+
title={"지금은 모집 기간이 아닙니다."}
72+
content={"공개 모집 예정: 2025년 2월"}
73+
/>
7774
</S.BottomInfoContainer>
7875
);
7976
};

‎src/pages/Main/Intro/Intro.tsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import * as S from './Intro.styled.tsx';
22
import logo from '../../../assets/FarmLogo.png';
33
import { useState } from 'react';
4-
import FarmSystemNav from '../FarmSyetemNav/FarmSystemNav.tsx';
4+
import Popup from '@/components/Popup/Popup.tsx';
55

66
const Intro = () => {
77
const [isPopupOpen, setPopupOpen] = useState(false);
88
return (
99
<S.Container id="about">
10-
{/* 네비게이션을 오른쪽 정렬하기 위한 래퍼 */}
11-
<S.NavWrapper>
12-
<FarmSystemNav/>
13-
</S.NavWrapper>
1410

1511
<S.Bud>🌱</S.Bud>
1612
<S.Description>
@@ -32,16 +28,12 @@ const Intro = () => {
3228
<S.ApplyDescription>2025년 2월 공개 모집 예정</S.ApplyDescription>
3329
</S.Apply>
3430

35-
{/* 팝업 수빈님 것과 통일 */}
36-
{isPopupOpen && (
37-
<S.PopupOverlay onClick={() => setPopupOpen(false)}>
38-
<S.PopupBox onClick={(e) => e.stopPropagation()}>
39-
<S.PopupText>지금은 모집 기간이 아닙니다.</S.PopupText>
40-
<S.PopupText>공개 모집 예정: 2025년 2월</S.PopupText>
41-
<S.PopupCloseButton onClick={() => setPopupOpen(false)}>확인</S.PopupCloseButton>
42-
</S.PopupBox>
43-
</S.PopupOverlay>
44-
)}
31+
<Popup
32+
isOpen={isPopupOpen}
33+
onClose={() => setPopupOpen(false)}
34+
title={"지금은 모집 기간이 아닙니다."}
35+
content={"공개 모집 예정: 2025년 2월"}
36+
/>
4537
</S.Container>
4638
);
4739
};

‎src/pages/Main/Tracks/InfoBox.styled.ts‎

Lines changed: 53 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@ export const TrackDescription = styled.p`
3636
width: 1040px;
3737
height: 200px;
3838
color: var(--FarmSystem_Black, #191919);
39-
font-size: 20px;
39+
font-size: 19px;
4040
font-style: normal;
41-
font-weight: 500;
42-
line-height: 30px; /* 150% */
41+
font-weight: 300;
42+
line-height: 35px; /* 150% */
4343
`;
4444

4545
export const PhasesContainer = styled.div`
@@ -83,7 +83,7 @@ export const PhaseContent = styled.ul`
8383
justify-content: center;
8484
8585
color: var(--FarmSystem_Black, #191919);
86-
font-size: 20px;
86+
font-size: 18px;
8787
font-style: normal;
8888
font-weight: 400;
8989
line-height: 30px; /* 150% */
@@ -114,10 +114,11 @@ export const ProfessorText = styled.p`
114114
`;
115115

116116
export const ProfessorName = styled.p`
117-
color: var(--FarmSystem_Black, #191919);
117+
width: 100%;
118+
color: #404040;
118119
font-size: 24px;
119120
font-style: normal;
120-
font-weight: 500;
121+
font-weight: 700;
121122
line-height: 29px; /* 120.833% */
122123
`;
123124

@@ -130,21 +131,52 @@ export const ProfessorProfile = styled.div`
130131
gap: 38px;
131132
`;
132133

134+
export const ProfessorProfileContent = styled.div`
135+
width: 180px;
136+
height: 180px;
137+
display: flex;
138+
flex-direction: column;
139+
align-items: center;
140+
justify-content: center;
141+
`;
142+
133143
export const ProfessorImage = styled.img`
134-
width: 100px;
135-
height: 100px;
144+
width: 120px;
145+
height: 120px;
136146
flex-shrink: 0;
137147
aspect-ratio: 1/1;
148+
border-radius: 10px;
149+
`;
150+
151+
export const HomepageButton = styled.a`
152+
background-color: #FCFCFC;
153+
color: #404040;
154+
font-size: 13px;
155+
font-weight: bold;
156+
padding: 5px 17px;
157+
border-radius: 8px;
158+
text-decoration: none;
159+
text-align: center;
160+
margin-top: 15px;
161+
display: inline-block;
162+
&:hover {
163+
background-color: #E1E1E1;
164+
}
165+
`;
166+
167+
export const ProfessorContent = styled.div`
168+
width: 100%;
169+
height: 160px;
138170
`;
139171

140172
export const ProfileList = styled.ul`
141173
list-style-type: none;
142174
list-style-position: inside;
143-
144175
display: grid;
145-
grid-template-columns: repeat(2, 1fr);
176+
grid-template-columns: 1fr 1.5fr;
146177
column-gap: 30px;
147178
row-gap: 15px;
179+
margin-top: 20px;
148180
`;
149181

150182
export const ProfileListItem = styled.li`
@@ -154,19 +186,27 @@ export const ProfileListItem = styled.li`
154186
align-items: center;
155187
`;
156188

189+
export const ProfileInfo = styled.p`
190+
color: #635C55;
191+
font-size: 16px;
192+
font-style: normal;
193+
font-weight: 500;
194+
line-height: 15px; /* 100% */
195+
`;
196+
157197
export const ProfileListKey = styled.p`
158198
color: var(--FarmSystem_Black, #191919);
159-
font-size: 20px;
199+
font-size: 18px;
160200
font-style: normal;
161201
font-weight: 500;
162202
line-height: 20px; /* 100% */
163203
`;
164204

165205
export const ProfileListValue = styled.p`
166-
width: 300px;
206+
width: 70%;
167207
flex-shrink: 0;
168208
color: var(--FarmSystem_Black, #191919);
169-
font-size: 20px;
209+
font-size: 18px;
170210
font-style: normal;
171211
font-weight: 400;
172212
line-height: 20px; /* 100% */

‎src/pages/Main/Tracks/InfoBox.tsx‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -36,37 +36,44 @@ export default function InfoBox({ selectedTrack }: InfoBoxProps) {
3636
{/* 담당 교수 정보 */}
3737
<S.ProfessorNameContainer>
3838
<S.ProfessorText>담당 교수</S.ProfessorText>
39-
<S.ProfessorName>{selectedTrack.professorData.name}</S.ProfessorName>
39+
4040
</S.ProfessorNameContainer>
4141
<S.ProfessorProfile>
42-
<S.ProfessorImage src={selectedTrack.professorData.image} alt="Professor" />
43-
44-
<S.ProfileList>
45-
<S.ProfileListItem>
46-
<S.ProfileListKey>&bull; 연락처</S.ProfileListKey>
47-
<S.ProfileListValue>{selectedTrack.professorData.phone}</S.ProfileListValue>
48-
</S.ProfileListItem>
49-
<S.ProfileListItem>
50-
<S.ProfileListKey>&bull; 최종학력</S.ProfileListKey>
51-
<S.ProfileListValue>{selectedTrack.professorData.education}</S.ProfileListValue>
52-
</S.ProfileListItem>
53-
<S.ProfileListItem>
54-
<S.ProfileListKey>&bull; 이메일</S.ProfileListKey>
55-
<S.ProfileListValue>{selectedTrack.professorData.email}</S.ProfileListValue>
56-
</S.ProfileListItem>
57-
<S.ProfileListItem>
58-
<S.ProfileListKey>&bull; 전공분야</S.ProfileListKey>
59-
<S.ProfileListValue>{selectedTrack.professorData.major}</S.ProfileListValue>
60-
</S.ProfileListItem>
61-
<S.ProfileListItem>
62-
<S.ProfileListKey>&bull; 연구실</S.ProfileListKey>
63-
<S.ProfileListValue>{selectedTrack.professorData.location}</S.ProfileListValue>
64-
</S.ProfileListItem>
65-
<S.ProfileListItem>
66-
<S.ProfileListKey>&bull; 연구분야</S.ProfileListKey>
67-
<S.ProfileListValue>{selectedTrack.professorData.research}</S.ProfileListValue>
68-
</S.ProfileListItem>
69-
</S.ProfileList>
42+
<S.ProfessorProfileContent>
43+
<S.ProfessorImage src={selectedTrack.professorData.image} alt="Professor" />
44+
<S.HomepageButton>홈페이지</S.HomepageButton>
45+
</S.ProfessorProfileContent>
46+
47+
<S.ProfessorContent>
48+
<S.ProfessorName>{selectedTrack.professorData.name}</S.ProfessorName>
49+
50+
<S.ProfileList>
51+
<S.ProfileListItem>
52+
<S.ProfileInfo>&bull; 연락처</S.ProfileInfo>
53+
<S.ProfileInfo>{selectedTrack.professorData.phone}</S.ProfileInfo>
54+
</S.ProfileListItem>
55+
<S.ProfileListItem>
56+
<S.ProfileListKey>&bull; 최종학력</S.ProfileListKey>
57+
<S.ProfileListValue>{selectedTrack.professorData.education}</S.ProfileListValue>
58+
</S.ProfileListItem>
59+
<S.ProfileListItem>
60+
<S.ProfileInfo>&bull; 이메일</S.ProfileInfo>
61+
<S.ProfileInfo>{selectedTrack.professorData.email}</S.ProfileInfo>
62+
</S.ProfileListItem>
63+
<S.ProfileListItem>
64+
<S.ProfileListKey>&bull; 전공분야</S.ProfileListKey>
65+
<S.ProfileListValue>{selectedTrack.professorData.major}</S.ProfileListValue>
66+
</S.ProfileListItem>
67+
<S.ProfileListItem>
68+
<S.ProfileInfo>&bull; 연구실</S.ProfileInfo>
69+
<S.ProfileInfo>{selectedTrack.professorData.location}</S.ProfileInfo>
70+
</S.ProfileListItem>
71+
<S.ProfileListItem>
72+
<S.ProfileListKey>&bull; 연구분야</S.ProfileListKey>
73+
<S.ProfileListValue>{selectedTrack.professorData.research}</S.ProfileListValue>
74+
</S.ProfileListItem>
75+
</S.ProfileList>
76+
</S.ProfessorContent>
7077
</S.ProfessorProfile>
7178
</S.Container>
7279
);

‎src/pages/Main/Union/ContentBox.styled.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,9 +116,9 @@ export const Li = styled.li<{
116116
font-size: ${(props) =>
117117
props.$isMobile
118118
? props.$isTiny
119-
? "18px"
120-
: "20px"
121-
: "24px"};
119+
? "16px"
120+
: "18px"
121+
: "22px"};
122122
line-height: ${(props) => (props.$isMobile ? "30px" : "35px")};
123123
color: var(--FarmSystem_Black);
124124

‎src/styles/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ body {
88
/* 기본 색상 팔레트 */
99
--FarmSystem_White: #FCFCFC;
1010
--FarmSystem_Black: #191919;
11-
--FarmSystem_LightGrey: #E5E5E5;
11+
--FarmSystem_LightGrey: #F2F2F2;
1212
--FarmSystem_DarkGrey: #999999;
1313
--FarmSystem_Yellow: #FFF763;
1414
--FarmSystem_Orange: #FF7F1E;

0 commit comments

Comments
 (0)