제어관리 외부커넥션 설정기능

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

@@ -4,10 +4,12 @@ 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 { ArrowLeft } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { loadDataflowRelationship } from "@/lib/api/dataflowSave";
+import { toast } from "sonner";
 
 type Step = "list" | "design";
 
@@ -16,6 +18,8 @@ export default function DataFlowPage() {
   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 = {
@@ -62,61 +66,70 @@ export default function DataFlowPage() {
     // 저장 후 목록으로 돌아가기 - 다음 렌더링 사이클로 지연
     setTimeout(() => {
       goToStep("list");
+      setEditingDiagram(null);
+      setLoadedRelationshipData(null);
     }, 0);
   };
 
-  const handleDesignDiagram = (diagram: DataFlowDiagram | null) => {
+  // 관계도 수정 핸들러
+  const handleDesignDiagram = async (diagram: DataFlowDiagram | null) => {
     if (diagram) {
-      // 기존 관계도 편집 - 새로운 URL로 이동
-      router.push(`/admin/dataflow/edit/${diagram.diagramId}`);
+      // 기존 관계도 수정 - 저장된 관계 정보 로드
+      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 p-6 space-y-6">
+      <div className="container mx-auto space-y-4 p-4">
         {/* 페이지 제목 */}
-        <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
+        <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>
-          {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 === "list" && <DataFlowList onDesignDiagram={handleDesignDiagram} />}
 
-          {/* 관계도 설계 단계 */}
+          {/* 관계도 설계 단계 - 🎨 새로운 UI 사용 */}
           {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>
+            <DataConnectionDesigner
+              onClose={() => {
+                goToStep("list");
+                setEditingDiagram(null);
+                setLoadedRelationshipData(null);
+              }}
+              initialData={
+                loadedRelationshipData || {
+                  connectionType: "data_save",
+                }
+              }
+              showBackButton={true}
+            />
           )}
         </div>
       </div>