반응형 및 테이블 리스트 컴포넌트 오류 수정

frontend/lib/utils/getComponentConfigPanel.tsx

@@ -119,9 +119,12 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
 }) => {
   console.log(`🔥 DynamicComponentConfigPanel 렌더링 시작: ${componentId}`);
 
+  // 모든 useState를 최상단에 선언 (Hooks 규칙)
   const [ConfigPanelComponent, setConfigPanelComponent] = React.useState<React.ComponentType<any> | null>(null);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
+  const [selectedTableColumns, setSelectedTableColumns] = React.useState(tableColumns);
+  const [allTablesList, setAllTablesList] = React.useState<any[]>([]);
 
   React.useEffect(() => {
     let mounted = true;
@@ -155,6 +158,29 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
     };
   }, [componentId]);
 
+  // tableColumns가 변경되면 selectedTableColumns도 업데이트
+  React.useEffect(() => {
+    setSelectedTableColumns(tableColumns);
+  }, [tableColumns]);
+
+  // RepeaterConfigPanel인 경우에만 전체 테이블 목록 로드
+  React.useEffect(() => {
+    if (componentId === "repeater-field-group") {
+      const loadAllTables = async () => {
+        try {
+          const { tableManagementApi } = await import("@/lib/api/tableManagement");
+          const response = await tableManagementApi.getTableList();
+          if (response.success && response.data) {
+            setAllTablesList(response.data);
+          }
+        } catch (error) {
+          console.error("전체 테이블 목록 로드 실패:", error);
+        }
+      };
+      loadAllTables();
+    }
+  }, [componentId]);
+
   if (loading) {
     return (
       <div className="rounded-md border border-dashed border-gray-300 bg-gray-50 p-4">
@@ -199,16 +225,63 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
     tableColumns: Array.isArray(tableColumns) ? tableColumns.length : tableColumns,
     tables: Array.isArray(tables) ? tables.length : tables,
     tablesType: typeof tables,
+    tablesDetail: tables, // 전체 테이블 목록 확인
   });
 
+  // 테이블 변경 핸들러 - 선택된 테이블의 컬럼을 동적으로 로드
+  const handleTableChange = async (tableName: string) => {
+    console.log("🔄 테이블 변경:", tableName);
+    try {
+      // 먼저 tables에서 찾아보기 (이미 컬럼이 있는 경우)
+      const existingTable = tables?.find((t) => t.tableName === tableName);
+      if (existingTable && existingTable.columns && existingTable.columns.length > 0) {
+        console.log("✅ 캐시된 테이블 컬럼 사용:", existingTable.columns.length, "개");
+        setSelectedTableColumns(existingTable.columns);
+        return;
+      }
+
+      // 컬럼이 없으면 tableTypeApi로 조회 (ScreenDesigner와 동일한 방식)
+      console.log("🔍 테이블 컬럼 API 조회:", tableName);
+      const { tableTypeApi } = await import("@/lib/api/screen");
+      const columnsResponse = await tableTypeApi.getColumns(tableName);
+
+      console.log("🔍 컬럼 응답 데이터:", columnsResponse);
+
+      const columns = (columnsResponse || []).map((col: any) => ({
+        tableName: col.tableName || tableName,
+        columnName: col.columnName || col.column_name,
+        columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
+        dataType: col.dataType || col.data_type || col.dbType,
+        webType: col.webType || col.web_type,
+        input_type: col.inputType || col.input_type,
+        widgetType: col.widgetType || col.widget_type || col.webType || col.web_type,
+        isNullable: col.isNullable || col.is_nullable,
+        required: col.required !== undefined ? col.required : col.isNullable === "NO" || col.is_nullable === "NO",
+        columnDefault: col.columnDefault || col.column_default,
+        characterMaximumLength: col.characterMaximumLength || col.character_maximum_length,
+        codeCategory: col.codeCategory || col.code_category,
+        codeValue: col.codeValue || col.code_value,
+      }));
+
+      console.log("✅ 테이블 컬럼 로드 성공:", columns.length, "개");
+      setSelectedTableColumns(columns);
+    } catch (error) {
+      console.error("❌ 테이블 변경 오류:", error);
+      // 오류 발생 시 빈 배열
+      setSelectedTableColumns([]);
+    }
+  };
+
   return (
     <ConfigPanelComponent
       config={config}
       onChange={onChange}
       onConfigChange={onChange} // TableListConfigPanel을 위한 추가 prop
       screenTableName={screenTableName}
-      tableColumns={tableColumns}
-      tables={tables} // 전체 테이블 목록 전달
+      tableColumns={selectedTableColumns} // 동적으로 변경되는 컬럼 전달
+      tables={tables} // 기본 테이블 목록 (현재 화면의 테이블만)
+      allTables={componentId === "repeater-field-group" ? allTablesList : tables} // RepeaterConfigPanel만 전체 테이블
+      onTableChange={handleTableChange} // 테이블 변경 핸들러 전달
     />
   );
 };