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

2025-09-26 01:28:51 +09:00
parent 1a59c0cf04
commit 2a4e379dc4
43 changed files with 7129 additions and 316 deletions
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/RightPanel.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import React from "react";
+import { Card } from "@/components/ui/card";
+
+// 타입 import
+import { RightPanelProps } from "../types/redesigned";
+
+// 컴포넌트 import
+import StepProgress from "./StepProgress";
+import ConnectionStep from "./ConnectionStep";
+import TableStep from "./TableStep";
+import FieldMappingStep from "./FieldMappingStep";
+import ControlConditionStep from "./ControlConditionStep";
+import ActionConfigStep from "./ActionConfigStep";
+import MultiActionConfigStep from "./MultiActionConfigStep";
+
+/**
+ * 🎯 우측 패널 (70% 너비)
+ * - 단계별 진행 UI
+ * - 연결 → 테이블 → 필드 매핑
+ * - 시각적 매핑 영역
+ */
+const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
+  // 완료된 단계 계산
+  const completedSteps: number[] = [];
+
+  if (state.fromConnection && state.toConnection) {
+    completedSteps.push(1);
+  }
+
+  if (state.fromTable && state.toTable) {
+    completedSteps.push(2);
+  }
+
+  // 새로운 단계 순서에 따른 완료 조건
+  const needsFieldMapping = state.actionType === "insert" || state.actionType === "upsert";
+
+  // 3단계: 제어 조건 (테이블 선택 후 바로 접근 가능)
+  if (state.fromTable && state.toTable) {
+    completedSteps.push(3);
+  }
+
+  // 4단계: 액션 설정
+  if (state.actionType) {
+    completedSteps.push(4);
+  }
+
+  // 5단계: 컬럼 매핑 (INSERT/UPSERT인 경우에만)
+  if (needsFieldMapping && state.fieldMappings.length > 0) {
+    completedSteps.push(5);
+  }
+
+  const renderCurrentStep = () => {
+    switch (state.currentStep) {
+      case 1:
+        return (
+          <ConnectionStep
+            connectionType={state.connectionType}
+            fromConnection={state.fromConnection}
+            toConnection={state.toConnection}
+            onSelectConnection={actions.selectConnection}
+            onNext={() => actions.goToStep(2)}
+          />
+        );
+
+      case 2:
+        return (
+          <TableStep
+            fromConnection={state.fromConnection}
+            toConnection={state.toConnection}
+            fromTable={state.fromTable}
+            toTable={state.toTable}
+            onSelectTable={actions.selectTable}
+            onNext={() => actions.goToStep(3)} // 3단계(제어 조건)로
+            onBack={() => actions.goToStep(1)}
+          />
+        );
+
+      case 3:
+        // 3단계: 제어 조건
+        return (
+          <ControlConditionStep
+            state={state}
+            actions={actions}
+            onBack={() => actions.goToStep(2)}
+            onNext={() => actions.goToStep(4)}
+          />
+        );
+
+      case 4:
+        // 4단계: 통합된 멀티 액션 설정 (제어 조건 + 액션 설정 + 컬럼 매핑)
+        return (
+          <MultiActionConfigStep
+            fromTable={state.fromTable}
+            toTable={state.toTable}
+            fromConnection={state.fromConnection}
+            toConnection={state.toConnection}
+            controlConditions={state.controlConditions}
+            onUpdateControlCondition={actions.updateControlCondition}
+            onDeleteControlCondition={actions.deleteControlCondition}
+            onAddControlCondition={actions.addControlCondition}
+            actionGroups={state.actionGroups}
+            onUpdateActionGroup={actions.updateActionGroup}
+            onDeleteActionGroup={actions.deleteActionGroup}
+            onAddActionGroup={actions.addActionGroup}
+            onAddActionToGroup={actions.addActionToGroup}
+            onUpdateActionInGroup={actions.updateActionInGroup}
+            onDeleteActionFromGroup={actions.deleteActionFromGroup}
+            fieldMappings={state.fieldMappings}
+            onCreateMapping={actions.createMapping}
+            onDeleteMapping={actions.deleteMapping}
+            onNext={() => {
+              // 완료 처리 - 저장 및 상위 컴포넌트 알림
+              actions.saveMappings();
+            }}
+            onBack={() => actions.goToStep(3)}
+          />
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* 단계 진행 표시 */}
+      <div className="bg-card/50 border-b p-3">
+        <StepProgress currentStep={state.currentStep} completedSteps={completedSteps} onStepClick={actions.goToStep} />
+      </div>
+
+      {/* 현재 단계 컨텐츠 */}
+      <div className="min-h-0 flex-1 p-3">
+        <Card className="flex h-full flex-col overflow-hidden">{renderCurrentStep()}</Card>
+      </div>
+    </div>
+  );
+};
+
+export default RightPanel;