[agent-pipeline] pipe-20260315080636-1tpd round-2

frontend/components/screen/ScreenRelationFlow.tsx

@@ -34,6 +34,7 @@ import {
 import { getTableColumns, ColumnTypeInfo } from "@/lib/api/tableManagement";
 import { ScreenSettingModal } from "./ScreenSettingModal";
 import { TableSettingModal } from "./TableSettingModal";
+import { Monitor, Database, FolderOpen } from "lucide-react";
 
 // 관계 유형별 색상 정의 (CSS 변수 기반 - 다크모드 자동 대응)
 const RELATION_COLORS: Record<VisualRelationType, { stroke: string; strokeLight: string; label: string }> = {
@@ -2295,10 +2296,38 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
   // 조건부 렌더링 (모든 훅 선언 후에 위치해야 함)
   if (!screen && !selectedGroup) {
     return (
-      <div className="flex h-full items-center justify-center text-muted-foreground">
+      <div className="flex h-full flex-col items-center justify-center gap-6 p-8">
-        <div className="text-center">
+        <div className="relative">
-          <p className="text-sm">그룹 또는 화면을 선택하면</p>
+          <div className="flex items-center gap-4 opacity-30">
-          <p className="text-sm">데이터 관계가 시각화됩니다</p>
+            <div className="h-16 w-24 rounded-lg border-2 border-dashed border-primary/40 flex items-center justify-center">
+              <Monitor className="h-6 w-6 text-primary/60" />
+            </div>
+            <div className="h-px w-12 border-t-2 border-dashed border-border" />
+            <div className="h-12 w-20 rounded-lg border-2 border-dashed border-info/40 flex items-center justify-center">
+              <Database className="h-5 w-5 text-info/60" />
+            </div>
+          </div>
+        </div>
+        <div className="text-center max-w-sm">
+          <h3 className="text-lg font-semibold mb-2">화면 관계 시각화</h3>
+          <p className="text-sm text-muted-foreground leading-relaxed">
+            좌측에서 그룹 또는 화면을 선택하면<br/>
+            테이블 관계가 자동으로 시각화됩니다.
+          </p>
+        </div>
+        <div className="flex gap-8 text-xs text-muted-foreground">
+          <div className="flex items-center gap-2">
+            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-bold">1</span>
+            <span>그룹 선택</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-bold">2</span>
+            <span>관계 확인</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-bold">3</span>
+            <span>화면 편집</span>
+          </div>
         </div>
       </div>
     );
@@ -2313,7 +2342,25 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
   }
 
   return (
-    <div className="h-full w-full">
+    <div className="relative h-full w-full">
+      {/* 선택 정보 바 (캔버스 상단) */}
+      {(screen || selectedGroup) && (
+        <div className="absolute top-0 left-0 right-0 z-10 flex items-center gap-3 border-b bg-card/80 backdrop-blur-sm px-4 py-2">
+          {selectedGroup && (
+            <>
+              <FolderOpen className="h-4 w-4 text-warning" />
+              <span className="text-sm font-medium">{selectedGroup.name}</span>
+            </>
+          )}
+          {screen && !selectedGroup && (
+            <>
+              <Monitor className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">{screen.screenName}</span>
+              <span className="text-xs text-muted-foreground font-mono">{screen.screenCode}</span>
+            </>
+          )}
+        </div>
+      )}
       {/* isViewReady가 false면 숨김 처리하여 깜빡임 방지 */}
       <div className={`h-full w-full transition-opacity duration-0 ${isViewReady ? "opacity-100" : "opacity-0"}`}>
       <ReactFlow
@@ -2331,6 +2378,28 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
       >
           <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="hsl(var(--border))" />
         <Controls position="bottom-right" />
+        {/* 관계 범례 */}
+        <div className="absolute bottom-4 left-4 z-10 rounded-lg border bg-card/90 backdrop-blur-sm p-3 shadow-md">
+          <p className="text-[10px] font-medium text-muted-foreground mb-2">관계 유형</p>
+          <div className="flex flex-col gap-1.5">
+            <div className="flex items-center gap-2">
+              <div className="h-0.5 w-6 rounded-full bg-primary" />
+              <span className="text-[10px] text-muted-foreground">메인 테이블</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="h-0.5 w-6 rounded-full bg-primary/50" />
+              <span className="text-[10px] text-muted-foreground">마스터-디테일</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="h-0.5 w-6 rounded-full bg-warning" />
+              <span className="text-[10px] text-muted-foreground">코드 참조</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="h-0.5 w-6 rounded-full bg-success" />
+              <span className="text-[10px] text-muted-foreground">엔티티 조인</span>
+            </div>
+          </div>
+        </div>
       </ReactFlow>
       </div>