From 6dad7c15ce58fab4ec5532d477c25b79b410a3d0 Mon Sep 17 00:00:00 2001
From: hyeonsu <hyeonsu@wace.me>
Date: Thu, 11 Sep 2025 11:12:17 +0900
Subject: [PATCH] =?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<DataFlowDesignerProps> = ({
       {/* 엣지 정보 및 액션 버튼 */}
       {showEdgeActions && selectedEdgeForEdit && selectedEdgeInfo && (
         <div
-          className="fixed z-50 rounded-xl border border-gray-200 bg-white shadow-xl"
+          className="fixed z-50 rounded-xl border border-gray-200 bg-white shadow-2xl"
           style={{
             left: edgeActionPosition.x - 160,
             top: edgeActionPosition.y - 100,
             minWidth: "320px",
-            maxWidth: "400px",
+            maxWidth: "380px",
           }}
         >
           {/* 헤더 */}
-          <div className="flex items-center justify-between rounded-t-xl border-b border-gray-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-4">
-            <div className="flex items-center gap-2">
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
-                <span className="text-blue-600">🔗</span>
+          <div className="flex items-center justify-between rounded-t-xl border-b border-gray-200 bg-blue-600 p-4">
+            <div className="flex items-center gap-3">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm">
+                <span className="text-sm text-white">🔗</span>
               </div>
               <div>
-                <div className="font-semibold text-gray-800">{selectedEdgeInfo.relationshipName}</div>
-                <div className="text-xs text-gray-500">데이터 관계</div>
+                <div className="text-sm font-bold text-white">{selectedEdgeInfo.relationshipName}</div>
+                <div className="text-xs text-blue-100">데이터 관계 정보</div>
               </div>
             </div>
             <button
@@ -1284,76 +1284,87 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
                 setSelectedEdgeForEdit(null);
                 setSelectedColumns({});
               }}
-              className="flex h-6 w-6 items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+              className="flex h-6 w-6 items-center justify-center rounded-full text-white/80 transition-all hover:bg-white/20 hover:text-white"
             >
-              ✕
+              <span className="text-sm">✕</span>
             </button>
           </div>
 
+          {/* 관계 정보 요약 */}
+          <div className="border-b border-gray-100 bg-gray-50 p-3">
+            <div className="flex items-center justify-center gap-4">
+              <div className="text-center">
+                <div className="text-xs font-medium tracking-wide text-gray-500 uppercase">관계 유형</div>
+                <div className="mt-1 inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-semibold text-blue-800">
+                  {selectedEdgeInfo.relationshipType}
+                </div>
+              </div>
+              <div className="text-gray-300">|</div>
+              <div className="text-center">
+                <div className="text-xs font-medium tracking-wide text-gray-500 uppercase">연결 유형</div>
+                <div className="mt-1 inline-flex items-center rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-semibold text-indigo-800">
+                  {selectedEdgeInfo.connectionType}
+                </div>
+              </div>
+            </div>
+          </div>
+
           {/* 연결 정보 */}
           <div className="space-y-3 p-4">
             {/* From 테이블 */}
-            <div className="rounded-lg bg-green-50 p-3">
-              <div className="mb-1 text-xs font-medium text-green-700">From 테이블</div>
-              <div className="font-semibold text-gray-800">{selectedEdgeInfo.fromTable}</div>
-              <div className="mt-1 flex flex-wrap gap-1">
-                {selectedEdgeInfo.fromColumns.map((column, index) => (
-                  <span key={index} className="rounded bg-green-100 px-2 py-1 text-xs text-green-800">
-                    {column}
-                  </span>
-                ))}
+            <div className="rounded-lg border-l-4 border-emerald-400 bg-emerald-50 p-3">
+              <div className="mb-2 text-xs font-bold tracking-wide text-emerald-700 uppercase">FROM</div>
+              <div className="mb-2 text-base font-bold text-gray-800">{selectedEdgeInfo.fromTable}</div>
+              <div className="space-y-1">
+                <div className="flex flex-wrap gap-2">
+                  {selectedEdgeInfo.fromColumns.map((column, index) => (
+                    <span
+                      key={index}
+                      className="inline-flex items-center rounded-md bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800 ring-1 ring-emerald-200"
+                    >
+                      {column}
+                    </span>
+                  ))}
+                </div>
               </div>
             </div>
 
-            {/* 화살표 */}
+            {/* 관계 화살표 */}
             <div className="flex justify-center">
-              <div className="flex items-center gap-2 text-gray-400">
-                <div className="h-px w-8 bg-gray-300"></div>
-                <span className="text-lg">→</span>
-                <div className="h-px w-8 bg-gray-300"></div>
-              </div>
+              <span className="text-l text-gray-600">→</span>
             </div>
 
             {/* To 테이블 */}
-            <div className="rounded-lg bg-blue-50 p-3">
-              <div className="mb-1 text-xs font-medium text-blue-700">To 테이블</div>
-              <div className="font-semibold text-gray-800">{selectedEdgeInfo.toTable}</div>
-              <div className="mt-1 flex flex-wrap gap-1">
-                {selectedEdgeInfo.toColumns.map((column, index) => (
-                  <span key={index} className="rounded bg-blue-100 px-2 py-1 text-xs text-blue-800">
-                    {column}
-                  </span>
-                ))}
-              </div>
-            </div>
-
-            {/* 관계 정보 */}
-            <div className="grid grid-cols-2 gap-2">
-              <div className="rounded-lg bg-gray-50 p-2">
-                <div className="text-xs font-medium text-gray-600">관계 유형</div>
-                <div className="text-sm font-semibold text-gray-800">{selectedEdgeInfo.relationshipType}</div>
-              </div>
-              <div className="rounded-lg bg-gray-50 p-2">
-                <div className="text-xs font-medium text-gray-600">연결 유형</div>
-                <div className="text-sm font-semibold text-gray-800">{selectedEdgeInfo.connectionType}</div>
+            <div className="rounded-lg border-l-4 border-blue-400 bg-blue-50 p-3">
+              <div className="mb-2 text-xs font-bold tracking-wide text-blue-700 uppercase">TO</div>
+              <div className="mb-2 text-base font-bold text-gray-800">{selectedEdgeInfo.toTable}</div>
+              <div className="space-y-1">
+                <div className="flex flex-wrap gap-2">
+                  {selectedEdgeInfo.toColumns.map((column, index) => (
+                    <span
+                      key={index}
+                      className="inline-flex items-center rounded-md bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 ring-1 ring-blue-200"
+                    >
+                      {column}
+                    </span>
+                  ))}
+                </div>
               </div>
             </div>
           </div>
 
           {/* 액션 버튼 */}
-          <div className="flex gap-2 border-t border-gray-100 p-4">
+          <div className="flex gap-2 border-t border-gray-200 bg-gray-50 p-3">
             <button
               onClick={handleEditEdge}
-              className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-blue-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-600"
+              className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow-md"
             >
-              <span>✏️</span>
               <span>수정</span>
             </button>
             <button
               onClick={handleDeleteEdge}
-              className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-red-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-600"
+              className="flex flex-1 items-center justify-center gap-1 rounded-lg bg-red-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-all hover:bg-red-700 hover:shadow-md"
             >
-              <span>🗑️</span>
               <span>삭제</span>
             </button>
           </div>