Merge pull request #35 from DguFarmSystem/fix/23-responsive-mainpage

fix: 웹/모바일 반응형 UI 최적화
DguFarmSystem · Feb 17, 2025 · 7673fc8 · 7673fc8
2 parents 3de6794 + c10b0d7
commit 7673fc8
Show file tree

Hide file tree

Showing 18 changed files with 291 additions and 259 deletions.
diff --git a/src/assets/Icons/Hamburger.png b/src/assets/Icons/Hamburger.png
diff --git a/src/assets/Icons/Hamburger.svg b/src/assets/Icons/Hamburger.svg
diff --git a/src/assets/Icons/IntroLogo.svg b/src/assets/Icons/IntroLogo.svg
diff --git a/src/assets/Icons/close.png b/src/assets/Icons/close.png
diff --git a/src/components/Header/Header.styled.tsx b/src/components/Header/Header.styled.tsx
@@ -4,38 +4,45 @@ export const HeaderContainer = styled.header`
   position: relative;
   width: 100%;
   height: 70px;
-  background-color: #fcfcfc;
+  background-color: rgb(245, 245, 245); 
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 40px;
+  padding: 0 25px;
+`;
+
+export const MobileHeader = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
 `;
 
 export const Logo = styled.div`
   font-size: 20px;
   font-weight: bold;
-  color: #28723f;
+  color:  #102C19;
   letter-spacing: -0.24px;
 `;
 
-export const Nav = styled.nav`
+export const NavWrapper = styled.div`
   display: flex;
-  align-items: flex-end;
-  justify-content: flex-start;
-  gap: 30px;
+  align-items: center;
+  gap: 35px;
+`;
 
-  @media (max-width: 768px) {
-    display: none;
-  }
+export const Nav = styled.nav`
+  display: flex;
+  align-items: center;
+  gap: 20px;
 `;
 
-export const NavItem = styled.a`
+export const NavItem = styled.a<{ $isMobile: boolean; $isTablet: boolean }>`
   text-decoration: none;
-  font-size: 16px;
-  font-weight: 500;
-  color: #49aa59;
+  font-size: ${({$isTablet}) => ($isTablet ? "15px": "18px")}
+  font - weight: 500;
+  color: #102C19;
   cursor: pointer;
-  margin: 10px 0;
   &:hover {
     color: #28723f;
   }
@@ -52,44 +59,48 @@ export const FarmingLogButton = styled.button`
   text-align: center;
   cursor: pointer;
   box-shadow: 0px 2px 10px rgba(25, 25, 25, 0.2);
-
-  &:hover {
-    background-color: #1f5a2f;
-  }
 `;
 
 export const HamburgerIcon = styled.img`
   width: 30px;
   height: 30px;
   cursor: pointer;
-
-  @media (min-width: 769px) {
-    display: none;
-  }
 `;
 
 export const MobileNavWrapper = styled.div<{ $isMenuOpen: boolean }>`
-  position: absolute;
-  top: 70px;
+  position: fixed;
+  top: 0;
   left: 0;
   width: 100%;
-  background-color: #fcfcfc;
+  background-color: rgb(245, 245, 245); 
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 10px 0;
+  padding: ${({ $isMenuOpen }) => ($isMenuOpen ? "20px 0" : "0")};
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   z-index: 1000;
-  overflow: hidden;
   height: ${({ $isMenuOpen }) => ($isMenuOpen ? "auto" : "0")};
   opacity: ${({ $isMenuOpen }) => ($isMenuOpen ? "1" : "0")};
-  transform: ${({ $isMenuOpen }) => ($isMenuOpen ? "translateY(0)" : "translateY(-10px)")};
-  transition: height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
+  transform: ${({ $isMenuOpen }) => ($isMenuOpen ? "translateY(0)" : "translateY(-100%)")};
+  transition: transform 0.3s ease, opacity 0.3s ease, height 0.3s ease;
+  overflow: hidden;
+`;
+
+export const CloseButton = styled.img`
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  cursor: pointer;
+  width: 24px;  
+  height: 24px;
 `;
 
 export const MobileNav = styled.nav`
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
+  gap: 25px; 
+  margin-top: 20px;
 `;
