[feat] 스크롤 관련 구현

src/App.jsx

@@ -7,6 +7,7 @@ import CommentSection from "./comment";
 import QnA from "./qna";
 import Footer from "./footer";
 import Modal from "./modal/modal.jsx";
+import InteractionPage from "./interactions";
 
 function App() {
   useEffect(() => {
@@ -19,6 +20,7 @@ function App() {
       <IntroSection />
       <Header />
       <SimpleInformation />
+      <InteractionPage />
       <DetailInformation />
       <CommentSection />
       <QnA />

src/comment/index.jsx

@@ -1,9 +1,18 @@
 import CommentCarousel from "./commentCarousel";
 import decoration from "./assets/decoration.svg";
+import { useRef } from "react";
+import useSectionInitialize from "../scroll/useSectionInitialize";
 
 function CommentSection() {
+  const SECTION_IDX = 2;
+  const sectionRef = useRef(null);
+  useSectionInitialize(SECTION_IDX, sectionRef);
+
   return (
-    <section className="w-full flex flex-col items-center py-24 lg:py-60 gap-40">
+    <section
+      ref={sectionRef}
+      className="w-full flex flex-col items-center py-24 lg:py-60 gap-40"
+    >
       <div className="w-full flex flex-col items-center">
         <div className="relative flex flex-col gap-3 lg:gap-9 text-center font-bold items-center">
           <p className="text-body-m text-neutral-600 w-fit py-3 lg:py-5">

src/detailInformation/index.jsx

@@ -1,10 +1,19 @@
 import DetailSwiper from "./DetailSwiper.jsx";
 import content from "./content.json";
 import decoration from "./assets/decoration.svg";
+import { useRef } from "react";
+import useSectionInitialize from "../scroll/useSectionInitialize.js";
 
 function DetailInformation() {
+  const SECTION_IDX = 1;
+  const sectionRef = useRef(null);
+  useSectionInitialize(SECTION_IDX, sectionRef);
+
   return (
-    <section className="w-full flex flex-col items-center py-24 lg:py-60 gap-16 lg:gap-40">
+    <section
+      ref={sectionRef}
+      className="w-full flex flex-col items-center py-24 lg:py-60 gap-16 lg:gap-40"
+    >
       <div className="relative flex flex-col gap-3 lg:gap-9 text-center font-bold items-center">
         <p className="text-body-m text-neutral-600 w-fit py-3 lg:py-5">
           차량 상세 정보

src/header/index.jsx

@@ -1,10 +1,11 @@
-import { useState } from "react";
 import style from "./index.module.css";
+import scrollTo from "../scroll/scrollTo";
+import { useSectionStore } from "../scroll/store";
 
 export default function Header() {
   const ITEM_WIDTH = 96; // w-24
   const ITEM_GAP = 32; // gap-8
-  const [scrollState, setScrollState] = useState(-1);
+  const currentSection = useSectionStore((state) => state.currentSection);
   const scrollSectionList = [
     "추첨 이벤트",
     "차량 상세정보",
@@ -17,12 +18,8 @@ export default function Header() {
   }
 
   function onClickScrollSection(index) {
-    /*
-     *  클릭시 하단의 다양한 영역으로 스크롤되는 코드 미작성
-     */
-
-    if (index !== scrollState) {
-      setScrollState(index);
+    if (index !== currentSection) {
+      scrollTo(index);
     }
   }
 
@@ -33,10 +30,10 @@ export default function Header() {
   }
 
   function scrollDynamicStyle() {
-    if (scrollState < 0) return;
+    if (currentSection < 0) return;
 
     const position = Math.floor(
-      ITEM_WIDTH / 4 + scrollState * (ITEM_WIDTH + ITEM_GAP),
+      ITEM_WIDTH / 4 + currentSection * (ITEM_WIDTH + ITEM_GAP),
     );
     return {
       "--pos": position,
@@ -57,15 +54,15 @@ export default function Header() {
           <div
             key={index}
             onClick={() => onClickScrollSection(index)}
-            className={`flex justify-center items-center w-24 cursor-pointer ${scrollState === index ? "text-black" : "text-neutral-300"}`}
+            className={`flex justify-center items-center w-24 cursor-pointer ${currentSection === 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 ${scrollState < 0 ? "hidden" : style.moveBar}`}
+          className={`w-[50px] h-[3px] bg-black transition ease-in-out duration-200 absolute bottom-0 left-0 ${currentSection < 0 ? "hidden" : style.moveBar}`}
         />
       </div>
 

src/interactions/index.jsx

@@ -0,0 +1,10 @@
+import { useRef } from "react";
+import useSectionInitialize from "../scroll/useSectionInitialize";
+
+export default function InteractionPage() {
+  const SECTION_IDX = 0;
+  const sectionRef = useRef(null);
+  useSectionInitialize(SECTION_IDX, sectionRef);
+
+  return <div ref={sectionRef} className="bg-black h-[2017px]"></div>;
+}

src/introSection/index.jsx

@@ -74,7 +74,7 @@ function IntroSection() {
 
   return (
     <>
-      <div ref={introRef} className="flex flex-col items-center">
+      <section ref={introRef} className="flex flex-col items-center">
         <div className="z-50 fixed w-full flex justify-center top-[500px] -translate-y-1/2 pointer-events-none">
           <h1
             className={`${style.openTitle} ease-in text-8xl font-bold text-black  z-50`}
@@ -118,7 +118,7 @@ function IntroSection() {
           alt="다음으로 넘어가기"
           className="pt-32 pb-32 animate-bounce"
         />
-      </div>
+      </section>
 
       <div
         onClick={onClickTimer}

src/scroll/scrollTo.js

@@ -0,0 +1,7 @@
+import { useSectionStore } from "./store";
+
+export default function scrollTo(scrollIndex) {
+  const state = useSectionStore.getState();
+  const sectionDOM = state.sectionList[scrollIndex];
+  sectionDOM.scrollIntoView({ behavior: "smooth" });
+}

src/scroll/store.js

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

src/scroll/useSectionInitialize.js

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+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);
+
+  useEffect(() => {
+    const sectionDOM = sectionRef.current;
+    if (sectionDOM) {
+      uploadSection(SECTION_IDX, sectionRef.current);
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            // 미구현
+          }
+        });
+      },
+      { threshold: 0.05 },
+    );
+
+    if (sectionDOM) {
+      observer.observe(sectionDOM);
+    }
+    return () => {
+      if (sectionDOM) {
+        observer.unobserve(sectionDOM);
+      }
+    };
+  }, [
+    SECTION_IDX,
+    sectionRef,
+    uploadSection,
+    setCurrentSection,
+    currentSection,
+  ]);
+}

src/simpleInformation/index.jsx

@@ -1,11 +1,16 @@
+import { useRef } from "react";
 import JSONData from "./contentList.json";
 import ContentSection from "./contentSection";
+import useSectionInitialize from "../scroll/useSectionInitialize";
 
 export default function SimpleInformation() {
+  const SECTION_IDX = -1;
+  const sectionRef = useRef(null);
   const contentList = JSONData.content;
+  useSectionInitialize(SECTION_IDX, sectionRef);
 
   return (
-    <div className="w-full p-6 flex justify-center ">
+    <section ref={sectionRef} className="w-full p-6 flex justify-center ">
       <div className="w-full max-w-[1200px] flex flex-col gap-20 md:gap-30 lg:gap-40">
         <div className="flex flex-col text-black font-bold pt-[240px]">
           <span className="text-title-s md:text-title-m">
@@ -19,6 +24,6 @@ export default function SimpleInformation() {
           <ContentSection key={index} content={content} />
         ))}
       </div>
-    </div>
+    </section>
   );
 }