feat: ComponentDetailTabs 분리

GDSC-Hongik · Dec 29, 2024 · 3c5fbb7 · 3c5fbb7
1 parent 9837091
commit 3c5fbb7
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 18 deletions.
diff --git a/apps/wow-docs/app/component/button/page.tsx b/apps/wow-docs/app/component/button/page.tsx
@@ -1,12 +1,9 @@
 import Card from "@components/Card";
+import ComponentDetailTabs from "@components/ComponentDetailTabs";
 import Space from "@components/Space";
 import Title from "@components/Text/Title";
 import type { Metadata } from "next/types";
 import Button from "wowds-ui/Button";
-import Tabs from "wowds-ui/Tabs";
-import TabsContent from "wowds-ui/TabsContent";
-import TabsItem from "wowds-ui/TabsItem";
-import TabsList from "wowds-ui/TabsList";
 
 import ComponentTab from "@/component/button/_component/ComponentTab";
 import GuidelineTab from "@/component/button/_component/GuidelineTab";
@@ -30,20 +27,10 @@ const ButtonPage = () => {
         <Button variant="outline">Button1</Button>
       </Card>
       <Space height={92} />
-      <Tabs defaultValue="component">
-        <TabsList>
-          <TabsItem value="component">Component</TabsItem>
-          <TabsItem value="guideline">Guideline</TabsItem>
-          <TabsItem value="code">Code</TabsItem>
-        </TabsList>
-        <TabsContent value="component">
-          <ComponentTab />
-        </TabsContent>
-        <TabsContent value="guideline">
-          <GuidelineTab />
-        </TabsContent>
-        <TabsContent value="code"></TabsContent>
-      </Tabs>
+      <ComponentDetailTabs
+        componentTab={<ComponentTab />}
+        guidelineTab={<GuidelineTab />}
+      />
     </>
   );
 };

diff --git a/apps/wow-docs/components/ComponentDetailTabs.tsx b/apps/wow-docs/components/ComponentDetailTabs.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Tabs from "wowds-ui/Tabs";
+import TabsContent from "wowds-ui/TabsContent";
+import TabsItem from "wowds-ui/TabsItem";
+import TabsList from "wowds-ui/TabsList";
+
+interface ComponentTabsProps {
+  componentTab?: ReactNode;
+  guidelineTab?: ReactNode;
+  codeTab?: ReactNode;
+}
+
+const ComponentDetailTabs = ({
+  componentTab,
+  guidelineTab,
+  codeTab,
+}: ComponentTabsProps) => {
+  return (
+    <Tabs defaultValue="component">
+      <TabsList>
+        <TabsItem value="component">Component</TabsItem>
+        <TabsItem value="guideline">Guideline</TabsItem>
+        <TabsItem value="code">Code</TabsItem>
+      </TabsList>
+      <TabsContent value="component">{componentTab}</TabsContent>
+      <TabsContent value="guideline">{guidelineTab}</TabsContent>
+      <TabsContent value="code">{codeTab}</TabsContent>
+    </Tabs>
+  );
+};
+
+export default ComponentDetailTabs;