feat: 트랙 소개 레이아웃 UI 수정 및 헤더 모달창 추가가

DguFarmSystem · Feb 14, 2025 · eb945a2 · eb945a2
1 parent 33889f9
commit eb945a2
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 82 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,8 +1,10 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router';
 import * as S from './Header.styled';
+import Popup from '../Popup/Popup';
 
 export default function Header() {
+  const [isPopupOpen, setPopupOpen] = useState(false);
   const navigate = useNavigate();
   const onContainerClick = useCallback(() => {
   }, []);
@@ -15,13 +17,13 @@ export default function Header() {
         <S.NavItem onClick={() => navigate('/')}>
           홈
         </S.NavItem>
-        <S.NavItem onClick={() => navigate('/blog-project')}>
+        <S.NavItem onClick={() => setPopupOpen(true)}>
           블로그 / 프로젝트
         </S.NavItem>
-        <S.NavItem onClick={() => navigate('/news')}>
+        <S.NavItem onClick={() => setPopupOpen(true)}>
           소식
         </S.NavItem>
-        <S.NavItem onClick={() => navigate('/faq')}>
+        <S.NavItem onClick={() => setPopupOpen(true)}>
           FAQ
         </S.NavItem>
         <S.NavItem onClick={() => navigate('/apply')}>
@@ -31,6 +33,13 @@ export default function Header() {
 
       {/* 파밍로그 버튼 */}
       <S.FarmingLogButton onClick={onContainerClick}>파밍로그</S.FarmingLogButton>
+
+      <Popup 
+        isOpen={isPopupOpen} 
+        onClose={() => setPopupOpen(false)} 
+        title={"아직 오픈되지 않았습니다."} 
+        content={"오픈픈 예정: 2025년 4월"}
+      />
     </S.HeaderContainer>
   );
 }
diff --git a/src/pages/Main/BottomInfo/BottomInfo.tsx b/src/pages/Main/BottomInfo/BottomInfo.tsx
@@ -4,6 +4,7 @@ import GitHubIcon from '@/assets/githubLogo2.png';
 import InstagramIcon from '@/assets/InstagramLogo2.png';
 import LinktreeIcon from '@/assets/LinktreeLogo.png';
 import DGUIcon from "@/assets/DGULogo.png"
+import Popup from '@/components/Popup/Popup';
 
 const BottomInfo = () => {
   const [isPopupOpen, setPopupOpen] = useState(false);
@@ -64,16 +65,12 @@ const BottomInfo = () => {
         </S.NotificationContainer>
       </S.RequirementsBox>
 
-      {/* 팝업 -> 나중에 공용 컴포넌트로 뺄까 고민 중*/}
-      {isPopupOpen && (
-        <S.PopupOverlay onClick={() => setPopupOpen(false)}>
-          <S.PopupBox onClick={(e) => e.stopPropagation()}>
-            <S.PopupText>지금은 모집 기간이 아닙니다.</S.PopupText>
-            <S.PopupText>공개 모집 예정: 2025년 2월</S.PopupText>
-            <S.PopupCloseButton onClick={() => setPopupOpen(false)}>확인</S.PopupCloseButton>
-          </S.PopupBox>
-        </S.PopupOverlay>
-      )}
+      <Popup 
+        isOpen={isPopupOpen} 
+        onClose={() => setPopupOpen(false)} 
+        title={"지금은 모집 기간이 아닙니다."} 
+        content={"공개 모집 예정: 2025년 2월"}
+      />
     </S.BottomInfoContainer>
   );
 };

diff --git a/src/pages/Main/Intro/Intro.tsx b/src/pages/Main/Intro/Intro.tsx
@@ -1,16 +1,12 @@
 import * as S from './Intro.styled.tsx';
 import logo from '../../../assets/FarmLogo.png';
 import { useState } from 'react';
-import FarmSystemNav from '../FarmSyetemNav/FarmSystemNav.tsx';
+import Popup from '@/components/Popup/Popup.tsx';
 
 const Intro = () => {
   const [isPopupOpen, setPopupOpen] = useState(false);
   return (
     <S.Container id="about">
-      {/* 네비게이션을 오른쪽 정렬하기 위한 래퍼 */}
-      <S.NavWrapper>
-        <FarmSystemNav/>
-      </S.NavWrapper>
 
       <S.Bud>🌱</S.Bud>
       <S.Description>
@@ -32,16 +28,12 @@ const Intro = () => {
         <S.ApplyDescription>2025년 2월 공개 모집 예정</S.ApplyDescription>
       </S.Apply>
 
-      {/* 팝업 수빈님 것과 통일 */}
-      {isPopupOpen && (
-        <S.PopupOverlay onClick={() => setPopupOpen(false)}>
-          <S.PopupBox onClick={(e) => e.stopPropagation()}>
-            <S.PopupText>지금은 모집 기간이 아닙니다.</S.PopupText>
-            <S.PopupText>공개 모집 예정: 2025년 2월</S.PopupText>
-            <S.PopupCloseButton onClick={() => setPopupOpen(false)}>확인</S.PopupCloseButton>
-          </S.PopupBox>
-        </S.PopupOverlay>
-      )}
+      <Popup 
+        isOpen={isPopupOpen} 
+        onClose={() => setPopupOpen(false)} 
+        title={"지금은 모집 기간이 아닙니다."} 
+        content={"공개 모집 예정: 2025년 2월"}
+      />
     </S.Container>
   );
 };

diff --git a/src/pages/Main/Tracks/InfoBox.styled.ts b/src/pages/Main/Tracks/InfoBox.styled.ts
@@ -36,10 +36,10 @@ export const TrackDescription = styled.p`
   width: 1040px;
   height: 200px;
   color: var(--FarmSystem_Black, #191919);
-  font-size: 20px;
+  font-size: 19px;
   font-style: normal;
-  font-weight: 500;
-  line-height: 30px; /* 150% */
+  font-weight: 300;
+  line-height: 35px; /* 150% */
 `;
 
 export const PhasesContainer = styled.div`
@@ -83,7 +83,7 @@ export const PhaseContent = styled.ul`
   justify-content: center;
 
   color: var(--FarmSystem_Black, #191919);
-  font-size: 20px;
+  font-size: 18px;
   font-style: normal;
   font-weight: 400;
   line-height: 30px; /* 150% */
@@ -114,10 +114,11 @@ export const ProfessorText = styled.p`
 `;
 
 export const ProfessorName = styled.p`
-  color: var(--FarmSystem_Black, #191919);
+  width: 100%;
+  color: #404040;
   font-size: 24px;
   font-style: normal;
-  font-weight: 500;
+  font-weight: 700;
   line-height: 29px; /* 120.833% */
 `;
 
@@ -130,21 +131,52 @@ export const ProfessorProfile = styled.div`
   gap: 38px;
 `;
 
+export const ProfessorProfileContent = styled.div`
+  width: 180px;
+  height: 180px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
 export const ProfessorImage = styled.img`
-  width: 100px;
-  height: 100px;
+  width: 120px;
+  height: 120px;
   flex-shrink: 0;
   aspect-ratio: 1/1;
+  border-radius: 10px;
+`;
+
+export const HomepageButton = styled.a`
+  background-color: #FCFCFC;
+  color: #404040;
+  font-size: 13px;
+  font-weight: bold;
+  padding: 5px 17px;
+  border-radius: 8px;
+  text-decoration: none;
+  text-align: center;
+  margin-top: 15px;
+  display: inline-block;
+  &:hover {
+    background-color: #E1E1E1;
+  }
+`;
+
+export const ProfessorContent = styled.div`
+  width: 100%;
+  height: 160px;
 `;
 
 export const ProfileList = styled.ul`
   list-style-type: none;
   list-style-position: inside;
-
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: 1fr 1.5fr; 
   column-gap: 30px;
   row-gap: 15px;
+  margin-top: 20px;
 `;
 
 export const ProfileListItem = styled.li`
@@ -154,19 +186,27 @@ export const ProfileListItem = styled.li`
   align-items: center;
 `;
 
+export const ProfileInfo = styled.p`
+  color: #635C55;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 15px; /* 100% */
+`;
+
 export const ProfileListKey = styled.p`
   color: var(--FarmSystem_Black, #191919);
-  font-size: 20px;
+  font-size: 18px;
   font-style: normal;
   font-weight: 500;
   line-height: 20px; /* 100% */
 `;
 
 export const ProfileListValue = styled.p`
-  width: 300px;
+  width: 70%;
   flex-shrink: 0;
   color: var(--FarmSystem_Black, #191919);
-  font-size: 20px;
+  font-size: 18px;
   font-style: normal;
   font-weight: 400;
   line-height: 20px; /* 100% */

diff --git a/src/pages/Main/Tracks/InfoBox.tsx b/src/pages/Main/Tracks/InfoBox.tsx
@@ -36,37 +36,44 @@ export default function InfoBox({ selectedTrack }: InfoBoxProps) {
       {/* 담당 교수 정보 */}
       <S.ProfessorNameContainer>
         <S.ProfessorText>담당 교수</S.ProfessorText>
-        <S.ProfessorName>{selectedTrack.professorData.name}</S.ProfessorName>
+
       </S.ProfessorNameContainer>
       <S.ProfessorProfile>
-        <S.ProfessorImage src={selectedTrack.professorData.image} alt="Professor" />
-
-        <S.ProfileList>
-          <S.ProfileListItem>
-            <S.ProfileListKey>&bull; 연락처</S.ProfileListKey>
-            <S.ProfileListValue>{selectedTrack.professorData.phone}</S.ProfileListValue>
-          </S.ProfileListItem>
-          <S.ProfileListItem>
-            <S.ProfileListKey>&bull; 최종학력</S.ProfileListKey>
-            <S.ProfileListValue>{selectedTrack.professorData.education}</S.ProfileListValue>
-          </S.ProfileListItem>
-          <S.ProfileListItem>
-            <S.ProfileListKey>&bull; 이메일</S.ProfileListKey>
-            <S.ProfileListValue>{selectedTrack.professorData.email}</S.ProfileListValue>
-          </S.ProfileListItem>
-          <S.ProfileListItem>
-            <S.ProfileListKey>&bull; 전공분야</S.ProfileListKey>
-            <S.ProfileListValue>{selectedTrack.professorData.major}</S.ProfileListValue>
-          </S.ProfileListItem>
-          <S.ProfileListItem>
-            <S.ProfileListKey>&bull; 연구실</S.ProfileListKey>
-            <S.ProfileListValue>{selectedTrack.professorData.location}</S.ProfileListValue>
-          </S.ProfileListItem>
-          <S.ProfileListItem>
-            <S.ProfileListKey>&bull; 연구분야</S.ProfileListKey>
-            <S.ProfileListValue>{selectedTrack.professorData.research}</S.ProfileListValue>
-          </S.ProfileListItem>
-        </S.ProfileList>
+        <S.ProfessorProfileContent>
+          <S.ProfessorImage src={selectedTrack.professorData.image} alt="Professor" />
+          <S.HomepageButton>홈페이지</S.HomepageButton>
+        </S.ProfessorProfileContent>
+
+        <S.ProfessorContent>
+          <S.ProfessorName>{selectedTrack.professorData.name}</S.ProfessorName>
+
+          <S.ProfileList>
+            <S.ProfileListItem>
+              <S.ProfileInfo>&bull; 연락처</S.ProfileInfo>
+              <S.ProfileInfo>{selectedTrack.professorData.phone}</S.ProfileInfo>
+            </S.ProfileListItem>
+            <S.ProfileListItem>
+              <S.ProfileListKey>&bull; 최종학력</S.ProfileListKey>
+              <S.ProfileListValue>{selectedTrack.professorData.education}</S.ProfileListValue>
+            </S.ProfileListItem>
+            <S.ProfileListItem>
+              <S.ProfileInfo>&bull; 이메일</S.ProfileInfo>
+              <S.ProfileInfo>{selectedTrack.professorData.email}</S.ProfileInfo>
+            </S.ProfileListItem>
+            <S.ProfileListItem>
+              <S.ProfileListKey>&bull; 전공분야</S.ProfileListKey>
+              <S.ProfileListValue>{selectedTrack.professorData.major}</S.ProfileListValue>
+            </S.ProfileListItem>
+            <S.ProfileListItem>
+              <S.ProfileInfo>&bull; 연구실</S.ProfileInfo>
+              <S.ProfileInfo>{selectedTrack.professorData.location}</S.ProfileInfo>
+            </S.ProfileListItem>
+            <S.ProfileListItem>
+              <S.ProfileListKey>&bull; 연구분야</S.ProfileListKey>
+              <S.ProfileListValue>{selectedTrack.professorData.research}</S.ProfileListValue>
+            </S.ProfileListItem>
+          </S.ProfileList>
+        </S.ProfessorContent>
       </S.ProfessorProfile>
     </S.Container>
   );

diff --git a/src/pages/Main/Union/ContentBox.styled.ts b/src/pages/Main/Union/ContentBox.styled.ts
@@ -116,9 +116,9 @@ export const Li = styled.li<{
   font-size: ${(props) =>
     props.$isMobile
       ? props.$isTiny
-        ? "18px"
-        : "20px"
-      : "24px"};
+        ? "16px"
+        : "18px"
+      : "22px"};
   line-height: ${(props) => (props.$isMobile ? "30px" : "35px")};
   color: var(--FarmSystem_Black);
 

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -8,7 +8,7 @@ body {
 /* 기본 색상 팔레트 */
 --FarmSystem_White: #FCFCFC;
 --FarmSystem_Black: #191919;
---FarmSystem_LightGrey: #E5E5E5;
+--FarmSystem_LightGrey: #F2F2F2;
 --FarmSystem_DarkGrey: #999999;
 --FarmSystem_Yellow: #FFF763;
 --FarmSystem_Orange: #FF7F1E;