🐛 bug: fix header animation

:%s

src/components/common/Header/Header.module.scss

@@ -1,10 +1,14 @@
 @import "../../../styles/utilities";
 
 .header {
-  @apply sticky bg-white shadow-md;
+  @apply sticky bg-white;
   top: 0;
+  left: 0;
   z-index: 9999;
   margin-bottom: 3.2rem;
+  @screen md {
+    @apply relative;
+  }
   &.full {
     @apply shadow-none;
     border: 1px solid var(--border-line);
@@ -19,20 +23,25 @@
 }
 
 .headerSticky {
-  position: sticky;
+  @apply sticky bg-white shadow-md;
-  top: 0;
   display: none;
+  padding-left: 3.2rem;
+  padding-right: 3.2rem;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  transition: all 0.2s;
   &.show {
     display: block;
+    animation: showHeaderSticky 0.2s;
   }
 }
 
-// @keyframes showHeaderHightlight {
+@keyframes showHeaderSticky {
-//   0% {
+  0% {
-//       transform: translateY(-4rem);
+    transform: translateY(-7rem);
-//   }
+  }
-//   100% {
+  100% {
-//       transform: none;
+    transform: none;
-//   }
+  }
-// }
+}
-

src/components/common/Header/Header.tsx

@@ -19,7 +19,7 @@ const Header = memo(() => {
 
     const headerHeight = useMemo(() => {
         return headeFullRef.current?.offsetHeight
-    }, [headeFullRef])
+    }, [headeFullRef.current])
 
     useEffect(() => {
         const handleScroll = () => {
@@ -42,15 +42,18 @@ const Header = memo(() => {
             <header ref={headeFullRef} className={classNames({ [s.header]: true, [s.full]: isFullHeader })}>
                 <HeaderHighLight />
                 <div className={s.menu}>
-                    <HeaderMenu isFull={isFullHeader}
+                    <HeaderMenu
+                        isFull={isFullHeader}
                         openModalAuthen={openModalAuthen}
                         openModalInfo={openModalInfo} />
                     <HeaderSubMenu />
                 </div>
             </header>
+
+
             <div className={classNames({
-                headerSticky: true,
+                [s.headerSticky]: true,
-                show: !isFullHeader
+                [s.show]: !isFullHeader
             })}>
                 <HeaderMenu isFull={isFullHeader}
                     openModalAuthen={openModalAuthen}

src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss

@@ -3,9 +3,6 @@
 .headerSubMenu {
     @apply hidden;
     @screen md {
-        transform: translateY(-10rem);
-        height: 0;
-        &.show {
         @apply block;
         padding-bottom: 2.4rem;
         transform: none;
@@ -39,4 +36,3 @@
         }
     }
 }
-}