From 6dad7c15ce58fab4ec5532d477c25b79b410a3d0 Mon Sep 17 00:00:00 2001 From: hyeonsu Date: Thu, 11 Sep 2025 11:12:17 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EA=B4=80?= =?UTF-8?q?=EA=B3=84=20=EC=A0=95=EB=B3=B4=20=EB=AA=A8=EB=8B=AC=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EB=B3=B5=EA=B5=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/dataflow/DataFlowDesigner.tsx | 113 ++++++++++-------- 1 file changed, 62 insertions(+), 51 deletions(-) diff --git a/frontend/components/dataflow/DataFlowDesigner.tsx b/frontend/components/dataflow/DataFlowDesigner.tsx index ab8f0776..9553a5b2 100644 --- a/frontend/components/dataflow/DataFlowDesigner.tsx +++ b/frontend/components/dataflow/DataFlowDesigner.tsx @@ -1258,23 +1258,23 @@ export const DataFlowDesigner: React.FC = ({ {/* 엣지 정보 및 액션 버튼 */} {showEdgeActions && selectedEdgeForEdit && selectedEdgeInfo && (
{/* 헤더 */} -
-
-
- 🔗 +
+
+
+ 🔗
-
{selectedEdgeInfo.relationshipName}
-
데이터 관계
+
{selectedEdgeInfo.relationshipName}
+
데이터 관계 정보
+ {/* 관계 정보 요약 */} +
+
+
+
관계 유형
+
+ {selectedEdgeInfo.relationshipType} +
+
+
|
+
+
연결 유형
+
+ {selectedEdgeInfo.connectionType} +
+
+
+
+ {/* 연결 정보 */}
{/* From 테이블 */} -
-
From 테이블
-
{selectedEdgeInfo.fromTable}
-
- {selectedEdgeInfo.fromColumns.map((column, index) => ( - - {column} - - ))} +
+
FROM
+
{selectedEdgeInfo.fromTable}
+
+
+ {selectedEdgeInfo.fromColumns.map((column, index) => ( + + {column} + + ))} +
- {/* 화살표 */} + {/* 관계 화살표 */}
-
-
- → -
-
+ →
{/* To 테이블 */} -
-
To 테이블
-
{selectedEdgeInfo.toTable}
-
- {selectedEdgeInfo.toColumns.map((column, index) => ( - - {column} - - ))} -
-
- - {/* 관계 정보 */} -
-
-
관계 유형
-
{selectedEdgeInfo.relationshipType}
-
-
-
연결 유형
-
{selectedEdgeInfo.connectionType}
+
+
TO
+
{selectedEdgeInfo.toTable}
+
+
+ {selectedEdgeInfo.toColumns.map((column, index) => ( + + {column} + + ))} +
{/* 액션 버튼 */} -
+
From 6f7705990557af0f6e0b5debb9ad8e48ebbcf6da Mon Sep 17 00:00:00 2001 From: hyeonsu Date: Thu, 11 Sep 2025 11:17:40 +0900 Subject: [PATCH 2/3] =?UTF-8?q?TableNode=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/components/dataflow/TableNode.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/frontend/components/dataflow/TableNode.tsx b/frontend/components/dataflow/TableNode.tsx index 5cac239c..0956cd67 100644 --- a/frontend/components/dataflow/TableNode.tsx +++ b/frontend/components/dataflow/TableNode.tsx @@ -22,18 +22,10 @@ interface TableNodeData { onScrollAreaEnter?: () => void; onScrollAreaLeave?: () => void; selectedColumns?: string[]; // 선택된 컬럼 목록 - connectedColumns?: { [columnName: string]: { direction: "source" | "target" | "both" } }; // 연결된 컬럼 정보 } export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => { - const { - table, - onColumnClick, - onScrollAreaEnter, - onScrollAreaLeave, - selectedColumns = [], - connectedColumns = {}, - } = data; + const { table, onColumnClick, onScrollAreaEnter, onScrollAreaLeave, selectedColumns = [] } = data; return (
@@ -42,7 +34,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => { {/* 테이블 헤더 - 통일된 디자인 */} -
+

{table.displayName}

{table.description &&

{table.description}

}
@@ -50,7 +42,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => { {/* 컬럼 목록 */}
- {table.columns.map((column, index) => { + {table.columns.map((column) => { const isSelected = selectedColumns.includes(column.name); return ( From 967da941523bdc304fa6c5f28b21a84946ab1ada Mon Sep 17 00:00:00 2001 From: hyeonsu Date: Thu, 11 Sep 2025 11:32:00 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=EC=84=A0=ED=83=9D=EB=90=9C=20=EC=BB=AC?= =?UTF-8?q?=EB=9F=BC=20=ED=8C=9D=EC=97=85=20=EB=A0=8C=EB=8D=94=EB=A7=81=20?= =?UTF-8?q?=EC=A1=B0=EA=B1=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/dataflow/DataFlowDesigner.tsx | 171 +++++++++--------- 1 file changed, 88 insertions(+), 83 deletions(-) diff --git a/frontend/components/dataflow/DataFlowDesigner.tsx b/frontend/components/dataflow/DataFlowDesigner.tsx index 9553a5b2..f0951f6b 100644 --- a/frontend/components/dataflow/DataFlowDesigner.tsx +++ b/frontend/components/dataflow/DataFlowDesigner.tsx @@ -784,6 +784,8 @@ export const DataFlowDesigner: React.FC = ({ // 수정 모드였다면 해제 if (editingRelationshipId) { setEditingRelationshipId(null); + // 편집 모드 취소 시 선택된 컬럼도 초기화 + setSelectedColumns({}); } }, [editingRelationshipId]); @@ -1136,98 +1138,101 @@ export const DataFlowDesigner: React.FC = ({ - {/* 선택된 컬럼 팝업 - 캔버스 좌측 상단 고정 (신규 관계도 생성 시에만 표시) */} - {Object.keys(selectedColumns).length > 0 && !showEdgeActions && !pendingConnection && !diagramId && ( -
- {/* 헤더 */} -
-
-
- 📋 -
-
-
선택된 컬럼
-
{Object.keys(selectedColumns).length}개 테이블
+ {/* 선택된 컬럼 팝업 - 캔버스 좌측 상단 고정 (새 관계 생성 시에만 표시) */} + {Object.keys(selectedColumns).length > 0 && + !showEdgeActions && + !pendingConnection && + !editingRelationshipId && ( +
+ {/* 헤더 */} +
+
+
+ 📋 +
+
+
선택된 컬럼
+
{Object.keys(selectedColumns).length}개 테이블
+
+
- -
- {/* 컨텐츠 */} -
-
- {[...new Set(selectionOrder)] - .filter((tableName) => selectedColumns[tableName] && selectedColumns[tableName].length > 0) - .map((tableName, index, filteredOrder) => { - const columns = selectedColumns[tableName]; - const node = nodes.find((n) => n.data.table.tableName === tableName); - const displayName = node?.data.table.displayName || tableName; + {/* 컨텐츠 */} +
+
+ {[...new Set(selectionOrder)] + .filter((tableName) => selectedColumns[tableName] && selectedColumns[tableName].length > 0) + .map((tableName, index, filteredOrder) => { + const columns = selectedColumns[tableName]; + const node = nodes.find((n) => n.data.table.tableName === tableName); + const displayName = node?.data.table.displayName || tableName; - return ( -
- {/* 테이블 정보 */} -
-
{displayName}
-
- {columns.map((column, columnIndex) => ( - - {column} - - ))} + return ( +
+ {/* 테이블 정보 */} +
+
{displayName}
+
+ {columns.map((column, columnIndex) => ( + + {column} + + ))} +
+ + {/* 화살표 */} + {index === 0 && filteredOrder.length > 1 && ( +
+
↓
+
+ )}
+ ); + })} +
+
- {/* 화살표 */} - {index === 0 && filteredOrder.length > 1 && ( -
-
↓
-
- )} -
- ); - })} + {/* 액션 버튼 */} +
+ +
- - {/* 액션 버튼 */} -
- - -
-
- )} + )} {/* 안내 메시지 */} {nodes.length === 0 && (