139 lines
4.8 KiB
TypeScript
139 lines
4.8 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";
|
|
// 🎨 새로운 UI 컴포넌트 import
|
|
import DataConnectionDesigner from "@/components/dataflow/connection/redesigned/DataConnectionDesigner";
|
|
import { TableRelationship, DataFlowDiagram } from "@/lib/api/dataflow";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { loadDataflowRelationship } from "@/lib/api/dataflowSave";
|
|
import { toast } from "sonner";
|
|
|
|
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 [editingDiagram, setEditingDiagram] = useState<DataFlowDiagram | null>(null);
|
|
const [loadedRelationshipData, setLoadedRelationshipData] = useState<any>(null);
|
|
|
|
// 단계별 제목과 설명
|
|
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");
|
|
setEditingDiagram(null);
|
|
setLoadedRelationshipData(null);
|
|
}, 0);
|
|
};
|
|
|
|
// 관계도 수정 핸들러
|
|
const handleDesignDiagram = async (diagram: DataFlowDiagram | null) => {
|
|
if (diagram) {
|
|
// 기존 관계도 수정 - 저장된 관계 정보 로드
|
|
try {
|
|
console.log("📖 관계도 수정 모드:", diagram);
|
|
|
|
// 저장된 관계 정보 로드
|
|
const relationshipData = await loadDataflowRelationship(diagram.diagramId);
|
|
console.log("✅ 관계 정보 로드 완료:", relationshipData);
|
|
|
|
setEditingDiagram(diagram);
|
|
setLoadedRelationshipData(relationshipData);
|
|
goToNextStep("design");
|
|
|
|
toast.success(`"${diagram.diagramName}" 관계를 불러왔습니다.`);
|
|
} catch (error: any) {
|
|
console.error("❌ 관계 정보 로드 실패:", error);
|
|
toast.error(error.message || "관계 정보를 불러오는데 실패했습니다.");
|
|
}
|
|
} else {
|
|
// 새 관계도 생성 - 현재 페이지에서 처리
|
|
setEditingDiagram(null);
|
|
setLoadedRelationshipData(null);
|
|
goToNextStep("design");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<div className="container mx-auto space-y-4 p-4">
|
|
{/* 페이지 제목 */}
|
|
<div className="flex items-center justify-between rounded-lg border bg-white p-4 shadow-sm">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">관계 관리</h1>
|
|
<p className="mt-2 text-gray-600">테이블 간 데이터 관계를 시각적으로 설계하고 관리합니다</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 단계별 내용 */}
|
|
<div className="space-y-6">
|
|
{/* 관계도 목록 단계 */}
|
|
{currentStep === "list" && <DataFlowList onDesignDiagram={handleDesignDiagram} />}
|
|
|
|
{/* 관계도 설계 단계 - 🎨 새로운 UI 사용 */}
|
|
{currentStep === "design" && (
|
|
<DataConnectionDesigner
|
|
onClose={() => {
|
|
goToStep("list");
|
|
setEditingDiagram(null);
|
|
setLoadedRelationshipData(null);
|
|
}}
|
|
initialData={
|
|
loadedRelationshipData || {
|
|
connectionType: "data_save",
|
|
}
|
|
}
|
|
showBackButton={true}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|