125 lines
4.0 KiB
TypeScript
125 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { DataFlowDesigner } from "@/components/dataflow/DataFlowDesigner";
|
|
import DataFlowList from "@/components/dataflow/DataFlowList";
|
|
import { TableRelationship, DataFlowDiagram } from "@/lib/api/dataflow";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { ArrowLeft } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
type Step = "list" | "design";
|
|
|
|
export default function DataFlowPage() {
|
|
const { user } = useAuth();
|
|
const router = useRouter();
|
|
const [currentStep, setCurrentStep] = useState<Step>("list");
|
|
const [stepHistory, setStepHistory] = useState<Step[]>(["list"]);
|
|
|
|
// 단계별 제목과 설명
|
|
const stepConfig = {
|
|
list: {
|
|
title: "데이터 흐름 관계도 관리",
|
|
description: "생성된 관계도들을 확인하고 관리하세요",
|
|
icon: "📊",
|
|
},
|
|
design: {
|
|
title: "새 관계도 설계",
|
|
description: "테이블 간 데이터 관계를 시각적으로 설계하세요",
|
|
icon: "🎨",
|
|
},
|
|
};
|
|
|
|
// 다음 단계로 이동
|
|
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));
|
|
}
|
|
};
|
|
|
|
const handleSave = (relationships: TableRelationship[]) => {
|
|
console.log("저장된 관계:", relationships);
|
|
// 저장 후 목록으로 돌아가기 - 다음 렌더링 사이클로 지연
|
|
setTimeout(() => {
|
|
goToStep("list");
|
|
}, 0);
|
|
};
|
|
|
|
const handleDesignDiagram = (diagram: DataFlowDiagram | null) => {
|
|
if (diagram) {
|
|
// 기존 관계도 편집 - 새로운 URL로 이동
|
|
router.push(`/admin/dataflow/edit/${diagram.diagramId}`);
|
|
} else {
|
|
// 새 관계도 생성 - 현재 페이지에서 처리
|
|
goToNextStep("design");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full w-full flex-col">
|
|
{/* 헤더 */}
|
|
<div className="border-b border-gray-200 bg-white px-6 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
{currentStep !== "list" && (
|
|
<Button variant="outline" size="sm" onClick={goToPreviousStep} className="flex items-center">
|
|
<ArrowLeft className="mr-1 h-4 w-4" />
|
|
이전
|
|
</Button>
|
|
)}
|
|
<div>
|
|
<h1 className="flex items-center text-2xl font-bold text-gray-900">
|
|
<span className="mr-2">{stepConfig[currentStep].icon}</span>
|
|
{stepConfig[currentStep].title}
|
|
</h1>
|
|
<p className="mt-1 text-sm text-gray-600">{stepConfig[currentStep].description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 단계별 내용 */}
|
|
<div className="flex-1 overflow-hidden">
|
|
{/* 관계도 목록 단계 */}
|
|
{currentStep === "list" && (
|
|
<div className="h-full p-6">
|
|
<DataFlowList onDesignDiagram={handleDesignDiagram} />
|
|
</div>
|
|
)}
|
|
|
|
{/* 관계도 설계 단계 */}
|
|
{currentStep === "design" && (
|
|
<div className="h-full">
|
|
<DataFlowDesigner
|
|
companyCode={user?.company_code || "COMP001"}
|
|
onSave={handleSave}
|
|
selectedDiagram={null}
|
|
onBackToList={() => goToStep("list")}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|