126 lines
4.3 KiB
TypeScript
126 lines
4.3 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="min-h-screen bg-gray-50">
|
|
<div className="container mx-auto p-6 space-y-6">
|
|
{/* 페이지 제목 */}
|
|
<div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">데이터 흐름 관리</h1>
|
|
<p className="mt-2 text-gray-600">테이블 간 데이터 관계를 시각적으로 설계하고 관리합니다</p>
|
|
</div>
|
|
{currentStep !== "list" && (
|
|
<Button variant="outline" onClick={goToPreviousStep} className="flex items-center shadow-sm">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
이전
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* 단계별 내용 */}
|
|
<div className="space-y-6">
|
|
{/* 관계도 목록 단계 */}
|
|
{currentStep === "list" && (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-4">
|
|
<h2 className="text-xl font-semibold text-gray-800">{stepConfig.list.title}</h2>
|
|
</div>
|
|
<DataFlowList onDesignDiagram={handleDesignDiagram} />
|
|
</div>
|
|
)}
|
|
|
|
{/* 관계도 설계 단계 */}
|
|
{currentStep === "design" && (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-4">
|
|
<h2 className="text-xl font-semibold text-gray-800">{stepConfig.design.title}</h2>
|
|
</div>
|
|
<DataFlowDesigner
|
|
companyCode={user?.company_code || "COMP001"}
|
|
onSave={handleSave}
|
|
selectedDiagram={null}
|
|
onBackToList={() => goToStep("list")}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|