113 lines
4.1 KiB
TypeScript
113 lines
4.1 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">
|
|
{mappings.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} →{" "}
|
|
{mapping.toField.displayName || mapping.toField.columnName}
|
|
</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} → {mapping.toField.webType}
|
|
</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>
|
|
))}
|
|
|
|
{mappings.length === 0 && (
|
|
<div className="text-muted-foreground py-8 text-center text-sm">
|
|
<p>매핑된 필드가 없습니다.</p>
|
|
<p className="mt-1 text-xs">우측에서 필드를 연결해주세요.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default MappingDetailList;
|