웹타입 컴포넌트 분리작업

2025-09-09 14:29:04 +09:00
parent 540d82e7e4
commit a17602c643
76 changed files with 16660 additions and 1735 deletions
--- a/lib/registry/DynamicConfigPanel.tsx
+++ b/lib/registry/DynamicConfigPanel.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import React from "react";
+import { WebTypeRegistry } from "./WebTypeRegistry";
+import { WebTypeConfigPanelProps } from "./types";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Settings } from "lucide-react";
+
+interface DynamicConfigPanelProps extends WebTypeConfigPanelProps {
+  widgetType: string;
+  showFallback?: boolean;
+}
+
+/**
+ * 동적 설정 패널 렌더러
+ * 등록된 웹타입에 따라 적절한 설정 패널을 동적으로 렌더링
+ */
+export const DynamicConfigPanel: React.FC<DynamicConfigPanelProps> = React.memo(
+  ({
+    widgetType,
+    component,
+    onUpdateComponent,
+    onUpdateProperty,
+    showFallback = true,
+  }) => {
+    // 웹타입 정의 조회
+    const definition = WebTypeRegistry.get(widgetType);
+
+    // 웹타입이 등록되지 않은 경우
+    if (!definition) {
+      console.warn(`Unknown web type for config panel: ${widgetType}`);
+
+      if (!showFallback) {
+        return null;
+      }
+
+      return (
+        <Alert variant="secondary" className="w-full">
+          <Settings className="h-4 w-4" />
+          <AlertDescription>
+            <code>{widgetType}</code> 타입에 대한 설정 패널이 없습니다.
+          </AlertDescription>
+        </Alert>
+      );
+    }
+
+    // 설정 패널이 정의되지 않은 경우
+    if (!definition.configPanel) {
+      if (!showFallback) {
+        return null;
+      }
+
+      return (
+        <Card className="w-full">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm flex items-center gap-2">
+              <Settings className="h-4 w-4" />
+              {definition.name} 설정
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="pt-0">
+            <Alert variant="secondary">
+              <AlertDescription className="text-xs">
+                이 웹타입에는 별도의 설정 옵션이 없습니다.
+              </AlertDescription>
+            </Alert>
+          </CardContent>
+        </Card>
+      );
+    }
+
+    // 비활성화된 웹타입인 경우
+    if (definition.isActive === false) {
+      return (
+        <Alert variant="secondary" className="w-full">
+          <Settings className="h-4 w-4" />
+          <AlertDescription>
+            비활성화된 웹타입입니다: <code>{widgetType}</code>
+          </AlertDescription>
+        </Alert>
+      );
+    }
+
+    // 등록된 설정 패널 컴포넌트 렌더링
+    const ConfigPanelComponent = definition.configPanel;
+
+    return (
+      <ConfigPanelComponent
+        component={component}
+        onUpdateComponent={onUpdateComponent}
+        onUpdateProperty={onUpdateProperty}
+      />
+    );
+  }
+);
+
+DynamicConfigPanel.displayName = "DynamicConfigPanel";
+
+