Merge pull request #63 from DguFarmSystem/fix/62-mainpage

Fix: 전체적인 1차 QA 반영
DguFarmSystem · Feb 23, 2025 · 2090f41 · 2090f41
2 parents 98ad474 + d4db92e
commit 2090f41
Show file tree

Hide file tree

Showing 16 changed files with 612 additions and 451 deletions.
diff --git a/src/assets/Icons/logobutton.png b/src/assets/Icons/logobutton.png
diff --git a/src/components/Header/Header.styled.tsx b/src/components/Header/Header.styled.tsx
@@ -1,14 +1,16 @@
 import styled from "styled-components";
 
 export const HeaderContainer = styled.header`
-  position: relative;
+  position: fixed;
   width: 100%;
   height: 70px;
   background-color: rgb(245, 245, 245); 
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 25px;
+  z-index: 1000;
+
 `;
 
 export const MobileHeader = styled.div`
@@ -31,6 +33,7 @@ export const NavWrapper = styled.div`
   justify-content: center;
   gap: 35px;
   flex-grow: 1;
+
 `;
 
 export const Nav = styled.nav`
@@ -40,15 +43,27 @@ export const Nav = styled.nav`
   gap: 40px;
 `;
 
-export const NavItem = styled.a<{ $isMobile: boolean; $isTablet: boolean }>`
+export const NavItem = styled.a<{ $isMobile: boolean; $isTablet: boolean; isActive: boolean }>`
   text-decoration: none;
   font-size: ${({$isTablet}) => ($isTablet ? "15px": "18px")};
   font-weight: 500;
-  color: #102C19;
+  color: ${({ isActive }) => (isActive ? "#28723f" : "#102C19")};
   cursor: pointer;
+  position: relative;
   &:hover {
     color: #28723f;
   }
+  &:hover::after, ${({ isActive }) => isActive && `
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -2px;
+      width: 100%;
+      height: 2px;
+      background-color: #28723f;
+    }
+  `}
 `;
 
 export const FarmingLogButton = styled.button`

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,19 +1,17 @@
-import { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router';
+import { useState } from 'react';
+import { useNavigate, useLocation } from 'react-router';
 import * as S from './Header.styled';
 import Popup from '../Popup/Popup';
 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 location = useLocation();
   const { isMobile, isTablet } = useMediaQueries();
 
-  const onContainerClick = useCallback(() => {}, []);
-
   const handleNavItemClick = (path?: string) => {
     if (path) navigate(path);
     setMenuOpen(false);
@@ -31,26 +29,88 @@ export default function Header() {
           <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={() => navigate('/blog')}>블로그 / 프로젝트</S.NavItem>
-              <S.NavItem  $isTablet={isTablet} $isMobile={isMobile} onClick={() => setPopupOpen(true)}>소식</S.NavItem>
-              <S.NavItem  $isTablet={isTablet} $isMobile={isMobile} onClick={() => navigate('/FAQ')}>FAQ</S.NavItem>
+              <S.NavItem 
+                $isTablet={isTablet} 
+                $isMobile={isMobile} 
+                onClick={() => navigate('/')} 
+                isActive={location.pathname === '/'}
+              >
+                홈
+              </S.NavItem>
+              <S.NavItem 
+                $isTablet={isTablet} 
+                $isMobile={isMobile} 
+                onClick={() => navigate('/blog')} 
+                isActive={location.pathname === '/blog'}
+              >
+                블로그 / 프로젝트
+              </S.NavItem>
+              <S.NavItem 
+                $isTablet={isTablet} 
+                $isMobile={isMobile} 
+                onClick={() => setPopupOpen(true)} 
+                isActive={false}
+              >
+                소식
+              </S.NavItem>
+              <S.NavItem 
+                $isTablet={isTablet} 
+                $isMobile={isMobile} 
+                onClick={() => navigate('/FAQ')} 
+                isActive={location.pathname === '/FAQ'}
+              >
+                FAQ
+              </S.NavItem>
             </S.Nav>
           </S.NavWrapper>
-          <S.FarmingLogButton onClick={onContainerClick}>파밍로그</S.FarmingLogButton>
+          <S.FarmingLogButton onClick={() => setPopupOpen(true)}>파밍로그</S.FarmingLogButton>
         </>
       )}
 
       <S.MobileNavWrapper $isMenuOpen={isMenuOpen}>
         {isMobile && (
           <>
-            <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={() => setPopupOpen(true)}>소식</S.NavItem>
-              <S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => setPopupOpen(true)}>FAQ</S.NavItem>
-              <S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={onContainerClick}>파밍로그</S.NavItem>
+              <S.NavItem 
+                $isTablet={isTablet} 
+                $isMobile={isMobile} 
+                onClick={() => handleNavItemClick('/')} 
+                isActive={location.pathname === '/'}
+              >
+                홈
+              </S.NavItem>
+              <S.NavItem 
+                $isTablet={isTablet} 
+                $isMobile={isMobile} 
+                onClick={() => handleNavItemClick('/blog')} 
+                isActive={location.pathname === '/blog'}
+              >
+                블로그 / 프로젝트
+              </S.NavItem>
+              <S.NavItem 
+                $isTablet={isTablet} 
+                $isMobile={isMobile} 
+                onClick={() => setPopupOpen(true)} 
+                isActive={false}
+              >
+                소식
+              </S.NavItem>
+              <S.NavItem 
+                $isTablet={isTablet} 
+                $isMobile={isMobile} 
+                onClick={() => handleNavItemClick('/FAQ')} 
+                isActive={location.pathname === '/FAQ'}
+              >
+                FAQ
+              </S.NavItem>
+              <S.NavItem 
+                $isTablet={isTablet} 
+                $isMobile={isMobile} 
+                onClick={() => setPopupOpen(true)} 
+                isActive={false}
+              >
+                파밍로그
+              </S.NavItem>
             </S.MobileNav>
           </>
         )}

