353 lines
14 KiB
TypeScript
353 lines
14 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 { ArrowLeft, Plus, RefreshCw, Search, LayoutGrid, LayoutList, TestTube2, ChevronRight, Monitor, Database, FolderOpen, MoreHorizontal, PanelLeftClose, PanelLeftOpen } from "lucide-react";
|
|
import ScreenList from "@/components/screen/ScreenList";
|
|
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";
|
|
|
|
// 단계별 진행을 위한 타입 정의
|
|
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 [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);
|
|
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"
|
|
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
|
aria-label={sidebarCollapsed ? "사이드바 펼치기" : "사이드바 접기"}
|
|
>
|
|
{sidebarCollapsed ? <PanelLeftOpen className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
|
|
{!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>
|
|
{/* 선택 미리보기 */}
|
|
{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>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* 접힌 상태: 검색 아이콘 + 화면 수 배지 */}
|
|
{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)}
|
|
aria-label="사이드바 펼치기"
|
|
>
|
|
<Search className="h-4 w-4 text-muted-foreground" />
|
|
</Button>
|
|
<div className="mt-auto">
|
|
<Badge variant="secondary" className="text-[10px]">{screens.length}</Badge>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 오른쪽: 관계 시각화 (React Flow) */}
|
|
<div className="flex-1 overflow-hidden bg-muted/10">
|
|
<ScreenRelationFlow
|
|
screen={selectedScreen}
|
|
selectedGroup={selectedGroup}
|
|
initialFocusedScreenId={focusedScreenIdInGroup}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
// 카드 뷰 (기존 ScreenList 사용)
|
|
<div className="flex-1 overflow-auto p-6">
|
|
<ScreenList
|
|
onScreenSelect={handleScreenSelect}
|
|
selectedScreen={selectedScreen}
|
|
onDesignScreen={handleDesignScreen}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 화면 생성 모달 */}
|
|
<CreateScreenModal
|
|
open={isCreateOpen}
|
|
onOpenChange={setIsCreateOpen}
|
|
onCreated={() => {
|
|
setIsCreateOpen(false);
|
|
loadScreens();
|
|
}}
|
|
/>
|
|
|
|
{/* Scroll to Top 버튼 */}
|
|
<ScrollToTop />
|
|
</div>
|
|
);
|
|
}
|