456 lines
21 KiB
TypeScript
456 lines
21 KiB
TypeScript
"use client";
|
|
|
|
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, 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";
|
|
import { ScreenRelationFlow } from "@/components/screen/ScreenRelationFlow";
|
|
import { V2ComponentsDemo } from "@/components/v2";
|
|
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 {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import CreateScreenModal from "@/components/screen/CreateScreenModal";
|
|
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@/components/ui/sheet";
|
|
|
|
// 단계별 진행을 위한 타입 정의
|
|
type Step = "list" | "design" | "template" | "v2-test";
|
|
type ViewMode = "flow" | "card";
|
|
|
|
export default function ScreenManagementPage() {
|
|
const searchParams = useSearchParams();
|
|
const [currentStep, setCurrentStep] = useState<Step>("list");
|
|
const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
|
|
const [selectedGroup, setSelectedGroup] = useState<{ id: number; name: string; company_code?: string } | null>(null);
|
|
const [focusedScreenIdInGroup, setFocusedScreenIdInGroup] = useState<number | null>(null);
|
|
const [stepHistory, setStepHistory] = useState<Step[]>(["list"]);
|
|
const [viewMode, setViewMode] = useState<ViewMode>("flow");
|
|
const [screens, setScreens] = useState<ScreenDefinition[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
|
const [isDetailOpen, setIsDetailOpen] = useState(false);
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
|
|
|
const tableCount = useMemo(() => new Set(screens.map((s) => s.tableName).filter(Boolean)).size, [screens]);
|
|
|
|
// 화면 목록 로드
|
|
const loadScreens = useCallback(async () => {
|
|
try {
|
|
setLoading(true);
|
|
const result = await screenApi.getScreens({ page: 1, size: 1000, searchTerm: "", excludePop: true });
|
|
// screenApi.getScreens는 { data: ScreenDefinition[], total, page, size, totalPages } 형태 반환
|
|
if (result.data && result.data.length > 0) {
|
|
setScreens(result.data);
|
|
}
|
|
} catch (error) {
|
|
console.error("화면 목록 로드 실패:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
loadScreens();
|
|
}, [loadScreens]);
|
|
|
|
// 화면 목록 새로고침 이벤트 리스너
|
|
useEffect(() => {
|
|
const handleScreenListRefresh = () => {
|
|
console.log("🔄 화면 목록 새로고침 이벤트 수신");
|
|
loadScreens();
|
|
};
|
|
|
|
window.addEventListener("screen-list-refresh", handleScreenListRefresh);
|
|
return () => {
|
|
window.removeEventListener("screen-list-refresh", handleScreenListRefresh);
|
|
};
|
|
}, [loadScreens]);
|
|
|
|
// URL 쿼리 파라미터로 화면 디자이너 자동 열기
|
|
useEffect(() => {
|
|
const openDesignerId = searchParams.get("openDesigner");
|
|
if (openDesignerId && screens.length > 0) {
|
|
const screenId = parseInt(openDesignerId, 10);
|
|
const targetScreen = screens.find((s) => s.screenId === screenId);
|
|
if (targetScreen) {
|
|
setSelectedScreen(targetScreen);
|
|
setCurrentStep("design");
|
|
setStepHistory(["list", "design"]);
|
|
}
|
|
}
|
|
}, [searchParams, screens]);
|
|
|
|
// 화면 설계 모드일 때는 전체 화면 사용
|
|
const isDesignMode = currentStep === "design";
|
|
|
|
// 다음 단계로 이동
|
|
const goToNextStep = (nextStep: Step) => {
|
|
setStepHistory((prev) => [...prev, nextStep]);
|
|
setCurrentStep(nextStep);
|
|
};
|
|
|
|
// 특정 단계로 이동
|
|
const goToStep = (step: Step) => {
|
|
setCurrentStep(step);
|
|
const stepIndex = stepHistory.findIndex((s) => s === step);
|
|
if (stepIndex !== -1) {
|
|
setStepHistory(stepHistory.slice(0, stepIndex + 1));
|
|
}
|
|
};
|
|
|
|
// 화면 선택 핸들러 (개별 화면 선택 시 그룹 선택 해제)
|
|
const handleScreenSelect = (screen: ScreenDefinition) => {
|
|
setSelectedScreen(screen);
|
|
setIsDetailOpen(true);
|
|
setSelectedGroup(null); // 그룹 선택 해제
|
|
};
|
|
|
|
// 화면 디자인 핸들러
|
|
const handleDesignScreen = (screen: ScreenDefinition) => {
|
|
setSelectedScreen(screen);
|
|
goToNextStep("design");
|
|
};
|
|
|
|
// 검색어로 필터링된 화면
|
|
// 검색어가 여러 키워드(폴더 계층 검색)이면 화면 필터링 없이 모든 화면 표시
|
|
// 단일 키워드면 해당 키워드로 화면 필터링
|
|
const searchKeywords = searchTerm.toLowerCase().trim().split(/\s+/).filter(Boolean);
|
|
const filteredScreens = searchKeywords.length > 1
|
|
? screens // 폴더 계층 검색 시에는 화면 필터링 없음 (폴더에서 이미 필터링됨)
|
|
: screens.filter((screen) =>
|
|
screen.screenName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
screen.screenCode.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
// 화면 설계 모드일 때는 레이아웃 없이 전체 화면 사용
|
|
if (isDesignMode) {
|
|
return (
|
|
<div className="fixed inset-0 z-50 bg-background">
|
|
<ScreenDesigner
|
|
selectedScreen={selectedScreen}
|
|
onBackToList={() => goToStep("list")}
|
|
onScreenUpdate={(updatedFields) => {
|
|
if (selectedScreen) {
|
|
const updated = { ...selectedScreen, ...updatedFields };
|
|
setSelectedScreen(updated);
|
|
setScreens((prev) =>
|
|
prev.map((s) =>
|
|
s.screenId === selectedScreen.screenId
|
|
? { ...s, ...updatedFields }
|
|
: s
|
|
)
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// V2 컴포넌트 테스트 모드
|
|
if (currentStep === "v2-test") {
|
|
return (
|
|
<div className="fixed inset-0 z-50 bg-background">
|
|
<V2ComponentsDemo onBack={() => goToStep("list")} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-screen flex-col bg-background overflow-hidden">
|
|
{/* 페이지 헤더 */}
|
|
<div className="flex-shrink-0 border-b border-border/50 bg-background/95 backdrop-blur-md px-6 py-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<h1 className="text-xl font-bold tracking-tight">화면 관리</h1>
|
|
<Badge variant="secondary" className="text-xs">{screens.length}개 화면</Badge>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{/* 뷰 모드 전환 */}
|
|
<Tabs value={viewMode} onValueChange={(v) => setViewMode(v as ViewMode)}>
|
|
<TabsList className="h-9 bg-muted/50 border border-border/50">
|
|
<TabsTrigger value="flow" className="gap-1.5 px-3 text-xs">
|
|
<LayoutGrid className="h-4 w-4" />
|
|
관계도
|
|
</TabsTrigger>
|
|
<TabsTrigger value="card" className="gap-1.5 px-3 text-xs">
|
|
<LayoutList className="h-4 w-4" />
|
|
카드
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</Tabs>
|
|
<Button variant="outline" size="icon" onClick={loadScreens}>
|
|
<RefreshCw className="h-4 w-4" />
|
|
</Button>
|
|
<Button onClick={() => setIsCreateOpen(true)} className="gap-2 shadow-sm hover:shadow-md transition-shadow">
|
|
<Plus className="h-4 w-4" />
|
|
새 화면
|
|
</Button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="icon">
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => goToNextStep("v2-test")}>
|
|
<TestTube2 className="h-4 w-4 mr-2" />
|
|
V2 테스트
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 메인 콘텐츠 */}
|
|
{viewMode === "flow" ? (
|
|
<div className="flex-1 overflow-hidden flex">
|
|
{/* 왼쪽: 트리 구조 (접기/펼기 지원) */}
|
|
<div className={`flex flex-col border-r border-border/50 bg-background/80 backdrop-blur-sm transition-all duration-300 ease-in-out ${
|
|
sidebarCollapsed ? "w-[48px] min-w-[48px]" : "w-[320px] min-w-[280px] max-w-[400px]"
|
|
}`}>
|
|
{/* 사이드바 헤더 */}
|
|
<div className="flex-shrink-0 flex items-center justify-between p-2 border-b border-border/50">
|
|
{!sidebarCollapsed && <span className="text-xs font-medium text-muted-foreground px-1">탐색</span>}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={`h-7 w-7 ${sidebarCollapsed ? "mx-auto" : "ml-auto"}`}
|
|
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
|
>
|
|
{sidebarCollapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
{/* 사이드바 접힘 시 아이콘 컬럼 */}
|
|
{sidebarCollapsed && (
|
|
<div className="flex-1 flex flex-col items-center gap-2 py-3">
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setSidebarCollapsed(false)}>
|
|
<Search className="h-4 w-4 text-muted-foreground" />
|
|
</Button>
|
|
<div className="mt-auto pb-2">
|
|
<Badge variant="secondary" className="text-[10px] px-1.5">{screens.length}</Badge>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* 사이드바 펼침 시 전체 UI */}
|
|
{!sidebarCollapsed && (
|
|
<>
|
|
{/* 검색 */}
|
|
<div className="flex-shrink-0 p-3 border-b border-border/50">
|
|
<div className="relative">
|
|
<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 border-border/50 focus:bg-background focus:ring-2 focus:ring-primary/30 transition-colors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* 트리 뷰 */}
|
|
<div className="flex-1 overflow-hidden">
|
|
<ScreenGroupTreeView
|
|
screens={filteredScreens}
|
|
selectedScreen={selectedScreen}
|
|
onScreenSelect={handleScreenSelect}
|
|
onScreenDesign={handleDesignScreen}
|
|
searchTerm={searchTerm}
|
|
onGroupSelect={(group) => {
|
|
setSelectedGroup(group);
|
|
setSelectedScreen(null);
|
|
setFocusedScreenIdInGroup(null);
|
|
}}
|
|
onScreenSelectInGroup={(group, screenId) => {
|
|
const isNewGroup = selectedGroup?.id !== group.id;
|
|
if (isNewGroup) {
|
|
setSelectedGroup(group);
|
|
setFocusedScreenIdInGroup(null);
|
|
} else {
|
|
setFocusedScreenIdInGroup(screenId);
|
|
}
|
|
setSelectedScreen(null);
|
|
}}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* 오른쪽: 관계 시각화 (React Flow) */}
|
|
<div className="flex-1 overflow-hidden bg-muted/10">
|
|
<ScreenRelationFlow
|
|
screen={selectedScreen}
|
|
selectedGroup={selectedGroup}
|
|
initialFocusedScreenId={focusedScreenIdInGroup}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex-1 overflow-auto p-6 bg-muted/30 dark:bg-background">
|
|
{/* 카드 뷰 상단: 검색 + 카운트 */}
|
|
<div className="flex items-center gap-3 mb-5">
|
|
<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-card dark:bg-card border-border/50 shadow-sm focus:bg-card 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) => {
|
|
const screenType = (screen as { screenType?: string }).screenType || "form";
|
|
const isSelected = selectedScreen?.screenId === screen.screenId;
|
|
const isRecentlyModified = screen.updatedDate && (Date.now() - new Date(screen.updatedDate).getTime()) < 7 * 24 * 60 * 60 * 1000;
|
|
|
|
const typeColorClass = screenType === "grid"
|
|
? "from-primary to-primary/20"
|
|
: screenType === "dashboard"
|
|
? "from-warning to-warning/20"
|
|
: "from-success to-success/20";
|
|
|
|
const glowClass = screenType === "grid"
|
|
? "hover:shadow-[0_8px_24px_-4px_rgba(0,0,0,0.1),0_0_20px_hsl(var(--primary)/0.1)] dark:hover:shadow-[0_8px_24px_-4px_rgba(0,0,0,0.4),0_0_24px_hsl(var(--primary)/0.15)]"
|
|
: screenType === "dashboard"
|
|
? "hover:shadow-[0_8px_24px_-4px_rgba(0,0,0,0.1),0_0_20px_hsl(var(--warning)/0.1)] dark:hover:shadow-[0_8px_24px_-4px_rgba(0,0,0,0.4),0_0_24px_hsl(var(--warning)/0.12)]"
|
|
: "hover:shadow-[0_8px_24px_-4px_rgba(0,0,0,0.1),0_0_20px_hsl(var(--success)/0.1)] dark:hover:shadow-[0_8px_24px_-4px_rgba(0,0,0,0.4),0_0_24px_hsl(var(--success)/0.12)]";
|
|
|
|
const badgeBgClass = screenType === "grid"
|
|
? "bg-primary/8 dark:bg-primary/15 text-primary"
|
|
: screenType === "dashboard"
|
|
? "bg-warning/8 dark:bg-warning/15 text-warning"
|
|
: "bg-success/8 dark:bg-success/15 text-success";
|
|
|
|
return (
|
|
<div
|
|
key={screen.screenId}
|
|
className={`group relative overflow-hidden rounded-[12px] cursor-pointer transition-all duration-250 ease-[cubic-bezier(0.4,0,0.2,1)] ${
|
|
isSelected
|
|
? "border border-primary bg-primary/5 dark:bg-primary/8 shadow-[0_0_0_2px_hsl(var(--primary)/0.22),0_1px_3px_rgba(0,0,0,0.06)] dark:shadow-[0_0_0_2px_hsl(var(--primary)/0.3),0_1px_4px_rgba(0,0,0,0.3)]"
|
|
: `border border-transparent bg-card shadow-[0_1px_3px_rgba(0,0,0,0.06),0_1px_2px_rgba(0,0,0,0.04)] dark:shadow-[0_1px_4px_rgba(0,0,0,0.35),0_0_1px_rgba(0,0,0,0.2)] hover:-translate-y-[2px] ${glowClass}`
|
|
}`}
|
|
onClick={() => handleScreenSelect(screen)}
|
|
onDoubleClick={() => handleDesignScreen(screen)}
|
|
>
|
|
{/* 좌측 그라데이션 액센트 바 */}
|
|
<div className={`absolute left-0 top-3 bottom-3 w-[3px] rounded-r-full bg-gradient-to-b ${typeColorClass} transition-all duration-250 group-hover:top-1 group-hover:bottom-1 group-hover:w-[4px]`} />
|
|
{isSelected && (
|
|
<div className={`absolute left-0 top-0 bottom-0 w-[4px] bg-gradient-to-b ${typeColorClass}`} />
|
|
)}
|
|
<div className="pl-[14px] pr-4 py-4">
|
|
{/* Row 1: 이름 + 타입 뱃지 */}
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<div className="text-[15px] font-bold leading-snug truncate flex-1 min-w-0 tracking-[-0.3px]">{screen.screenName}</div>
|
|
<span className={`text-[11px] font-semibold px-2.5 py-[3px] rounded-md flex-shrink-0 ${badgeBgClass}`}>
|
|
{screenType === "grid" ? "그리드" : screenType === "dashboard" ? "대시보드" : "폼"}
|
|
</span>
|
|
</div>
|
|
{/* Row 2: 스크린 코드 */}
|
|
<div className="text-[12px] font-mono text-muted-foreground tracking-[-0.3px] truncate mb-3">{screen.screenCode}</div>
|
|
{/* Row 3: 테이블 칩 + 메타 */}
|
|
<div className="flex items-center gap-1.5 flex-wrap">
|
|
<span className="inline-flex items-center gap-1.5 text-[12px] font-medium text-foreground/80 dark:text-foreground/70 px-2.5 py-1 rounded-md bg-muted/60 dark:bg-muted/40">
|
|
<Database className="h-3.5 w-3.5 text-muted-foreground" />
|
|
<span className="font-mono text-[11px]">{screen.tableLabel || screen.tableName || "—"}</span>
|
|
</span>
|
|
</div>
|
|
{/* Row 4: 날짜 + 수정 상태 */}
|
|
<div className="flex items-center justify-between mt-3 pt-2.5 border-t border-border/20 dark:border-border/10">
|
|
<span className="text-[12px] font-mono text-muted-foreground">
|
|
{screen.updatedDate ? new Date(screen.updatedDate).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" }) : screen.createdDate ? new Date(screen.createdDate).toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" }) : ""}
|
|
</span>
|
|
{isRecentlyModified && (
|
|
<span className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
|
|
<span className="relative inline-block w-[6px] h-[6px] rounded-full bg-success screen-card-pulse-dot" />
|
|
수정됨
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
{filteredScreens.length === 0 && (
|
|
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground">
|
|
<Search className="h-8 w-8 mb-3 opacity-30" />
|
|
<p className="text-sm">검색 결과가 없습니다</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 화면 디테일 Sheet */}
|
|
<Sheet open={isDetailOpen} onOpenChange={setIsDetailOpen}>
|
|
<SheetContent className="w-[420px] sm:max-w-[420px]">
|
|
<SheetHeader>
|
|
<SheetTitle className="text-base">{selectedScreen?.screenName || "화면 상세"}</SheetTitle>
|
|
<SheetDescription className="text-xs font-mono">{selectedScreen?.screenCode}</SheetDescription>
|
|
</SheetHeader>
|
|
{selectedScreen && (
|
|
<div className="mt-6 space-y-4">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs text-muted-foreground">테이블</span>
|
|
<span className="text-xs font-mono">{selectedScreen.tableName || "없음"}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs text-muted-foreground">화면 ID</span>
|
|
<span className="text-xs font-mono">{selectedScreen.screenId}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 pt-4 border-t border-border/50">
|
|
<Button className="flex-1" onClick={() => { handleDesignScreen(selectedScreen); setIsDetailOpen(false); }}>
|
|
편집하기
|
|
</Button>
|
|
<Button variant="outline" onClick={() => setIsDetailOpen(false)}>
|
|
닫기
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</SheetContent>
|
|
</Sheet>
|
|
|
|
{/* 화면 생성 모달 */}
|
|
<CreateScreenModal
|
|
open={isCreateOpen}
|
|
onOpenChange={setIsCreateOpen}
|
|
onCreated={() => {
|
|
setIsCreateOpen(false);
|
|
loadScreens();
|
|
}}
|
|
/>
|
|
|
|
{/* Scroll to Top 버튼 */}
|
|
<ScrollToTop />
|
|
</div>
|
|
);
|
|
}
|