From 2d5db14dfd29689f2211f79446d8ed9ce8ae1af6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=EA=B8=B0=EB=B2=94?=
 <bomi@gwongibeom-ui-MacBookAir.local>
Date: Tue, 31 Oct 2023 01:22:13 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20#8=20-=20=ED=83=AD=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tab/Tab.tsx            |  5 -----
 src/components/Tab/TabItem.tsx        | 10 ----------
 src/components/common/Tab/Tab.tsx     |  9 +++++++++
 src/components/common/Tab/TabItem.tsx | 24 ++++++++++++++++++++++++
 4 files changed, 33 insertions(+), 15 deletions(-)
 delete mode 100644 src/components/Tab/Tab.tsx
 delete mode 100644 src/components/Tab/TabItem.tsx
 create mode 100644 src/components/common/Tab/Tab.tsx
 create mode 100644 src/components/common/Tab/TabItem.tsx

diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx
deleted file mode 100644
index 45ae343a..00000000
--- a/src/components/Tab/Tab.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Tab = () => {
-  return <div></div>
-}
-
-export default Tab
diff --git a/src/components/Tab/TabItem.tsx b/src/components/Tab/TabItem.tsx
deleted file mode 100644
index 16cac156..00000000
--- a/src/components/Tab/TabItem.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-interface TabItemProps {
-  active?: boolean
-  text?: string
-}
-
-const TabItem = ({ active, text }: TabItemProps) => {
-  return <div className={active ? 'active' : ''}>{text}</div>
-}
-
-export default TabItem
diff --git a/src/components/common/Tab/Tab.tsx b/src/components/common/Tab/Tab.tsx
new file mode 100644
index 00000000..165c6f79
--- /dev/null
+++ b/src/components/common/Tab/Tab.tsx
@@ -0,0 +1,9 @@
+interface TabProps {
+  children?: React.ReactNode
+}
+
+const Tab = ({ children }: TabProps) => {
+  return <div className="flex transition ease-in-out">{children}</div>
+}
+
+export default Tab
diff --git a/src/components/common/Tab/TabItem.tsx b/src/components/common/Tab/TabItem.tsx
new file mode 100644
index 00000000..7441ce44
--- /dev/null
+++ b/src/components/common/Tab/TabItem.tsx
@@ -0,0 +1,24 @@
+import { cls } from '@/utils'
+
+interface TabItemProps {
+  active?: boolean
+  text?: string
+  onClick: (_e?: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+const TabItem = ({ active, text, onClick }: TabItemProps) => {
+  return (
+    <div
+      onClick={() => {
+        onClick()
+      }}
+      className={cls(
+        active ? 'border-emerald-500' : 'border-slate-300',
+        `text-gray9 flex w-[100%] cursor-pointer items-center justify-center border-b py-4 font-['Pretendard'] text-sm font-bold transition ease-in-out`,
+      )}>
+      {text}
+    </div>
+  )
+}
+
+export default TabItem