생성된 관계도 확인

frontend/app/(main)/admin/dataflow/page.tsx

@@ -1,23 +1,136 @@
 "use client";
 
-import React from "react";
-import { Toaster } from "react-hot-toast";
+import { useState } from "react";
 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 { TableRelationship } from "@/lib/api/dataflow";
+import { ArrowLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+type Step = "list" | "design";
 
 export default function DataFlowPage() {
   const { user } = useAuth();
+  const [currentStep, setCurrentStep] = useState<Step>("list");
+  const [selectedDiagram, setSelectedDiagram] = useState<DataFlowDiagram | null>(null);
+  const [stepHistory, setStepHistory] = useState<Step[]>(["list"]);
+
+  // 단계별 제목과 설명
+  const stepConfig = {
+    list: {
+      title: "데이터 흐름 관계도 관리",
+      description: "생성된 관계도들을 확인하고 관리하세요",
+      icon: "📊",
+    },
+    design: {
+      title: selectedDiagram ? `${selectedDiagram.diagramName} 관계도 설계` : "새 관계도 설계",
+      description: selectedDiagram
+        ? "기존 관계도를 수정하거나 새로운 관계를 추가하세요"
+        : "테이블 간 데이터 관계를 시각적으로 설계하세요",
+      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);
+
+      // list로 돌아갈 때 선택된 관계도 초기화
+      if (previousStep === "list") {
+        setSelectedDiagram(null);
+      }
+    }
+  };
+
+  // 특정 단계로 이동
+  const goToStep = (step: Step) => {
+    setCurrentStep(step);
+    // 해당 단계까지의 히스토리만 유지
+    const stepIndex = stepHistory.findIndex((s) => s === step);
+    if (stepIndex !== -1) {
+      setStepHistory(stepHistory.slice(0, stepIndex + 1));
+    }
+
+    // list로 이동할 때 선택된 관계도 초기화
+    if (step === "list") {
+      setSelectedDiagram(null);
+    }
+  };
 
   const handleSave = (relationships: TableRelationship[]) => {
     console.log("저장된 관계:", relationships);
-    // TODO: API 호출로 관계 저장
+    // 저장 후 목록으로 돌아가기
+    goToStep("list");
+  };
+
+  const handleDiagramSelect = (diagram: DataFlowDiagram) => {
+    setSelectedDiagram(diagram);
+  };
+
+  const handleDesignDiagram = (diagram: DataFlowDiagram | null) => {
+    setSelectedDiagram(diagram);
+    goToNextStep("design");
   };
 
   return (
-    <div className="h-screen bg-gray-50">
-      <DataFlowDesigner companyCode={user?.company_code || "COMP001"} onSave={handleSave} />
-      <Toaster />
+    <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
+              onDiagramSelect={handleDiagramSelect}
+              selectedDiagram={selectedDiagram}
+              onDesignDiagram={handleDesignDiagram}
+            />
+          </div>
+        )}
+
+        {/* 관계도 설계 단계 */}
+        {currentStep === "design" && (
+          <div className="h-full">
+            <DataFlowDesigner
+              companyCode={user?.company_code || "COMP001"}
+              onSave={handleSave}
+              selectedDiagram={selectedDiagram}
+              onBackToList={() => goToStep("list")}
+            />
+          </div>
+        )}
+      </div>
     </div>
   );
 }