제어관리 데이터 저장기능

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

@@ -1,15 +1,19 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
-import { ArrowRight, Database, Globe, Loader2 } from "lucide-react";
+import { ArrowRight, Database, Globe, Loader2, AlertTriangle, CheckCircle } from "lucide-react";
 import { toast } from "sonner";
 
 // API import
 import { getActiveConnections, ConnectionInfo } from "@/lib/api/multiConnection";
+import { checkRelationshipNameDuplicate } from "@/lib/api/dataflowSave";
 
 // 타입 import
 import { Connection } from "@/lib/types/multiConnection";
@@ -18,7 +22,12 @@ interface ConnectionStepProps {
   connectionType: "data_save" | "external_call";
   fromConnection?: Connection;
   toConnection?: Connection;
+  relationshipName?: string;
+  description?: string;
+  diagramId?: number; // 🔧 수정 모드 감지용
   onSelectConnection: (type: "from" | "to", connection: Connection) => void;
+  onSetRelationshipName: (name: string) => void;
+  onSetDescription: (description: string) => void;
   onNext: () => void;
 }
 
@@ -29,9 +38,21 @@ interface ConnectionStepProps {
  * - 지연시간 정보
  */
 const ConnectionStep: React.FC<ConnectionStepProps> = React.memo(
-  ({ connectionType, fromConnection, toConnection, onSelectConnection, onNext }) => {
+  ({
+    connectionType,
+    fromConnection,
+    toConnection,
+    relationshipName,
+    description,
+    diagramId,
+    onSelectConnection,
+    onSetRelationshipName,
+    onSetDescription,
+    onNext,
+  }) => {
     const [connections, setConnections] = useState<Connection[]>([]);
     const [isLoading, setIsLoading] = useState(true);
+    const [nameCheckStatus, setNameCheckStatus] = useState<"idle" | "checking" | "valid" | "duplicate">("idle");
 
     // API 응답을 Connection 타입으로 변환
     const convertToConnection = (connectionInfo: ConnectionInfo): Connection => ({
@@ -48,6 +69,45 @@ const ConnectionStep: React.FC<ConnectionStepProps> = React.memo(
       updatedDate: connectionInfo.updated_date,
     });
 
+    // 🔍 관계명 중복 체크 (디바운스 적용)
+    const checkNameDuplicate = useCallback(
+      async (name: string) => {
+        if (!name.trim()) {
+          setNameCheckStatus("idle");
+          return;
+        }
+
+        setNameCheckStatus("checking");
+
+        try {
+          const result = await checkRelationshipNameDuplicate(name, diagramId);
+          setNameCheckStatus(result.isDuplicate ? "duplicate" : "valid");
+
+          if (result.isDuplicate) {
+            toast.warning(`"${name}" 이름이 이미 사용 중입니다. (${result.duplicateCount}개 발견)`);
+          }
+        } catch (error) {
+          console.error("중복 체크 실패:", error);
+          setNameCheckStatus("idle");
+        }
+      },
+      [diagramId],
+    );
+
+    // 관계명 변경 시 중복 체크 (디바운스)
+    useEffect(() => {
+      if (!relationshipName) {
+        setNameCheckStatus("idle");
+        return;
+      }
+
+      const timeoutId = setTimeout(() => {
+        checkNameDuplicate(relationshipName);
+      }, 500); // 500ms 디바운스
+
+      return () => clearTimeout(timeoutId);
+    }, [relationshipName, checkNameDuplicate]);
+
     // 연결 목록 로드
     useEffect(() => {
       const loadConnections = async () => {
@@ -150,6 +210,50 @@ const ConnectionStep: React.FC<ConnectionStepProps> = React.memo(
         </CardHeader>
 
         <CardContent className="max-h-[calc(100vh-400px)] min-h-[400px] space-y-6 overflow-y-auto">
+          {/* 관계 정보 입력 */}
+          <div className="bg-muted/30 space-y-4 rounded-lg border p-4">
+            <h3 className="font-medium">관계 정보</h3>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="relationshipName">관계 이름 *</Label>
+                <div className="relative">
+                  <Input
+                    id="relationshipName"
+                    placeholder="예: 사용자 데이터 동기화"
+                    value={relationshipName || ""}
+                    onChange={(e) => onSetRelationshipName(e.target.value)}
+                    className={`pr-10 ${
+                      nameCheckStatus === "duplicate"
+                        ? "border-red-500 focus:border-red-500"
+                        : nameCheckStatus === "valid"
+                          ? "border-green-500 focus:border-green-500"
+                          : ""
+                    }`}
+                  />
+                  <div className="absolute top-1/2 right-3 -translate-y-1/2">
+                    {nameCheckStatus === "checking" && (
+                      <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+                    )}
+                    {nameCheckStatus === "valid" && <CheckCircle className="h-4 w-4 text-green-500" />}
+                    {nameCheckStatus === "duplicate" && <AlertTriangle className="h-4 w-4 text-red-500" />}
+                  </div>
+                </div>
+                {nameCheckStatus === "duplicate" && <p className="text-sm text-red-600">이미 사용 중인 이름입니다.</p>}
+                {nameCheckStatus === "valid" && <p className="text-sm text-green-600">사용 가능한 이름입니다.</p>}
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="description">설명</Label>
+                <Textarea
+                  id="description"
+                  placeholder="이 관계에 대한 설명을 입력하세요"
+                  value={description || ""}
+                  onChange={(e) => onSetDescription(e.target.value)}
+                  rows={2}
+                />
+              </div>
+            </div>
+          </div>
+
           {isLoading ? (
             <div className="flex items-center justify-center py-8">
               <Loader2 className="mr-2 h-6 w-6 animate-spin" />