diff --git a/src/components/Popup/Popup.styled.tsx b/src/components/Popup/Popup.styled.tsx
@@ -1,8 +1,5 @@
 import styled from 'styled-components';
 
-
-//${({ $isMobile, $isTablet }) => ($isMobile ? "280px" : $isTablet ? "330px" : "390px")}
-
 export const PopupOverlay = styled.div`
   position: fixed;
   inset: 0;
@@ -14,10 +11,10 @@ export const PopupOverlay = styled.div`
 `;
 
 export const PopupBox = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
-  width: 500px;
-  width: ${({ $isMobile, $isTablet }) => ($isMobile ? "260px" : $isTablet ? "420px" : "500px")};
+  width: ${({ $isMobile, $isTablet }) => ($isMobile ? "300px" : $isTablet ? "420px" : "500px")};
   background-color: #fcfcfc;
   border-radius: 15px;
+  border: 3px solid #28723f; 
   text-align: center;
   padding: ${({ $isMobile }) => ($isMobile ? "30px" : "40px")};
   z-index: 10000;

diff --git a/src/pages/Blog/BlogList.styles.tsx b/src/pages/Blog/BlogList.styles.tsx
@@ -7,24 +7,24 @@ export const Container = styled.div`
   align-items: center;
   gap: 20px;
   width: 100%;
+  margin-top: 60px;
 `;
 
 // 상단들을 감싸는 컨테이너
 export const TableContainer = styled.div`
   display: flex;
   gap: 30px;
-  width: 100%;
-  justify-content: end;
-  
-  height: 10vh;
+  justify-content: flex-end; /* 왼쪽 정렬 */
   min-height: 60px;
+  width: 100%;
 `;
 
-export const SubDescription = styled.div`
-  height: 30px;
+export const SubDescription = styled.div<{$isMobile: boolean;}>`
   color: var(--FarmSystem_DarkGrey);
-  font-size: 18px;
+  font-size: ${(props) => (props.$isMobile ? "10px" : "18px")};
   font-weight: 400;
+  width: 100%;
+  text-align: right; /* 오른쪽 정렬 */
 `;
 
 /** 프로젝트 리스트(카드)들을 감싸는 컨테이너 */
@@ -46,22 +46,19 @@ export const DescriptionContainer = styled.div`
 `;
 
 /* 텍스트 컨테이너*/
-export const TextContainer = styled.div`
-
+export const TextContainer = styled.div<{$isMobile: boolean;}>`
   padding-top: 20vh;
   height: 100px;
   display: flex;
-
   justify-content: center;
   text-align: center;
-
   flex-direction: column;
   color: black;
-  font-size: 32px;
+  font-size: ${(props) => (props.$isMobile ? "20px" : "32px")};
   font-weight: 600;
 
