diff --git a/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx b/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
index 604b29f1..8c5514c3 100644
--- a/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
+++ b/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
@@ -1,17 +1,46 @@
 "use client";
 
-import React, { useState } from "react";
-import { ConnectionTypeSelector } from "./LeftPanel/ConnectionTypeSelector";
-import { MappingInfoPanel } from "./LeftPanel/MappingInfoPanel";
-import { StepProgress } from "./RightPanel/StepProgress";
-import { ConnectionStep } from "./RightPanel/ConnectionStep";
-import { TableStep } from "./RightPanel/TableStep";
-import { FieldMappingStep } from "./RightPanel/FieldMappingStep";
-import { DataConnectionState } from "./types/redesigned";
-import { ResponsiveContainer, ResponsiveGrid } from "@/components/layout/ResponsiveContainer";
-import { useResponsive } from "@/lib/hooks/useResponsive";
+import React, { useState, useCallback, useEffect } from "react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { X, ArrowLeft } from "lucide-react";
 
-const initialState: DataConnectionState = {
+// API import
+import { saveDataflowRelationship, checkRelationshipNameDuplicate } from "@/lib/api/dataflowSave";
+import { getColumnsFromConnection } from "@/lib/api/multiConnection";
+
+// 타입 import
+import {
+  DataConnectionState,
+  DataConnectionActions,
+  DataConnectionDesignerProps,
+  FieldMapping,
+  ValidationResult,
+  TestResult,
+  MappingStats,
+  ActionGroup,
+  SingleAction,
+} from "./types/redesigned";
+import { ColumnInfo, Connection, TableInfo } from "@/lib/types/multiConnection";
+
+// 컴포넌트 import
+import LeftPanel from "./LeftPanel/LeftPanel";
+import RightPanel from "./RightPanel/RightPanel";
+
+/**
+ * 🎨 데이터 연결 설정 메인 디자이너
+ * - 좌우 분할 레이아웃 (30% + 70%)
+ * - 상태 관리 및 액션 처리
+ * - 기존 모달 기능을 메인 화면으로 통합
+ */
+const DataConnectionDesigner: React.FC<DataConnectionDesignerProps> = ({
+  onClose,
+  initialData,
+  showBackButton = false,
+}) => {
+  // 🔄 상태 관리
+  const [state, setState] = useState<DataConnectionState>(() => ({
     connectionType: "data_save",
     currentStep: 1,
     fieldMappings: [],
@@ -23,6 +52,34 @@ const initialState: DataConnectionState = {
       estimatedRows: 0,
       actionType: "INSERT",
     },
+    // 제어 실행 조건 초기값
+    controlConditions: [],
+
+    // 액션 그룹 초기값 (멀티 액션)
+    actionGroups: [
+      {
+        id: "group_1",
+        name: "기본 액션 그룹",
+        logicalOperator: "AND" as const,
+        actions: [
+          {
+            id: "action_1",
+            name: "액션 1",
+            actionType: "insert" as const,
+            conditions: [],
+            fieldMappings: [],
+            isEnabled: true,
+          },
+        ],
+        isEnabled: true,
+      },
+    ],
+    groupsLogicalOperator: "AND" as "AND" | "OR",
+
+    // 기존 호환성 필드들 (deprecated)
+    actionType: "insert",
+    actionConditions: [],
+    actionFieldMappings: [],
     isLoading: false,
     validationErrors: [],
 
@@ -720,30 +777,23 @@ const initialState: DataConnectionState = {
   };
 
   return (
-    <div className="h-screen bg-gradient-to-br from-slate-50 to-gray-100">
-      <div className="bg-white border-b border-gray-200 px-6 py-4">
-        <h1 className="text-2xl font-bold text-gray-900">
-          🎨 제어관리 - 데이터 연결 설정
-        </h1>
-        <p className="text-muted-foreground mt-1">
-          시각적 필드 매핑으로 데이터 연결을 쉽게 설정하세요
+    <div className="overflow-hidden rounded-lg border bg-white shadow-sm">
+      {/* 상단 네비게이션 */}
+      {showBackButton && (
+        <div className="flex-shrink-0 border-b bg-white shadow-sm">
+          <div className="flex items-center justify-between p-4">
+            <div className="flex items-center gap-4">
+              <Button variant="outline" onClick={onClose} className="flex items-center gap-2">
+                <ArrowLeft className="h-4 w-4" />
+                목록으로
+              </Button>
+              <div>
+                <h1 className="text-xl font-bold">🔗 데이터 연결 설정</h1>
+                <p className="text-muted-foreground text-sm">
+                  {state.connectionType === "data_save" ? "데이터 저장" : "외부 호출"} 연결 설정
                 </p>
               </div>
-
-      <div className="flex h-[calc(100vh-80px)]">
-        <div className="w-[30%] bg-white border-r border-gray-200 flex flex-col">
-          <ConnectionTypeSelector
-            connectionType={state.connectionType}
-            onConnectionTypeChange={(type) => setState(prev => ({ ...prev, connectionType: type }))}
-          />
-          
-          <div className="flex-1 overflow-y-auto">
-            <MappingInfoPanel
-              mappingStats={state.mappingStats}
-              fieldMappings={state.fieldMappings}
-              selectedMapping={state.selectedMapping}
-              onMappingSelect={(mappingId) => setState(prev => ({ ...prev, selectedMapping: mappingId }))}
-            />
+            </div>
           </div>
         </div>
       )}