Design: 스타일링 피드백 반영

HELLO-FIT · Dec 3, 2024 · a3a62cb · a3a62cb
1 parent dd970d2
commit a3a62cb
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/src/components/Layout/TabNav/TabNav.module.scss b/src/components/Layout/TabNav/TabNav.module.scss
@@ -29,12 +29,11 @@
 .tabs {
   display: flex;
   position: relative;
-  gap: 5px;
   border-bottom: 1px solid $gray10;
   padding: 4px 20px 0;
 
   .button {
-    width: 60px;
+    width: 70px;
     padding-bottom: 6px;
     background-color: $white;
     color: $gray50;
@@ -61,7 +60,7 @@
     position: absolute;
     bottom: 0;
     height: 2px;
-    width: 60px;
+    width: 70px;
     background-color: $blue60;
     transform: translateX(0);
     transition:
@@ -73,7 +72,7 @@
     position: absolute;
     bottom: 0;
     height: 2px;
-    width: 60px;
+    width: 70px;
     background-color: $green80;
     transform: translateX(0);
     transition:

diff --git a/src/components/Layout/TabNav/index.tsx b/src/components/Layout/TabNav/index.tsx
@@ -37,7 +37,7 @@ export default function TabNav({ showmenu = true }: TabNavProps) {
   useEffect(() => {
     const tabIndex = tab === 'lesson' ? 0 : 1;
     setUnderlineStyle({
-      transform: `translateX(${tabIndex * 65}px)`,
+      transform: `translateX(${tabIndex * 70}px)`,
       backgroundColor: toggle === 'special' ? '$green80' : '$blue60',
     });
   }, [tab, toggle]);