From cbd47184e7b2eac9ebe284726d8f98713a45c6a5 Mon Sep 17 00:00:00 2001 From: DDD1542 Date: Mon, 16 Mar 2026 09:17:52 +0900 Subject: [PATCH] Enhance Screen Management UI - Updated the search input to include a clear button for easier user interaction. - Improved the layout with a muted background for better visibility. - Enhanced screen card display with dynamic type color and glow effects based on screen type. - Adjusted text colors for better contrast and readability in dark mode. - Refined connection indicators and button styles for improved UX. Made-with: Cursor --- .../admin/screenMng/screenMngList/page.tsx | 86 +++++++++++++------ .../components/screen/ScreenRelationFlow.tsx | 16 ++-- 2 files changed, 68 insertions(+), 34 deletions(-) diff --git a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx index 450e836a..e6bbf480 100644 --- a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx +++ b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx @@ -4,7 +4,7 @@ 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 { Plus, RefreshCw, Search, LayoutGrid, LayoutList, TestTube2, Database, MoreHorizontal, PanelLeftClose, PanelLeftOpen } from "lucide-react"; +import { Plus, RefreshCw, Search, X, LayoutGrid, LayoutList, TestTube2, Database, MoreHorizontal, PanelLeftClose, PanelLeftOpen } from "lucide-react"; import ScreenDesigner from "@/components/screen/ScreenDesigner"; import TemplateManager from "@/components/screen/TemplateManager"; import { ScreenGroupTreeView } from "@/components/screen/ScreenGroupTreeView"; @@ -300,42 +300,76 @@ export default function ScreenManagementPage() { ) : (
+ {/* 카드 뷰 상단: 검색 + 카운트 */} +
+
+ + setSearchTerm(e.target.value)} + className="pl-9 h-9 rounded-xl bg-muted/30 dark:bg-muted/30 border-border/50 dark:border-border/50 focus:bg-background focus:ring-2 focus:ring-primary/30 transition-colors" + /> + {searchTerm && ( + + )} +
+ {filteredScreens.length}개 화면 +
{filteredScreens.map((screen) => (
handleScreenSelect(screen)} onDoubleClick={() => handleDesignScreen(screen)} > - {/* 상단: 상태 dot + 이름 + 호버 편집 */} -
- -
-
{screen.screenName}
-
{screen.screenCode}
+ {/* 좌측 타입별 컬러 바 */} +
+
+ {/* 상단: 이름 + 호버 편집 */} +
+
+
{screen.screenName}
+
{screen.screenCode}
+
+ 편집 +
+ {/* 설명 (있으면) */} + {screen.description && ( +
{screen.description}
+ )} + {/* 중단: 메타 정보 */} +
+ + + {screen.tableLabel || screen.tableName || "—"} + +
+ {/* 하단: 타입 칩 + 날짜 */} +
+ + {(screen as { screenType?: string }).screenType === "grid" ? "그리드" : (screen as { screenType?: string }).screenType === "dashboard" ? "대시보드" : "폼"} + + + {screen.updatedDate ? new Date(screen.updatedDate).toLocaleDateString("ko-KR", { month: "2-digit", day: "2-digit" }) : screen.createdDate ? new Date(screen.createdDate).toLocaleDateString("ko-KR", { month: "2-digit", day: "2-digit" }) : ""} +
- 편집 -
- {/* 중단: 메타 정보 */} -
- - - {screen.tableName || "—"} - -
- {/* 하단: 타입 칩 + 날짜 */} -
- - {(screen as { screenType?: string }).screenType === "grid" ? "그리드" : (screen as { screenType?: string }).screenType === "dashboard" ? "대시보드" : "폼"} - - - {screen.createdDate ? new Date(screen.createdDate).toLocaleDateString("ko-KR", { month: "2-digit", day: "2-digit" }) : ""} -
))} diff --git a/frontend/components/screen/ScreenRelationFlow.tsx b/frontend/components/screen/ScreenRelationFlow.tsx index 09c980df..87484840 100644 --- a/frontend/components/screen/ScreenRelationFlow.tsx +++ b/frontend/components/screen/ScreenRelationFlow.tsx @@ -2408,7 +2408,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
{/* 선택 정보 바 (캔버스 상단) */} {(screen || selectedGroup) && ( -
+
{selectedGroup && ( <> @@ -2419,12 +2419,12 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId <> {screen.screenName} - {screen.screenCode} + {screen.screenCode} )} -
- 연결 +
+ 연결 {( [ @@ -2443,13 +2443,13 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId onClick={() => setEdgeFilterState((prev) => ({ ...prev, [key]: !prev[key] }))} className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-medium transition-all duration-200 ${ isOn - ? "bg-foreground/5 border border-border/20 text-foreground/80" - : `border text-muted-foreground/40 ${!defaultOn ? "border-dashed border-border/20" : "border-border/10"}` + ? "bg-foreground/[0.08] dark:bg-foreground/5 border border-border/40 dark:border-border/20 text-foreground/80" + : `border text-muted-foreground/70 dark:text-muted-foreground/40 ${!defaultOn ? "border-dashed border-border/40 dark:border-border/20" : "border-border/40 dark:border-border/10"}` }`} > - + {label} - {count} + {count} ); })}