[fix] 화면 길이가 변경될 때 실시간 반영

softeerbootcamp4th · Jul 30, 2024 · 4ef1ba6 · 4ef1ba6
1 parent 395fb14
commit 4ef1ba6
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/src/header/index.jsx b/src/header/index.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import style from "./index.module.css";
 
 export default function Header() {
@@ -11,12 +11,17 @@ export default function Header() {
     "선착순 이벤트",
   ];
 
-  useEffect(() => {
+  function updatePositions() {
     const browserHalfWidth = window.innerWidth / 2;
     const newPositionList = [browserHalfWidth - 224, browserHalfWidth - 96, browserHalfWidth + 32, browserHalfWidth + 160];
-
     setPositionList(newPositionList);
-  }, [scrollState]);
+  };
+
+  useEffect(() => {
+    updatePositions();
+    window.addEventListener('resize', () => updatePositions());
+    return () => window.removeEventListener('resize', () => updatePositions());
+  }, []);
 
   function gotoTop() {
     window.scrollTo({ top: 0, behavior: "smooth" });
@@ -57,7 +62,7 @@ export default function Header() {
           <div
             key={index}
             onClick={() => onClickScrollSection(index)}
-            className={`flex justify-center items-center w-24 cursor-pointer border border-red-500 ${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}
           </div>