89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { GripVertical, Pencil, Trash2 } from "lucide-react";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
import { WorkItem } from "../types";
|
|
|
|
interface WorkItemCardProps {
|
|
item: WorkItem;
|
|
isSelected: boolean;
|
|
readonly?: boolean;
|
|
onClick: () => void;
|
|
onEdit: () => void;
|
|
onDelete: () => void;
|
|
}
|
|
|
|
export function WorkItemCard({
|
|
item,
|
|
isSelected,
|
|
readonly,
|
|
onClick,
|
|
onEdit,
|
|
onDelete,
|
|
}: WorkItemCardProps) {
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
className={cn(
|
|
"group flex cursor-pointer items-start gap-2 rounded-lg border p-3 transition-all",
|
|
"hover:border-primary/30 hover:shadow-sm",
|
|
isSelected
|
|
? "border-primary bg-primary/5 shadow-sm"
|
|
: "border-border bg-card"
|
|
)}
|
|
>
|
|
<GripVertical className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground/50" />
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="truncate text-sm font-medium">{item.title}</span>
|
|
</div>
|
|
<div className="mt-1 flex items-center gap-2">
|
|
<Badge
|
|
variant="secondary"
|
|
className="h-5 px-1.5 text-[10px] font-normal"
|
|
>
|
|
{item.detail_count}개
|
|
</Badge>
|
|
<Badge
|
|
variant={item.is_required === "Y" ? "default" : "outline"}
|
|
className="h-5 px-1.5 text-[10px] font-normal"
|
|
>
|
|
{item.is_required === "Y" ? "필수" : "선택"}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{!readonly && (
|
|
<div className="flex shrink-0 gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onEdit();
|
|
}}
|
|
>
|
|
<Pencil className="h-3 w-3" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 text-destructive hover:text-destructive"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onDelete();
|
|
}}
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|