210 lines
8.0 KiB
TypeScript
210 lines
8.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { ArrowLeft, Plus, RefreshCw, Search, LayoutGrid, LayoutList } 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 { 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 CreateScreenModal from "@/components/screen/CreateScreenModal";
|
|
|
|
// 단계별 진행을 위한 타입 정의
|
|
type Step = "list" | "design" | "template";
|
|
type ViewMode = "tree" | "table";
|
|
|
|
export default function ScreenManagementPage() {
|
|
const [currentStep, setCurrentStep] = useState<Step>("list");
|
|
const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
|
|
const [selectedGroup, setSelectedGroup] = useState<{ id: number; name: string } | null>(null);
|
|
const [focusedScreenIdInGroup, setFocusedScreenIdInGroup] = useState<number | null>(null);
|
|
const [stepHistory, setStepHistory] = useState<Step[]>(["list"]);
|
|
const [viewMode, setViewMode] = useState<ViewMode>("tree");
|
|
const [screens, setScreens] = useState<ScreenDefinition[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
|
|
|
// 화면 목록 로드
|
|
const loadScreens = useCallback(async () => {
|
|
try {
|
|
setLoading(true);
|
|
const result = await screenApi.getScreens({ page: 1, size: 1000, searchTerm: "" });
|
|
// 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]);
|
|
|
|
// 화면 설계 모드일 때는 전체 화면 사용
|
|
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 filteredScreens = 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")} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-screen flex-col bg-background overflow-hidden">
|
|
{/* 페이지 헤더 */}
|
|
<div className="flex-shrink-0 border-b bg-background px-6 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight">화면 관리</h1>
|
|
<p className="text-sm text-muted-foreground">화면을 그룹별로 관리하고 데이터 관계를 확인합니다</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{/* 뷰 모드 전환 */}
|
|
<Tabs value={viewMode} onValueChange={(v) => setViewMode(v as ViewMode)}>
|
|
<TabsList className="h-9">
|
|
<TabsTrigger value="tree" className="gap-1.5 px-3">
|
|
<LayoutGrid className="h-4 w-4" />
|
|
트리
|
|
</TabsTrigger>
|
|
<TabsTrigger value="table" className="gap-1.5 px-3">
|
|
<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">
|
|
<Plus className="h-4 w-4" />
|
|
새 화면
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 메인 콘텐츠 */}
|
|
{viewMode === "tree" ? (
|
|
<div className="flex-1 overflow-hidden flex">
|
|
{/* 왼쪽: 트리 구조 */}
|
|
<div className="w-[350px] min-w-[280px] max-w-[450px] flex flex-col border-r bg-background">
|
|
{/* 검색 */}
|
|
<div className="flex-shrink-0 p-3 border-b">
|
|
<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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* 트리 뷰 */}
|
|
<div className="flex-1 overflow-hidden">
|
|
<ScreenGroupTreeView
|
|
screens={filteredScreens}
|
|
selectedScreen={selectedScreen}
|
|
onScreenSelect={handleScreenSelect}
|
|
onScreenDesign={handleDesignScreen}
|
|
onGroupSelect={(group) => {
|
|
setSelectedGroup(group);
|
|
setSelectedScreen(null); // 화면 선택 해제
|
|
setFocusedScreenIdInGroup(null); // 포커스 초기화
|
|
}}
|
|
onScreenSelectInGroup={(group, screenId) => {
|
|
// 그룹 내 화면 클릭 시: 해당 화면 포커스
|
|
// 이미 같은 그룹이 선택된 상태라면 그룹을 다시 설정하지 않음 (데이터 재로드 방지)
|
|
if (selectedGroup?.id !== group.id) {
|
|
setSelectedGroup(group);
|
|
}
|
|
setSelectedScreen(null);
|
|
setFocusedScreenIdInGroup(screenId);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 오른쪽: 관계 시각화 (React Flow) */}
|
|
<div className="flex-1 overflow-hidden">
|
|
<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
|
|
isOpen={isCreateOpen}
|
|
onClose={() => setIsCreateOpen(false)}
|
|
onSuccess={() => {
|
|
setIsCreateOpen(false);
|
|
loadScreens();
|
|
}}
|
|
/>
|
|
|
|
{/* Scroll to Top 버튼 */}
|
|
<ScrollToTop />
|
|
</div>
|
|
);
|
|
}
|