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

frontend/lib/utils/getConfigPanelComponent.tsx

@@ -0,0 +1,133 @@
+// 설정 패널 컴포넌트 동적 매핑
+import React from "react";
+import { DateTypeConfigPanel } from "@/components/screen/panels/webtype-configs/DateTypeConfigPanel";
+import { NumberTypeConfigPanel } from "@/components/screen/panels/webtype-configs/NumberTypeConfigPanel";
+import { SelectTypeConfigPanel } from "@/components/screen/panels/webtype-configs/SelectTypeConfigPanel";
+import { TextTypeConfigPanel } from "@/components/screen/panels/webtype-configs/TextTypeConfigPanel";
+import { TextareaTypeConfigPanel } from "@/components/screen/panels/webtype-configs/TextareaTypeConfigPanel";
+import { CheckboxTypeConfigPanel } from "@/components/screen/panels/webtype-configs/CheckboxTypeConfigPanel";
+import { RadioTypeConfigPanel } from "@/components/screen/panels/webtype-configs/RadioTypeConfigPanel";
+import { FileTypeConfigPanel } from "@/components/screen/panels/webtype-configs/FileTypeConfigPanel";
+import { CodeTypeConfigPanel } from "@/components/screen/panels/webtype-configs/CodeTypeConfigPanel";
+import { EntityTypeConfigPanel } from "@/components/screen/panels/webtype-configs/EntityTypeConfigPanel";
+import { RatingTypeConfigPanel } from "@/components/screen/panels/webtype-configs/RatingTypeConfigPanel";
+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";
+
+// 설정 패널 컴포넌트 타입
+export type ConfigPanelComponent = React.ComponentType<{
+  config: any;
+  onConfigChange: (config: any) => void;
+}>;
+
+// ButtonConfigPanel 래퍼 (config/onConfigChange → component/onUpdateProperty 변환)
+const ButtonConfigPanelWrapper: ConfigPanelComponent = ({ config, onConfigChange }) => {
+  // config를 component 형태로 변환
+  const mockComponent = {
+    id: "temp",
+    type: "widget" as const,
+    componentConfig: { type: "button" },
+    webTypeConfig: config,
+    style: {},
+  };
+
+  // onConfigChange를 onUpdateProperty 형태로 변환
+  const handleUpdateProperty = (path: string, value: any) => {
+    if (path.startsWith("webTypeConfig.")) {
+      const configKey = path.replace("webTypeConfig.", "");
+      onConfigChange({ ...config, [configKey]: value });
+    }
+  };
+
+  return <OriginalButtonConfigPanel component={mockComponent as any} onUpdateProperty={handleUpdateProperty} />;
+};
+
+// CardConfigPanel 래퍼
+const CardConfigPanelWrapper: ConfigPanelComponent = ({ config, onConfigChange }) => {
+  const mockComponent = {
+    id: "temp",
+    type: "card" as const,
+    componentConfig: config,
+    style: {},
+  };
+
+  const handleUpdateProperty = (path: string, value: any) => {
+    if (path.startsWith("componentConfig.")) {
+      const configKey = path.replace("componentConfig.", "");
+      onConfigChange({ ...config, [configKey]: value });
+    }
+  };
+
+  return <CardConfigPanel component={mockComponent as any} onUpdateProperty={handleUpdateProperty} />;
+};
+
+// DashboardConfigPanel 래퍼
+const DashboardConfigPanelWrapper: ConfigPanelComponent = ({ config, onConfigChange }) => {
+  const mockComponent = {
+    id: "temp",
+    type: "dashboard" as const,
+    componentConfig: config,
+    style: {},
+  };
+
+  const handleUpdateProperty = (path: string, value: any) => {
+    if (path.startsWith("componentConfig.")) {
+      const configKey = path.replace("componentConfig.", "");
+      onConfigChange({ ...config, [configKey]: value });
+    }
+  };
+
+  return <DashboardConfigPanel component={mockComponent as any} onUpdateProperty={handleUpdateProperty} />;
+};
+
+// 설정 패널 이름으로 직접 매핑하는 함수 (DB의 config_panel 필드용)
+export const getConfigPanelComponent = (panelName: string): ConfigPanelComponent | null => {
+  console.log(`🔧 getConfigPanelComponent 호출: panelName="${panelName}"`);
+
+  // "none"이나 빈 값은 null 반환 (기본 설정)
+  if (!panelName || panelName === "none") {
+    console.log(`🔧 빈 값 또는 "none" → null 반환`);
+    return null;
+  }
+
+  switch (panelName) {
+    case "DateTypeConfigPanel":
+      return DateTypeConfigPanel;
+    case "NumberTypeConfigPanel":
+      return NumberTypeConfigPanel;
+    case "SelectTypeConfigPanel":
+      return SelectTypeConfigPanel;
+    case "TextTypeConfigPanel":
+      return TextTypeConfigPanel;
+    case "TextareaTypeConfigPanel":
+      return TextareaTypeConfigPanel;
+    case "CheckboxTypeConfigPanel":
+      return CheckboxTypeConfigPanel;
+    case "RadioTypeConfigPanel":
+      return RadioTypeConfigPanel;
+    case "FileTypeConfigPanel":
+      return FileTypeConfigPanel;
+    case "CodeTypeConfigPanel":
+      return CodeTypeConfigPanel;
+    case "EntityTypeConfigPanel":
+      return EntityTypeConfigPanel;
+    case "RatingTypeConfigPanel":
+      console.log(`🔧 RatingTypeConfigPanel 컴포넌트 반환`);
+      console.log(`🔧 RatingTypeConfigPanel 타입:`, typeof RatingTypeConfigPanel);
+      console.log(`🔧 RatingTypeConfigPanel 내용:`, RatingTypeConfigPanel);
+      return RatingTypeConfigPanel;
+    case "ButtonConfigPanel":
+      console.log(`🔧 ButtonConfigPanel 래퍼 컴포넌트 반환`);
+      return ButtonConfigPanelWrapper;
+    case "CardConfigPanel":
+      console.log(`🔧 CardConfigPanel 래퍼 컴포넌트 반환`);
+      return CardConfigPanelWrapper;
+    case "DashboardConfigPanel":
+      console.log(`🔧 DashboardConfigPanel 래퍼 컴포넌트 반환`);
+      return DashboardConfigPanelWrapper;
+    default:
+      console.warn(`🔧 알 수 없는 설정 패널: ${panelName}, 기본 설정 사용`);
+      return null; // 기본 설정 (패널 없음)
+  }
+};