From 6e92d1855a10b2bfbd28c8ce863b5fad3f922f01 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 20 Nov 2025 17:37:51 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20SelectedItemsDetailInput=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=ED=8C=A8=EB=84=90=EC=97=90=EC=84=9C=20=EC=BB=AC?=
 =?UTF-8?q?=EB=9F=BC=20=EC=9E=90=EB=8F=99=20=EB=A1=9C=EB=93=9C=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 원본 테이블(sourceTable) 변경 시 컬럼 자동 로드
- 대상 테이블(targetTable) 변경 시 컬럼 자동 로드
- props로 받은 컬럼은 백업으로 사용하고, 내부에서 로드한 컬럼 우선 사용
- tableManagementApi.getColumnList() 사용하여 동적 로드

이제 원본/대상 테이블 선택 시 해당 테이블의 컬럼 목록이 자동으로 나타남
---
 .../SelectedItemsDetailInputConfigPanel.tsx   | 76 ++++++++++++++++++-
 1 file changed, 72 insertions(+), 4 deletions(-)

diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
index fa4813c2..b08fbc64 100644
--- a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx
@@ -73,6 +73,70 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
   // 🆕 부모 데이터 매핑: 각 매핑별 소스 테이블 컬럼 상태
   const [mappingSourceColumns, setMappingSourceColumns] = useState<Record<number, Array<{ columnName: string; columnLabel?: string; dataType?: string }>>>({});
 
+  // 🆕 원본/대상 테이블 컬럼 상태 (내부에서 로드)
+  const [loadedSourceTableColumns, setLoadedSourceTableColumns] = useState<Array<{ columnName: string; columnLabel?: string; dataType?: string }>>([]);
+  const [loadedTargetTableColumns, setLoadedTargetTableColumns] = useState<Array<{ columnName: string; columnLabel?: string; dataType?: string }>>([]);
+
+  // 🆕 원본 테이블 컬럼 로드
+  useEffect(() => {
+    if (!config.sourceTable) {
+      setLoadedSourceTableColumns([]);
+      return;
+    }
+
+    const loadColumns = async () => {
+      try {
+        console.log("🔍 원본 테이블 컬럼 로드:", config.sourceTable);
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const response = await tableManagementApi.getColumnList(config.sourceTable);
+
+        if (response.success && response.data) {
+          const columns = response.data.columns || [];
+          setLoadedSourceTableColumns(columns.map((col: any) => ({
+            columnName: col.columnName,
+            columnLabel: col.displayName || col.columnLabel || col.columnName,
+            dataType: col.dataType,
+          })));
+          console.log("✅ 원본 테이블 컬럼 로드 성공:", columns.length);
+        }
+      } catch (error) {
+        console.error("❌ 원본 테이블 컬럼 로드 오류:", error);
+      }
+    };
+
+    loadColumns();
+  }, [config.sourceTable]);
+
+  // 🆕 대상 테이블 컬럼 로드
+  useEffect(() => {
+    if (!config.targetTable) {
+      setLoadedTargetTableColumns([]);
+      return;
+    }
+
+    const loadColumns = async () => {
+      try {
+        console.log("🔍 대상 테이블 컬럼 로드:", config.targetTable);
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const response = await tableManagementApi.getColumnList(config.targetTable);
+
+        if (response.success && response.data) {
+          const columns = response.data.columns || [];
+          setLoadedTargetTableColumns(columns.map((col: any) => ({
+            columnName: col.columnName,
+            columnLabel: col.displayName || col.columnLabel || col.columnName,
+            dataType: col.dataType,
+          })));
+          console.log("✅ 대상 테이블 컬럼 로드 성공:", columns.length);
+        }
+      } catch (error) {
+        console.error("❌ 대상 테이블 컬럼 로드 오류:", error);
+      }
+    };
+
+    loadColumns();
+  }, [config.targetTable]);
+
   // 🆕 소스 테이블 선택 시 컬럼 로드
   const loadMappingSourceColumns = async (tableName: string, mappingIndex: number) => {
     try {
@@ -262,15 +326,19 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
 
   // 🆕 표시 컬럼용: 원본 테이블에서 사용되지 않은 컬럼 목록
   const availableColumns = useMemo(() => {
+    // 🔧 로드된 컬럼 우선 사용, props로 받은 컬럼은 백업
+    const columns = loadedSourceTableColumns.length > 0 ? loadedSourceTableColumns : sourceTableColumns;
     const usedColumns = new Set([...displayColumns.map(c => c.name), ...localFields.map((f) => f.name)]);
-    return sourceTableColumns.filter((col) => !usedColumns.has(col.columnName));
-  }, [sourceTableColumns, displayColumns, localFields]);
+    return columns.filter((col) => !usedColumns.has(col.columnName));
+  }, [loadedSourceTableColumns, sourceTableColumns, displayColumns, localFields]);
 
   // 🆕 추가 입력 필드용: 대상 테이블에서 사용되지 않은 컬럼 목록
   const availableTargetColumns = useMemo(() => {
+    // 🔧 로드된 컬럼 우선 사용, props로 받은 컬럼은 백업
+    const columns = loadedTargetTableColumns.length > 0 ? loadedTargetTableColumns : targetTableColumns;
     const usedColumns = new Set([...displayColumns.map(c => c.name), ...localFields.map((f) => f.name)]);
-    return targetTableColumns.filter((col) => !usedColumns.has(col.columnName));
-  }, [targetTableColumns, displayColumns, localFields]);
+    return columns.filter((col) => !usedColumns.has(col.columnName));
+  }, [loadedTargetTableColumns, targetTableColumns, displayColumns, localFields]);
 
   // 🆕 원본 테이블 필터링
   const filteredSourceTables = useMemo(() => {