[feat] 스크롤 따라 헤더바 상태 변경되는 것 구현

src/comment/index.jsx

@@ -4,7 +4,7 @@ import { useRef } from "react";
 import useSectionInitialize from "../scroll/useSectionInitialize";
 
 function CommentSection() {
-  const SECTION_IDX = 2;
+  const SECTION_IDX = 3;
   const sectionRef = useRef(null);
   useSectionInitialize(SECTION_IDX, sectionRef);
 

src/detailInformation/index.jsx

@@ -5,7 +5,7 @@ import { useRef } from "react";
 import useSectionInitialize from "../scroll/useSectionInitialize.js";
 
 function DetailInformation() {
-  const SECTION_IDX = 1;
+  const SECTION_IDX = 2;
   const sectionRef = useRef(null);
   useSectionInitialize(SECTION_IDX, sectionRef);
 

src/header/index.jsx

@@ -1,18 +1,25 @@
 import style from "./index.module.css";
 import scrollTo from "../scroll/scrollTo";
 import { useSectionStore } from "../scroll/store";
+import { useEffect, useState } from "react";
 
 export default function Header() {
   const ITEM_WIDTH = 96; // w-24
   const ITEM_GAP = 32; // gap-8
-  const currentSection = useSectionStore((state) => state.currentSection);
+  const isVisibleList = useSectionStore((state) => state.isVisibleList);
+  const [currentSection, setCurrentSection] = useState(0);
   const scrollSectionList = [
     "추첨 이벤트",
     "차량 상세정보",
     "기대평",
     "선착순 이벤트",
   ];
 
+  useEffect(() => {
+    const idx = isVisibleList.findIndex((value) => value === true);
+    setCurrentSection(idx);
+  }, [isVisibleList]);
+
   function gotoTop() {
     window.scrollTo({ top: 0, behavior: "smooth" });
   }
@@ -30,14 +37,14 @@ export default function Header() {
   }
 
   function scrollDynamicStyle() {
-    if (currentSection < 0) return;
-
-    const position = Math.floor(
-      ITEM_WIDTH / 4 + currentSection * (ITEM_WIDTH + ITEM_GAP),
-    );
-    return {
-      "--pos": position,
-    };
+    if (currentSection > 0) {
+      const position = Math.floor(
+        ITEM_WIDTH / 4 + (currentSection - 1) * (ITEM_WIDTH + ITEM_GAP),
+      );
+      return {
+        "--pos": position,
+      };
+    }
   }
 
   return (
@@ -53,16 +60,16 @@ export default function Header() {
         {scrollSectionList.map((scrollSection, index) => (
           <div
             key={index}
-            onClick={() => onClickScrollSection(index)}
-            className={`flex justify-center items-center w-24 cursor-pointer ${currentSection === index ? "text-black" : "text-neutral-300"}`}
+            onClick={() => onClickScrollSection(index + 1)}
+            className={`flex justify-center items-center w-24 cursor-pointer ${currentSection - 1 === index ? "text-black" : "text-neutral-300"}`}
           >
             {scrollSection}
           </div>
         ))}
 
         <div
           style={scrollDynamicStyle()}
-          className={`w-[50px] h-[3px] bg-black transition ease-in-out duration-200 absolute bottom-0 left-0 ${currentSection < 0 ? "hidden" : style.moveBar}`}
+          className={`w-[50px] h-[3px] bg-black transition ease-in-out duration-200 absolute bottom-0 left-0 ${currentSection > 0 ? style.moveBar : "hidden"}`}
         />
       </div>
 

src/interactions/index.jsx

@@ -2,7 +2,7 @@ import { useRef } from "react";
 import useSectionInitialize from "../scroll/useSectionInitialize";
 
 export default function InteractionPage() {
-  const SECTION_IDX = 0;
+  const SECTION_IDX = 1;
   const sectionRef = useRef(null);
   useSectionInitialize(SECTION_IDX, sectionRef);
 

src/scroll/store.js

@@ -1,13 +1,18 @@
 import { create } from "zustand";
 
 export const useSectionStore = create((set) => ({
-  sectionList: [null, null, null, null],
-  currentSection: -1,
-  setCurrentSection: (newSection) => set({ currentSection: newSection }),
+  sectionList: [null, null, null, null, null],
+  isVisibleList: [false, false, false, false, false],
   uploadSection: (index, section) =>
     set((state) => {
       const updatedList = [...state.sectionList];
       updatedList[index] = section;
       return { sectionList: updatedList };
     }),
+  setIsVisibleList: (index, value) =>
+    set((state) => {
+      const updatedList = [...state.isVisibleList];
+      updatedList[index] = value;
+      return { isVisibleList: updatedList };
+    }),
 }));

src/scroll/useSectionInitialize.js

@@ -3,9 +3,7 @@ import { useSectionStore } from "./store";
 
 export default function useSectionInitialize(SECTION_IDX, sectionRef) {
   const uploadSection = useSectionStore((state) => state.uploadSection);
-  const setCurrentSection = useSectionStore((state) => state.setCurrentSection);
-  const currentSection = useSectionStore((state) => state.currentSection);
-
+  const setIsVisibleList = useSectionStore((state) => state.setIsVisibleList);
   useEffect(() => {
     const sectionDOM = sectionRef.current;
     if (sectionDOM) {
@@ -15,12 +13,10 @@ export default function useSectionInitialize(SECTION_IDX, sectionRef) {
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            // 미구현
-          }
+          setIsVisibleList(SECTION_IDX, entry.isIntersecting);
         });
       },
-      { threshold: 0.05 },
+      { threshold: 0.01 },
     );
 
     if (sectionDOM) {
@@ -35,7 +31,6 @@ export default function useSectionInitialize(SECTION_IDX, sectionRef) {
     SECTION_IDX,
     sectionRef,
     uploadSection,
-    setCurrentSection,
-    currentSection,
+    setIsVisibleList,
   ]);
 }

src/simpleInformation/index.jsx

@@ -4,7 +4,7 @@ import ContentSection from "./contentSection";
 import useSectionInitialize from "../scroll/useSectionInitialize";
 
 export default function SimpleInformation() {
-  const SECTION_IDX = -1;
+  const SECTION_IDX = 0;
   const sectionRef = useRef(null);
   const contentList = JSONData.content;
   useSectionInitialize(SECTION_IDX, sectionRef);