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

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/StepProgress.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/StepProgress.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { CheckCircle, Circle, ArrowRight } from "lucide-react";
+
+// 타입 import
+import { StepProgressProps } from "../types/redesigned";
+
+/**
+ * 📊 단계 진행 표시
+ * - 현재 단계 하이라이트
+ * - 완료된 단계 체크 표시
+ * - 클릭으로 단계 이동
+ */
+const StepProgress: React.FC<StepProgressProps> = ({ currentStep, completedSteps, onStepClick }) => {
+  const steps = [
+    { number: 1, title: "연결 선택", description: "FROM/TO 데이터베이스 연결" },
+    { number: 2, title: "테이블 선택", description: "소스/대상 테이블 선택" },
+    { number: 3, title: "제어 조건", description: "전체 제어 실행 조건 설정" },
+    { number: 4, title: "액션 및 매핑", description: "액션 설정 및 컬럼 매핑" },
+  ];
+
+  const getStepStatus = (stepNumber: number) => {
+    if (completedSteps.includes(stepNumber)) return "completed";
+    if (stepNumber === currentStep) return "current";
+    return "pending";
+  };
+
+  const getStepIcon = (stepNumber: number) => {
+    const status = getStepStatus(stepNumber);
+
+    if (status === "completed") {
+      return <CheckCircle className="h-5 w-5 text-green-600" />;
+    }
+
+    return (
+      <Circle className={`h-5 w-5 ${status === "current" ? "text-primary fill-primary" : "text-muted-foreground"}`} />
+    );
+  };
+
+  const canClickStep = (stepNumber: number) => {
+    // 현재 단계이거나 완료된 단계만 클릭 가능
+    return stepNumber === currentStep || completedSteps.includes(stepNumber);
+  };
+
+  return (
+    <div className="mx-auto flex max-w-4xl items-center justify-between">
+      {steps.map((step, index) => (
+        <React.Fragment key={step.number}>
+          {/* 단계 */}
+          <div className="flex items-center">
+            <Button
+              variant="ghost"
+              className={`flex h-auto items-center gap-3 p-3 ${
+                canClickStep(step.number) ? "hover:bg-muted/50 cursor-pointer" : "cursor-default"
+              }`}
+              onClick={() => canClickStep(step.number) && onStepClick(step.number as 1 | 2 | 3 | 4 | 5)}
+              disabled={!canClickStep(step.number)}
+            >
+              {/* 아이콘 */}
+              <div className="flex-shrink-0">{getStepIcon(step.number)}</div>
+
+              {/* 텍스트 */}
+              <div className="text-left">
+                <div
+                  className={`text-sm font-medium ${
+                    getStepStatus(step.number) === "current"
+                      ? "text-primary"
+                      : getStepStatus(step.number) === "completed"
+                        ? "text-foreground"
+                        : "text-muted-foreground"
+                  }`}
+                >
+                  {step.title}
+                </div>
+                <div className="text-muted-foreground text-xs">{step.description}</div>
+              </div>
+            </Button>
+          </div>
+
+          {/* 화살표 (마지막 단계 제외) */}
+          {index < steps.length - 1 && <ArrowRight className="text-muted-foreground mx-2 h-4 w-4" />}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default StepProgress;