+
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -2,51 +2,60 @@ import { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router';
 import * as S from './Header.styled';
 import Popup from '../Popup/Popup';
-import Hamburger from '../../assets/Icons/Hamburger.svg';
+import Hamburger from '../../assets/Icons/Hamburger.png';
+import CloseIcon from '../../assets/Icons/close.png';
 import useMediaQueries from '@/hooks/useMediaQueries';
 
 export default function Header() {
   const [isPopupOpen, setPopupOpen] = useState(false);
   const [isMenuOpen, setMenuOpen] = useState(false);
   const navigate = useNavigate();
-  const { isMobile } = useMediaQueries();
-  
+  const { isMobile, isTablet } = useMediaQueries();
+
   const onContainerClick = useCallback(() => {}, []);
 
+  const handleNavItemClick = (path?: string) => {
+    if (path) navigate(path);
+    setMenuOpen(false);
+  };
+
   return (
     <S.HeaderContainer>
-      <S.Logo onClick={() => navigate('/')}>Farm System</S.Logo>
-
       {isMobile ? (
-        <S.HamburgerIcon src={Hamburger} alt="Menu" onClick={() => setMenuOpen(!isMenuOpen)} />
+        <S.MobileHeader>
+          <S.Logo onClick={() => navigate('/')}>Farm System</S.Logo>
+          <S.HamburgerIcon src={Hamburger} alt="Menu" onClick={() => setMenuOpen(true)} />
+        </S.MobileHeader>
       ) : (
         <>
-          <S.Nav>
-            <S.NavItem onClick={() => navigate('/')}>홈</S.NavItem>
-            <S.NavItem onClick={() => setPopupOpen(true)}>블로그 / 프로젝트</S.NavItem>
-            <S.NavItem onClick={() => setPopupOpen(true)}>소식</S.NavItem>
-            <S.NavItem onClick={() => setPopupOpen(true)}>FAQ</S.NavItem>
-            <S.NavItem onClick={() => navigate('/apply')}>지원하기</S.NavItem>
-          </S.Nav>
-
-          {/* 파밍로그 버튼 */}
-          <S.FarmingLogButton onClick={onContainerClick}>파밍로그</S.FarmingLogButton>
+          <S.Logo onClick={() => navigate('/')}>Farm System</S.Logo>
+          <S.NavWrapper>
+            <S.Nav>
+              <S.NavItem  $isTablet={isTablet} $isMobile={isMobile} onClick={() => navigate('/')}>홈</S.NavItem>
+              <S.NavItem  $isTablet={isTablet} $isMobile={isMobile} onClick={() => setPopupOpen(true)}>블로그 / 프로젝트</S.NavItem>
+              <S.NavItem  $isTablet={isTablet} $isMobile={isMobile} onClick={() => setPopupOpen(true)}>소식</S.NavItem>
+              <S.NavItem  $isTablet={isTablet} $isMobile={isMobile} onClick={() => setPopupOpen(true)}>FAQ</S.NavItem>
+            </S.Nav>
+            <S.FarmingLogButton onClick={onContainerClick}>파밍로그</S.FarmingLogButton>
+          </S.NavWrapper>
         </>
       )}
-      
+
       <S.MobileNavWrapper $isMenuOpen={isMenuOpen}>
         {isMobile && (
-          <S.MobileNav>
-            <S.NavItem onClick={() => navigate('/')}>홈</S.NavItem>
-            <S.NavItem onClick={() => setPopupOpen(true)}>블로그 / 프로젝트</S.NavItem>
-            <S.NavItem onClick={() => setPopupOpen(true)}>소식</S.NavItem>
-            <S.NavItem onClick={() => setPopupOpen(true)}>FAQ</S.NavItem>
-            <S.NavItem onClick={() => navigate('/apply')}>지원하기</S.NavItem>
-            <S.NavItem onClick={() => setPopupOpen(true)}>파밍로그</S.NavItem>
-          </S.MobileNav>
+          <>
+            <S.CloseButton src={CloseIcon} alt="Close Menu" onClick={() => setMenuOpen(false)} />
+            <S.MobileNav>
+              <S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => handleNavItemClick('/')}>홈</S.NavItem>
+              <S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => handleNavItemClick()}>블로그 / 프로젝트</S.NavItem>
+              <S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => handleNavItemClick()}>소식</S.NavItem>
+              <S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => handleNavItemClick()}>FAQ</S.NavItem>
+              <S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => handleNavItemClick()}>파밍로그</S.NavItem>
+            </S.MobileNav>
+          </>
         )}
       </S.MobileNavWrapper>
