Merge pull request #22 from DguFarmSystem/Feature/#20

Feature/#20 메인페이지 반응형 작업(트랙 소개 제외)
DguFarmSystem · Feb 15, 2025 · b39839f · b39839f
2 parents c6e337e + 16c9a61
commit b39839f
Show file tree

Hide file tree

Showing 25 changed files with 579 additions and 286 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/Icons/Hamburger.svg b/src/assets/Icons/Hamburger.svg
diff --git a/src/components/Header/Header.styled.tsx b/src/components/Header/Header.styled.tsx
@@ -23,36 +23,24 @@ export const Nav = styled.nav`
   align-items: flex-end;
   justify-content: flex-start;
   gap: 30px;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 `;
 
 export const NavItem = styled.a`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   text-decoration: none;
   font-size: 16px;
   font-weight: 500;
   color: #49aa59;
   cursor: pointer;
-  margin-left: 30px;
+  margin: 10px 0;
   &:hover {
     color: #28723f;
   }
 `;
 
-export const NavLineActive = styled.img`
-  position: absolute;
-  top: 30px;
-  width: 120px;
-`;
-
-export const NavLineInactive = styled.img`
-  position: absolute;
-  top: 30px;
-  width: 120px;
-`;
-
 export const FarmingLogButton = styled.button`
   width: 120px;
   height: 40px;
@@ -69,3 +57,39 @@ export const FarmingLogButton = styled.button`
     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;
