[agent-pipeline] pipe-20260315131310-l8kw round-2
This commit is contained in:
DDD1542
parent
232650bc07
commit
015706b95a
|
|
@ -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() {
|
|||
</div>
|
||||
) : (
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
{/* 카드 뷰 상단: 검색 + 카운트 */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="화면 검색..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => 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 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchTerm("")}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
aria-label="검색어 지우기"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">{filteredScreens.length}개 화면</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-3">
|
||||
{filteredScreens.map((screen) => (
|
||||
<div
|
||||
key={screen.screenId}
|
||||
className={`group rounded-[10px] border p-[14px] cursor-pointer transition-all duration-200 ${
|
||||
className={`group relative overflow-hidden rounded-[10px] border cursor-pointer transition-all duration-200 ${
|
||||
selectedScreen?.screenId === screen.screenId
|
||||
? "border-primary/40 bg-card shadow-[0_0_0_1px_hsl(var(--primary)/0.4)]"
|
||||
: "border-border/10 bg-card/80 hover:border-border/20 hover:bg-card hover:shadow-[0_2px_20px_-6px_rgba(0,0,0,0.5)]"
|
||||
: "border-border/40 dark:border-border/10 bg-card dark:bg-card/80 hover:border-border/60 dark:hover:border-border/20 hover:bg-card hover:shadow-[0_2px_20px_-6px_rgba(0,0,0,0.08)] dark:hover:shadow-[0_2px_20px_-6px_rgba(0,0,0,0.5)]"
|
||||
}`}
|
||||
onClick={() => handleScreenSelect(screen)}
|
||||
onDoubleClick={() => handleDesignScreen(screen)}
|
||||
>
|
||||
{/* 상단: 상태 dot + 이름 + 호버 편집 */}
|
||||
<div className="flex items-start gap-2.5">
|
||||
<span className="mt-[5px] h-1.5 w-1.5 rounded-full bg-success shadow-[0_0_6px_hsl(var(--success)/0.5)] flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[13px] font-semibold leading-tight truncate tracking-[-0.2px]">{screen.screenName}</div>
|
||||
<div className="text-[10px] font-mono text-muted-foreground/50 mt-0.5 tracking-[-0.3px] truncate">{screen.screenCode}</div>
|
||||
{/* 좌측 타입별 컬러 바 */}
|
||||
<div className={`absolute left-0 top-0 bottom-0 w-[3px] ${
|
||||
(screen as { screenType?: string }).screenType === "grid" ? "bg-primary" :
|
||||
(screen as { screenType?: string }).screenType === "dashboard" ? "bg-warning" :
|
||||
"bg-success"
|
||||
}`} />
|
||||
<div className="pl-4 pr-[14px] py-[14px]">
|
||||
{/* 상단: 이름 + 호버 편집 */}
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[13px] font-semibold leading-tight truncate tracking-[-0.2px]">{screen.screenName}</div>
|
||||
<div className="text-[10px] font-mono text-muted-foreground/80 dark:text-muted-foreground/50 mt-0.5 tracking-[-0.3px] truncate">{screen.screenCode}</div>
|
||||
</div>
|
||||
<span className="text-[10px] text-muted-foreground/70 dark:text-muted-foreground/40 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 mt-0.5">편집</span>
|
||||
</div>
|
||||
{/* 설명 (있으면) */}
|
||||
{screen.description && (
|
||||
<div className="text-[10px] text-muted-foreground/60 dark:text-muted-foreground/40 mt-1.5 truncate">{screen.description}</div>
|
||||
)}
|
||||
{/* 중단: 메타 정보 */}
|
||||
<div className="flex items-center gap-3 mt-2.5 text-[11px] text-muted-foreground/80 dark:text-muted-foreground/60">
|
||||
<span className="flex items-center gap-1">
|
||||
<Database className="h-3 w-3 opacity-70 dark:opacity-50" />
|
||||
<span className="font-mono text-[10px] tracking-[-0.3px]">{screen.tableLabel || screen.tableName || "—"}</span>
|
||||
</span>
|
||||
</div>
|
||||
{/* 하단: 타입 칩 + 날짜 */}
|
||||
<div className="flex items-center justify-between mt-2.5 pt-2 border-t border-border/30 dark:border-border/5">
|
||||
<span className="text-[10px] font-medium px-[7px] py-[2px] rounded bg-primary/10 text-primary tracking-[-0.2px]">
|
||||
{(screen as { screenType?: string }).screenType === "grid" ? "그리드" : (screen as { screenType?: string }).screenType === "dashboard" ? "대시보드" : "폼"}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground/60 dark:text-muted-foreground/30 font-mono font-light">
|
||||
{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" }) : ""}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[10px] text-muted-foreground/40 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 mt-0.5">편집</span>
|
||||
</div>
|
||||
{/* 중단: 메타 정보 */}
|
||||
<div className="flex items-center gap-3 mt-2.5 text-[11px] text-muted-foreground/60">
|
||||
<span className="flex items-center gap-1">
|
||||
<Database className="h-3 w-3 opacity-50" />
|
||||
<span className="font-mono text-[10px] tracking-[-0.3px]">{screen.tableName || "—"}</span>
|
||||
</span>
|
||||
</div>
|
||||
{/* 하단: 타입 칩 + 날짜 */}
|
||||
<div className="flex items-center justify-between mt-2.5 pt-2 border-t border-border/5">
|
||||
<span className="text-[10px] font-medium px-[7px] py-[2px] rounded bg-primary/10 text-primary tracking-[-0.2px]">
|
||||
{(screen as { screenType?: string }).screenType === "grid" ? "그리드" : (screen as { screenType?: string }).screenType === "dashboard" ? "대시보드" : "폼"}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground/30 font-mono font-light">
|
||||
{screen.createdDate ? new Date(screen.createdDate).toLocaleDateString("ko-KR", { month: "2-digit", day: "2-digit" }) : ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -2408,7 +2408,7 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
|
|||
<div className="relative h-full w-full">
|
||||
{/* 선택 정보 바 (캔버스 상단) */}
|
||||
{(screen || selectedGroup) && (
|
||||
<div className="absolute top-0 left-0 right-0 z-10 flex items-center gap-3 border-b bg-card/80 backdrop-blur-sm px-4 py-2">
|
||||
<div className="absolute top-0 left-0 right-0 z-10 flex items-center gap-3 border-b bg-card dark:bg-card/80 backdrop-blur-sm px-4 py-2">
|
||||
{selectedGroup && (
|
||||
<>
|
||||
<FolderOpen className="h-4 w-4 text-warning" />
|
||||
|
|
@ -2419,12 +2419,12 @@ function ScreenRelationFlowInner({ screen, selectedGroup, initialFocusedScreenId
|
|||
<>
|
||||
<Monitor className="h-4 w-4 text-primary" />
|
||||
<span className="text-sm font-medium">{screen.screenName}</span>
|
||||
<span className="text-xs text-muted-foreground font-mono">{screen.screenCode}</span>
|
||||
<span className="text-xs text-muted-foreground/80 dark:text-muted-foreground/50 font-mono">{screen.screenCode}</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="h-4 w-px bg-border/30 mx-1" />
|
||||
<span className="text-[10px] font-medium text-muted-foreground/50">연결</span>
|
||||
<div className="h-4 w-px bg-border/50 dark:bg-border/30 mx-1" />
|
||||
<span className="text-[10px] font-medium text-muted-foreground/80 dark:text-muted-foreground/50">연결</span>
|
||||
|
||||
{(
|
||||
[
|
||||
|
|
@ -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"}`
|
||||
}`}
|
||||
>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${color} transition-opacity ${isOn ? "opacity-100 shadow-sm" : "opacity-30"}`} />
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${color} transition-opacity ${isOn ? "opacity-100 shadow-sm" : "opacity-50 dark:opacity-30"}`} />
|
||||
{label}
|
||||
<span className="text-[9px] text-muted-foreground/40 font-mono">{count}</span>
|
||||
<span className="text-[9px] text-muted-foreground/70 dark:text-muted-foreground/40 font-mono">{count}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
Loading…
Reference in New Issue