feat: 메인페이지 네비게이션

Author: parkjoohyung0826

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/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/Tracks/Tracks.tsx

@@ -7,11 +7,23 @@ import OrangeArrow from '@/assets/Icons/OrangeArrow.svg';
 export default function Tracks() {
   const [selectedTrack, setSelectedTrack] = useState(TracksData[0]);
 
+  const handleSmoothScroll = (event: React.MouseEvent<HTMLSpanElement, MouseEvent>, targetId: string) => {
+    event.preventDefault();
+    const offset = 80;
+    const targetElement = document.querySelector(targetId);
+    if (targetElement) {
+      window.scrollTo({
+        top: targetElement.getBoundingClientRect().top + window.scrollY + offset,
+        behavior: "smooth",
+      });
+    }
+  };
+
   return (
     <S.Container id="tracks">
       <S.CenterContainer>
         <S.Title>트랙 및 커리큘럼</S.Title>
-        <S.GoToUnion>
+        <S.GoToUnion onClick={(e) => handleSmoothScroll(e, "#union")}>
           <S.GoToUnionText>
             트랙 선택이 고민된다면 <S.OrangeHighlight>Union</S.OrangeHighlight>으로!
           </S.GoToUnionText>

src/pages/Main/Union/Union.tsx

@@ -6,7 +6,7 @@ export default function Union() {
   const { isMobile } = useMediaQueries();
 
   return (
-    <S.Container $isMobile={isMobile}>
+    <S.Container $isMobile={isMobile} id="union">
       <S.IntroduceText $isMobile={isMobile}>
         <p>신입생이라서</p>
         <p>어떤 트랙을 선택할지 고민되나요?</p>