fix: SelectedItemsDetailInput 설정 패널에서 컬럼 자동 로드 추가

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

이제 원본/대상 테이블 선택 시 해당 테이블의 컬럼 목록이 자동으로 나타남
This commit is contained in:
kjs 2025-11-20 17:37:51 +09:00
parent c51cd7bc87
commit 6e92d1855a
1 changed files with 72 additions and 4 deletions

View File

@ -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(() => {