92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Edit, Trash2 } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { useUpdateCategory } from "@/hooks/queries/useCategories";
|
|
import type { CategoryInfo } from "@/types/commonCode";
|
|
|
|
interface CategoryItemProps {
|
|
category: CategoryInfo;
|
|
isSelected: boolean;
|
|
onSelect: () => void;
|
|
onEdit: () => void;
|
|
onDelete: () => void;
|
|
}
|
|
|
|
export function CategoryItem({ category, isSelected, onSelect, onEdit, onDelete }: CategoryItemProps) {
|
|
const updateCategoryMutation = useUpdateCategory();
|
|
|
|
// 활성/비활성 토글 핸들러
|
|
const handleToggleActive = async (checked: boolean) => {
|
|
try {
|
|
await updateCategoryMutation.mutateAsync({
|
|
categoryCode: category.category_code,
|
|
data: {
|
|
categoryName: category.category_name,
|
|
categoryNameEng: category.category_name_eng || "",
|
|
description: category.description || "",
|
|
sortOrder: category.sort_order,
|
|
isActive: checked ? "Y" : "N",
|
|
},
|
|
});
|
|
} catch (error) {
|
|
console.error("카테고리 활성 상태 변경 실패:", error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-all",
|
|
isSelected
|
|
? "shadow-md"
|
|
: "hover:shadow-md",
|
|
)}
|
|
onClick={onSelect}
|
|
>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<h4 className="text-sm font-semibold">{category.category_name}</h4>
|
|
<Badge
|
|
variant={category.is_active === "Y" ? "default" : "secondary"}
|
|
className={cn(
|
|
"cursor-pointer text-xs transition-colors",
|
|
updateCategoryMutation.isPending && "cursor-not-allowed opacity-50",
|
|
)}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (!updateCategoryMutation.isPending) {
|
|
handleToggleActive(category.is_active !== "Y");
|
|
}
|
|
}}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
onMouseDown={(e) => e.stopPropagation()}
|
|
>
|
|
{category.is_active === "Y" ? "활성" : "비활성"}
|
|
</Badge>
|
|
</div>
|
|
<p className="mt-1 text-xs text-muted-foreground">{category.category_code}</p>
|
|
{category.description && <p className="mt-1 text-xs text-muted-foreground">{category.description}</p>}
|
|
</div>
|
|
|
|
{/* 액션 버튼 */}
|
|
{isSelected && (
|
|
<div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
|
|
<Button variant="ghost" size="sm" onClick={onEdit}>
|
|
<Edit className="h-3 w-3" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={onDelete}>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|