diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS deleted file mode 100644 index 740f3915..00000000 --- a/.github/CODEOWNERS +++ /dev/null @@ -1 +0,0 @@ -* @wonjin-dev @dmswl98 @dongkyun-dev 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 && ( )} - {isActiveSwitcherTab && ( - - )} + {isActiveSwitcherTab &&
} ); }; 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)`, });