-  a{
-    font-size: 14px;
+  a {
+    font-size: ${(props) => (props.$isMobile ? "10px" : "14px")};
     font-weight: 300;
   }
   gap: 10px;

diff --git a/src/pages/Blog/BlogList.tsx b/src/pages/Blog/BlogList.tsx
@@ -1,71 +1,71 @@
 import * as S from './BlogList.styles';
-import BlogItem, { BlogItemProps } from './BlogItem';
-import BlankImg from '../../assets/Images/Blog_Project/blank_img.svg';
+// import BlogItem, { BlogItemProps } from './BlogItem';
+// import BlankImg from '../../assets/Images/Blog_Project/blank_img.svg';
 import useMediaQueries from '@/hooks/useMediaQueries';
 
 /** 샘플용 더미 데이터 */
-const blogData: BlogItemProps[] = [
-  {
-    title: '임시직 프로젝트 1',
-    description: '팜시스템에 필요한 모든 정보를 담은 앱! W-300 H-40 고정사이즈로써 2줄까지 소개가 가능하다.',
-    imageUrl: BlankImg,
-    blogUrl: 'https://www.naver.com',
-  },
-  {
-    title: '임시직 프로젝트 2',
-    description: '백동민 최강 백동민 힘내 백동민 파이팅 2.',
-    imageUrl: BlankImg,
-    blogUrl: 'https://www.naver.com',
-  },
-  {
-    title: '임시직 프로젝트 3',
-    description: '백동민 최강 백동민 힘내 백동민 파이팅 3.',
-    imageUrl: BlankImg,
-    blogUrl: 'https://www.naver.com',
-  },
-  {
-    title: '임시직 프로젝트 1',
-    description: '팜시스템에 필요한 모든 정보를 담은 앱! W-300 H-40 고정사이즈로써 2줄까지 소개가 가능하다.',
-    imageUrl: BlankImg,
-    blogUrl: 'https://www.naver.com',
-  },
-  {
-    title: '임시직 프로젝트 2',
-    description: '백동민 최강 백동민 힘내 백동민 파이팅 2.',
-    imageUrl: BlankImg,
-    blogUrl: 'https://www.naver.com',
-  },
-  {
-    title: '임시직 프로젝트 3',
-    description: '백동민 최강 백동민 힘내 백동민 파이팅 3.',
-    imageUrl: BlankImg,
-    blogUrl: 'https://www.naver.com',
-  },
-];
+// const blogData: BlogItemProps[] = [
+//   {
+//     title: '임시직 프로젝트 1',
+//     description: '팜시스템에 필요한 모든 정보를 담은 앱! W-300 H-40 고정사이즈로써 2줄까지 소개가 가능하다.',
+//     imageUrl: BlankImg,
+//     blogUrl: 'https://www.naver.com',
+//   },
+//   {
+//     title: '임시직 프로젝트 2',
+//     description: '백동민 최강 백동민 힘내 백동민 파이팅 2.',
+//     imageUrl: BlankImg,
+//     blogUrl: 'https://www.naver.com',
+//   },
+//   {
+//     title: '임시직 프로젝트 3',
+//     description: '백동민 최강 백동민 힘내 백동민 파이팅 3.',
+//     imageUrl: BlankImg,
+//     blogUrl: 'https://www.naver.com',
+//   },
+//   {
+//     title: '임시직 프로젝트 1',
+//     description: '팜시스템에 필요한 모든 정보를 담은 앱! W-300 H-40 고정사이즈로써 2줄까지 소개가 가능하다.',
+//     imageUrl: BlankImg,
+//     blogUrl: 'https://www.naver.com',
+//   },
+//   {
+//     title: '임시직 프로젝트 2',
+//     description: '백동민 최강 백동민 힘내 백동민 파이팅 2.',
+//     imageUrl: BlankImg,
+//     blogUrl: 'https://www.naver.com',
+//   },
+//   {
+//     title: '임시직 프로젝트 3',
+//     description: '백동민 최강 백동민 힘내 백동민 파이팅 3.',
+//     imageUrl: BlankImg,
+//     blogUrl: 'https://www.naver.com',
+//   },
+// ];
 
 const BlogList: React.FC = () => {
-  const { isTablet, isBig } = useMediaQueries();
+  const { isMobile } = useMediaQueries();
 
   return (
     <S.Container>
       <S.TableContainer>
-        <S.SubDescription> * 블로그 클릭 시 외부로 연결돼요.</S.SubDescription>
+        <S.SubDescription $isMobile={isMobile}> * 블로그 클릭 시 외부로 연결돼요.</S.SubDescription>
       </S.TableContainer>
 
       {/* 프로젝트 카드 리스트 */}
       {/* 지금은 더미데이터의 갯수로 블로그가 있는지 없는지 판단합니다. 디버깅시 projectdata.length>6 이렇게 하면 아무 것도 없는 창 뜹니다.*/}
-      {(blogData.length > 5) ? (
+      {/* {(blogData.length > 5) ? (
       <S.ListContainer $isTablet={isTablet} $isBig={isBig}>
         {blogData.map((item, index) => (
           <BlogItem key={index} {...item} />
         ))}
-      </S.ListContainer>) : (
-          <S.TextContainer>
+      </S.ListContainer>) : ( */}
+          <S.TextContainer $isMobile={isMobile}>
             아직 등록된 글이 없어요.
             <a>파밍로그를 통해 글을 작성해보세요!</a>
           </S.TextContainer>
-      )
-      }
+      {/* )
+      } */}
     </S.Container>
   );
 };