From 559c3fc98f7ac55e9bb3df8ceb02af2b40b4bc72 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Wed, 8 Oct 2025 10:42:23 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20DataConnectionDesigner=20=EC=86=90?=
 =?UTF-8?q?=EC=83=81=EB=90=9C=20=ED=8C=8C=EC=9D=BC=EB=A1=9C=20=EC=9B=90?=
 =?UTF-8?q?=EC=83=81=EB=B3=B5=EA=B5=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../redesigned/DataConnectionDesigner.tsx     | 116 +++++-------------
 1 file changed, 33 insertions(+), 83 deletions(-)

diff --git a/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx b/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
index 8c5514c3..604b29f1 100644
--- a/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
+++ b/frontend/components/dataflow/connection/redesigned/DataConnectionDesigner.tsx
@@ -1,46 +1,17 @@
 "use client";
 
-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";
+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";
 
-// 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>(() => ({
+const initialState: DataConnectionState = {
     connectionType: "data_save",
     currentStep: 1,
     fieldMappings: [],
@@ -52,34 +23,6 @@ const DataConnectionDesigner: React.FC<DataConnectionDesignerProps> = ({
       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: [],
 
@@ -777,23 +720,30 @@ const DataConnectionDesigner: React.FC<DataConnectionDesignerProps> = ({
   };
 
   return (
-    <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" ? "데이터 저장" : "외부 호출"} 연결 설정
+    <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">
+          시각적 필드 매핑으로 데이터 연결을 쉽게 설정하세요
                 </p>
               </div>
-            </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>
       )}