탭기능 중간커밋

2025-11-24 17:24:47 +09:00
parent ddb1d4cf60
commit 00501f359c
13 changed files with 1403 additions and 191 deletions
--- a/frontend/lib/registry/components/tabs/tabs-component.tsx
+++ b/frontend/lib/registry/components/tabs/tabs-component.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import React from "react";
+import { ComponentRegistry } from "../../ComponentRegistry";
+import { ComponentCategory } from "@/types/component";
+import { Folder } from "lucide-react";
+import type { TabsComponent, TabItem } from "@/types/screen-management";
+
+/**
+ * 탭 컴포넌트 정의
+ * 
+ * 여러 화면을 탭으로 구분하여 전환할 수 있는 컴포넌트
+ */
+ComponentRegistry.registerComponent({
+  id: "tabs-widget",
+  name: "탭 컴포넌트",
+  description: "화면을 탭으로 전환할 수 있는 컴포넌트입니다. 각 탭마다 다른 화면을 연결할 수 있습니다.",
+  category: ComponentCategory.LAYOUT,
+  webType: "text" as any, // 레이아웃 컴포넌트이므로 임시값
+  component: () => null as any, // 레이아웃 컴포넌트이므로 임시값
+  defaultConfig: {},
+  tags: ["tabs", "navigation", "layout", "screen"],
+  icon: Folder,
+  version: "1.0.0",
+  
+  defaultSize: {
+    width: 800,
+    height: 600,
+  },
+  
+  defaultProps: {
+    type: "tabs" as const,
+    tabs: [
+      {
+        id: "tab-1",
+        label: "탭 1",
+        order: 0,
+        disabled: false,
+      },
+      {
+        id: "tab-2",
+        label: "탭 2",
+        order: 1,
+        disabled: false,
+      },
+    ] as TabItem[],
+    defaultTab: "tab-1",
+    orientation: "horizontal" as const,
+    variant: "default" as const,
+    allowCloseable: false,
+    persistSelection: false,
+  },
+  
+  // 에디터 모드에서의 렌더링
+  renderEditor: ({ component, isSelected, onClick, onDragStart, onDragEnd, children }) => {
+    const tabsComponent = component as TabsComponent;
+    const tabs = tabsComponent.tabs || [];
+    
+    return (
+      <div
+        className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50"
+        onClick={onClick}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+      >
+        <div className="text-center">
+          <div className="flex items-center justify-center">
+            <Folder className="h-8 w-8 text-gray-400" />
+          </div>
+          <p className="text-muted-foreground mt-2 text-sm font-medium">탭 컴포넌트</p>
+          <p className="text-xs text-gray-400">
+            {tabs.length > 0
+              ? `${tabs.length}개의 탭 (실제 화면에서 표시됩니다)`
+              : "탭이 없습니다. 설정 패널에서 탭을 추가하세요"}
+          </p>
+          {tabs.length > 0 && (
+            <div className="mt-2 flex flex-wrap justify-center gap-1">
+              {tabs.map((tab: TabItem, index: number) => (
+                <span
+                  key={tab.id}
+                  className="rounded-md border bg-white px-2 py-1 text-xs"
+                >
+                  {tab.label || `탭 ${index + 1}`}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+  
+  // 인터랙티브 모드에서의 렌더링 (실제 동작)
+  renderInteractive: ({ component }) => {
+    // InteractiveScreenViewer에서 TabsWidget을 사용하므로 여기서는 null 반환
+    return null;
+  },
+  
+  // 설정 패널 (동적 로딩)
+  configPanel: React.lazy(() => 
+    import("@/components/screen/config-panels/TabsConfigPanel").then(module => ({
+      default: module.TabsConfigPanel
+    }))
+  ),
+  
+  // 검증 함수
+  validate: (component) => {
+    const tabsComponent = component as TabsComponent;
+    const errors: string[] = [];
+    
+    if (!tabsComponent.tabs || tabsComponent.tabs.length === 0) {
+      errors.push("최소 1개 이상의 탭이 필요합니다.");
+    }
+    
+    if (tabsComponent.tabs) {
+      const tabIds = tabsComponent.tabs.map((t) => t.id);
+      const uniqueIds = new Set(tabIds);
+      if (tabIds.length !== uniqueIds.size) {
+        errors.push("탭 ID가 중복되었습니다.");
+      }
+    }
+    
+    return {
+      isValid: errors.length === 0,
+      errors,
+    };
+  },
+});
+
+console.log("✅ 탭 컴포넌트 등록 완료");
+