💄[Design] Sub_Tab 디자인 변경

src/components/button/Button.tsx

@@ -10,6 +10,7 @@ interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
     | 'green-normal-01'
     | 'green-light-03'
     | 'gray-normal-03'
+    | 'gray-normal-02'
     | 'gray-darker';
   isSubmitting?: boolean;
 }
@@ -40,7 +41,8 @@ export default function Button({
     type TextClassType =
       | 'text-green-normal-01'
       | 'text-gray-darker'
-      | 'text-white';
+      | 'text-white'
+      | 'text-gray-dark-02';
 
     let textClass: TextClassType = color.text;
 

src/components/tab/Tab.test.tsx

@@ -25,20 +25,6 @@ describe('Tab 컴포넌트', () => {
     });
   });
 
-  it('활성화된 탭은 올바른 스타일이 적용되어야 한다', () => {
-    render(
-      <Tab
-        items={items}
-        activeTab="탭1"
-        onTabChange={mockOnTabChange}
-        tabType="MAIN_TAB"
-      />,
-    );
-
-    const activeTab = screen.getByText('탭1');
-    expect(activeTab).toHaveClass('border-green-dark-01', 'text-green-dark-01');
-  });
-
   it('탭 클릭시 onTabChange가 호출되어야 한다', () => {
     render(
       <Tab
@@ -54,28 +40,4 @@ describe('Tab 컴포넌트', () => {
 
     expect(mockOnTabChange).toHaveBeenCalledWith('탭2');
   });
-
-  it('tabType에 따라 올바른 텍스트 크기가 적용되어야 한다', () => {
-    const { rerender } = render(
-      <Tab
-        items={items}
-        activeTab="탭1"
-        onTabChange={mockOnTabChange}
-        tabType="MAIN_TAB"
-      />,
-    );
-
-    expect(screen.getByText('탭1')).toHaveClass('text-xl');
-
-    rerender(
-      <Tab
-        items={items}
-        activeTab="탭1"
-        onTabChange={mockOnTabChange}
-        tabType="SUB_TAB"
-      />,
-    );
-
-    expect(screen.getByText('탭1')).toHaveClass('text-lg');
-  });
 });

src/components/tab/Tab.tsx

@@ -1,4 +1,5 @@
 import { TabType } from '@/constants/tabs';
+import Button from '@/components/button/Button';
 
 interface TabProps<T extends string> {
   items: readonly T[];
@@ -7,36 +8,51 @@ interface TabProps<T extends string> {
   tabType: TabType;
 }
 
+const getTabStyles = {
+  main: {
+    base: 'text-xl border-b-2 rounded-none px-4 py-2  transition-all',
+    active: 'border-green-dark-01 text-green-dark-01',
+    inactive: 'border-transparent text-gray-dark-02 hover:text-green-dark-01',
+  },
+  container: 'flex gap-2',
+};
+
 function Tab<T extends string>({
   items,
   activeTab,
   onTabChange,
   tabType,
 }: TabProps<T>) {
-  const getTabStyle = () => {
-    switch (tabType) {
-      case 'MAIN_TAB':
-        return 'text-xl';
-      case 'SUB_TAB':
-        return 'text-lg';
-    }
-  };
+  const renderMainTab = (item: T) => (
+    <button
+      key={item}
+      onClick={() => onTabChange(item)}
+      className={`${getTabStyles.main.base} ${
+        activeTab === item
+          ? getTabStyles.main.active
+          : getTabStyles.main.inactive
+      }`}
+    >
+      {item}
+    </button>
+  );
+
+  const renderSubTab = (item: T) => (
+    <Button
+      key={item}
+      text={item}
+      size="modal"
+      fillType="outline"
+      themeColor={activeTab === item ? 'green-normal-01' : 'gray-normal-02'}
+      onClick={() => onTabChange(item)}
+    />
+  );
 
   return (
-    <div className="flex border-b border-gray-dark-02">
-      {items.map((item) => (
-        <button
-          key={item}
-          onClick={() => onTabChange(item)}
-          className={`${getTabStyle()} px-4 py-2 font-semibold hover:scale-105 ${
-            activeTab === item
-              ? 'border-b-2 border-green-dark-01 text-green-dark-01'
-              : 'text-gray-dark-02'
-          }`}
-        >
-          {item}
-        </button>
-      ))}
+    <div className={getTabStyles.container}>
+      {items.map((item) =>
+        tabType === 'SUB_TAB' ? renderSubTab(item) : renderMainTab(item),
+      )}
     </div>
   );
 }

src/constants/button.ts

@@ -28,6 +28,11 @@ export const COLOR_GROUPS = {
     text: 'text-gray-darker',
     border: 'border-gray-darker',
   },
+  'gray-normal-02': {
+    bg: 'bg-gray-normal-02',
+    text: 'text-gray-dark-02',
+    border: 'border-gray-normal-02',
+  },
   'gray-darker': {
     bg: 'bg-gray-darker',
     text: 'text-gray-darker',