ConnectionSetupModal 리팩터링
This commit is contained in:
hyeonsu
@@ -75,25 +75,149 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
|
||||
setEditingRelationshipId,
|
||||
} = useDataFlowDesigner();
|
||||
|
||||
// 편집 모드일 때 관계도 이름 로드
|
||||
// 컬럼 클릭 처리 비활성화 (테이블 노드 선택 방식으로 변경)
|
||||
const handleColumnClick = useCallback((tableName: string, columnName: string) => {
|
||||
// 컬럼 클릭으로는 더 이상 선택하지 않음
|
||||
console.log(`컬럼 클릭 무시됨: ${tableName}.${columnName}`);
|
||||
return;
|
||||
}, []);
|
||||
|
||||
// 편집 모드일 때 관계도 데이터 로드
|
||||
useEffect(() => {
|
||||
const loadDiagramName = async () => {
|
||||
const loadDiagramData = async () => {
|
||||
if (diagramId && diagramId > 0) {
|
||||
try {
|
||||
const jsonDiagram = await DataFlowAPI.getJsonDataFlowDiagramById(diagramId, companyCode);
|
||||
if (jsonDiagram && jsonDiagram.diagram_name) {
|
||||
setCurrentDiagramName(jsonDiagram.diagram_name);
|
||||
if (jsonDiagram) {
|
||||
// 관계도 이름 설정
|
||||
if (jsonDiagram.diagram_name) {
|
||||
setCurrentDiagramName(jsonDiagram.diagram_name);
|
||||
}
|
||||
|
||||
// 관계 데이터 로드
|
||||
if (jsonDiagram.relationships?.relationships && Array.isArray(jsonDiagram.relationships.relationships)) {
|
||||
const loadedRelationships = jsonDiagram.relationships.relationships.map((rel) => ({
|
||||
id: rel.id || `rel-${Date.now()}-${Math.random()}`,
|
||||
fromTable: rel.fromTable,
|
||||
toTable: rel.toTable,
|
||||
fromColumns: Array.isArray(rel.fromColumns) ? rel.fromColumns : [],
|
||||
toColumns: Array.isArray(rel.toColumns) ? rel.toColumns : [],
|
||||
connectionType: rel.connectionType || "simple-key",
|
||||
relationshipName: rel.relationshipName || "",
|
||||
settings: rel.settings || {},
|
||||
}));
|
||||
|
||||
setTempRelationships(loadedRelationships);
|
||||
|
||||
// 관계 데이터로부터 테이블 노드들을 생성
|
||||
const tableNames = new Set<string>();
|
||||
loadedRelationships.forEach((rel) => {
|
||||
tableNames.add(rel.fromTable);
|
||||
tableNames.add(rel.toTable);
|
||||
});
|
||||
|
||||
// 각 테이블의 정보를 API에서 가져와서 노드 생성
|
||||
const loadedNodes = await Promise.all(
|
||||
Array.from(tableNames).map(async (tableName) => {
|
||||
try {
|
||||
const columns = await DataFlowAPI.getTableColumns(tableName);
|
||||
return {
|
||||
id: `table-${tableName}`,
|
||||
type: "tableNode",
|
||||
position: jsonDiagram.node_positions?.[tableName] || {
|
||||
x: Math.random() * 300,
|
||||
y: Math.random() * 200,
|
||||
},
|
||||
data: {
|
||||
table: {
|
||||
tableName,
|
||||
displayName: tableName,
|
||||
description: "",
|
||||
columns: Array.isArray(columns)
|
||||
? columns.map((col) => ({
|
||||
name: col.columnName || "unknown",
|
||||
type: col.dataType || "varchar",
|
||||
description: col.description || "",
|
||||
}))
|
||||
: [],
|
||||
},
|
||||
onColumnClick: handleColumnClick,
|
||||
selectedColumns: [],
|
||||
connectedColumns: {},
|
||||
},
|
||||
selected: false,
|
||||
};
|
||||
} catch (error) {
|
||||
console.warn(`테이블 ${tableName} 정보 로드 실패:`, error);
|
||||
return {
|
||||
id: `table-${tableName}`,
|
||||
type: "tableNode",
|
||||
position: jsonDiagram.node_positions?.[tableName] || {
|
||||
x: Math.random() * 300,
|
||||
y: Math.random() * 200,
|
||||
},
|
||||
data: {
|
||||
table: {
|
||||
tableName,
|
||||
displayName: tableName,
|
||||
description: "",
|
||||
columns: [],
|
||||
},
|
||||
onColumnClick: handleColumnClick,
|
||||
selectedColumns: [],
|
||||
connectedColumns: {},
|
||||
},
|
||||
selected: false,
|
||||
};
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
setNodes(loadedNodes);
|
||||
|
||||
// 관계 데이터로부터 엣지 생성
|
||||
const loadedEdges = loadedRelationships.map((rel) => ({
|
||||
id: `edge-${rel.fromTable}-${rel.toTable}-${rel.id}`,
|
||||
source: `table-${rel.fromTable}`,
|
||||
target: `table-${rel.toTable}`,
|
||||
type: "step",
|
||||
data: {
|
||||
relationshipId: rel.id,
|
||||
fromTable: rel.fromTable,
|
||||
toTable: rel.toTable,
|
||||
connectionType: rel.connectionType,
|
||||
relationshipName: rel.relationshipName,
|
||||
},
|
||||
style: {
|
||||
stroke: "#3b82f6",
|
||||
strokeWidth: 2,
|
||||
},
|
||||
animated: false,
|
||||
}));
|
||||
|
||||
setEdges(loadedEdges);
|
||||
|
||||
console.log("✅ 관계도 데이터 로드 완료:", {
|
||||
relationships: jsonDiagram.relationships?.relationships?.length || 0,
|
||||
tables: Array.from(new Set(loadedRelationships.flatMap((rel) => [rel.fromTable, rel.toTable]))).length,
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("관계도 이름 로드 실패:", error);
|
||||
console.error("관계도 데이터 로드 실패:", error);
|
||||
toast.error("관계도를 불러오는데 실패했습니다.");
|
||||
}
|
||||
} else {
|
||||
setCurrentDiagramName(""); // 신규 생성 모드
|
||||
// 신규 생성 모드
|
||||
setCurrentDiagramName("");
|
||||
setNodes([]);
|
||||
setEdges([]);
|
||||
setTempRelationships([]);
|
||||
}
|
||||
};
|
||||
|
||||
loadDiagramName();
|
||||
}, [diagramId, companyCode, setCurrentDiagramName]);
|
||||
loadDiagramData();
|
||||
}, [diagramId, companyCode, setCurrentDiagramName, setNodes, setEdges, setTempRelationships, handleColumnClick]);
|
||||
|
||||
// 키보드 이벤트 핸들러 (Del 키로 선택된 노드 삭제)
|
||||
useEffect(() => {
|
||||
@@ -126,13 +250,6 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [selectedNodes, setNodes, setSelectedColumns, setSelectedNodes]);
|
||||
|
||||
// 컬럼 클릭 처리 비활성화 (테이블 노드 선택 방식으로 변경)
|
||||
const handleColumnClick = useCallback((tableName: string, columnName: string) => {
|
||||
// 컬럼 클릭으로는 더 이상 선택하지 않음
|
||||
console.log(`컬럼 클릭 무시됨: ${tableName}.${columnName}`);
|
||||
return;
|
||||
}, []);
|
||||
|
||||
// 현재 추가된 테이블명 목록 가져오기
|
||||
const getSelectedTableNames = useCallback(() => {
|
||||
return extractTableNames(nodes);
|
||||
|
||||
Reference in New Issue
Block a user