feat(shared): Tabs 컴포넌트 내부 배경 색상 추가 (#182)

anifriends · Nov 26, 2023 · 0b240c2 · 0b240c2
1 parent 0b74539
commit 0b240c2
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/packages/shared/components/Tabs.tsx b/packages/shared/components/Tabs.tsx
@@ -4,6 +4,7 @@ import {
   TabPanel,
   TabPanels,
   Tabs as ChakraTabs,
+  useToken,
 } from '@chakra-ui/react';
 import { type ReactNode, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
@@ -20,20 +21,23 @@ export default function Tabs({ tabs }: TabsProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const tabId = Number(searchParams.get('tab'));
   const [tabIndex, setTabIndex] = useState(tabId);
+  const [space3] = useToken('space', [3]);
 
   const handleTabsChange = (index: number) => setTabIndex(index);
 
   const handleSetTabParam = () => setSearchParams({ tab: `${tabIndex}` });
 
   return (
     <ChakraTabs
-      pt={3}
+      mt={3}
       isFitted
       variant="unstyled"
       onChange={handleTabsChange}
       index={tabIndex}
+      h={`calc(100% - ${space3})`}
+      bgColor="gray.50"
     >
-      <TabList>
+      <TabList bgColor="white">
         {tabs.map((tab, index) => (
           <Tab
             color="gray.400"