131 lines
4.4 KiB
TypeScript
131 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ArrowLeft } from "lucide-react";
|
|
import ScreenList from "@/components/screen/ScreenList";
|
|
import ScreenDesigner from "@/components/screen/ScreenDesigner";
|
|
import TemplateManager from "@/components/screen/TemplateManager";
|
|
import { ScrollToTop } from "@/components/common/ScrollToTop";
|
|
import { ScreenDefinition } from "@/types/screen";
|
|
|
|
// 단계별 진행을 위한 타입 정의
|
|
type Step = "list" | "design" | "template";
|
|
|
|
export default function ScreenManagementPage() {
|
|
const [currentStep, setCurrentStep] = useState<Step>("list");
|
|
const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
|
|
const [stepHistory, setStepHistory] = useState<Step[]>(["list"]);
|
|
|
|
// 화면 설계 모드일 때는 전체 화면 사용
|
|
const isDesignMode = currentStep === "design";
|
|
|
|
// 단계별 제목과 설명
|
|
const stepConfig = {
|
|
list: {
|
|
title: "화면 목록 관리",
|
|
description: "생성된 화면들을 확인하고 관리하세요",
|
|
},
|
|
design: {
|
|
title: "화면 설계",
|
|
description: "드래그앤드롭으로 화면을 설계하세요",
|
|
},
|
|
template: {
|
|
title: "템플릿 관리",
|
|
description: "화면 템플릿을 관리하고 재사용하세요",
|
|
},
|
|
};
|
|
|
|
// 다음 단계로 이동
|
|
const goToNextStep = (nextStep: Step) => {
|
|
setStepHistory((prev) => [...prev, nextStep]);
|
|
setCurrentStep(nextStep);
|
|
};
|
|
|
|
// 이전 단계로 이동
|
|
const goToPreviousStep = () => {
|
|
if (stepHistory.length > 1) {
|
|
const newHistory = stepHistory.slice(0, -1);
|
|
const previousStep = newHistory[newHistory.length - 1];
|
|
setStepHistory(newHistory);
|
|
setCurrentStep(previousStep);
|
|
}
|
|
};
|
|
|
|
// 특정 단계로 이동
|
|
const goToStep = (step: Step) => {
|
|
setCurrentStep(step);
|
|
// 해당 단계까지의 히스토리만 유지
|
|
const stepIndex = stepHistory.findIndex((s) => s === step);
|
|
if (stepIndex !== -1) {
|
|
setStepHistory(stepHistory.slice(0, stepIndex + 1));
|
|
}
|
|
};
|
|
|
|
// 화면 설계 모드일 때는 레이아웃 없이 전체 화면 사용 (고정 높이)
|
|
if (isDesignMode) {
|
|
return (
|
|
<div className="fixed inset-0 z-50 bg-background">
|
|
<ScreenDesigner selectedScreen={selectedScreen} onBackToList={() => goToStep("list")} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col bg-background">
|
|
<div className="space-y-6 p-6">
|
|
{/* 페이지 헤더 */}
|
|
<div className="space-y-2 border-b pb-4">
|
|
<h1 className="text-3xl font-bold tracking-tight">화면 관리</h1>
|
|
<p className="text-sm text-muted-foreground">화면을 설계하고 템플릿을 관리합니다</p>
|
|
</div>
|
|
|
|
{/* 단계별 내용 */}
|
|
<div className="flex-1">
|
|
{/* 화면 목록 단계 */}
|
|
{currentStep === "list" && (
|
|
<ScreenList
|
|
onScreenSelect={setSelectedScreen}
|
|
selectedScreen={selectedScreen}
|
|
onDesignScreen={(screen) => {
|
|
setSelectedScreen(screen);
|
|
goToNextStep("design");
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* 템플릿 관리 단계 */}
|
|
{currentStep === "template" && (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between rounded-lg border bg-card p-4 shadow-sm">
|
|
<h2 className="text-xl font-semibold">{stepConfig.template.title}</h2>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={goToPreviousStep}
|
|
className="h-10 gap-2 text-sm font-medium"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
이전 단계
|
|
</Button>
|
|
<Button
|
|
onClick={() => goToStep("list")}
|
|
className="h-10 gap-2 text-sm font-medium"
|
|
>
|
|
목록으로 돌아가기
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<TemplateManager selectedScreen={selectedScreen} onBackToList={() => goToStep("list")} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll to Top 버튼 */}
|
|
<ScrollToTop />
|
|
</div>
|
|
);
|
|
}
|
|
|