카테고리 구현

frontend/lib/utils/componentTypeUtils.ts

@@ -64,7 +64,7 @@ export const isWidgetComponent = (component: ComponentData): boolean => {
 };
 
 /**
- * 컴포넌트의 웹타입을 가져옵니다
+ * 컴포넌트의 웹타입을 가져옵니다 (input_type 우선)
  */
 export const getComponentWebType = (component: ComponentData): string | undefined => {
   if (!component || !component.type) return undefined;
@@ -80,13 +80,49 @@ export const getComponentWebType = (component: ComponentData): string | undefine
     return "file";
   }
 
-  if (component.type === "widget") {
-    return (component as any).widgetType;
+  // 1. componentConfig.inputType 우선 확인 (새로 추가된 컴포넌트)
+  const configInputType = (component as any).componentConfig?.inputType;
+  if (configInputType) {
+    console.log(`✅ 컴포넌트 componentConfig.inputType 사용:`, {
+      componentId: component.id,
+      tableName: (component as any).tableName,
+      columnName: (component as any).columnName,
+      inputType: configInputType,
+      componentConfig: (component as any).componentConfig,
+    });
+    return configInputType;
   }
-  if (component.type === "component") {
-    return (component as any).widgetType || (component as any).componentConfig?.webType;
+
+  // 2. 루트 레벨 input_type 확인 (하위 호환성)
+  const rootInputType = (component as any).input_type || (component as any).inputType;
+  if (rootInputType) {
+    console.log(`✅ 컴포넌트 루트 inputType 사용:`, {
+      componentId: component.id,
+      tableName: (component as any).tableName,
+      columnName: (component as any).columnName,
+      inputType: rootInputType,
+    });
+    return rootInputType;
   }
-  return component.type;
+
+  // 3. 기본 웹타입 확인
+  const webType = component.type === "widget" 
+    ? (component as any).widgetType 
+    : component.type === "component"
+    ? (component as any).widgetType || (component as any).componentConfig?.webType
+    : component.type;
+
+  console.log(`⚠️ inputType 없음, 기본 webType 사용:`, {
+    componentId: component.id,
+    tableName: (component as any).tableName,
+    columnName: (component as any).columnName,
+    type: component.type,
+    widgetType: (component as any).widgetType,
+    componentConfig: (component as any).componentConfig,
+    resultWebType: webType,
+  });
+
+  return webType;
 };
 
 /**

frontend/lib/utils/webTypeMapping.ts

@@ -49,6 +49,7 @@ export const WEB_TYPE_COMPONENT_MAPPING: Record<string, string> = {
   label: "text-display",
   code: "select-basic", // 코드 타입은 선택상자 사용
   entity: "select-basic", // 엔티티 타입은 선택상자 사용
+  category: "select-basic", // 카테고리 타입은 선택상자 사용
 };
 
 /**