From 501325e4b49574b66d40e23197b3f176c19e4d78 Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Sun, 15 Mar 2026 15:27:14 +0900
Subject: [PATCH] [agent-pipeline] pipe-20260315061036-2tnn round-3

---
 .../components/screen/ScreenRelationFlow.tsx  | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/frontend/components/screen/ScreenRelationFlow.tsx b/frontend/components/screen/ScreenRelationFlow.tsx
index a95e05d0..a2ad00c6 100644
--- a/frontend/components/screen/ScreenRelationFlow.tsx
+++ b/frontend/components/screen/ScreenRelationFlow.tsx
@@ -414,7 +414,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
             isFaded = focusedScreenId !== null && !isFocused;
           } else {
             // 개별 화면 모드: 메인 화면(선택된 화면)만 포커스, 연결 화면은 흐리게
-            isFocused = isMain;
+            isFocused = !!isMain;
             isFaded = !isMain && screenList.length > 1;
           }
 
@@ -426,7 +426,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
               label: scr.screenName,
               subLabel: selectedGroup ? `${roleLabel} (#${scr.displayOrder || idx + 1})` : (isMain ? "메인 화면" : "연결 화면"),
               type: "screen",
-              isMain: selectedGroup ? idx === 0 : isMain,
+              isMain: selectedGroup ? idx === 0 : !!isMain,
               tableName: scr.tableName,
               layoutSummary: summary,
               // 화면 포커스 관련 속성 (그룹 모드 & 개별 모드 공통)
@@ -990,17 +990,18 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
           }
         });
 
-        // 테이블 관계 엣지 (추가 관계)
+        // 테이블 관계 엣지 (추가 관계) - 참조용 화면(개별 모드: screen, 그룹 모드: screenList[0])
+        const refScreen = screen ?? screenList[0];
         relations.forEach((rel: any, idx: number) => {
-          if (rel.table_name && rel.table_name !== screen.tableName) {
+          if (rel.table_name && rel.table_name !== refScreen.tableName) {
             // 화면 → 연결 테이블
             const edgeExists = newEdges.some(
-              (e) => e.source === `screen-${screen.screenId}` && e.target === `table-${rel.table_name}`
+              (e) => e.source === `screen-${refScreen.screenId}` && e.target === `table-${rel.table_name}`
             );
             if (!edgeExists) {
             newEdges.push({
                 id: `edge-rel-${idx}`,
-                source: `screen-${screen.screenId}`,
+                source: `screen-${refScreen.screenId}`,
                 target: `table-${rel.table_name}`,
               sourceHandle: "bottom",
               targetHandle: "top",
@@ -1017,12 +1018,12 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
 
         // 데이터 흐름 엣지 (화면 간)
         flows
-          .filter((flow: any) => flow.source_screen_id === screen.screenId)
+          .filter((flow: any) => flow.source_screen_id === refScreen.screenId)
           .forEach((flow: any, idx: number) => {
             if (flow.target_screen_id) {
             newEdges.push({
                 id: `edge-flow-${idx}`,
-                source: `screen-${screen.screenId}`,
+                source: `screen-${refScreen.screenId}`,
                 target: `screen-${flow.target_screen_id}`,
               sourceHandle: "right",
               targetHandle: "left",
@@ -1134,7 +1135,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
     // 화면 노드 우클릭
     if (node.id.startsWith("screen-")) {
       const screenId = parseInt(node.id.replace("screen-", ""));
-      const nodeData = node.data as ScreenNodeData;
+      const nodeData = node.data as unknown as ScreenNodeData;
       const mainTable = screenTableMap[screenId];
       
       // 해당 화면의 서브 테이블 (필터 테이블) 정보
@@ -1248,7 +1249,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
     // 메인 테이블 노드 더블클릭
     if (node.id.startsWith("table-") && !node.id.startsWith("table-sub-")) {
       const tableName = node.id.replace("table-", "");
-      const nodeData = node.data as TableNodeData;
+      const nodeData = node.data as unknown as TableNodeData;
       
       // 이 테이블을 사용하는 화면 찾기
       const screenId = Object.entries(screenTableMap).find(
@@ -1293,7 +1294,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
     // 서브 테이블 노드 더블클릭
     if (node.id.startsWith("subtable-")) {
       const tableName = node.id.replace("subtable-", "");
-      const nodeData = node.data as TableNodeData;
+      const nodeData = node.data as unknown as TableNodeData;
       
       // 이 서브 테이블을 사용하는 화면 찾기
       const screenId = Object.entries(screenSubTableMap).find(
@@ -2353,7 +2354,6 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
           fieldMappings={settingModalNode.existingConfig?.fieldMappings}
           componentCount={0}
           onSaveSuccess={handleRefreshVisualization}
-          isPop={isPop}
         />
       )}
       
@@ -2367,7 +2367,13 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
           screenId={settingModalNode.screenId}
           joinColumnRefs={settingModalNode.existingConfig?.joinColumnRefs}
           referencedBy={settingModalNode.existingConfig?.referencedBy}
-          columns={settingModalNode.existingConfig?.columns}
+          columns={settingModalNode.existingConfig?.columns?.map((col) => ({
+            column: col.originalName ?? col.name,
+            label: col.name,
+            type: col.type,
+            isPK: col.isPrimaryKey,
+            isFK: col.isForeignKey,
+          }))}
           filterColumns={settingModalNode.existingConfig?.filterColumns}
           onSaveSuccess={handleRefreshVisualization}
         />