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

frontend/components/dataflow/connection/redesigned/RightPanel/VisualMapping/MappingControls.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Link, ArrowRight, MousePointer, Move } from "lucide-react";
+
+// 타입 import
+import { ColumnInfo } from "@/lib/types/multiConnection";
+
+interface MappingControlsProps {
+  selectedFromField: ColumnInfo | null;
+  selectedToField: ColumnInfo | null;
+  onCreateMapping: () => void;
+  canCreate: boolean;
+}
+
+/**
+ * 🎯 매핑 생성 컨트롤
+ * - 선택된 필드 표시
+ * - 매핑 생성 버튼
+ * - 시각적 피드백
+ */
+const MappingControls: React.FC<MappingControlsProps> = ({
+  selectedFromField,
+  selectedToField,
+  onCreateMapping,
+  canCreate,
+}) => {
+  // 안내 메시지 표시 여부
+  const showGuidance = !selectedFromField && !selectedToField;
+
+  if (showGuidance) {
+    return (
+      <div className="bg-muted/50 rounded-lg border p-4">
+        <div className="text-muted-foreground flex items-center justify-center gap-6 text-sm">
+          <div className="flex items-center gap-2">
+            <MousePointer className="h-4 w-4" />
+            <span>클릭으로 선택</span>
+          </div>
+          <div className="text-muted-foreground">또는</div>
+          <div className="flex items-center gap-2">
+            <Move className="h-4 w-4" />
+            <span>드래그 앤 드롭으로 매핑</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-muted/50 flex items-center justify-between rounded-lg border p-4">
+      <div className="flex items-center gap-4">
+        <div className="text-sm">
+          <span className="text-muted-foreground">선택된 필드:</span>
+          <div className="mt-2 flex items-center gap-2">
+            {/* FROM 필드 */}
+            <Badge
+              variant={selectedFromField ? "default" : "outline"}
+              className={`transition-all ${selectedFromField ? "shadow-sm" : ""}`}
+            >
+              FROM: {selectedFromField?.displayName || selectedFromField?.columnName || "없음"}
+            </Badge>
+
+            {/* 화살표 */}
+            <ArrowRight
+              className={`h-4 w-4 transition-colors ${canCreate ? "text-primary" : "text-muted-foreground"}`}
+            />
+
+            {/* TO 필드 */}
+            <Badge
+              variant={selectedToField ? "default" : "outline"}
+              className={`transition-all ${selectedToField ? "shadow-sm" : ""}`}
+            >
+              TO: {selectedToField?.displayName || selectedToField?.columnName || "없음"}
+            </Badge>
+          </div>
+        </div>
+
+        {/* 타입 호환성 표시 */}
+        {selectedFromField && selectedToField && (
+          <div className="text-xs">
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground">타입:</span>
+              <Badge variant="outline" className="text-xs">
+                {selectedFromField.webType || "unknown"}
+              </Badge>
+              <ArrowRight className="text-muted-foreground h-3 w-3" />
+              <Badge variant="outline" className="text-xs">
+                {selectedToField.webType || "unknown"}
+              </Badge>
+              {/* 타입 호환성 아이콘 */}
+              {selectedFromField.webType === selectedToField.webType ? (
+                <span className="text-xs text-green-600">✅</span>
+              ) : (
+                <span className="text-xs text-orange-600">⚠️</span>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 매핑 생성 버튼 */}
+      <Button
+        onClick={onCreateMapping}
+        disabled={!canCreate}
+        size="sm"
+        className={`transition-all ${canCreate ? "shadow-sm hover:shadow-md" : ""}`}
+      >
+        <Link className="mr-1 h-4 w-4" />
+        매핑 생성
+      </Button>
+    </div>
+  );
+};
+
+export default MappingControls;