컴포넌트 화면편집기에 배치

frontend/lib/registry/components/TabsRenderer.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import { ComponentData } from "@/types/screen";
+import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+// 탭 컴포넌트 렌더러
+const TabsRenderer: ComponentRenderer = ({ component, children, ...props }) => {
+  const config = component.componentConfig || {};
+  const {
+    tabs = [
+      { id: "tab1", label: "탭 1", content: "첫 번째 탭 내용" },
+      { id: "tab2", label: "탭 2", content: "두 번째 탭 내용" },
+      { id: "tab3", label: "탭 3", content: "세 번째 탭 내용" },
+    ],
+    defaultTab = "tab1",
+    orientation = "horizontal", // horizontal, vertical
+    style = {},
+  } = config;
+
+  return (
+    <div className="h-full w-full p-2" style={style}>
+      <Tabs defaultValue={defaultTab} orientation={orientation} className="h-full">
+        <TabsList className="grid w-full grid-cols-3">
+          {tabs.map((tab: any) => (
+            <TabsTrigger key={tab.id} value={tab.id} className="pointer-events-none" disabled>
+              {tab.label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {tabs.map((tab: any) => (
+          <TabsContent key={tab.id} value={tab.id} className="mt-4 flex-1">
+            {children && React.Children.count(children) > 0 ? (
+              children
+            ) : (
+              <div className="flex h-full items-center justify-center rounded border border-dashed border-gray-300 bg-gray-50">
+                <div className="text-center">
+                  <div className="text-sm text-gray-600">{tab.content}</div>
+                  <div className="mt-1 text-xs text-gray-400">탭 내용 영역</div>
+                </div>
+              </div>
+            )}
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  );
+};
+
+// 레지스트리에 등록
+componentRegistry.register("tabs", TabsRenderer);
+componentRegistry.register("tabs-horizontal", TabsRenderer);
+
+export { TabsRenderer };