[Fix/BAR-282] Switcher Tab active 애니메이션 수정 (#101)

* chore: codeowners 제거 * fix: Switcher Tab active 애니메이션 수정
YAPP-Github · Apr 1, 2024 · d44bcb0 · d44bcb0
1 parent d2daefc
commit d44bcb0
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
diff --git a/src/components/Tabs/components/TabsTrigger.tsx b/src/components/Tabs/components/TabsTrigger.tsx
@@ -45,9 +45,7 @@ const TabsTrigger = ({
       {isActiveFilterTab && (
         <motion.div className={styles.underline} layoutId="underline" />
       )}
-      {isActiveSwitcherTab && (
-        <motion.div className={styles.handle} layoutId="handle" />
-      )}
+      {isActiveSwitcherTab && <div className={styles.handle} />}
     </li>
   );
 };

diff --git a/src/components/Tabs/style.css.ts b/src/components/Tabs/style.css.ts
@@ -1,9 +1,14 @@
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { COLORS } from '@styles/tokens';
 import * as utils from '@styles/utils.css';
 
+const fadeIn = keyframes({
+  '0%': { opacity: 0 },
+  '100%': { opacity: 1 },
+});
+
 export const tab = style({
   width: '100%',
 });
@@ -15,6 +20,7 @@ export const tabsList = recipe({
   variants: {
     type: {
       switcher: {
+        width: 'fit-content',
         justifyContent: 'center',
         borderRadius: '100px',
         backgroundColor: COLORS['Grey/200'],
@@ -111,4 +117,5 @@ export const handle = style({
   borderRadius: '100px',
   backgroundColor: COLORS['Grey/White'],
   border: `1.5px solid ${COLORS['Blue/Default']}`,
+  animation: `${fadeIn} 450ms cubic-bezier(0.4, 0, 0.6, 1)`,
 });