From f71150667133c12b3bd6466d3448f50bcc5870ad Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Sun, 15 Mar 2026 17:10:04 +0900
Subject: [PATCH] [agent-pipeline] pipe-20260315080636-1tpd round-1

---
 .../admin/screenMng/screenMngList/page.tsx    | 52 ++++++++++++++++++-
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
index e367e242..862ded32 100644
--- a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
 import { useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { ArrowLeft, Plus, RefreshCw, Search, LayoutGrid, LayoutList, TestTube2 } from "lucide-react";
+import { ArrowLeft, Plus, RefreshCw, Search, LayoutGrid, LayoutList, TestTube2, ChevronRight, Monitor, Database, FolderOpen } from "lucide-react";
 import ScreenList from "@/components/screen/ScreenList";
 import ScreenDesigner from "@/components/screen/ScreenDesigner";
 import TemplateManager from "@/components/screen/TemplateManager";
@@ -15,6 +15,7 @@ import { ScrollToTop } from "@/components/common/ScrollToTop";
 import { ScreenDefinition } from "@/types/screen";
 import { screenApi } from "@/lib/api/screen";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
 import CreateScreenModal from "@/components/screen/CreateScreenModal";
 
 // 단계별 진행을 위한 타입 정의
@@ -34,6 +35,8 @@ export default function ScreenManagementPage() {
   const [searchTerm, setSearchTerm] = useState("");
   const [isCreateOpen, setIsCreateOpen] = useState(false);
 
+  const tableCount = useMemo(() => new Set(screens.map((s) => s.tableName).filter(Boolean)).size, [screens]);
+
   // 화면 목록 로드
   const loadScreens = useCallback(async () => {
     try {
@@ -200,6 +203,33 @@ export default function ScreenManagementPage() {
         <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
       </div>
 
+      {/* 통계 요약 바 */}
+      <div className="flex-shrink-0 flex items-center gap-6 border-b border-border/50 bg-muted/5 px-6 py-2.5">
+        <div className="flex items-center gap-2">
+          <Monitor className="h-4 w-4 text-primary" />
+          <span className="text-xs text-muted-foreground">화면</span>
+          <span className="text-sm font-bold">{screens.length}</span>
+        </div>
+        <div className="h-4 w-px bg-border" />
+        <div className="flex items-center gap-2">
+          <Database className="h-4 w-4 text-info" />
+          <span className="text-xs text-muted-foreground">테이블</span>
+          <span className="text-sm font-bold">{tableCount}</span>
+        </div>
+        {(selectedGroup || selectedScreen) && (
+          <div className="ml-auto flex items-center gap-1.5 text-xs text-muted-foreground">
+            <span>현재:</span>
+            {selectedGroup && <Badge variant="outline" className="text-[10px]">{selectedGroup.name}</Badge>}
+            {selectedScreen && (
+              <>
+                <ChevronRight className="h-3 w-3" />
+                <Badge variant="secondary" className="text-[10px]">{selectedScreen.screenName}</Badge>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+
       {/* 메인 콘텐츠 */}
       {viewMode === "tree" ? (
         <div className="flex-1 overflow-hidden flex">
@@ -246,6 +276,24 @@ export default function ScreenManagementPage() {
                 }}
               />
             </div>
+            {/* 선택 미리보기 */}
+            {selectedScreen && (
+              <div className="flex-shrink-0 border-t border-border/50 p-3 bg-muted/5">
+                <div className="flex items-center gap-2 mb-2">
+                  <Monitor className="h-4 w-4 text-primary" />
+                  <span className="text-sm font-medium truncate">{selectedScreen.screenName}</span>
+                </div>
+                <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                  <span className="font-mono">{selectedScreen.screenCode}</span>
+                  <span>{selectedScreen.tableName || "테이블 없음"}</span>
+                </div>
+                <div className="flex gap-2 mt-2">
+                  <Button size="sm" variant="outline" className="h-7 text-xs flex-1" onClick={() => handleDesignScreen(selectedScreen)}>
+                    편집
+                  </Button>
+                </div>
+              </div>
+            )}
           </div>
 
           {/* 오른쪽: 관계 시각화 (React Flow) */}