분할 패널 및 반복 필드 그룹 컴포넌트

frontend/app/(main)/admin/dataflow/node-editor/page.tsx

@@ -1,26 +1,24 @@
 "use client";
 
 /**
- * 제어 시스템 페이지
+ * 제어 시스템 페이지 (리다이렉트)
+ * 이 페이지는 /admin/dataflow로 리다이렉트됩니다.
  */
 
-import { FlowEditor } from "@/components/dataflow/node-editor/FlowEditor";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
 
 export default function NodeEditorPage() {
-  return (
-    <div className="h-screen bg-gray-50">
-      {/* 페이지 헤더 */}
-      <div className="border-b bg-white p-4">
-        <div className="mx-auto">
-          <h1 className="text-2xl font-bold text-gray-900">제어 시스템</h1>
-          <p className="mt-1 text-sm text-gray-600">
-            드래그 앤 드롭으로 데이터 제어 플로우를 시각적으로 설계하고 관리합니다
-          </p>
-        </div>
-      </div>
+  const router = useRouter();
 
-      {/* 에디터 */}
-      <FlowEditor />
+  useEffect(() => {
+    // /admin/dataflow 메인 페이지로 리다이렉트
+    router.replace("/admin/dataflow");
+  }, [router]);
+
+  return (
+    <div className="flex h-screen items-center justify-center bg-gray-50">
+      <div className="text-gray-500">제어 관리 페이지로 이동중...</div>
     </div>
   );
 }

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

@@ -2,102 +2,78 @@
 
 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 { FlowEditor } from "@/components/dataflow/node-editor/FlowEditor";
 import { useAuth } from "@/hooks/useAuth";
-import { loadDataflowRelationship } from "@/lib/api/dataflowSave";
 import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
 
-type Step = "list" | "design";
+type Step = "list" | "editor";
 
 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 [loadingFlowId, setLoadingFlowId] = useState<number | null>(null);
 
-  // 단계별 제목과 설명
-  const stepConfig = {
-    list: {
-      title: "데이터 흐름 제어 관리",
-      description: "생성된 제어들을 확인하고 관리하세요",
-      icon: "📊",
-    },
-    design: {
-      title: "새 제어 설계",
-      description: "테이블 간 데이터 제어를 시각적으로 설계하세요",
-      icon: "🎨",
-    },
-  };
+  // 플로우 불러오기 핸들러
+  const handleLoadFlow = async (flowId: number | null) => {
+    if (flowId === null) {
+      // 새 플로우 생성
+      setLoadingFlowId(null);
+      setCurrentStep("editor");
+      return;
+    }
 
-  // 다음 단계로 이동
-  const goToNextStep = (nextStep: Step) => {
-    setStepHistory((prev) => [...prev, nextStep]);
-    setCurrentStep(nextStep);
-  };
+    try {
+      // 기존 플로우 불러오기
+      setLoadingFlowId(flowId);
+      setCurrentStep("editor");
 
-  // 이전 단계로 이동
-  const goToPreviousStep = () => {
-    if (stepHistory.length > 1) {
-      const newHistory = stepHistory.slice(0, -1);
-      const previousStep = newHistory[newHistory.length - 1];
-      setStepHistory(newHistory);
-      setCurrentStep(previousStep);
+      toast.success("플로우를 불러왔습니다.");
+    } catch (error: any) {
+      console.error("❌ 플로우 불러오기 실패:", error);
+      toast.error(error.message || "플로우를 불러오는데 실패했습니다.");
     }
   };
 
-  // 특정 단계로 이동
-  const goToStep = (step: Step) => {
-    setCurrentStep(step);
-    // 해당 단계까지의 히스토리만 유지
-    const stepIndex = stepHistory.findIndex((s) => s === step);
-    if (stepIndex !== -1) {
-      setStepHistory(stepHistory.slice(0, stepIndex + 1));
-    }
+  // 목록으로 돌아가기
+  const handleBackToList = () => {
+    setCurrentStep("list");
+    setLoadingFlowId(null);
   };
 
-  const handleSave = (relationships: TableRelationship[]) => {
-    console.log("저장된 제어:", relationships);
-    // 저장 후 목록으로 돌아가기 - 다음 렌더링 사이클로 지연
-    setTimeout(() => {
-      goToStep("list");
-      setEditingDiagram(null);
-      setLoadedRelationshipData(null);
-    }, 0);
-  };
+  // 에디터 모드일 때는 전체 화면 사용
+  const isEditorMode = currentStep === "editor";
 
-  // 제어 수정 핸들러
-  const handleDesignDiagram = async (diagram: DataFlowDiagram | null) => {
-    if (diagram) {
-      // 기존 제어 수정 - 저장된 제어 정보 로드
-      try {
-        console.log("📖 제어 수정 모드:", diagram);
+  // 에디터 모드일 때는 레이아웃 없이 전체 화면 사용
+  if (isEditorMode) {
+    return (
+      <div className="fixed inset-0 z-50 bg-white">
+        <div className="flex h-full flex-col">
+          {/* 에디터 헤더 */}
+          <div className="flex items-center gap-4 border-b bg-white p-4">
+            <Button variant="outline" size="sm" onClick={handleBackToList} className="flex items-center gap-2">
+              <ArrowLeft className="h-4 w-4" />
+              목록으로
+            </Button>
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900">노드 플로우 에디터</h1>
+              <p className="mt-1 text-sm text-gray-600">
+                드래그 앤 드롭으로 데이터 제어 플로우를 시각적으로 설계합니다
+              </p>
+            </div>
+          </div>
 
-        // 저장된 제어 정보 로드
-        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");
-    }
-  };
+          {/* 플로우 에디터 */}
+          <div className="flex-1">
+            <FlowEditor key={loadingFlowId || "new"} initialFlowId={loadingFlowId} />
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="min-h-screen bg-gray-50">
@@ -106,32 +82,12 @@ export default function DataFlowPage() {
         <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>
+            <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>
+        {/* 플로우 목록 */}
+        <DataFlowList onLoadFlow={handleLoadFlow} />
       </div>
     </div>
   );