From d41ffe5cc7522a081267b8793fc11a99fdc7b39b Mon Sep 17 00:00:00 2001 From: darkdulgi Date: Wed, 31 Jul 2024 10:16:35 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[chore]=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EC=B4=88=EA=B8=B0=EC=83=81=ED=83=9C=EB=A5=BC=20null=EC=97=90?= =?UTF-8?q?=EC=84=9C=20-1=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/header/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/header/index.jsx b/src/header/index.jsx index d93137f9..2e667f78 100644 --- a/src/header/index.jsx +++ b/src/header/index.jsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; import style from "./index.module.css"; export default function Header() { - const [scrollState, setScrollState] = useState(null); + const [scrollState, setScrollState] = useState(-1); const [positionList, setPositionList] = useState([]); const scrollSectionList = [ "추첨 이벤트", @@ -44,7 +44,7 @@ export default function Header() { } function scrollDynamicStyle() { - if (scrollState === null) return; + if (scrollState < 0) return; const position = Math.floor(positionList[scrollState]); return { "--pos": position, From 87049491f2101e62259d45cc8edf3b6b9e0865a6 Mon Sep 17 00:00:00 2001 From: darkdulgi Date: Wed, 31 Jul 2024 10:35:19 +0900 Subject: [PATCH 2/5] =?UTF-8?q?[refactor]=20=EC=9B=80=EC=A7=81=EC=9D=B4?= =?UTF-8?q?=EB=8A=94=20=EB=B0=94=20=EC=9C=84=EC=B9=98=EB=A5=BC=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EC=A0=84=EC=B1=84=EA=B0=80=20=EC=95=84=EB=8B=8C=20?= =?UTF-8?q?=EB=B6=80=EB=AA=A8=20=EB=9E=98=ED=8D=BC=EB=A5=BC=20=EA=B8=B0?= =?UTF-8?q?=EC=A4=80=EC=9C=BC=EB=A1=9C=20=EA=B3=84=EC=82=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/header/index.jsx | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/header/index.jsx b/src/header/index.jsx index 2e667f78..c96d4e95 100644 --- a/src/header/index.jsx +++ b/src/header/index.jsx @@ -2,6 +2,8 @@ import { useEffect, useState } from "react"; import style from "./index.module.css"; export default function Header() { + const ITEM_WIDTH = 96; + const ITEM_GAP = 32; const [scrollState, setScrollState] = useState(-1); const [positionList, setPositionList] = useState([]); const scrollSectionList = [ @@ -12,15 +14,18 @@ export default function Header() { ]; function updatePositions() { - const browserHalfWidth = window.innerWidth / 2; - const newPositionList = [browserHalfWidth - 224, browserHalfWidth - 96, browserHalfWidth + 32, browserHalfWidth + 160]; + let newPositionList = []; + for (let i = 0; i < scrollSectionList.length; i++) { + newPositionList[i] = ITEM_WIDTH / 4 + i * (ITEM_WIDTH + ITEM_GAP); + } + setPositionList(newPositionList); - }; + } useEffect(() => { updatePositions(); - window.addEventListener('resize', () => updatePositions()); - return () => window.removeEventListener('resize', () => updatePositions()); + window.addEventListener("resize", () => updatePositions()); + return () => window.removeEventListener("resize", () => updatePositions()); }, []); function gotoTop() { @@ -53,16 +58,19 @@ export default function Header() { return (
- + The new IONIQ 5 -
+
{scrollSectionList.map((scrollSection, index) => (
onClickScrollSection(index)} - className={`flex justify-center items-center w-24 cursor-pointer ${scrollState === index ? "text-black" : "text-neutral-300"}`} + className={`border border-red-500 flex justify-center items-center w-[${ITEM_WIDTH}px] cursor-pointer ${scrollState === index ? "text-black" : "text-neutral-300"}`} > {scrollSection}
@@ -70,7 +78,7 @@ export default function Header() {
From 170c9097a5d3282cd5807af36cc374168fe5717f Mon Sep 17 00:00:00 2001 From: darkdulgi Date: Wed, 31 Jul 2024 11:01:17 +0900 Subject: [PATCH 3/5] =?UTF-8?q?[fix]=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/header/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/header/index.jsx b/src/header/index.jsx index c96d4e95..12a514a9 100644 --- a/src/header/index.jsx +++ b/src/header/index.jsx @@ -65,12 +65,12 @@ export default function Header() { The new IONIQ 5 -
+
{scrollSectionList.map((scrollSection, index) => (
onClickScrollSection(index)} - className={`border border-red-500 flex justify-center items-center w-[${ITEM_WIDTH}px] cursor-pointer ${scrollState === index ? "text-black" : "text-neutral-300"}`} + className={`flex justify-center items-center w-24 cursor-pointer ${scrollState === index ? "text-black" : "text-neutral-300"}`} > {scrollSection}
From b1ef677cdc5acc6e0bef6e85287b76838014ffc1 Mon Sep 17 00:00:00 2001 From: darkdulgi Date: Wed, 31 Jul 2024 11:42:54 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[refactor]=20=EA=B2=80=EC=A0=95=EB=B0=94=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=EC=9D=98=20=EC=A2=8C=ED=91=9C=EA=B0=92?= =?UTF-8?q?=EC=9D=84=20=EB=8D=94=20=EC=9D=B4=EC=83=81=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=EB=A1=9C=20=EA=B4=80=EB=A6=AC=ED=95=98=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EC=9D=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/header/index.jsx | 29 +++++++++-------------------- 1 file changed, 9 insertions(+), 20 deletions(-) diff --git a/src/header/index.jsx b/src/header/index.jsx index 12a514a9..4d104b6a 100644 --- a/src/header/index.jsx +++ b/src/header/index.jsx @@ -1,11 +1,10 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; import style from "./index.module.css"; export default function Header() { - const ITEM_WIDTH = 96; - const ITEM_GAP = 32; + const ITEM_WIDTH = 96; // w-24 + const ITEM_GAP = 32; // gap-8 const [scrollState, setScrollState] = useState(-1); - const [positionList, setPositionList] = useState([]); const scrollSectionList = [ "추첨 이벤트", "차량 상세정보", @@ -13,21 +12,6 @@ export default function Header() { "선착순 이벤트", ]; - function updatePositions() { - let newPositionList = []; - for (let i = 0; i < scrollSectionList.length; i++) { - newPositionList[i] = ITEM_WIDTH / 4 + i * (ITEM_WIDTH + ITEM_GAP); - } - - setPositionList(newPositionList); - } - - useEffect(() => { - updatePositions(); - window.addEventListener("resize", () => updatePositions()); - return () => window.removeEventListener("resize", () => updatePositions()); - }, []); - function gotoTop() { window.scrollTo({ top: 0, behavior: "smooth" }); } @@ -50,7 +34,12 @@ export default function Header() { function scrollDynamicStyle() { if (scrollState < 0) return; - const position = Math.floor(positionList[scrollState]); + let newPositionList = []; + for (let i = 0; i < scrollSectionList.length; i++) { + newPositionList[i] = ITEM_WIDTH / 4 + i * (ITEM_WIDTH + ITEM_GAP); + } + + const position = Math.floor(newPositionList[scrollState]); return { "--pos": position, }; From a834e821dff795b9c6607a6d36e011f409c5e84c Mon Sep 17 00:00:00 2001 From: darkdulgi Date: Wed, 31 Jul 2024 12:11:41 +0900 Subject: [PATCH 5/5] =?UTF-8?q?[refactor]=20=EB=B0=B0=EC=97=B4=20=EC=93=B0?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EA=B3=A0=20=EA=B3=84=EC=82=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/header/index.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/header/index.jsx b/src/header/index.jsx index 4d104b6a..8fd2cc9c 100644 --- a/src/header/index.jsx +++ b/src/header/index.jsx @@ -34,12 +34,10 @@ export default function Header() { function scrollDynamicStyle() { if (scrollState < 0) return; - let newPositionList = []; - for (let i = 0; i < scrollSectionList.length; i++) { - newPositionList[i] = ITEM_WIDTH / 4 + i * (ITEM_WIDTH + ITEM_GAP); - } - const position = Math.floor(newPositionList[scrollState]); + const position = Math.floor( + ITEM_WIDTH / 4 + scrollState * (ITEM_WIDTH + ITEM_GAP), + ); return { "--pos": position, };