From 1729483ba7bf24e84d0507229ce85ec6b04c7a91 Mon Sep 17 00:00:00 2001 From: darkdulgi Date: Mon, 5 Aug 2024 22:42:17 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[feat]=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EB=94=B0=EB=9D=BC=20=ED=97=A4=EB=8D=94=EB=B0=94=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=20=EB=B3=80=EA=B2=BD=EB=90=98=EB=8A=94=20=EA=B2=83=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/comment/index.jsx | 2 +- src/detailInformation/index.jsx | 2 +- src/header/index.jsx | 31 ++++++++++++++++++------------ src/interactions/index.jsx | 2 +- src/scroll/store.js | 11 ++++++++--- src/scroll/useSectionInitialize.js | 13 ++++--------- src/simpleInformation/index.jsx | 2 +- 7 files changed, 35 insertions(+), 28 deletions(-) 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..1b6db411 100644 --- a/src/header/index.jsx +++ b/src/header/index.jsx @@ -1,11 +1,13 @@ 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 = [ "추첨 이벤트", "차량 상세정보", @@ -13,6 +15,11 @@ export default function Header() { "선착순 이벤트", ]; + 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,8 +60,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 +69,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); From a145d9382302be61002a27e1297f6ef5f64bc165 Mon Sep 17 00:00:00 2001 From: darkdulgi Date: Tue, 6 Aug 2024 10:19:12 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[refactor]=20=EB=A6=AC=ED=8C=A9=ED=84=B0?= =?UTF-8?q?=EB=A7=81=20=EC=95=BD=EA=B0=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/header/index.jsx | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/src/header/index.jsx b/src/header/index.jsx index 1b6db411..31ab5fc2 100644 --- a/src/header/index.jsx +++ b/src/header/index.jsx @@ -1,13 +1,13 @@ 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 isVisibleList = useSectionStore((state) => state.isVisibleList); - const [currentSection, setCurrentSection] = useState(0); + const currentSection = useSectionStore((state) => { + return state.isVisibleList.findIndex((value) => value === true); + }); const scrollSectionList = [ "추첨 이벤트", "차량 상세정보", @@ -15,11 +15,6 @@ export default function Header() { "선착순 이벤트", ]; - useEffect(() => { - const idx = isVisibleList.findIndex((value) => value === true); - setCurrentSection(idx); - }, [isVisibleList]); - function gotoTop() { window.scrollTo({ top: 0, behavior: "smooth" }); } @@ -37,14 +32,14 @@ export default function Header() { } function scrollDynamicStyle() { - if (currentSection > 0) { - const position = Math.floor( - ITEM_WIDTH / 4 + (currentSection - 1) * (ITEM_WIDTH + ITEM_GAP), - ); - return { - "--pos": position, - }; - } + if (currentSection <= 0) return; + + const position = Math.floor( + ITEM_WIDTH / 4 + (currentSection - 1) * (ITEM_WIDTH + ITEM_GAP), + ); + return { + "--pos": position, + }; } return (