[agent-pipeline] pipe-20260315080636-1tpd round-1

This commit is contained in:
DDD1542 2026-03-15 17:10:04 +09:00
parent 24b53b5b33
commit f711506671
1 changed files with 50 additions and 2 deletions

View File

@ -1,10 +1,10 @@
"use client";
import { useState, useEffect, useCallback } from "react";
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 { ArrowLeft, Plus, RefreshCw, Search, LayoutGrid, LayoutList, TestTube2 } from "lucide-react";
import { ArrowLeft, Plus, RefreshCw, Search, LayoutGrid, LayoutList, TestTube2, ChevronRight, Monitor, Database, FolderOpen } from "lucide-react";
import ScreenList from "@/components/screen/ScreenList";
import ScreenDesigner from "@/components/screen/ScreenDesigner";
import TemplateManager from "@/components/screen/TemplateManager";
@ -15,6 +15,7 @@ import { ScrollToTop } from "@/components/common/ScrollToTop";
import { ScreenDefinition } from "@/types/screen";
import { screenApi } from "@/lib/api/screen";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import CreateScreenModal from "@/components/screen/CreateScreenModal";
// 단계별 진행을 위한 타입 정의
@ -34,6 +35,8 @@ export default function ScreenManagementPage() {
const [searchTerm, setSearchTerm] = useState("");
const [isCreateOpen, setIsCreateOpen] = useState(false);
const tableCount = useMemo(() => new Set(screens.map((s) => s.tableName).filter(Boolean)).size, [screens]);
// 화면 목록 로드
const loadScreens = useCallback(async () => {
try {
@ -200,6 +203,33 @@ export default function ScreenManagementPage() {
<div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
</div>
{/* 통계 요약 바 */}
<div className="flex-shrink-0 flex items-center gap-6 border-b border-border/50 bg-muted/5 px-6 py-2.5">
<div className="flex items-center gap-2">
<Monitor className="h-4 w-4 text-primary" />
<span className="text-xs text-muted-foreground"></span>
<span className="text-sm font-bold">{screens.length}</span>
</div>
<div className="h-4 w-px bg-border" />
<div className="flex items-center gap-2">
<Database className="h-4 w-4 text-info" />
<span className="text-xs text-muted-foreground"></span>
<span className="text-sm font-bold">{tableCount}</span>
</div>
{(selectedGroup || selectedScreen) && (
<div className="ml-auto flex items-center gap-1.5 text-xs text-muted-foreground">
<span>:</span>
{selectedGroup && <Badge variant="outline" className="text-[10px]">{selectedGroup.name}</Badge>}
{selectedScreen && (
<>
<ChevronRight className="h-3 w-3" />
<Badge variant="secondary" className="text-[10px]">{selectedScreen.screenName}</Badge>
</>
)}
</div>
)}
</div>
{/* 메인 콘텐츠 */}
{viewMode === "tree" ? (
<div className="flex-1 overflow-hidden flex">
@ -246,6 +276,24 @@ export default function ScreenManagementPage() {
}}
/>
</div>
{/* 선택 미리보기 */}
{selectedScreen && (
<div className="flex-shrink-0 border-t border-border/50 p-3 bg-muted/5">
<div className="flex items-center gap-2 mb-2">
<Monitor className="h-4 w-4 text-primary" />
<span className="text-sm font-medium truncate">{selectedScreen.screenName}</span>
</div>
<div className="flex items-center gap-3 text-xs text-muted-foreground">
<span className="font-mono">{selectedScreen.screenCode}</span>
<span>{selectedScreen.tableName || "테이블 없음"}</span>
</div>
<div className="flex gap-2 mt-2">
<Button size="sm" variant="outline" className="h-7 text-xs flex-1" onClick={() => handleDesignScreen(selectedScreen)}>
</Button>
</div>
</div>
)}
</div>
{/* 오른쪽: 관계 시각화 (React Flow) */}