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;
|