fix: 스크롤시 메인 마진 추가

Taekgil99 · Nov 13, 2022 · ce14b47 · ce14b47
1 parent 94ecd9b
commit ce14b47
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/client/src/components/main/css/main.scss b/client/src/components/main/css/main.scss
@@ -6,5 +6,4 @@ main{
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid black;
 }
diff --git a/client/src/components/main/js/Main.js b/client/src/components/main/js/Main.js
@@ -1,10 +1,29 @@
 import '../css/main.scss';
 import { Outlet } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 
 export default function Main() {
+  const [fixNav, setFixNav] = useState({});
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll, { capture: true }); // 스크롤 이벤트 등록
+    return () => {
+      window.removeEventListener('scroll', handleScroll); // 스크롤 이벤트 등록 제거(성능저하방지)
+    };
+  }, []);
+
+  const handleScroll = () => {
+    if (scrollY > 120) {
+      setFixNav({
+        marginTop: '70px',
+      });
+    } else {
+      setFixNav({});
+    }
+  };
+
   return (
     <>
-      <main>
+      <main style={fixNav}>
         <Outlet />
       </main>
     </>