-      
+
       <Popup 
         isOpen={isPopupOpen} 
         onClose={() => setPopupOpen(false)} 
@@ -55,4 +64,4 @@ export default function Header() {
       />
     </S.HeaderContainer>
   );
-}
+}
diff --git a/src/pages/Main/Achievements/AchievementItem.styles.ts b/src/pages/Main/Achievements/AchievementItem.styles.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const ItemContainer = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
   width: ${({ $isMobile, $isTablet }) => ($isMobile ? "280px" : $isTablet ? "330px" : "390px")};
-  height: ${({ $isMobile, $isTablet }) => ($isMobile ? "280px" : $isTablet ? "330px" : "390px")};
+  height: ${({ $isMobile, $isTablet }) => ($isMobile ? "360px" : $isTablet ? "420px" : "480px")}; 
   margin-left: 30px;
   margin-right: 30px;
   background-color: #175321;
@@ -14,16 +14,17 @@ export const ItemContainer = styled.div<{ $isMobile: boolean; $isTablet: boolean
 
 export const Image = styled.img<{ $isMobile: boolean }>`
   width: 100%;
-  height: ${({ $isMobile }) => ($isMobile ? "140px" : "180px")};
+  height: ${({ $isMobile }) => ($isMobile ? "66.6%" : "66.6%")}; 
   object-fit: cover;
 `;
 
 export const Content = styled.div<{ $isMobile: boolean }>`
+margin-top: 30px;
   padding: ${({ $isMobile }) => ($isMobile ? "10px" : "20px")};
 `;
 
 export const Title = styled.h3<{ $isMobile: boolean }>`
-  font-size: ${({ $isMobile }) => ($isMobile ? "12px" : "14px")};
+  font-size: ${({ $isMobile }) => ($isMobile ? "10px" : "14px")};
   color: #fcfcfc;
 `;
 

diff --git a/src/pages/Main/Achievements/Achievements.styles.ts b/src/pages/Main/Achievements/Achievements.styles.ts
@@ -32,7 +32,7 @@ export const Highlight = styled.span`
 
 export const SliderWrapper = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
   width: 100vw;
-  position: relative; /* 블러 효과 위치 */
+  position: relative; 
   overflow: visible; 
   z-index: 0;
 
@@ -44,7 +44,7 @@ export const SliderWrapper = styled.div<{ $isMobile: boolean; $isTablet: boolean
     width: 100vw;
     margin: 0;
     padding: 20px 0; 
-    min-height: auto; /* 높이를 자동으로 조절 -> QA 후 일부 조정 필요 */
+    min-height: auto; 
   }
 
   .slick-track {
@@ -64,7 +64,7 @@ export const SliderWrapper = styled.div<{ $isMobile: boolean; $isTablet: boolean
     content: "";
     position: absolute;
     top: 0;
-    width: ${({ $isMobile, $isTablet }) => ($isMobile ? "80px" : $isTablet ? "250px" : "400px")};
+    width: ${({ $isMobile, $isTablet }) => ($isMobile ? "90px" : $isTablet ? "250px" : "400px")};
     height: 100%;
     z-index: 1;
     pointer-events: none;

diff --git a/src/pages/Main/Achievements/Achievements.tsx b/src/pages/Main/Achievements/Achievements.tsx
@@ -10,31 +10,31 @@ const achievementsData = [
     id: 1,
     title: '2024 사회보장정보와 공공•민간 빅데이터 활용 국민행복서비스',
     description: '한국사회보장정보원 표창장',
-    imageUrl: 'path/to/image1.jpg',
+    imageUrl: 'https://farmsystem-bucket.s3.ap-northeast-2.amazonaws.com/award/award_2.png',
   },
   {
     id: 2,
     title: '2024 창업 아이디어 경진대회',
     description: '동국대학교 총장상(대상)',
-    imageUrl: 'path/to/image2.jpg',
+    imageUrl: 'https://farmsystem-bucket.s3.ap-northeast-2.amazonaws.com/award/award_3.png',
   },
   {
     id: 3,
     title: '2024 동국대학교 AI융합대학 해커톤',
     description: 'AI융합대학장상(대상)',
-    imageUrl: 'path/to/image3.jpg',
+    imageUrl: 'https://farmsystem-bucket.s3.ap-northeast-2.amazonaws.com/award/award_4.png',
   },
   {
     id: 4,
     title: '2024 DPG AI Challenge',
     description: '디지털플랫폼정부위원장상(최우수상)',
-    imageUrl: 'path/to/image4.jpg',
+    imageUrl: 'https://farmsystem-bucket.s3.ap-northeast-2.amazonaws.com/award/award_1.png',
   },
   {
     id: 5,
     title: '22024 E2GEE Lab(이지랩) 메이커톤',
     description: '동국대학교 총장상(대상)',
-    imageUrl: 'path/to/image4.jpg',
+    imageUrl: 'https://farmsystem-bucket.s3.ap-northeast-2.amazonaws.com/award/award_5.png',
   },
 ];
 

diff --git a/src/pages/Main/BottomInfo/BottomInfo.styles.ts b/src/pages/Main/BottomInfo/BottomInfo.styles.ts
@@ -9,7 +9,7 @@ export const BottomInfoContainer = styled.div<{ $isMobile: boolean; $isTablet: b
 `;
 
 export const Title = styled.h2<{ $isMobile: boolean; $isTablet: boolean }>`
-  width: ${({ $isMobile }) => ($isMobile ? "98vw" : "none" )}; /*아래 정보 타이틀 사이즈 조절*/
+  width: ${({ $isMobile }) => ($isMobile ? "98vw" : "none" )}; 
   font-size: ${({ $isMobile, $isTablet }) => ($isMobile ? "22px" : $isTablet ? "32px" : "36px")};
   color: #191919;
   font-weight: bold;
@@ -64,12 +64,13 @@ export const RequirementsTitle = styled.h3<{ $isMobile: boolean; $isTablet: bool
 `;
 
 export const RequirementTitle = styled.h4<{ $isMobile: boolean }>`
-  font-size: ${({ $isMobile }) => ($isMobile ? "20px" : "24px")};
+  font-size: ${({ $isMobile }) => ($isMobile ? "18px" : "24px")};
   font-weight: bold;
 `;
 
 export const RequirementText = styled.p<{ $isMobile: boolean }>`
-  font-size: ${({ $isMobile }) => ($isMobile ? "16px" : "20px")};
+margin-top: 10px;
+  font-size: ${({ $isMobile }) => ($isMobile ? "14px" : "20px")};
   font-weight: 500;
 `;
 
@@ -115,7 +116,6 @@ export const NotificationLink = styled.a<{ $isMobile: boolean }>`
   }
 `;
 
-/* 팝업 */
 export const PopupOverlay = styled.div`
   position: fixed;
   inset: 0;

diff --git a/src/pages/Main/BottomInfo/BottomInfo.tsx b/src/pages/Main/BottomInfo/BottomInfo.tsx
@@ -11,8 +11,7 @@ const BottomInfo = () => {
   const [isPopupOpen, setPopupOpen] = useState(false);
   const { isMobile, isTablet } = useMediaQueries();
 
-  // 구글 폼 링크 (전화번호 입력 폼) 지금은 가상의 url 입니다.
-  const googleFormLink = "https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform";
+  const googleFormLink = "https://docs.google.com/forms/d/e/1FAIpQLSdaELf6PNpRSD18nPPcgH_934Wsm9Gju54P62vWlczusmRg3w/viewform";
 
   return (
     <S.BottomInfoContainer id="eligibility" $isMobile={isMobile} $isTablet={isTablet}>
@@ -38,15 +37,15 @@ const BottomInfo = () => {
       <S.RequirementsBox $isMobile={isMobile} $isTablet={isTablet}>
         <S.RequirementsTitle $isMobile={isMobile} $isTablet={isTablet}>지원 요건</S.RequirementsTitle>
         <S.RequirementItem>
-          <S.RequirementTitle $isMobile={isMobile}>🌱 누구나 환영해요!</S.RequirementTitle>
-          <S.RequirementText $isMobile={isMobile}>Farm System에 관심 있는 동국대학교 학생이라면 누구든지 참여할 수 있어요.</S.RequirementText>
+          <S.RequirementTitle $isMobile={isMobile}>- 누구나 환영해요!</S.RequirementTitle>
+          <S.RequirementText $isMobile={isMobile}>Farm System에 관심 있는 동국대학교 학생이라면 누구든지 참여할 수 있어요.🌱</S.RequirementText>
         </S.RequirementItem>
         <S.RequirementItem>
-          <S.RequirementTitle $isMobile={isMobile}>⏰ 월요일 저녁, 같이 성장해요!</S.RequirementTitle>
-          <S.RequirementText $isMobile={isMobile}>매주 월요일 19시부터 약 2시간 동안 정기 모임이 열려요. 원활한 팀워크를 위해 필참이 원칙이에요! 함께 성장할 준비되셨나요? 🌱</S.RequirementText>
+          <S.RequirementTitle $isMobile={isMobile}>- 월요일 저녁, 같이 성장해요.</S.RequirementTitle>
+          <S.RequirementText $isMobile={isMobile}>매주 월요일 19시⏰부터 약 2시간 동안 정기 모임이 열려요. 원활한 팀워크를 위해 필참이 원칙이에요! 함께 성장할 준비되셨나요? </S.RequirementText>
         </S.RequirementItem>
         <S.RequirementItem>
-          <S.RequirementTitle $isMobile={isMobile}>📅 언제 모집하나요?</S.RequirementTitle>
+          <S.RequirementTitle $isMobile={isMobile}>- 언제 모집하나요?</S.RequirementTitle>
           <S.RequirementText $isMobile={isMobile}>2025년 2월, Farm System 4기를 공개 모집할 예정이에요! 조금만 기다려 주세요 😉</S.RequirementText>
         </S.RequirementItem>
         <S.ButtonContainer>

diff --git a/src/pages/Main/FarmSyetemNav/FarmSystemNav.styled.ts b/src/pages/Main/FarmSyetemNav/FarmSystemNav.styled.ts
@@ -16,8 +16,8 @@ export const FixedNavWrapper = styled.div<FixedNavProps>`
 
 
 export const Navbar = styled.nav<{ $isMobile: boolean }>`
-  background-color: #216D35;
-  padding: 10px 20px;
+  background-color: rgba(33, 109, 53, 0.7); 
+  padding: 10px 10px;
   border-radius: 17px;
   display: flex;
   align-items: center;