[agent-pipeline] pipe-20260315072335-zb1m round-1

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 (
     <div 
-      className={`group relative flex h-[320px] w-[260px] flex-col overflow-hidden rounded-lg border bg-card shadow-md transition-all cursor-pointer ${
+      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 ${
         isFocused 
-          ? "border-2 border-primary ring-4 ring-primary/50 shadow-xl scale-105" 
+          ? "border-2 border-primary ring-4 ring-primary/30 shadow-[0_0_30px_-5px_hsl(var(--primary)/0.4)] scale-[1.03]" 
           : isFaded
-          ? "border-border opacity-50"
+          ? "opacity-50"
-          : "border-border hover:shadow-lg hover:ring-2 hover:ring-primary/20"
+          : "hover:shadow-xl hover:border-border hover:-translate-y-0.5"
       }`}
       style={{
         filter: isFaded ? "grayscale(100%)" : "none",
         transition: "all 0.3s ease",
-        transform: isFocused ? "scale(1.02)" : "scale(1)",
       }}
     >
       {/* Handles */}
@@ -214,14 +213,14 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
       />
 
       {/* 헤더 (컬러) */}
-      <div className={`flex items-center gap-2 px-3 py-2 text-primary-foreground ${headerColor} transition-colors duration-300`}>
+      <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-xs font-semibold">{label}</span>
+        <span className="flex-1 truncate text-[13px] font-bold tracking-tight">{label}</span>
         {(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-muted/50 p-2">
+      <div className="h-[140px] overflow-hidden bg-gradient-to-b from-muted/30 to-muted/60 p-2.5">
         {layoutSummary ? (
           <ScreenPreview layoutSummary={layoutSummary} screenType={screenType} />
         ) : (
@@ -262,7 +261,7 @@ export const ScreenNode: React.FC<{ data: ScreenNodeData }> = ({ data }) => {
           </div>
 
       {/* 푸터 (테이블 정보) */}
-      <div className="flex items-center justify-between border-t border-border bg-muted/30 px-3 py-1.5">
+      <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>
@@ -574,7 +573,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
 
   return (
     <div 
-      className={`group relative flex w-[260px] flex-col overflow-visible rounded-xl border shadow-md ${
+      className={`group relative flex w-[260px] flex-col overflow-visible rounded-xl border border-border/50 bg-card/80 backdrop-blur-sm shadow-lg ${
         // 1. 필터 테이블 (마스터-디테일의 디테일 테이블): 항상 primary 테두리
         isFilterTable
           ? "border-2 border-primary ring-2 ring-primary/20 shadow-lg bg-primary/5"
@@ -586,9 +585,9 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ 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) - 그라데이션 */}
       <div className={`flex items-center gap-2 px-3 py-1.5 text-primary-foreground rounded-t-xl transition-colors duration-700 ease-in-out ${
-        isFaded ? "bg-muted-foreground" : (hasFilterRelation || isFilterSource) ? "bg-primary" : isMain ? "bg-primary" : "bg-muted-foreground"
+        isFaded 
+          ? "bg-gradient-to-r from-muted-foreground to-muted-foreground/70" 
+          : (hasFilterRelation || isFilterSource) 
+          ? "bg-gradient-to-r from-primary to-primary/70" 
+          : isMain 
+          ? "bg-gradient-to-r from-primary to-primary/70" 
+          : "bg-gradient-to-r from-muted-foreground to-muted-foreground/70"
       }`}>
         <Database className="h-3.5 w-3.5 shrink-0" />
         <div className="flex-1 min-w-0">
@@ -670,7 +675,7 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
           </div>
         </div>
         {hasActiveColumns && (
-          <span className="rounded-full bg-primary-foreground/20 px-1.5 py-0.5 text-[8px] shrink-0">
+          <span className="rounded-full bg-primary-foreground/25 backdrop-blur-sm border border-primary-foreground/10 px-1.5 py-0.5 text-[8px] shrink-0">
             {displayColumns.length}개 활성
           </span>
         )}
@@ -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,