From 54803e406130f2fd65c504cebfb31bce54919165 Mon Sep 17 00:00:00 2001
From: YangJinSoo94 <jschrome782@gmail.com>
Date: Mon, 24 Mar 2025 11:06:39 +0900
Subject: [PATCH] =?UTF-8?q?=ED=83=AD=20=EA=B3=B5=ED=86=B5=EC=98=81?=
 =?UTF-8?q?=EC=97=AD=EC=9C=BC=EB=A1=9C=20=EA=B0=9C=EB=B0=9C=20(tabList,=20?=
 =?UTF-8?q?defaultValue=20=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business_components/src/ui/index.ts       |  3 +-
 .../business_components/src/ui/tab/index.tsx  | 36 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 packages/common/business_components/src/ui/tab/index.tsx

diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts
index beec29bf0..430d5edd9 100644
--- a/packages/common/business_components/src/ui/index.ts
+++ b/packages/common/business_components/src/ui/index.ts
@@ -13,4 +13,5 @@ export * from "./main_content_div";
 export * from "./title";
 export * from "./search_form_left";
 export * from "./search_form_right";
-export * from "./table_div";
\ No newline at end of file
+export * from "./table_div";
+export * from "./tab";
\ No newline at end of file
diff --git a/packages/common/business_components/src/ui/tab/index.tsx b/packages/common/business_components/src/ui/tab/index.tsx
new file mode 100644
index 000000000..9d24562f8
--- /dev/null
+++ b/packages/common/business_components/src/ui/tab/index.tsx
@@ -0,0 +1,36 @@
+import { Tabs, TabsList, TabsTrigger } from '@common/components/ui';
+import React from 'react';
+
+interface TabItem {
+  value: string;
+  label: string;
+}
+
+interface UITabProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: string;
+  tabList: TabItem[];
+  children: React.ReactNode;
+}
+
+const UITab  = React.forwardRef<
+  HTMLDivElement,
+  UITabProps
+>(({defaultValue, tabList, children}, ref)=>{
+    return (
+      <Tabs defaultValue={defaultValue || tabList[0]?.value} className={"w-full space-x-1 border-b border-gray-200"}>
+        <TabsList className="flex space-x-1">
+          {tabList.map((tab) => (
+            <TabsTrigger 
+              key={tab.value}
+              value={tab.value}
+              className="py-2 px-4 text-sm font-medium border-b-2 focus:outline-none data-[state=active]:border-blue-500 data-[state=active]:text-blue-600 data-[state=inactive]:border-transparent data-[state=inactive]:text-gray-500 hover:text-gray-700 hover:border-gray-300"
+            >
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {children}
+      </Tabs>
+    )
+})
+export { UITab };