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

frontend/components/dataflow/connection/redesigned/SaveRelationshipDialog.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { CheckCircle, Save } from "lucide-react";
+
+interface SaveRelationshipDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (relationshipName: string, description?: string) => void;
+  actionType: "insert" | "update" | "delete" | "upsert";
+  fromTable?: string;
+  toTable?: string;
+}
+
+/**
+ * 💾 관계 저장 다이얼로그
+ * - 관계 이름 입력
+ * - 설명 입력 (선택사항)
+ * - 액션 타입별 제안 이름
+ */
+const SaveRelationshipDialog: React.FC<SaveRelationshipDialogProps> = ({
+  open,
+  onOpenChange,
+  onSave,
+  actionType,
+  fromTable,
+  toTable,
+}) => {
+  const [relationshipName, setRelationshipName] = useState("");
+  const [description, setDescription] = useState("");
+
+  // 액션 타입별 제안 이름 생성
+  const generateSuggestedName = () => {
+    if (!fromTable || !toTable) return "";
+
+    const actionMap = {
+      insert: "입력",
+      update: "수정",
+      delete: "삭제",
+      upsert: "병합",
+    };
+
+    return `${fromTable}_${toTable}_${actionMap[actionType]}`;
+  };
+
+  const handleSave = () => {
+    if (!relationshipName.trim()) return;
+
+    onSave(relationshipName.trim(), description.trim() || undefined);
+    onOpenChange(false);
+
+    // 폼 초기화
+    setRelationshipName("");
+    setDescription("");
+  };
+
+  const handleSuggestName = () => {
+    const suggested = generateSuggestedName();
+    if (suggested) {
+      setRelationshipName(suggested);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Save className="h-5 w-5" />
+            관계 저장
+          </DialogTitle>
+          <DialogDescription>데이터 연결 관계의 이름과 설명을 입력하세요.</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* 관계 이름 */}
+          <div className="space-y-2">
+            <Label htmlFor="relationshipName">관계 이름 *</Label>
+            <div className="flex gap-2">
+              <Input
+                id="relationshipName"
+                placeholder="예: 사용자_주문_입력"
+                value={relationshipName}
+                onChange={(e) => setRelationshipName(e.target.value)}
+                className="flex-1"
+              />
+              <Button variant="outline" size="sm" onClick={handleSuggestName} disabled={!fromTable || !toTable}>
+                제안
+              </Button>
+            </div>
+          </div>
+
+          {/* 설명 (선택사항) */}
+          <div className="space-y-2">
+            <Label htmlFor="description">설명 (선택사항)</Label>
+            <Textarea
+              id="description"
+              placeholder="이 관계에 대한 설명을 입력하세요..."
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={3}
+            />
+          </div>
+
+          {/* 정보 요약 */}
+          <div className="bg-muted/50 rounded-lg p-3">
+            <div className="space-y-1 text-sm">
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">액션 타입:</span>
+                <span className="font-medium">{actionType.toUpperCase()}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">소스 테이블:</span>
+                <span className="font-medium">{fromTable || "미선택"}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">대상 테이블:</span>
+                <span className="font-medium">{toTable || "미선택"}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            취소
+          </Button>
+          <Button onClick={handleSave} disabled={!relationshipName.trim()}>
+            <CheckCircle className="mr-2 h-4 w-4" />
+            저장
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default SaveRelationshipDialog;