🐛 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;
-  top: 0;
+  @apply sticky bg-white shadow-md;
   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 {
-//   0% {
-//       transform: translateY(-4rem);
-//   }
-//   100% {
-//       transform: none;
-//   }
-// }
-
+@keyframes showHeaderSticky {
+  0% {
+    transform: translateY(-7rem);
+  }
+  100% {
+    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/>
+                    <HeaderSubMenu />
                 </div>
             </header>
+
+
             <div className={classNames({
-                headerSticky: true,
-                show: !isFullHeader
+                [s.headerSticky]: true,
+                [s.show]: !isFullHeader
             })}>
                 <HeaderMenu isFull={isFullHeader}
                     openModalAuthen={openModalAuthen}

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

@@ -3,38 +3,34 @@
 .headerSubMenu {
     @apply hidden;
     @screen md {
-        transform: translateY(-10rem);
-        height: 0;
-        &.show {
-            @apply block;
-            padding-bottom: 2.4rem;
-            transform: none;
-            height: unset;
+        @apply block;
+        padding-bottom: 2.4rem;
+        transform: none;
+        height: unset;
+        @screen lg {
+            @apply flex justify-between items-center;
+        }
+        .menu {
+            @apply flex items-center list-none;
+            margin-bottom: 2.4rem;
             @screen lg {
-                @apply flex justify-between items-center;
+                margin-bottom: 0;
             }
-            .menu {
-                @apply flex items-center list-none;
-                margin-bottom: 2.4rem;
-                @screen lg {
-                    margin-bottom: 0;
+            li {
+                &:not(:last-child) {
+                    margin-right: 2.4rem;
+                    @screen lg {
+                        margin-right: 4rem;
+                    }
                 }
-                li {
-                    &:not(:last-child) {
-                        margin-right: 2.4rem;
-                        @screen lg {
-                            margin-right: 4rem;
-                        }
-                    }
-                    a {
-                        @appy no-underline;
-                    }
-                    &:hover {
-                        @apply text-primary;
-                    }
-                    &.active {
-                        @apply text-primary;
-                    }
+                a {
+                    @appy no-underline;
+                }
+                &:hover {
+                    @apply text-primary;
+                }
+                &.active {
+                    @apply text-primary;
                 }
             }
         }