Feature/#19 main page intergrate

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>
   );
 }

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;
+  }
+`;

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;

src/pages/Main/Achievements/Achievements.styles.ts

@@ -6,6 +6,8 @@ export const AchievementsContainer = styled.div`
   padding: 60px 0;
   text-align: center;
   overflow-x: hidden; 
+  position: relative;
+  z-index: 0;
 `;
 export const Title = styled.h2`
   font-size: 48px;
@@ -25,6 +27,7 @@ export const SliderWrapper = styled.div`
   width: 100vw;
   position: relative; /* 블러 효과 위치 */
   overflow: visible; 
+  z-index: 0;
 
   .slick-list {
     width: 100vw;
@@ -50,9 +53,9 @@ export const SliderWrapper = styled.div`
     content: "";
     position: absolute;
     top: 0;
-    width: 400px; /* 블러 영역 너비 -> 뷰 포인트에 따라 조절 필요*/
+    width: 400px; //블러 영역 너비 -> 뷰 포인트에 따라 조절 필요
     height: 100%;
-    z-index: 2;
+    z-index: 1;
     pointer-events: none;
   }
 

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>
   );
 };

src/pages/Main/FarmSyetemNav/FarmSystemNav.styled.ts

@@ -1,9 +1,21 @@
 import styled from 'styled-components';
 
+interface FixedNavProps {
+  isVisible: boolean;
+}
+
+export const FixedNavWrapper = styled.div<FixedNavProps>`
+  position: fixed;
+  top: ${({ isVisible }) => (isVisible ? "10px" : "-50px")};
+  right: 20px;
+  transition: top 0.3s ease-in-out;
+  z-index: 1000;
+`;
+
 export const Navbar = styled.nav`
-  background-color: #216D35; 
+  background-color: #216D35;
   padding: 10px 20px;
-  border-radius: 20px; 
+  border-radius: 17px;
   display: flex;
   align-items: center;
   gap: 20px;
@@ -14,7 +26,18 @@ export const NavItem = styled.a`
   font-size: 14px;
   text-decoration: none;
   font-weight: 500;
-
+  display: flex;
+  align-items: center;
+
   &:first-child {
-    font-weight: bold; 
+    font-weight: bold;
+  }
+`;
+
+export const Circle = styled.div`
+  width: 5px;
+  height: 5px;
+  background-color: white;
+  border-radius: 50%;
+  margin-right: 8px;
 `;

src/pages/Main/FarmSyetemNav/FarmSystemNav.tsx

@@ -1,12 +1,52 @@
 import * as S from './FarmSystemNav.styled';
+import { useState, useEffect } from 'react';
 
 export default function FarmSystemNav() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 200) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const handleSmoothScroll = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, targetId: string) => {
+    event.preventDefault();
+    const targetElement = document.querySelector(targetId);
+    if (targetElement) {
+      window.scrollTo({
+        top: targetElement.getBoundingClientRect().top + window.scrollY,
+        behavior: "smooth",
+      });
+    }
+  };
+
+
   return (
-    <S.Navbar>
-      <S.NavItem href="#about">● Farm System이란?</S.NavItem>
-      <S.NavItem href="#tracks">● 트랙 및 커리큘럼</S.NavItem>
-      <S.NavItem href="#achievements">● 활동 및 성과</S.NavItem>
-      <S.NavItem href="#eligibility">● 지원 요건</S.NavItem>
-    </S.Navbar>
+    <S.FixedNavWrapper isVisible={isVisible}>
+      <S.Navbar>
+        <S.NavItem href="#about" onClick={(e) => handleSmoothScroll(e, "#about")}>
+          <S.Circle /> Farm System이란?
+        </S.NavItem>
+        <S.NavItem href="#tracks" onClick={(e) => handleSmoothScroll(e, "#tracks")}>
+          <S.Circle /> 트랙 및 커리큘럼
+        </S.NavItem>
+        <S.NavItem href="#achievements" onClick={(e) => handleSmoothScroll(e, "#achievements")}>
+          <S.Circle /> 활동 및 성과
+        </S.NavItem>
+        <S.NavItem href="#eligibility" onClick={(e) => handleSmoothScroll(e, "#eligibility")}>
+          <S.Circle /> 지원 요건
+        </S.NavItem>
+      </S.Navbar>
+    </S.FixedNavWrapper>
   );
-}
+}

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>
   );
 };