From 381dd9404bf042f942137e92d8d50560455d756b Mon Sep 17 00:00:00 2001
From: cje <chej098t@gmail.com>
Date: Sun, 31 Mar 2024 23:23:36 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20Switcher=20Tab=20active=20=EC=95=A0?=
 =?UTF-8?q?=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tabs/components/TabsTrigger.tsx | 4 +---
 src/components/Tabs/style.css.ts               | 9 ++++++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Tabs/components/TabsTrigger.tsx b/src/components/Tabs/components/TabsTrigger.tsx
index cfd03b4b..3f16d2c3 100644
--- 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
index 69a8760d..cb9a9876 100644
--- 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)`,
 });