From 24b53b5b33b36e1e92108c554b57b4d74602f937 Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Sun, 15 Mar 2026 16:42:20 +0900
Subject: [PATCH] [agent-pipeline] pipe-20260315072335-zb1m round-5

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

diff --git a/frontend/components/screen/ScreenRelationFlow.tsx b/frontend/components/screen/ScreenRelationFlow.tsx
index 6296c326..2bdc069d 100644
--- a/frontend/components/screen/ScreenRelationFlow.tsx
+++ b/frontend/components/screen/ScreenRelationFlow.tsx
@@ -1899,8 +1899,8 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
             style: {
               ...edge.style,
               stroke: isConnected ? "hsl(var(--primary))" : "hsl(var(--border))",
-              strokeWidth: isConnected ? 2 : 1,
-              opacity: isConnected ? 1 : 0.3,
+              strokeWidth: isConnected ? 2.5 : 1,
+              opacity: isConnected ? 1 : 0.2,
             },
           };
         }
@@ -1916,9 +1916,9 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
             style: {
               ...edge.style,
               stroke: isMyConnection ? "hsl(var(--primary))" : "hsl(var(--border))",
-              strokeWidth: isMyConnection ? 2 : 1,
+              strokeWidth: isMyConnection ? 2.5 : 1,
               strokeDasharray: isMyConnection ? undefined : "5,5",
-              opacity: isMyConnection ? 1 : 0.3,
+              opacity: isMyConnection ? 1 : 0.2,
             },
           };
         }
@@ -1997,7 +1997,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
                 animated: true,
                 style: {
                   stroke: relationColor.stroke,  // 관계 유형별 색상
-                  strokeWidth: 2,
+                  strokeWidth: 2.5,
                   strokeDasharray: '8,4',
                 },
                 markerEnd: {
@@ -2036,8 +2036,8 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
           style: {
             ...edge.style,
             stroke: isConnected ? "hsl(var(--primary))" : "hsl(var(--border))",
-            strokeWidth: isConnected ? 2 : 1,
-            opacity: isConnected ? 1 : 0.3,
+            strokeWidth: isConnected ? 2.5 : 1,
+            opacity: isConnected ? 1 : 0.2,
           },
         };
       }
@@ -2072,7 +2072,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
             style: {
               ...edge.style,
               stroke: "hsl(var(--primary))",
-              strokeWidth: 2,
+              strokeWidth: 2.5,
               strokeDasharray: "5,5",
               opacity: 1,
             },
@@ -2091,9 +2091,9 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
           style: {
             ...edge.style,
             stroke: isMyConnection ? "hsl(var(--primary))" : "hsl(var(--border))",
-            strokeWidth: isMyConnection ? 2 : 1,
+            strokeWidth: isMyConnection ? 2.5 : 1,
             strokeDasharray: isMyConnection ? undefined : "5,5",
-            opacity: isMyConnection ? 1 : 0.3,
+            opacity: isMyConnection ? 1 : 0.2,
           },
         };
       }
@@ -2150,7 +2150,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
             stroke: isActive ? relationColor.stroke : relationColor.strokeLight,
             strokeWidth: isActive ? 2.5 : 1.5,
             strokeDasharray: "8,4",
-            opacity: isActive ? 1 : 0.3,
+            opacity: isActive ? 1 : 0.2,
           },
           markerEnd: {
             type: MarkerType.ArrowClosed,
@@ -2174,7 +2174,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
               stroke: RELATION_COLORS.join.strokeLight,
               strokeWidth: 1.5,
               strokeDasharray: "6,4",
-              opacity: 0.3,
+              opacity: 0.2,
             },
             markerEnd: {
               type: MarkerType.ArrowClosed,
@@ -2201,7 +2201,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
           style: {
             ...edge.style,
             stroke: RELATION_COLORS.join.stroke,
-            strokeWidth: 2,
+            strokeWidth: 2.5,
             strokeDasharray: "6,4",
             opacity: 1,
           },
@@ -2317,6 +2317,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
       {/* isViewReady가 false면 숨김 처리하여 깜빡임 방지 */}
       <div className={`h-full w-full transition-opacity duration-0 ${isViewReady ? "opacity-100" : "opacity-0"}`}>
       <ReactFlow
+          className="[&_.react-flow__node]:transition-all [&_.react-flow__node]:duration-300"
           nodes={styledNodes}
           edges={styledEdges}
         onNodesChange={onNodesChange}