From 7ff2d99cbb68022d1999add9473f78e7b2fdd97b Mon Sep 17 00:00:00 2001
From: Sungu Kim <108677235+haegu97@users.noreply.github.com>
Date: Wed, 11 Dec 2024 16:17:17 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84[Design]=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EC=83=89=EC=83=81=20=EC=B6=94=EA=B0=80=20#134?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/Button.tsx | 4 +++-
 src/constants/button.ts          | 5 +++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index 03cd6523..e2b2e042 100644
--- a/src/components/button/Button.tsx
+++ b/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;
 
diff --git a/src/constants/button.ts b/src/constants/button.ts
index 6e6f05ed..6c652bdb 100644
--- a/src/constants/button.ts
+++ b/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',

From 597036d892020086bd23ad1119a7e19b0181fb70 Mon Sep 17 00:00:00 2001
From: Sungu Kim <108677235+haegu97@users.noreply.github.com>
Date: Wed, 11 Dec 2024 16:19:23 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F[Refactor]=20SubTab=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD=20#134?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/tab/Tab.test.tsx | 38 ---------------------
 src/components/tab/Tab.tsx      | 60 +++++++++++++++++++++------------
 2 files changed, 38 insertions(+), 60 deletions(-)

diff --git a/src/components/tab/Tab.test.tsx b/src/components/tab/Tab.test.tsx
index 448b641f..41566077 100644
--- a/src/components/tab/Tab.test.tsx
+++ b/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');
-  });
 });
diff --git a/src/components/tab/Tab.tsx b/src/components/tab/Tab.tsx
index 642adc38..83e1c3b6 100644
--- a/src/components/tab/Tab.tsx
+++ b/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>
   );
 }