제어관리 수정

frontend/components/dataflow/connection/redesigned/RightPanel/MultiActionConfigStep.tsx

@@ -21,6 +21,7 @@ import {
   Save,
   Play,
   AlertTriangle,
+  Eye,
 } from "lucide-react";
 import { toast } from "sonner";
 
@@ -28,6 +29,9 @@ import { toast } from "sonner";
 
 // 타입 import
 import { ColumnInfo, Connection, TableInfo } from "@/lib/types/multiConnection";
+
+// 컴포넌트 import
+import { DataflowVisualization } from "./DataflowVisualization";
 import { ActionGroup, SingleAction, FieldMapping } from "../types/redesigned";
 
 // 컴포넌트 import
@@ -104,7 +108,7 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
   onLoadColumns,
 }) => {
   const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set(["group_1"])); // 첫 번째 그룹은 기본 열림
-  const [activeTab, setActiveTab] = useState<"control" | "actions" | "mapping">("control"); // 현재 활성 탭
+  const [activeTab, setActiveTab] = useState<"control" | "actions" | "visualization">("control"); // 현재 활성 탭
 
   // 컬럼 로딩 상태 확인
   const isColumnsLoaded = fromColumns.length > 0 && toColumns.length > 0;
@@ -163,10 +167,11 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
     group.actions.some((action) => action.actionType === "insert" && action.isEnabled),
   );
 
-  // 탭 정보 (컬럼 매핑 탭 제거)
+  // 탭 정보 (흐름 미리보기 추가)
   const tabs = [
-    { id: "control" as const, label: "제어 조건", icon: "🎯", description: "전체 제어 실행 조건" },
-    { id: "actions" as const, label: "액션 설정", icon: "⚙️", description: "액션 그룹 및 실행 조건" },
+    { id: "control" as const, label: "제어 조건", description: "전체 제어 실행 조건" },
+    { id: "actions" as const, label: "액션 설정", description: "액션 그룹 및 실행 조건" },
+    { id: "visualization" as const, label: "흐름 미리보기", description: "전체 데이터 흐름을 한눈에 확인" },
   ];
 
   return (
@@ -192,27 +197,16 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
                   : "text-muted-foreground hover:text-foreground"
               }`}
             >
-              <span>{tab.icon}</span>
               <span>{tab.label}</span>
               {tab.id === "actions" && (
                 <Badge variant="outline" className="ml-1 text-xs">
                   {actionGroups.filter((g) => g.isEnabled).length}
                 </Badge>
               )}
-              {tab.id === "mapping" && hasInsertActions && (
-                <Badge variant="outline" className="ml-1 text-xs">
-                  {fieldMappings.length}
-                </Badge>
-              )}
             </button>
           ))}
         </div>
 
-        {/* 탭 설명 */}
-        <div className="bg-muted/30 mb-4 rounded-md p-3">
-          <p className="text-muted-foreground text-sm">{tabs.find((tab) => tab.id === activeTab)?.description}</p>
-        </div>
-
         {/* 탭별 컨텐츠 */}
         <div className="min-h-0 flex-1 overflow-y-auto">
           {activeTab === "control" && (
@@ -671,6 +665,36 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
               </div>
             </div>
           )}
+
+          {activeTab === "visualization" && (
+            <DataflowVisualization
+              state={{
+                fromTable,
+                toTable,
+                fromConnection,
+                toConnection,
+                fromColumns,
+                toColumns,
+                controlConditions,
+                dataflowActions: actionGroups.flatMap((group) =>
+                  group.actions
+                    .filter((action) => action.isEnabled)
+                    .map((action) => ({
+                      ...action,
+                      targetTable: toTable?.tableName || "",
+                    })),
+                ),
+              }}
+              onEdit={(step) => {
+                // 편집 버튼 클릭 시 해당 탭으로 이동
+                if (step === "conditions") {
+                  setActiveTab("control");
+                } else if (step === "actions") {
+                  setActiveTab("actions");
+                }
+              }}
+            />
+          )}
         </div>
 
         {/* 하단 네비게이션 */}