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

---
 frontend/components/screen/ScreenNode.tsx | 77 +++++------------------
 1 file changed, 15 insertions(+), 62 deletions(-)

diff --git a/frontend/components/screen/ScreenNode.tsx b/frontend/components/screen/ScreenNode.tsx
index 792dba8e..119b24e3 100644
--- a/frontend/components/screen/ScreenNode.tsx
+++ b/frontend/components/screen/ScreenNode.tsx
@@ -11,7 +11,6 @@ import {
   MousePointer2,
   Key,
   Link2,
-  Columns3,
 } from "lucide-react";
 import { ScreenLayoutSummary } from "@/lib/api/screenGroup";
 
@@ -180,7 +179,7 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
 
   return (
     <div 
-      className={`group relative flex h-[320px] w-[260px] flex-col overflow-hidden rounded-xl border border-border/50 bg-card/80 backdrop-blur-sm shadow-lg transition-all cursor-pointer ${
+      className={`group relative flex h-[240px] w-[240px] flex-col overflow-hidden rounded-xl border border-border/50 bg-card/80 backdrop-blur-sm shadow-lg transition-all cursor-pointer ${
         isFocused 
           ? "border-2 border-primary ring-4 ring-primary/30 shadow-[0_0_30px_-5px_hsl(var(--primary)/0.4)] scale-[1.03]" 
           : isFaded
@@ -213,14 +212,19 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
       />
 
       {/* 헤더 (컬러) */}
-      <div className={`flex items-center gap-2 px-3.5 py-2.5 text-primary-foreground ${headerColor} transition-colors duration-300`}>
-        <Monitor className="h-4 w-4" />
-        <span className="flex-1 truncate text-[13px] font-bold tracking-tight">{label}</span>
+      <div className={`flex items-center gap-2 px-3 py-2 text-primary-foreground ${headerColor} transition-colors duration-300`}>
+        <div className="flex h-6 w-6 items-center justify-center rounded bg-primary-foreground/20">
+          <Monitor className="h-3.5 w-3.5" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="truncate text-xs font-bold text-primary-foreground">{label}</div>
+          {tableName && <div className="truncate text-[9px] text-primary-foreground/70 font-mono">{tableName}</div>}
+        </div>
         {(isMain || isFocused) && <span className="flex h-2 w-2 rounded-full bg-primary-foreground/80 animate-pulse" />}
       </div>
 
       {/* 화면 미리보기 영역 (컴팩트) */}
-      <div className="h-[140px] overflow-hidden bg-gradient-to-b from-muted/30 to-muted/60 p-2.5">
+      <div className="h-[110px] overflow-hidden bg-gradient-to-b from-muted/30 to-muted/60 p-2.5">
         {layoutSummary ? (
           <ScreenPreview layoutSummary={layoutSummary} screenType={screenType} />
         ) : (
@@ -231,44 +235,10 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
         )}
       </div>
 
-      {/* 필드 매핑 영역 */}
-      <div className="flex-1 overflow-hidden border-t border-border bg-card px-2 py-1.5">
-        <div className="mb-1 flex items-center gap-1 text-[9px] font-medium text-muted-foreground">
-          <Columns3 className="h-3 w-3" />
-          <span>필드 매핑</span>
-          <span className="ml-auto text-[8px] text-muted-foreground/70">
-            {layoutSummary?.layoutItems?.filter(i => i.label && !i.componentKind?.includes('button')).length || 0}개
-          </span>
-        </div>
-        <div className="flex flex-col gap-0.5 overflow-y-auto" style={{ maxHeight: '80px' }}>
-          {layoutSummary?.layoutItems
-            ?.filter(item => item.label && !item.componentKind?.includes('button'))
-            ?.slice(0, 6)
-            ?.map((item, idx) => (
-              <div key={idx} className="flex items-center gap-1 rounded bg-muted/50 px-1.5 py-0.5">
-                <div className={`h-1.5 w-1.5 rounded-full ${
-                  item.componentKind === 'table-list' ? 'bg-primary' :
-                  item.componentKind?.includes('select') ? 'bg-warning' :
-                  'bg-muted-foreground'
-                }`} />
-                <span className="flex-1 truncate text-[9px] text-muted-foreground">{item.label}</span>
-                <span className="text-[8px] text-muted-foreground/70">{item.componentKind?.split('-')[0] || 'field'}</span>
-              </div>
-            )) || (
-              <div className="text-center text-[9px] text-muted-foreground py-2">필드 정보 없음</div>
-            )}
-        </div>
-          </div>
-
-      {/* 푸터 (테이블 정보) */}
-      <div className="flex items-center justify-between border-t border-border bg-muted/20 px-3 py-2 backdrop-blur-sm">
-        <div className="flex items-center gap-1 text-[10px] text-muted-foreground">
-          <Database className="h-3 w-3" />
-          <span className="max-w-[120px] truncate font-mono">{tableName || "No Table"}</span>
-        </div>
-        <span className="rounded bg-muted px-1.5 py-0.5 text-[9px] font-medium text-muted-foreground">
-          {getScreenTypeLabel(screenType)}
-        </span>
+      {/* 푸터 (타입 + 컴포넌트 수) */}
+      <div className="flex items-center justify-between border-t border-border bg-muted/20 px-3 py-1.5">
+        <span className="text-[9px] font-medium text-muted-foreground">{getScreenTypeLabel(screenType)}</span>
+        <span className="text-[9px] text-muted-foreground">{layoutSummary?.totalComponents ?? 0}개 컴포넌트</span>
       </div>
     </div>
   );
@@ -350,10 +320,6 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
           <div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
           <div className="h-2.5 w-4 rounded bg-muted-foreground/40" />
         </div>
-        {/* 컴포넌트 수 */}
-        <div className="absolute bottom-2 right-2 rounded-md bg-foreground/80 px-2 py-1 text-[10px] font-medium text-primary-foreground shadow-sm">
-          {totalComponents}개
-        </div>
       </div>
     );
   }
