diff --git a/src/comment/index.jsx b/src/comment/index.jsx index 68b3750e..685abab3 100644 --- a/src/comment/index.jsx +++ b/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); diff --git a/src/detailInformation/index.jsx b/src/detailInformation/index.jsx index 422d31ec..1d4f6ea7 100644 --- a/src/detailInformation/index.jsx +++ b/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); diff --git a/src/header/index.jsx b/src/header/index.jsx index fc700b90..31ab5fc2 100644 --- a/src/header/index.jsx +++ b/src/header/index.jsx @@ -5,7 +5,9 @@ import { useSectionStore } from "../scroll/store"; export default function Header() { const ITEM_WIDTH = 96; // w-24 const ITEM_GAP = 32; // gap-8 - const currentSection = useSectionStore((state) => state.currentSection); + const currentSection = useSectionStore((state) => { + return state.isVisibleList.findIndex((value) => value === true); + }); const scrollSectionList = [ "추첨 이벤트", "차량 상세정보", @@ -30,10 +32,10 @@ export default function Header() { } function scrollDynamicStyle() { - if (currentSection < 0) return; + if (currentSection <= 0) return; const position = Math.floor( - ITEM_WIDTH / 4 + currentSection * (ITEM_WIDTH + ITEM_GAP), + ITEM_WIDTH / 4 + (currentSection - 1) * (ITEM_WIDTH + ITEM_GAP), ); return { "--pos": position, @@ -53,8 +55,8 @@ export default function Header() { {scrollSectionList.map((scrollSection, index) => (
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}
@@ -62,7 +64,7 @@ export default function Header() {
0 ? style.moveBar : "hidden"}`} />
diff --git a/src/interactions/index.jsx b/src/interactions/index.jsx index 28748671..ce5f6954 100644 --- a/src/interactions/index.jsx +++ b/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); diff --git a/src/scroll/store.js b/src/scroll/store.js index 30a40a18..96c2c8d0 100644 --- a/src/scroll/store.js +++ b/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 }; + }), })); diff --git a/src/scroll/useSectionInitialize.js b/src/scroll/useSectionInitialize.js index ef9f34d8..a4aef911 100644 --- a/src/scroll/useSectionInitialize.js +++ b/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, ]); } diff --git a/src/simpleInformation/index.jsx b/src/simpleInformation/index.jsx index 666bb0c4..52f5a999 100644 --- a/src/simpleInformation/index.jsx +++ b/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);