219 lines
8.5 KiB
TypeScript
219 lines
8.5 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { ArrowLeft, Save, CheckCircle, XCircle, AlertCircle } from "lucide-react";
|
|
import { TableInfo, FieldMapping, ColumnInfo } from "../types/redesigned";
|
|
|
|
interface FieldMappingStepProps {
|
|
fromTable?: TableInfo;
|
|
toTable?: TableInfo;
|
|
fieldMappings: FieldMapping[];
|
|
onMappingsChange: (mappings: FieldMapping[]) => void;
|
|
onBack: () => void;
|
|
onSave: () => void;
|
|
}
|
|
|
|
export const FieldMappingStep: React.FC<FieldMappingStepProps> = ({
|
|
fromTable,
|
|
toTable,
|
|
fieldMappings,
|
|
onMappingsChange,
|
|
onBack,
|
|
onSave,
|
|
}) => {
|
|
const [draggedField, setDraggedField] = useState<ColumnInfo | null>(null);
|
|
|
|
const createMapping = (fromField: ColumnInfo, toField: ColumnInfo) => {
|
|
const mapping: FieldMapping = {
|
|
id: `${fromField.name}-${toField.name}`,
|
|
fromField,
|
|
toField,
|
|
isValid: fromField.type === toField.type,
|
|
validationMessage: fromField.type !== toField.type ? "타입이 다릅니다" : undefined,
|
|
};
|
|
|
|
const newMappings = [...fieldMappings, mapping];
|
|
onMappingsChange(newMappings);
|
|
};
|
|
|
|
const removeMapping = (mappingId: string) => {
|
|
const newMappings = fieldMappings.filter((m) => m.id !== mappingId);
|
|
onMappingsChange(newMappings);
|
|
};
|
|
|
|
const handleDragStart = (field: ColumnInfo) => {
|
|
setDraggedField(field);
|
|
};
|
|
|
|
const handleDragOver = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent, toField: ColumnInfo) => {
|
|
e.preventDefault();
|
|
if (draggedField) {
|
|
createMapping(draggedField, toField);
|
|
setDraggedField(null);
|
|
}
|
|
};
|
|
|
|
const getMappedFromField = (toFieldName: string) => {
|
|
return fieldMappings.find((m) => m.toField.name === toFieldName)?.fromField;
|
|
};
|
|
|
|
const isFieldMapped = (fieldName: string) => {
|
|
return fieldMappings.some((m) => m.fromField.name === fieldName || m.toField.name === fieldName);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<div className="text-center">
|
|
<h2 className="mb-2 text-2xl font-bold text-gray-900">필드 매핑</h2>
|
|
<p className="text-muted-foreground">소스 테이블의 필드를 대상 테이블의 필드에 드래그하여 매핑하세요</p>
|
|
</div>
|
|
|
|
{/* 매핑 통계 */}
|
|
<div className="grid grid-cols-4 gap-4">
|
|
<div className="bg-accent border-primary/20 rounded-lg border p-4">
|
|
<div className="text-2xl font-bold text-blue-900">{fieldMappings.length}</div>
|
|
<div className="text-sm text-blue-700">총 매핑</div>
|
|
</div>
|
|
<div className="rounded-lg border border-green-200 bg-green-50 p-4">
|
|
<div className="text-2xl font-bold text-green-900">{fieldMappings.filter((m) => m.isValid).length}</div>
|
|
<div className="text-sm text-green-700">유효한 매핑</div>
|
|
</div>
|
|
<div className="bg-destructive/10 border-destructive/20 rounded-lg border p-4">
|
|
<div className="text-2xl font-bold text-red-900">{fieldMappings.filter((m) => !m.isValid).length}</div>
|
|
<div className="text-sm text-red-700">오류 매핑</div>
|
|
</div>
|
|
<div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4">
|
|
<div className="text-2xl font-bold text-yellow-900">
|
|
{(toTable?.columns.length || 0) - fieldMappings.length}
|
|
</div>
|
|
<div className="text-sm text-yellow-700">미매핑 필드</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 매핑 영역 */}
|
|
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
|
{/* FROM 테이블 필드들 */}
|
|
<div className="space-y-4">
|
|
<h3 className="flex items-center gap-2 text-lg font-semibold text-gray-900">
|
|
<div className="bg-primary/20 flex h-6 w-6 items-center justify-center rounded-full">
|
|
<span className="text-primary text-sm font-bold">FROM</span>
|
|
</div>
|
|
{fromTable?.name} 필드들
|
|
</h3>
|
|
|
|
<div className="space-y-2">
|
|
{fromTable?.columns.map((field) => (
|
|
<div
|
|
key={field.name}
|
|
draggable
|
|
onDragStart={() => handleDragStart(field)}
|
|
className={`cursor-move rounded-lg border-2 p-3 transition-all duration-200 ${
|
|
isFieldMapped(field.name)
|
|
? "border-green-300 bg-green-50 opacity-60"
|
|
: "border-primary/20 bg-accent hover:bg-primary/20 hover:border-blue-400"
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="font-medium text-gray-900">{field.name}</div>
|
|
<div className="text-muted-foreground text-sm">{field.type}</div>
|
|
{field.primaryKey && (
|
|
<span className="rounded bg-yellow-100 px-2 py-1 text-xs text-yellow-800">PK</span>
|
|
)}
|
|
</div>
|
|
{isFieldMapped(field.name) && <CheckCircle className="h-5 w-5 text-green-600" />}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* TO 테이블 필드들 */}
|
|
<div className="space-y-4">
|
|
<h3 className="flex items-center gap-2 text-lg font-semibold text-gray-900">
|
|
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-green-100">
|
|
<span className="text-sm font-bold text-green-600">TO</span>
|
|
</div>
|
|
{toTable?.name} 필드들
|
|
</h3>
|
|
|
|
<div className="space-y-2">
|
|
{toTable?.columns.map((field) => {
|
|
const mappedFromField = getMappedFromField(field.name);
|
|
return (
|
|
<div
|
|
key={field.name}
|
|
onDragOver={handleDragOver}
|
|
onDrop={(e) => handleDrop(e, field)}
|
|
className={`rounded-lg border-2 p-3 transition-all duration-200 ${
|
|
mappedFromField
|
|
? "border-green-300 bg-green-50"
|
|
: "hover:bg-green-25 border-gray-200 bg-gray-50 hover:border-green-300"
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="font-medium text-gray-900">{field.name}</div>
|
|
<div className="text-muted-foreground text-sm">{field.type}</div>
|
|
{field.primaryKey && (
|
|
<span className="rounded bg-yellow-100 px-2 py-1 text-xs text-yellow-800">PK</span>
|
|
)}
|
|
{mappedFromField && (
|
|
<div className="mt-1 text-xs text-green-700">
|
|
← {mappedFromField.name} ({mappedFromField.type})
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{mappedFromField && (
|
|
<button
|
|
onClick={() => removeMapping(`${mappedFromField.name}-${field.name}`)}
|
|
className="text-red-500 hover:text-red-700"
|
|
>
|
|
<XCircle className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
{mappedFromField && (
|
|
<div>
|
|
{fieldMappings.find((m) => m.toField.name === field.name)?.isValid ? (
|
|
<CheckCircle className="h-5 w-5 text-green-600" />
|
|
) : (
|
|
<AlertCircle className="text-destructive h-5 w-5" />
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 버튼들 */}
|
|
<div className="flex justify-between">
|
|
<button
|
|
onClick={onBack}
|
|
className="text-muted-foreground flex items-center gap-2 rounded-lg bg-gray-100 px-6 py-3 font-medium transition-all duration-200 hover:bg-gray-200"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
이전 단계
|
|
</button>
|
|
|
|
<button
|
|
onClick={onSave}
|
|
className="flex items-center gap-2 rounded-lg bg-orange-500 px-6 py-3 font-medium text-white shadow-md transition-all duration-200 hover:bg-orange-600 hover:shadow-lg"
|
|
>
|
|
<Save className="h-4 w-4" />
|
|
연결 설정 저장
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|