Skip to content

Commit b70dee1

Browse files
dewbeenydewbeeny
authored
Merge pull request #28 from DguFarmSystem/fix/23-responsive-mainpage
Fix/23 responsive mainpage
2 parents dc6222b + 5637efa commit b70dee1

File tree

6 files changed

+139
-122
lines changed

6 files changed

+139
-122
lines changed

‎src/assets/Icons/mail.png

954 Bytes
Loading

‎src/assets/Icons/robotarm.png

-1.69 KB
Binary file not shown.

‎src/assets/react.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

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

Lines changed: 64 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ export const Container = styled.div<{ $isMobile: boolean }>`
1616
export const TrackNameContainer = styled.div`
1717
width: 100%;
1818
margin-bottom: 32px;
19-
2019
display: flex;
2120
justify-content: start;
2221
align-items: center;
@@ -25,9 +24,8 @@ export const TrackNameContainer = styled.div`
2524

2625
export const TrackName = styled.h2<{ $isMobile: boolean }>`
2726
width: 338px;
28-
2927
color: var(--FarmSystem_Green07, #175321);
30-
font-size: ${({ $isMobile }) => ($isMobile ? "24px" : "32px")};
28+
font-size: ${({ $isMobile }) => ($isMobile ? "22px" : "32px")};
3129
font-style: normal;
3230
font-weight: 700;
3331
line-height: normal;
@@ -37,12 +35,14 @@ export const TrackName = styled.h2<{ $isMobile: boolean }>`
3735
export const TrackDescription = styled.p<{ $isMobile: boolean }>`
3836
width: 100%;
3937
max-width: 1040px;
40-
height: 200px;
38+
height: 100%;
39+
margin-bottom: 30px;
40+
text-align: left;
4141
color: var(--FarmSystem_Black, #191919);
42-
font-size: ${({ $isMobile }) => ($isMobile ? "16px" : "19px")};
42+
font-size: ${({ $isMobile }) => ($isMobile ? "14px" : "19px")};
4343
font-style: normal;
4444
font-weight: 300;
45-
line-height: ${({ $isMobile }) => ($isMobile ? "30px" : "35px")}; /* 150% */
45+
line-height: ${({ $isMobile }) => ($isMobile ? "25px" : "35px")}; /* 150% */
4646
`;
4747

4848
export const PhasesContainer = styled.div<{ $isMobile: boolean }>`
@@ -54,9 +54,9 @@ export const PhasesContainer = styled.div<{ $isMobile: boolean }>`
5454
flex-wrap: wrap;
5555
`;
5656

57-
export const PhaseCard = styled.div<{ $isMobile: boolean }>`
57+
export const PhaseCard = styled.div<{ $isDesktop: boolean }>`
5858
display: flex;
59-
width: ${({ $isMobile }) => ($isMobile ? "100%" : "300px")};
59+
width: ${({ $isDesktop }) => ($isDesktop ? "300px" : "100%")};
6060
padding: 20px;
6161
flex-direction: column;
6262
justify-content: center;
@@ -72,6 +72,7 @@ export const PhaseTitle = styled.h3<{ $isMobile: boolean }>`
7272
font-size: ${({ $isMobile }) => ($isMobile ? "18px" : "24px")};
7373
font-weight: 700;
7474
line-height: normal;
75+
margin-top: 15px;
7576
margin-bottom: ${({ $isMobile }) => ($isMobile ? "0px" : "11px")};
7677
font-style: normal;
7778
`;
@@ -87,51 +88,51 @@ export const PhaseContent = styled.ul<{ $isMobile: boolean }>`
8788
font-style: normal;
8889
font-weight: 400;
8990
line-height: 30px; /* 150% */
91+
9092
`;
9193

9294
export const Li = styled.li<{ $isMobile: boolean }>`
9395
font-size: ${({ $isMobile }) => ($isMobile ? "14px" : "16px")};
9496
color: var(--FarmSystem_Black, #191919);
9597
`;
9698

97-
98-
/** 전체를 감싸는 컨테이너 (기존 S.Container가 있다고 가정) */
99-
// export const Container = styled.div` ... `;
100-
// 이미 프로젝트 내에 S.Container가 있으시면 그대로 사용하세요.
101-
102-
/** "담당 교수" 제목 + 아래 컨텐츠를 감싸는 영역 */
10399
export const ProfessorNameContainer = styled.div<{ $isMobile: boolean }>`
104100
width: 100%;
105101
margin-bottom: ${({ $isMobile }) => ($isMobile ? "10px" : "15px")};
106102
`;
107103

108-
/** "담당 교수" 텍스트 */
109-
export const ProfessorText = styled.p<{ $isMobile: boolean }>`
104+
export const ProfessorText = styled.p < { $isMobile: boolean}>`
110105
color: var(--FarmSystem_Green07, #175321);
111-
font-size: ${({ $isMobile }) => ($isMobile ? "18px" : "24px")};
106+
font-size: ${({ $isMobile }) => ($isMobile ? "20px" : "24px")};
112107
font-weight: 700;
113-
margin: 0;
108+
margin: ${({ $isMobile }) => ($isMobile ? "10px" : "0px")};
114109
text-align: left;
115110
`;
116111

117-
/** 전체 레이아웃을 좌우 2개 컬럼(왼쪽: 사진/이름/연락처, 오른쪽: 학력/전공/연구)으로 배치 */
118-
export const ProfessorProfile = styled.div<{ $isMobile: boolean }>`
112+
/** 교수 정보 전체 레이아웃 (좌: 사진/이름/연락처, 우: 최종학력 등) */
113+
export const ProfessorProfile = styled.div<{ $isDesktop: boolean; $isMobile: boolean }>`
119114
display: flex;
120-
flex-direction: ${({ $isMobile }) => ($isMobile ? "column" : "row")};
121-
justify-content: space-between;
115+
flex-direction: ${({ $isDesktop }) => ($isDesktop ? "row" : "column")};
116+
117+
/* 오른쪽 정보가 너무 오른쪽으로 치우치지 않도록 flex-start */
118+
justify-content: flex-start;
119+
120+
/* 데스크탑에서는 gap을 넉넉히 주어 좌우 공간 확보 */
121+
gap: ${({ $isMobile }) => ($isMobile ? "20px" : "10px")};
122122
align-items: flex-start;
123-
gap: ${({ $isMobile }) => ($isMobile ? "20px" : "30px")};
124123
width: 100%;
125124
`;
126125

127-
/** 왼쪽 컬럼(사진/이름/연락처/홈페이지) */
128-
export const ProfessorProfileContent = styled.div<{ $isMobile: boolean }>`
126+
/** 왼쪽 섹션 (교수 사진/이름/연락처) */
127+
export const ProfessorProfileContent = styled.div<{ $isDesktop: boolean }>`
129128
display: flex;
130129
flex-direction: column;
131-
width: ${({ $isMobile }) => ($isMobile ? "100%" : "60%")};
130+
131+
/* 예: 데스크탑에서 60% */
132+
width: ${({ $isDesktop }) => ($isDesktop ? "50%" : "100%")};
132133
`;
133134

134-
/** 교수 사진 + 이름을 가로로 배치하는 컨테이너 */
135+
/** 사진 + 이름을 가로/세로 배치하는 컨테이너 */
135136
export const PhotoNameRow = styled.div<{ $isMobile: boolean }>`
136137
display: flex;
137138
flex-direction: ${({ $isMobile }) => ($isMobile ? "column" : "row")};
@@ -140,34 +141,36 @@ export const PhotoNameRow = styled.div<{ $isMobile: boolean }>`
140141
margin-bottom: 15px;
141142
`;
142143

143-
/** 교수 사진 */
144144
export const ProfessorImage = styled.img<{ $isMobile: boolean }>`
145145
width: ${({ $isMobile }) => ($isMobile ? "90px" : "120px")};
146-
height: ${({ $isMobile }) => ($isMobile ? "90px" : "120px")};
146+
height: ${({ $isMobile }) => ($isMobile ? "100px" : "140px")};
147147
object-fit: cover;
148148
border-radius: 10px;
149149
border: 1px solid #ddd;
150150
`;
151151

152-
/** 교수 이름 */
153152
export const ProfessorName = styled.p<{ $isMobile: boolean }>`
154153
font-size: ${({ $isMobile }) => ($isMobile ? "18px" : "22px")};
155154
font-weight: 700;
156155
color: #404040;
157-
margin: 0;
156+
margin-top: 10px;
157+
text-align: ${({ $isMobile }) => ($isMobile ? "center" : "left")};
158158
`;
159159

160-
/** 연락처/이메일/연구실을 나열하는 리스트 */
161160
export const ContactList = styled.ul<{ $isMobile: boolean }>`
162161
list-style: none;
163162
padding: 0;
164-
margin: 0 0 10px;
163+
margin: 10px 0 10px 10px;
165164
display: flex;
166165
flex-direction: column;
167166
gap: ${({ $isMobile }) => ($isMobile ? "6px" : "8px")};
167+
168+
/* ProfessorName의 스타일 상속을 방지하기 위해 명시적으로 재설정 */
169+
font-size: ${({ $isMobile }) => ($isMobile ? "14px" : "16px")};
170+
font-weight: normal;
171+
color: #635c55;
168172
`;
169173

170-
/** 연락처/이메일/연구실 각각의 아이템 */
171174
export const ContactItem = styled.li<{ $isMobile: boolean }>`
172175
font-size: ${({ $isMobile }) => ($isMobile ? "14px" : "16px")};
173176
color: #635c55;
@@ -176,7 +179,7 @@ export const ContactItem = styled.li<{ $isMobile: boolean }>`
176179
gap: 6px;
177180
`;
178181

179-
/** 홈페이지 버튼 */
182+
/** 홈페이지 버튼 (필요 시 사용) */
180183
export const HomepageButton = styled.a<{ $isMobile: boolean }>`
181184
width: fit-content;
182185
background-color: #fcfcfc;
@@ -194,31 +197,37 @@ export const HomepageButton = styled.a<{ $isMobile: boolean }>`
194197
}
195198
`;
196199

197-
/** 오른쪽 컬럼(최종학력/전공분야/연구분야) */
198200
export const ProfessorContent = styled.div<{ $isMobile: boolean }>`
199-
width: ${({ $isMobile }) => ($isMobile ? "100%" : "35%")};
201+
width: 100%;
202+
margin-top: ${({ $isMobile }) => ($isMobile ? "0" : "20px")};
203+
`;
204+
205+
export const ProfileContainer = styled.div<{ $isDesktop: boolean;
206+
$isMobile: boolean; $isTablet: boolean;}>`
207+
width: ${({ $isDesktop }) => ($isDesktop ? "50%" : "100%")};
208+
heigt: 300px;
209+
display: grid;
210+
grid-template-columns: ${({ $isDesktop, $isTablet, $isMobile }) =>
211+
$isDesktop ? "120px 1fr" : $isTablet ? "100px 1fr" : $isMobile ? "50px 1fr" : "50px 1fr"}; gap: ${({ $isDesktop }) => ($isDesktop ? "12px" : "8px")};
212+
background-color: #fafafa;
213+
padding: ${({ $isDesktop }) => ($isDesktop ? "30px" : "10px")};
214+
border-radius: 8px;
215+
margin-right: 40px;
200216
`;
201217

202-
/** 오른쪽 리스트(최종학력, 전공분야, 연구분야) */
203-
export const ProfileList = styled.ul<{ $isMobile: boolean }>`
204-
list-style: none;
205-
margin: 0;
206-
padding: 0;
207-
display: flex;
208-
flex-direction: column;
209-
gap: ${({ $isMobile }) => ($isMobile ? "8px" : "10px")};
218+
export const ProfileLabel = styled.div<{ $isMobile: boolean}>`
219+
font-weight: 600;
220+
color: #404040;
221+
text-align: left;
222+
font-size: ${({ $isMobile }) => ($isMobile ? "12px" : "16px")};
223+
224+
210225
`;
211226

212-
/** 오른쪽 리스트 아이템 */
213-
export const ProfileListItem = styled.li<{ $isMobile: boolean }>`
214-
display: flex;
215-
flex-direction: ${({ $isMobile }) => ($isMobile ? "column" : "row")};
216-
gap: 6px;
217-
font-size: ${({ $isMobile }) => ($isMobile ? "14px" : "16px")};
227+
export const ProfileValue = styled.div<{ $isMobile: boolean}>`
228+
font-weight: 400;
218229
color: #635c55;
219-
`;
230+
line-height: 1.4;
231+
font-size: ${({ $isMobile }) => ($isMobile ? "12px" : "16px")};
220232
221-
/** 불릿/라벨( ex: &bull; 최종학력 ) */
222-
export const ProfileInfo = styled.p<{ $isMobile: boolean }>`
223-
margin: 0;
224233
`;

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

Lines changed: 61 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,31 @@
11
import * as S from './InfoBox.styled';
22
import { TrackDataInterface } from './TracksData';
33
import useMediaQueries from "@/hooks/useMediaQueries";
4+
import Call from "../../../assets/Icons/Call.png";
5+
import Location from "../../../assets/Icons/Location.png";
6+
import mail from "../../../assets/Icons/mail.png";
47

58
interface InfoBoxProps {
69
selectedTrack: TrackDataInterface;
710
}
811

912
export default function InfoBox({ selectedTrack }: InfoBoxProps) {
10-
const { isMobile } = useMediaQueries();
13+
const { isMobile, isDesktop, isTablet } = useMediaQueries();
1114
const phaseLabels = ["1학기", "여름방학", "2학기"];
1215

1316
return (
1417
<S.Container $isMobile={isMobile}>
1518

1619
{/* 트랙 이름 + 소개 */}
1720
<S.TrackNameContainer>
18-
<S.TrackName $isMobile={isMobile}>🦾 {selectedTrack.name}</S.TrackName>
21+
<S.TrackName $isMobile={isMobile}>🦾 {selectedTrack.name}</S.TrackName>
1922
</S.TrackNameContainer>
2023
<S.TrackDescription $isMobile={isMobile}>{selectedTrack.description}</S.TrackDescription>
2124

2225
{/* 트랙 학기별 커리큘럼 */}
2326
<S.PhasesContainer $isMobile={isMobile}>
2427
{Object.entries(selectedTrack.phases || {}).map(([phaseKey, phaseItems], index) => (
25-
<S.PhaseCard key={phaseKey} $isMobile={isMobile}>
28+
<S.PhaseCard key={phaseKey} $isDesktop={isDesktop}>
2629
<S.PhaseTitle $isMobile={isMobile}>{phaseLabels[index]}</S.PhaseTitle>
2730
<S.PhaseContent $isMobile={isMobile}>
2831
{phaseItems.map((item, i) => (
@@ -38,60 +41,66 @@ export default function InfoBox({ selectedTrack }: InfoBoxProps) {
3841
<S.ProfessorText $isMobile={isMobile}>담당 교수</S.ProfessorText>
3942
</S.ProfessorNameContainer>
4043

41-
<S.ProfessorProfile $isMobile={isMobile}>
42-
{/* 왼쪽 섹션: 사진/이름/연락처/홈페이지 */}
43-
<S.ProfessorProfileContent $isMobile={isMobile}>
44-
<S.PhotoNameRow $isMobile={isMobile}>
45-
<S.ProfessorImage
46-
$isMobile={isMobile}
47-
src={selectedTrack.professorData.image}
48-
alt="Professor"
49-
/>
44+
<S.ProfessorProfile $isDesktop={isDesktop} $isMobile={isMobile}>
45+
{/* 왼쪽 섹션: 교수 사진/이름/연락처 */}
46+
<S.ProfessorProfileContent $isDesktop={isDesktop}>
47+
<S.PhotoNameRow $isMobile={isMobile}>
48+
<S.ProfessorImage
49+
$isMobile={isMobile}
50+
src={selectedTrack.professorData.image}
51+
alt="Professor"
52+
/>
53+
<div>
5054
<S.ProfessorName $isMobile={isMobile}>
5155
{selectedTrack.professorData.name}
52-
<S.ContactList $isMobile={isMobile}>
53-
<S.ContactItem $isMobile={isMobile}>
54-
&bull; 연락처 {selectedTrack.professorData.phone}
55-
</S.ContactItem>
56-
<S.ContactItem $isMobile={isMobile}>
57-
&bull; 이메일 {selectedTrack.professorData.email}
58-
</S.ContactItem>
59-
<S.ContactItem $isMobile={isMobile}>
60-
&bull; 연구실 {selectedTrack.professorData.location}
61-
</S.ContactItem>
62-
</S.ContactList>
6356
</S.ProfessorName>
64-
</S.PhotoNameRow>
6557

66-
{/* <S.HomepageButton $isMobile={isMobile}>
67-
홈페이지
68-
</S.HomepageButton> 홈페이지 안 넣는게 나을 것 같습니다! */}
69-
</S.ProfessorProfileContent>
58+
<S.ContactList $isMobile={isMobile}>
59+
<S.ContactItem $isMobile={isMobile}>
60+
<img
61+
src={Call}
62+
alt="Phone Icon"
63+
style={{ width: "15px", height: "15px", marginRight: "3px" }}/>
64+
{selectedTrack.professorData.phone}
65+
</S.ContactItem>
66+
<S.ContactItem $isMobile={isMobile}>
67+
<img
68+
src={mail}
69+
alt="mail Icon"
70+
style={{ width: "15px", height: "15px", marginRight: "3px" }}/>
71+
{selectedTrack.professorData.email}
72+
</S.ContactItem>
73+
74+
<S.ContactItem $isMobile={isMobile}>
75+
<img
76+
src={Location}
77+
alt="Lab Icon"
78+
style={{ width: "15px", height: "15px", marginRight: "3px" }}/>
79+
{selectedTrack.professorData.location}
80+
</S.ContactItem>
81+
</S.ContactList>
82+
</div>
83+
</S.PhotoNameRow>
7084

71-
{/* 오른쪽 섹션 (예: 최종학력, 전공분야, 연구분야 등) */}
72-
<S.ProfessorContent $isMobile={isMobile}>
73-
<S.ProfileList $isMobile={isMobile}>
74-
<S.ProfileListItem $isMobile={isMobile}>
75-
<S.ProfileInfo $isMobile={isMobile}>&bull; 최종학력</S.ProfileInfo>
76-
<S.ProfileInfo $isMobile={isMobile}>
77-
{selectedTrack.professorData.education}
78-
</S.ProfileInfo>
79-
</S.ProfileListItem>
80-
<S.ProfileListItem $isMobile={isMobile}>
81-
<S.ProfileInfo $isMobile={isMobile}>&bull; 전공분야</S.ProfileInfo>
82-
<S.ProfileInfo $isMobile={isMobile}>
83-
{selectedTrack.professorData.major}
84-
</S.ProfileInfo>
85-
</S.ProfileListItem>
86-
<S.ProfileListItem $isMobile={isMobile}>
87-
<S.ProfileInfo $isMobile={isMobile}>&bull; 연구분야</S.ProfileInfo>
88-
<S.ProfileInfo $isMobile={isMobile}>
89-
{selectedTrack.professorData.research}
90-
</S.ProfileInfo>
91-
</S.ProfileListItem>
92-
</S.ProfileList>
93-
</S.ProfessorContent>
94-
</S.ProfessorProfile>
85+
{/* 홈페이지 버튼은 사용하지 않을 경우 주석 처리 또는 삭제 */}
86+
{/*
87+
<S.HomepageButton $isMobile={isMobile}>
88+
홈페이지
89+
</S.HomepageButton>
90+
*/}
91+
</S.ProfessorProfileContent>
92+
93+
<S.ProfileContainer $isDesktop={isDesktop} $isMobile={isMobile} $isTablet={isTablet}>
94+
<S.ProfileLabel $isMobile={isMobile}>최종학력</S.ProfileLabel>
95+
<S.ProfileValue $isMobile={isMobile}>{selectedTrack.professorData.education}</S.ProfileValue>
96+
97+
<S.ProfileLabel $isMobile={isMobile}>전공분야</S.ProfileLabel>
98+
<S.ProfileValue $isMobile={isMobile}>{selectedTrack.professorData.major}</S.ProfileValue>
99+
100+
<S.ProfileLabel $isMobile={isMobile}>연구분야</S.ProfileLabel>
101+
<S.ProfileValue $isMobile={isMobile}>{selectedTrack.professorData.research}</S.ProfileValue>
102+
</S.ProfileContainer>
103+
</S.ProfessorProfile>
95104
</S.Container>
96105
);
97106
}

0 commit comments

Comments
 (0)