@@ -374,10 +340,6 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
           <div className="h-5 w-14 rounded-md bg-muted-foreground/40 shadow-sm" />
           <div className="h-5 w-14 rounded-md bg-primary shadow-sm" />
         </div>
-        {/* 컴포넌트 수 */}
-        <div className="absolute bottom-2 right-2 rounded-md bg-foreground/80 px-2 py-1 text-[10px] font-medium text-primary-foreground shadow-sm">
-          {totalComponents}개
-        </div>
       </div>
     );
   }
@@ -406,10 +368,6 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
               />
             ))}
           </div>
-        </div>
-        {/* 컴포넌트 수 */}
-        <div className="absolute bottom-2 right-2 rounded-md bg-foreground/80 px-2 py-1 text-[10px] font-medium text-primary-foreground shadow-sm">
-          {totalComponents}개
         </div>
                 </div>
     );
@@ -427,10 +385,6 @@ const ScreenPreview: React.FC<{ layoutSummary: ScreenLayoutSummary; screenType:
           <div className="h-7 w-16 rounded-md bg-muted-foreground/40 shadow-sm" />
             </div>
         <div className="text-xs font-medium text-muted-foreground">액션 화면</div>
-        {/* 컴포넌트 수 */}
-        <div className="absolute bottom-2 right-2 rounded-md bg-foreground/80 px-2 py-1 text-[10px] font-medium text-primary-foreground shadow-sm">
-          {totalComponents}개
-        </div>
       </div>
     );
   }
@@ -836,8 +790,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
       </div>
 
       {/* 푸터 (컴팩트) */}
-      <div className="flex items-center justify-between border-t border-border bg-muted/30 px-2 py-1">
-        <span className="text-[9px] text-muted-foreground">PostgreSQL</span>
+      <div className="flex items-center justify-end border-t border-border bg-muted/30 px-2 py-1">
         {columns && (
           <span className="text-[9px] text-muted-foreground">
             {hasActiveColumns ? `${displayColumns.length}/${totalCount}` : totalCount}개 컬럼