탭기능 중간커밋

frontend/lib/utils/getComponentConfigPanel.tsx

@@ -42,6 +42,8 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
   // 🆕 섹션 그룹화 레이아웃
   "section-card": () => import("@/lib/registry/components/section-card/SectionCardConfigPanel"),
   "section-paper": () => import("@/lib/registry/components/section-paper/SectionPaperConfigPanel"),
+  // 🆕 탭 컴포넌트
+  "tabs-widget": () => import("@/components/screen/config-panels/TabsConfigPanel"),
 };
 
 // ConfigPanel 컴포넌트 캐시
@@ -76,6 +78,7 @@ export async function getComponentConfigPanel(componentId: string): Promise<Reac
       module.ButtonConfigPanel || // button-primary의 export명
       module.SectionCardConfigPanel || // section-card의 export명
       module.SectionPaperConfigPanel || // section-paper의 export명
+      module.TabsConfigPanel || // tabs-widget의 export명
       module.default;
 
     if (!ConfigPanelComponent) {

frontend/lib/utils/getConfigPanelComponent.tsx

@@ -14,6 +14,7 @@ import { RatingTypeConfigPanel } from "@/components/screen/panels/webtype-config
 import { ButtonConfigPanel as OriginalButtonConfigPanel } from "@/components/screen/config-panels/ButtonConfigPanel";
 import { CardConfigPanel } from "@/components/screen/config-panels/CardConfigPanel";
 import { DashboardConfigPanel } from "@/components/screen/config-panels/DashboardConfigPanel";
+import { TabsConfigPanel } from "@/components/screen/config-panels/TabsConfigPanel";
 
 // 설정 패널 컴포넌트 타입
 export type ConfigPanelComponent = React.ComponentType<{
@@ -83,6 +84,26 @@ const DashboardConfigPanelWrapper: ConfigPanelComponent = ({ config, onConfigCha
   return <DashboardConfigPanel component={mockComponent as any} onUpdateProperty={handleUpdateProperty} />;
 };
 
+// TabsConfigPanel 래퍼
+const TabsConfigPanelWrapper: ConfigPanelComponent = ({ config, onConfigChange }) => {
+  const mockComponent = {
+    id: "temp",
+    type: "tabs" as const,
+    tabs: config.tabs || [],
+    defaultTab: config.defaultTab,
+    orientation: config.orientation || "horizontal",
+    variant: config.variant || "default",
+    allowCloseable: config.allowCloseable || false,
+    persistSelection: config.persistSelection || false,
+  };
+
+  const handleUpdate = (updates: any) => {
+    onConfigChange({ ...config, ...updates });
+  };
+
+  return <TabsConfigPanel component={mockComponent as any} onUpdate={handleUpdate} />;
+};
+
 // 설정 패널 이름으로 직접 매핑하는 함수 (DB의 config_panel 필드용)
 export const getConfigPanelComponent = (panelName: string): ConfigPanelComponent | null => {
   console.log(`🔧 getConfigPanelComponent 호출: panelName="${panelName}"`);
@@ -128,6 +149,9 @@ export const getConfigPanelComponent = (panelName: string): ConfigPanelComponent
     case "DashboardConfigPanel":
       console.log(`🔧 DashboardConfigPanel 래퍼 컴포넌트 반환`);
       return DashboardConfigPanelWrapper;
+    case "TabsConfigPanel":
+      console.log(`🔧 TabsConfigPanel 래퍼 컴포넌트 반환`);
+      return TabsConfigPanelWrapper;
     default:
       console.warn(`🔧 알 수 없는 설정 패널: ${panelName}, 기본 설정 사용`);
       return null; // 기본 설정 (패널 없음)