[agent-pipeline] pipe-20260315091327-kxyf round-4

frontend/components/screen/ScreenRelationFlow.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect, useCallback } from "react";
 import {
   ReactFlow,
   Controls,
+  MiniMap,
   Background,
   BackgroundVariant,
   Node,
@@ -2393,8 +2394,26 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
               </filter>
             </defs>
           </svg>
-          <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="hsl(var(--border))" />
-        <Controls position="bottom-right" />
+          <Background id="bg-dots" variant={BackgroundVariant.Dots} gap={16} size={0.5} color="hsl(var(--border) / 0.3)" />
+          <Background id="bg-lines" variant={BackgroundVariant.Lines} gap={120} color="hsl(var(--border) / 0.08)" />
+        <Controls position="top-right" />
+        <MiniMap
+          position="bottom-right"
+          nodeColor={(node) => {
+            if (node.type === "screenNode") return "hsl(var(--primary))";
+            if (node.type === "tableNode") return "hsl(var(--warning))";
+            return "hsl(var(--muted-foreground))";
+          }}
+          nodeStrokeWidth={2}
+          zoomable
+          pannable
+          style={{
+            background: "hsl(var(--card) / 0.8)",
+            border: "1px solid hsl(var(--border) / 0.5)",
+            borderRadius: "8px",
+            marginBottom: "8px",
+          }}
+        />
         {/* 관계 범례 */}
         <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>