chpark
690b85805c
- ECR 관리: wace 의 ecrList/Form/Detail JSP 와 동일하게 5개 필터(연도/기종/요청/작성자/상태), 변경전/후 2분할 모달, 작성중(0000100)만 삭제·수정 허용, 컬럼 순서/라벨 wace 일치 - ECR 스키마 wace 풀세트 동기화: ecr_mng 컬럼폭 확장, product_mgmt 16컬럼, part_mng 52컬럼, user_info 22컬럼, comm_code 보강(id/code_cd/ext_val), code_name(varchar) 함수, seq_ecr_no setval(33) 정렬 - wace_plm public.comm_code 733행 시드: src/seed/wace_comm_code.sql 추출 + 부팅 시 자동 적재 (writer='system-seed' placeholder 자동 정리, 무중단 재적재 엔드포인트 /comm-code-seed) - wace_plm 데이터 import 풀스키마: PRODUCT(7→16), PART(6→52), USER_INFO·COMM_CODE 신규 - 공통코드 관리 화면: 제목/설명 축소, 카테고리·코드 카드 → 컴팩트 리스트, 활성 토글 점, 계층 배지 톤다운, hover 시 액션 노출 - 테이블 타입 관리 — 좌측: 한 줄 리스트 + 알파벳 인덱스 sticky 헤더 - 테이블 타입 관리 — 우측: 타입 카드 그리드 → 그룹 셀렉트(기본/참조/자동/첨부/표시변형), 표시이름 제거 + 코멘트(description) Textarea 신설(화면관리에서 기본 라벨로 활용), 시스템 자동 생성 컬럼(id/company_code/writer/created_date/updated_date) 잠금, 표시옵션/고급설정(필수·읽기·기본값·최대길이) 제거 — 화면관리로 이관 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
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 isActive = category.is_active === "Y";
|
|
|
|
const handleToggleActive = async (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (updateCategoryMutation.isPending) return;
|
|
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: isActive ? "N" : "Y",
|
|
},
|
|
});
|
|
} catch (error) {
|
|
console.error("카테고리 활성 상태 변경 실패:", error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
onClick={onSelect}
|
|
className={cn(
|
|
"group flex cursor-pointer items-center justify-between rounded-md border px-2.5 py-2 transition-colors",
|
|
isSelected
|
|
? "border-primary/60 bg-primary/5"
|
|
: "border-border bg-card hover:border-primary/30 hover:bg-muted/40",
|
|
)}
|
|
>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-1.5">
|
|
{/* 활성 상태 점 (클릭으로 토글) */}
|
|
<button
|
|
type="button"
|
|
onClick={handleToggleActive}
|
|
onPointerDown={(e) => e.stopPropagation()}
|
|
onMouseDown={(e) => e.stopPropagation()}
|
|
title={isActive ? "활성 (클릭하여 비활성)" : "비활성 (클릭하여 활성)"}
|
|
className={cn(
|
|
"h-1.5 w-1.5 flex-shrink-0 rounded-full transition-colors",
|
|
isActive ? "bg-emerald-500" : "bg-muted-foreground/40",
|
|
updateCategoryMutation.isPending && "opacity-50",
|
|
)}
|
|
/>
|
|
<span className="truncate text-[13px] font-medium" title={category.category_name}>
|
|
{category.category_name}
|
|
</span>
|
|
</div>
|
|
<p className="mt-0.5 font-mono text-[10px] text-muted-foreground">{category.category_code}</p>
|
|
</div>
|
|
|
|
{/* 액션 — 선택되었거나 hover 시 노출 */}
|
|
<div
|
|
className={cn(
|
|
"flex items-center gap-0.5 transition-opacity",
|
|
isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100",
|
|
)}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<Button variant="ghost" size="icon" className="h-6 w-6" onClick={onEdit} title="수정">
|
|
<Edit className="h-3 w-3" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:bg-destructive/10" onClick={onDelete} title="삭제">
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|