399 lines
18 KiB
TypeScript
399 lines
18 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, 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">
|
|
<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 ${
|
|
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)]"
|
|
}`}
|
|
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>
|
|
<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>
|
|
))}
|
|
</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>
|
|
);
|
|
}
|