입력 타입 변경시 바로 적용 가능하게 수정

backend-node/src/services/screenManagementService.ts

@@ -1517,11 +1517,23 @@ export class ScreenManagementService {
       };
     }
 
+    // 🔥 최신 inputType 정보 조회 (table_type_columns에서)
+    const inputTypeMap = await this.getLatestInputTypes(componentLayouts, companyCode);
+
     const components: ComponentData[] = componentLayouts.map((layout) => {
       const properties = layout.properties as any;
+      
+      // 🔥 최신 inputType으로 widgetType 및 componentType 업데이트
+      const tableName = properties?.tableName;
+      const columnName = properties?.columnName;
+      const latestTypeInfo = tableName && columnName 
+        ? inputTypeMap.get(`${tableName}.${columnName}`) 
+        : null;
+      
       const component = {
         id: layout.component_id,
-        type: layout.component_type as any,
+        // 🔥 최신 componentType이 있으면 type 덮어쓰기
+        type: latestTypeInfo?.componentType || layout.component_type as any,
         position: {
           x: layout.position_x,
           y: layout.position_y,
@@ -1530,6 +1542,17 @@ export class ScreenManagementService {
         size: { width: layout.width, height: layout.height },
         parentId: layout.parent_id,
         ...properties,
+        // 🔥 최신 inputType이 있으면 widgetType, componentType 덮어쓰기
+        ...(latestTypeInfo && { 
+          widgetType: latestTypeInfo.inputType,
+          inputType: latestTypeInfo.inputType,
+          componentType: latestTypeInfo.componentType,
+          componentConfig: {
+            ...properties?.componentConfig,
+            type: latestTypeInfo.componentType,
+            inputType: latestTypeInfo.inputType,
+          },
+        }),
       };
 
       console.log(`로드된 컴포넌트:`, {
@@ -1539,6 +1562,9 @@ export class ScreenManagementService {
         size: component.size,
         parentId: component.parentId,
         title: (component as any).title,
+        widgetType: (component as any).widgetType,
+        componentType: (component as any).componentType,
+        latestTypeInfo,
       });
 
       return component;
@@ -1558,6 +1584,112 @@ export class ScreenManagementService {
     };
   }
 
+  /**
+   * 입력 타입에 해당하는 컴포넌트 ID 반환
+   * (프론트엔드 webTypeMapping.ts와 동일한 매핑)
+   */
+  private getComponentIdFromInputType(inputType: string): string {
+    const mapping: Record<string, string> = {
+      // 텍스트 입력
+      text: "text-input",
+      email: "text-input",
+      password: "text-input",
+      tel: "text-input",
+      // 숫자 입력
+      number: "number-input",
+      decimal: "number-input",
+      // 날짜/시간
+      date: "date-input",
+      datetime: "date-input",
+      time: "date-input",
+      // 텍스트 영역
+      textarea: "textarea-basic",
+      // 선택
+      select: "select-basic",
+      dropdown: "select-basic",
+      // 체크박스/라디오
+      checkbox: "checkbox-basic",
+      radio: "radio-basic",
+      boolean: "toggle-switch",
+      // 파일
+      file: "file-upload",
+      // 이미지
+      image: "image-widget",
+      img: "image-widget",
+      picture: "image-widget",
+      photo: "image-widget",
+      // 버튼
+      button: "button-primary",
+      // 기타
+      label: "text-display",
+      code: "select-basic",
+      entity: "select-basic",
+      category: "select-basic",
+    };
+
+    return mapping[inputType] || "text-input";
+  }
+
+  /**
+   * 컴포넌트들의 최신 inputType 정보 조회
+   * @param layouts - 레이아웃 목록
+   * @param companyCode - 회사 코드
+   * @returns Map<"tableName.columnName", { inputType, componentType }>
+   */
+  private async getLatestInputTypes(
+    layouts: any[],
+    companyCode: string
+  ): Promise<Map<string, { inputType: string; componentType: string }>> {
+    const inputTypeMap = new Map<string, { inputType: string; componentType: string }>();
+
+    // tableName과 columnName이 있는 컴포넌트들의 고유 조합 추출
+    const tableColumnPairs = new Set<string>();
+    for (const layout of layouts) {
+      const properties = layout.properties as any;
+      if (properties?.tableName && properties?.columnName) {
+        tableColumnPairs.add(`${properties.tableName}|${properties.columnName}`);
+      }
+    }
+
+    if (tableColumnPairs.size === 0) {
+      return inputTypeMap;
+    }
+
+    // 각 테이블-컬럼 조합에 대해 최신 inputType 조회
+    const pairs = Array.from(tableColumnPairs).map(pair => {
+      const [tableName, columnName] = pair.split('|');
+      return { tableName, columnName };
+    });
+
+    // 배치 쿼리로 한 번에 조회
+    const placeholders = pairs.map((_, i) => `($${i * 2 + 1}, $${i * 2 + 2})`).join(', ');
+    const params = pairs.flatMap(p => [p.tableName, p.columnName]);
+    
+    try {
+      const results = await query<{ table_name: string; column_name: string; input_type: string }>(
+        `SELECT table_name, column_name, input_type 
+         FROM table_type_columns 
+         WHERE (table_name, column_name) IN (${placeholders})
+           AND company_code = $${params.length + 1}`,
+        [...params, companyCode]
+      );
+
+      for (const row of results) {
+        const componentType = this.getComponentIdFromInputType(row.input_type);
+        inputTypeMap.set(`${row.table_name}.${row.column_name}`, {
+          inputType: row.input_type,
+          componentType: componentType,
+        });
+      }
+
+      console.log(`최신 inputType 조회 완료: ${results.length}개`);
+    } catch (error) {
+      console.warn(`최신 inputType 조회 실패 (무시됨):`, error);
+    }
+
+    return inputTypeMap;
+  }
+
   // ========================================
   // 템플릿 관리
   // ========================================