From 21ca0f3a3ce14c43fb11e7878b85488d0296858a Mon Sep 17 00:00:00 2001 From: DDD1542 Date: Sun, 15 Mar 2026 16:27:14 +0900 Subject: [PATCH] [agent-pipeline] pipe-20260315072335-zb1m round-1 --- frontend/components/screen/ScreenNode.tsx | 69 ++++++++++++----------- 1 file changed, 37 insertions(+), 32 deletions(-) diff --git a/frontend/components/screen/ScreenNode.tsx b/frontend/components/screen/ScreenNode.tsx index 105eced0..792dba8e 100644 --- a/frontend/components/screen/ScreenNode.tsx +++ b/frontend/components/screen/ScreenNode.tsx @@ -107,42 +107,42 @@ const getScreenTypeIcon = (screenType?: string) => { } }; -// 화면 타입별 색상 (헤더) +// 화면 타입별 색상 (헤더) - 그라데이션 const getScreenTypeColor = (screenType?: string, isMain?: boolean) => { - if (!isMain) return "bg-muted-foreground"; + if (!isMain) return "bg-gradient-to-r from-muted-foreground to-muted-foreground/80"; switch (screenType) { case "grid": - return "bg-primary"; + return "bg-gradient-to-r from-primary to-primary/80"; case "dashboard": - return "bg-warning"; + return "bg-gradient-to-r from-warning to-warning/80"; case "action": - return "bg-destructive"; + return "bg-gradient-to-r from-destructive to-destructive/80"; default: - return "bg-primary"; + return "bg-gradient-to-r from-primary to-primary/80"; } }; -// 화면 역할(screenRole)에 따른 색상 +// 화면 역할(screenRole)에 따른 색상 - 그라데이션 const getScreenRoleColor = (screenRole?: string) => { - if (!screenRole) return "bg-muted-foreground"; + if (!screenRole) return "bg-gradient-to-r from-muted-foreground to-muted-foreground/80"; // 역할명에 포함된 키워드로 색상 결정 const role = screenRole.toLowerCase(); if (role.includes("그리드") || role.includes("grid") || role.includes("메인") || role.includes("main") || role.includes("list")) { - return "bg-primary"; // 메인 그리드 + return "bg-gradient-to-r from-primary to-primary/80"; // 메인 그리드 } if (role.includes("등록") || role.includes("폼") || role.includes("form") || role.includes("register") || role.includes("input")) { - return "bg-primary"; // 등록 폼 + return "bg-gradient-to-r from-primary to-primary/80"; // 등록 폼 } if (role.includes("액션") || role.includes("action") || role.includes("이벤트") || role.includes("event") || role.includes("클릭")) { - return "bg-destructive"; // 액션/이벤트 + return "bg-gradient-to-r from-destructive to-destructive/80"; // 액션/이벤트 } if (role.includes("상세") || role.includes("detail") || role.includes("popup") || role.includes("팝업")) { - return "bg-warning"; // 상세/팝업 + return "bg-gradient-to-r from-warning to-warning/80"; // 상세/팝업 } - return "bg-muted-foreground"; // 기본 회색 + return "bg-gradient-to-r from-muted-foreground to-muted-foreground/80"; // 기본 회색 }; // 화면 타입별 라벨 @@ -169,7 +169,7 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => { let headerColor: string; if (isInGroup) { if (isFaded) { - headerColor = "bg-muted/60"; // 흑백 처리 - 더 확실한 회색 + headerColor = "bg-gradient-to-r from-muted to-muted/60"; // 흑백 처리 - 더 확실한 회색 } else { // 포커스되었거나 아직 아무것도 선택 안됐을 때: 역할별 색상 headerColor = getScreenRoleColor(screenRole); @@ -180,17 +180,16 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => { return (
{/* Handles */} @@ -214,14 +213,14 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => { /> {/* 헤더 (컬러) */} -
+
- {label} + {label} {(isMain || isFocused) && }
{/* 화면 미리보기 영역 (컴팩트) */} -
+
{layoutSummary ? ( ) : ( @@ -262,7 +261,7 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
{/* 푸터 (테이블 정보) */} -
+
{tableName || "No Table"} @@ -574,7 +573,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => { return (
= ({ data }) => { ? "border-2 border-primary ring-4 ring-primary/30 shadow-xl bg-card" // 4. 흐리게 처리 : isFaded - ? "border-border opacity-60 bg-card" + ? "opacity-60 bg-card" // 5. 기본 - : "border-border hover:shadow-lg hover:ring-2 hover:ring-primary/20 bg-card" + : "hover:shadow-xl hover:ring-2 hover:ring-primary/20" }`} style={{ filter: isFaded ? "grayscale(80%)" : "none", @@ -653,9 +652,15 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => { className="!h-2 !w-2 !border-2 !border-background !bg-warning opacity-0 transition-opacity group-hover:opacity-100" /> - {/* 헤더 (필터 관계: primary, 필터 소스: primary, 메인: primary, 기본: muted-foreground) */} + {/* 헤더 (필터 관계: primary, 필터 소스: primary, 메인: primary, 기본: muted-foreground) - 그라데이션 */}
@@ -670,7 +675,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
{hasActiveColumns && ( - + {displayColumns.length}개 활성 )} @@ -745,14 +750,14 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => { key={col.name} className={`flex items-center gap-1 rounded px-1.5 py-0.5 transition-all duration-300 ${ isJoinColumn - ? "bg-warning/10 border border-warning/30 shadow-sm" + ? "bg-warning/10 border border-warning/20 shadow-sm" : isFilterColumn || isFilterSourceColumn - ? "bg-primary/10 border border-primary/30 shadow-sm" // 필터 컬럼/필터 소스 + ? "bg-primary/10 border border-primary/20 shadow-sm" // 필터 컬럼/필터 소스 : isHighlighted ? "bg-primary/10 border border-primary/40 shadow-sm" : hasActiveColumns ? "bg-muted" - : "bg-muted/50 hover:bg-muted" + : "bg-muted/50 hover:bg-muted/80 transition-colors" }`} style={{ animation: hasActiveColumns ? `fadeIn 0.5s ease-out ${idx * 80}ms forwards` : undefined,