+  left: 0;
+  width: 100%;
+  background-color: #fcfcfc;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px 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;
+`;
+
+export const MobileNav = styled.nav`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,36 +1,58 @@
-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';
+import Hamburger from '../../assets/Icons/Hamburger.svg';
+import useMediaQueries from '@/hooks/useMediaQueries';
 
 export default function Header() {
+  const [isPopupOpen, setPopupOpen] = useState(false);
+  const [isMenuOpen, setMenuOpen] = useState(false);
   const navigate = useNavigate();
-  const onContainerClick = useCallback(() => {
-  }, []);
+  const { isMobile } = useMediaQueries();
+
+  const onContainerClick = useCallback(() => {}, []);
 
   return (
     <S.HeaderContainer>
       <S.Logo onClick={() => navigate('/')}>Farm System</S.Logo>
+
+      {isMobile ? (
+        <S.HamburgerIcon src={Hamburger} alt="Menu" onClick={() => setMenuOpen(!isMenuOpen)} />
+      ) : (
+        <>
+          <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.Nav>
-        <S.NavItem onClick={() => navigate('/')}>
-          홈
-        </S.NavItem>
-        <S.NavItem onClick={() => navigate('/blog-project')}>
-          블로그 / 프로젝트
-        </S.NavItem>
-        <S.NavItem onClick={() => navigate('/news')}>
-          소식
-        </S.NavItem>
-        <S.NavItem onClick={() => navigate('/faq')}>
-          FAQ
-        </S.NavItem>
-        <S.NavItem onClick={() => navigate('/apply')}>
-          지원하기
-        </S.NavItem>
-      </S.Nav>
-
-      {/* 파밍로그 버튼 */}
-      <S.FarmingLogButton onClick={onContainerClick}>파밍로그</S.FarmingLogButton>
+          {/* 파밍로그 버튼 */}
+          <S.FarmingLogButton onClick={onContainerClick}>파밍로그</S.FarmingLogButton>
+        </>
+      )}
+
+      <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.MobileNavWrapper>
+
+      <Popup 
+        isOpen={isPopupOpen} 
+        onClose={() => setPopupOpen(false)} 
+        title={"아직 오픈되지 않았습니다."} 
+        content={"오픈 예정: 2025년 4월"} 
+      />
     </S.HeaderContainer>
   );
-}
+}
diff --git a/src/components/Popup/Popup.styled.tsx b/src/components/Popup/Popup.styled.tsx
@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+export const PopupOverlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(113, 113, 113, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+`;
+
+export const PopupBox = styled.div`
+  width: 500px;
+  background-color: #fcfcfc;
+  border: 3px solid #28723f;
+  border-radius: 15px;
+  text-align: center;
+  padding: 40px;
+  z-index: 10000;
+`;
+
+export const PopupTitle = styled.p`
+  font-size: 22px;
+  font-weight: 700;
+  color: black;
+  margin-bottom: 20px;
+`;
+
+export const PopupText = styled.p`
+  font-size: 18px;
+  color: black;
+  margin-bottom: 20px;
+`;
+
+export const PopupCloseButton = styled.button`
+  background-color: #28723f;
+  color: #fcfcfc;
+  font-size: 16px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  box-shadow: 0px 2px 10px rgba(25, 25, 25, 0.2);
+  width: 100px;
+  margin-top: 20px;
+  &:hover {
+    background-color: #1f5b30;
+  }
+`;
diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import * as S from './Popup.styled';
+
+interface PopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  content: string;
+}
+
+const Popup: React.FC<PopupProps> = ({ isOpen, onClose, title, content }) => {
+  if (!isOpen) return null;
+
+  return (
+    <S.PopupOverlay onClick={onClose}>
+      <S.PopupBox onClick={(e) => e.stopPropagation()}>
+        <S.PopupTitle>{title}</S.PopupTitle>
+        <S.PopupText>{content}</S.PopupText>
+        <S.PopupCloseButton onClick={onClose}>확인</S.PopupCloseButton>
+      </S.PopupBox>
+    </S.PopupOverlay>
+  );
+};
+
+export default Popup;
diff --git a/src/pages/Main/Achievements/AchievementItem.styles.ts b/src/pages/Main/Achievements/AchievementItem.styles.ts
@@ -1,32 +1,34 @@
 import styled from 'styled-components';
 
-export const ItemContainer = styled.div`
-  width: 400px;
-  height: 400px;
-  background-color:#175321;
+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")};
+  margin-left: 30px;
+  margin-right: 30px;
+  background-color: #175321;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   text-align: center;
 `;
 
-export const Image = styled.img`
+export const Image = styled.img<{ $isMobile: boolean }>`
   width: 100%;
-  height: 180px;
+  height: ${({ $isMobile }) => ($isMobile ? "140px" : "180px")};
   object-fit: cover;
 `;
 
-export const Content = styled.div`
-  padding: 20px;
+export const Content = styled.div<{ $isMobile: boolean }>`
+  padding: ${({ $isMobile }) => ($isMobile ? "10px" : "20px")};
 `;
 
-export const Title = styled.h3`
-  font-size: 14px;
+export const Title = styled.h3<{ $isMobile: boolean }>`
+  font-size: ${({ $isMobile }) => ($isMobile ? "12px" : "14px")};
   color: #fcfcfc;
 `;
 
-export const Description = styled.p`
- font-size: 20px;
+export const Description = styled.p<{ $isMobile: boolean }>`
+  font-size: ${({ $isMobile }) => ($isMobile ? "16px" : "20px")};
   font-weight: bold;
   color: #fcfcfc;
   line-height: 1.5;

diff --git a/src/pages/Main/Achievements/AchievementItem.tsx b/src/pages/Main/Achievements/AchievementItem.tsx
@@ -1,4 +1,5 @@
 import * as S from './AchievementItem.styles';
+import useMediaQueries from '@/hooks/useMediaQueries';
 
 interface AchievementItemProps {
   title: string;
@@ -7,12 +8,14 @@ interface AchievementItemProps {
 }
 
 const AchievementItem: React.FC<AchievementItemProps> = ({ title, description, imageUrl }) => {
+  const { isMobile, isTablet } = useMediaQueries();
+
   return (
-    <S.ItemContainer>
-      <S.Image src={imageUrl} alt={title} />
-      <S.Content>
-        <S.Title>{title}</S.Title>
-        <S.Description>{description}</S.Description>
+    <S.ItemContainer $isMobile={isMobile} $isTablet={isTablet}>
+      <S.Image src={imageUrl} alt={title} $isMobile={isMobile} />
+      <S.Content $isMobile={isMobile}>
+        <S.Title $isMobile={isMobile}>{title}</S.Title>
+        <S.Description $isMobile={isMobile}>{description}</S.Description>
       </S.Content>
     </S.ItemContainer>
   );