135 lines
5.3 KiB
TypeScript
135 lines
5.3 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { CheckCircle, AlertTriangle, Edit, Trash2 } from "lucide-react";
|
|
|
|
// 타입 import
|
|
import { MappingDetailListProps } from "../types/redesigned";
|
|
|
|
/**
|
|
* 📝 매핑 상세 목록
|
|
* - 각 매핑별 상세 정보
|
|
* - 타입 변환 정보
|
|
* - 개별 수정/삭제 기능
|
|
*/
|
|
const MappingDetailList: React.FC<MappingDetailListProps> = ({
|
|
mappings,
|
|
selectedMapping,
|
|
onSelectMapping,
|
|
onUpdateMapping,
|
|
onDeleteMapping,
|
|
}) => {
|
|
return (
|
|
<Card>
|
|
<CardContent className="p-0">
|
|
<ScrollArea className="h-[300px]">
|
|
<div className="space-y-3 p-4">
|
|
{(() => {
|
|
console.log("🔍 MappingDetailList - 전체 매핑 데이터:", mappings);
|
|
|
|
const validMappings = mappings.filter((mapping) => {
|
|
const isValid =
|
|
mapping.fromField && mapping.toField && mapping.fromField.columnName && mapping.toField.columnName;
|
|
console.log(`🔍 매핑 유효성 검사:`, {
|
|
mapping,
|
|
isValid,
|
|
hasFromField: !!mapping.fromField,
|
|
hasToField: !!mapping.toField,
|
|
fromColumnName: mapping.fromField?.columnName,
|
|
toColumnName: mapping.toField?.columnName,
|
|
});
|
|
return isValid;
|
|
});
|
|
|
|
if (validMappings.length === 0) {
|
|
return (
|
|
<div className="text-muted-foreground flex h-[200px] items-center justify-center">
|
|
<div className="text-center">
|
|
<p className="text-sm">매핑된 필드가 없습니다</p>
|
|
<p className="text-xs">INSERT 액션이 있을 때 필드 매핑을 설정하세요</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return validMappings.map((mapping, index) => (
|
|
<div
|
|
key={mapping.id}
|
|
className={`cursor-pointer rounded-lg border p-3 transition-colors ${
|
|
selectedMapping === mapping.id ? "border-primary bg-primary/5" : "border-border hover:bg-muted/50"
|
|
}`}
|
|
onClick={() => onSelectMapping(mapping.id)}
|
|
>
|
|
{/* 매핑 헤더 */}
|
|
<div className="mb-2 flex items-start justify-between">
|
|
<div className="min-w-0 flex-1">
|
|
<h4 className="truncate text-sm font-medium">
|
|
{index + 1}. {mapping.fromField?.displayName || mapping.fromField?.columnName || "Unknown"} →{" "}
|
|
{mapping.toField?.displayName || mapping.toField?.columnName || "Unknown"}
|
|
</h4>
|
|
<div className="mt-1 flex items-center gap-2">
|
|
{mapping.isValid ? (
|
|
<Badge variant="outline" className="text-xs text-green-600">
|
|
<CheckCircle className="mr-1 h-3 w-3" />
|
|
{mapping.fromField?.webType || "Unknown"} → {mapping.toField?.webType || "Unknown"}
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="outline" className="text-xs text-orange-600">
|
|
<AlertTriangle className="mr-1 h-3 w-3" />
|
|
타입 불일치
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="ml-2 flex gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 w-6 p-0"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
// TODO: 매핑 편집 모달 열기
|
|
}}
|
|
>
|
|
<Edit className="h-3 w-3" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-destructive hover:text-destructive h-6 w-6 p-0"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onDeleteMapping(mapping.id);
|
|
}}
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 변환 규칙 */}
|
|
{mapping.transformRule && (
|
|
<div className="text-muted-foreground text-xs">변환: {mapping.transformRule}</div>
|
|
)}
|
|
|
|
{/* 검증 메시지 */}
|
|
{mapping.validationMessage && (
|
|
<div className="mt-1 text-xs text-orange-600">{mapping.validationMessage}</div>
|
|
)}
|
|
</div>
|
|
));
|
|
})()}
|
|
</div>
|
|
</ScrollArea>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default MappingDetailList;
|