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