3ea6a57a10
- 공정관리: 드래그&드롭 순서 변경 기능 추가 (reorderProcesses API) - 수주서(SalesOrderDocument): 기획서 D1.8 기준 리디자인, 출고증과 동일 자재 섹션 구조 - 출고증(ShipmentOrderDocument): 레이아웃 개선 - 체크리스트 관리 페이지 신규 추가 (master-data/checklist-management) - QMS 품질감사: 타입 및 목데이터 수정 - menuRefresh 유틸 정리 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
224 lines
8.6 KiB
TypeScript
224 lines
8.6 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* 항목 상세 뷰 컴포넌트
|
|
*
|
|
* 기획서 스크린샷 3 기준:
|
|
* - 기본 정보: 항목 번호, 항목명, 소개, 상태
|
|
* - 문서 정보: 순서, 문서 번호, 문서, 개정, 시행일
|
|
* - 하단: 삭제, 수정 버튼
|
|
*/
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { ArrowLeft, Edit, GripVertical, Trash2 } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { PageLayout } from '@/components/organisms/PageLayout';
|
|
import { PageHeader } from '@/components/organisms/PageHeader';
|
|
import { useMenuStore } from '@/store/menuStore';
|
|
import { usePermission } from '@/hooks/usePermission';
|
|
import { toast } from 'sonner';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog';
|
|
import { deleteChecklistItem } from './actions';
|
|
import type { ChecklistItem } from '@/types/checklist';
|
|
|
|
interface ItemDetailProps {
|
|
item: ChecklistItem;
|
|
checklistId: string;
|
|
}
|
|
|
|
export function ItemDetail({ item, checklistId }: ItemDetailProps) {
|
|
const router = useRouter();
|
|
const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);
|
|
const { canUpdate, canDelete } = usePermission();
|
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
|
|
const handleEdit = () => {
|
|
router.push(
|
|
`/ko/master-data/checklist-management/${checklistId}/items/${item.id}?mode=edit`
|
|
);
|
|
};
|
|
|
|
const handleBack = () => {
|
|
router.push(`/ko/master-data/checklist-management/${checklistId}`);
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
setIsDeleting(true);
|
|
try {
|
|
const result = await deleteChecklistItem(checklistId, item.id);
|
|
if (result.success) {
|
|
toast.success('항목이 삭제되었습니다.');
|
|
router.push(`/ko/master-data/checklist-management/${checklistId}`);
|
|
} else {
|
|
toast.error(result.error || '삭제에 실패했습니다.');
|
|
}
|
|
} catch {
|
|
toast.error('삭제 중 오류가 발생했습니다.');
|
|
} finally {
|
|
setIsDeleting(false);
|
|
setShowDeleteDialog(false);
|
|
}
|
|
};
|
|
|
|
const documents = item.documents || [];
|
|
|
|
return (
|
|
<PageLayout>
|
|
<PageHeader title="항목 상세" />
|
|
|
|
<div className="space-y-6 pb-24">
|
|
{/* 기본 정보 */}
|
|
<Card>
|
|
<CardHeader className="bg-muted/50">
|
|
<CardTitle className="text-base">기본 정보</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-6">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div className="space-y-1">
|
|
<div className="text-sm text-muted-foreground">항목 번호</div>
|
|
<div className="font-medium font-mono">{item.itemCode}</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="text-sm text-muted-foreground">항목명</div>
|
|
<div className="font-medium">{item.itemName}</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="text-sm text-muted-foreground">소개</div>
|
|
<div className="font-medium">{item.description || '-'}</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="text-sm text-muted-foreground">상태</div>
|
|
<Badge variant={item.status === '사용' ? 'default' : 'secondary'}>
|
|
{item.status}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 문서 정보 */}
|
|
<Card>
|
|
<CardHeader className="bg-muted/50">
|
|
<CardTitle className="text-base">문서 정보</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
{documents.length === 0 ? (
|
|
<div className="p-8 text-center text-muted-foreground">
|
|
등록된 문서가 없습니다.
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b bg-muted/30">
|
|
<th className="w-10 px-3 py-3 text-center text-xs font-medium text-muted-foreground" />
|
|
<th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
|
순서
|
|
</th>
|
|
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
|
|
문서 번호
|
|
</th>
|
|
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
|
|
문서
|
|
</th>
|
|
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
|
|
개정
|
|
</th>
|
|
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
|
|
시행일
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{documents.map((doc) => (
|
|
<tr key={doc.id} className="border-b hover:bg-muted/50">
|
|
<td className="w-10 px-3 py-3 text-center">
|
|
<GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
|
|
</td>
|
|
<td className="w-14 px-3 py-3 text-center text-sm">
|
|
{doc.order}
|
|
</td>
|
|
<td className="px-3 py-3 text-sm font-mono">
|
|
{doc.documentCode}
|
|
</td>
|
|
<td className="px-3 py-3 text-sm text-primary underline cursor-pointer">
|
|
{doc.documentName}
|
|
</td>
|
|
<td className="px-3 py-3 text-sm">{doc.revision}</td>
|
|
<td className="px-3 py-3 text-sm">{doc.effectiveDate}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 하단 액션 버튼 (sticky) */}
|
|
<div
|
|
className={`fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[48px] ${sidebarCollapsed ? 'md:left-[156px]' : 'md:left-[316px]'} flex items-center justify-between`}
|
|
>
|
|
<Button variant="outline" onClick={handleBack} size="sm" className="md:size-default">
|
|
<ArrowLeft className="h-4 w-4 md:mr-2" />
|
|
<span className="hidden md:inline">점검표로 돌아가기</span>
|
|
</Button>
|
|
<div className="flex items-center gap-2">
|
|
{canDelete && (
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => setShowDeleteDialog(true)}
|
|
size="sm"
|
|
className="md:size-default"
|
|
>
|
|
<Trash2 className="h-4 w-4 md:mr-2" />
|
|
<span className="hidden md:inline">삭제</span>
|
|
</Button>
|
|
)}
|
|
{canUpdate && (
|
|
<Button onClick={handleEdit} size="sm" className="md:size-default">
|
|
<Edit className="h-4 w-4 md:mr-2" />
|
|
<span className="hidden md:inline">수정</span>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>항목 삭제</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
'{item.itemName}' 항목을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={handleDelete}
|
|
disabled={isDeleting}
|
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
>
|
|
{isDeleting ? '삭제 중...' : '삭제'}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</PageLayout>
|
|
);
|
|
}
|