fix: top 네이게이션 바의 sub 메뉴 hover시 정상적으로 동작하지 않는 이슈를 수정하라

DNDACADEMY · Jan 13, 2024 · 9f7c24f · 9f7c24f
1 parent 15dca1e
commit 9f7c24f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/components/global/TopNavigationMenu/index.module.scss b/src/components/global/TopNavigationMenu/index.module.scss
@@ -8,19 +8,24 @@
   gap: 8px;
   user-select: none;
   list-style: none;
+  height: 72px;
   margin: 0;
   padding: 0;
 
   .aboutNavItem {
     position: relative;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     .subNav {
       display: flex;
       flex-direction: row;
       height: 70px;
       margin: 0;
       position: fixed;
-      top: 73px;
+      top: 72px;
       left: 0;
       gap: 32px;
       padding: 24px;
@@ -38,6 +43,11 @@
 
       .subNavItem {
         position: relative;
+        transition: color 0.06s ease-in-out;
+
+        &:hover {
+          @include text-color('primary');
+        }
 
         &.activeSub::before {
           content: '';

diff --git a/src/components/global/TopNavigationMenu/index.tsx b/src/components/global/TopNavigationMenu/index.tsx
@@ -20,7 +20,9 @@ function TopNavigationMenu() {
   const isActivePathname = (targetPathname: Route) => targetPathname === pathname;
 
   return (
-    <ul className={styles.topNavigationMenuWrapper}>
+    <ul
+      className={styles.topNavigationMenuWrapper}
+    >
       <li>
         <Link href="/" className={clsx(isActivePathname('/') && styles.active)}>
           홈
@@ -33,11 +35,11 @@ function TopNavigationMenu() {
       </li>
       <li
         className={styles.aboutNavItem}
-        onMouseEnter={() => setIsVisibleSubNav(true)}
         onMouseLeave={() => setIsVisibleSubNav(false)}
       >
         <Link
           href="/dnd/about"
+          onMouseEnter={() => setIsVisibleSubNav(true)}
           className={clsx(isDNDPathname && styles.active)}
         >
           DND