118 lines
3.8 KiB
TypeScript
118 lines
3.8 KiB
TypeScript
"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;
|