feat(WEB): 공정관리 드래그 순서변경, 수주서/출고증 리디자인, 체크리스트 관리 추가
- 공정관리: 드래그&드롭 순서 변경 기능 추가 (reorderProcesses API) - 수주서(SalesOrderDocument): 기획서 D1.8 기준 리디자인, 출고증과 동일 자재 섹션 구조 - 출고증(ShipmentOrderDocument): 레이아웃 개선 - 체크리스트 관리 페이지 신규 추가 (master-data/checklist-management) - QMS 품질감사: 타입 및 목데이터 수정 - menuRefresh 유틸 정리 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
유병철
@@ -90,12 +90,14 @@ http://localhost:3000/ko/sales/quote-management/test/1/edit # 🧪 견적 수
|
||||
| **공정관리** | `/ko/master-data/process-management` | ✅ |
|
||||
| **단가표관리** | `/ko/master-data/pricing-table-management` | 🆕 NEW |
|
||||
| **└ 단가배포관리** | `/ko/master-data/price-distribution` | 🆕 NEW |
|
||||
| **점검표관리** | `/ko/master-data/checklist-management` | 🆕 NEW |
|
||||
|
||||
```
|
||||
http://localhost:3000/ko/master-data/item-master-data-management
|
||||
http://localhost:3000/ko/master-data/process-management # 공정관리
|
||||
http://localhost:3000/ko/master-data/pricing-table-management # 🆕 단가표관리
|
||||
http://localhost:3000/ko/master-data/price-distribution # 🆕 단가배포관리
|
||||
http://localhost:3000/ko/master-data/checklist-management # 🆕 점검표관리
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 점검표 항목 상세/수정/등록 페이지
|
||||
*
|
||||
* - /[id]/items/[itemId] → 상세 보기
|
||||
* - /[id]/items/[itemId]?mode=edit → 수정
|
||||
* - /[id]/items/new → 등록
|
||||
*/
|
||||
|
||||
import { use } from 'react';
|
||||
import { ItemDetailClient } from '@/components/checklist-management';
|
||||
|
||||
export default function ItemDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string; itemId: string }>;
|
||||
}) {
|
||||
const { id, itemId } = use(params);
|
||||
|
||||
return <ItemDetailClient checklistId={id} itemId={itemId} />;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 점검표 상세/수정 페이지
|
||||
*
|
||||
* - /[id] → 상세 보기 (view 모드)
|
||||
* - /[id]?mode=edit → 수정 (edit 모드)
|
||||
*/
|
||||
|
||||
import { use } from 'react';
|
||||
import { ChecklistDetailClient } from '@/components/checklist-management';
|
||||
|
||||
export default function ChecklistDetailPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = use(params);
|
||||
|
||||
return <ChecklistDetailClient checklistId={id} />;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 점검표 목록/등록 페이지
|
||||
*/
|
||||
|
||||
import { Suspense } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import ChecklistListClient from '@/components/checklist-management/ChecklistListClient';
|
||||
import { ChecklistDetailClient } from '@/components/checklist-management';
|
||||
import { ListPageSkeleton } from '@/components/ui/skeleton';
|
||||
|
||||
function ChecklistManagementContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const mode = searchParams.get('mode');
|
||||
|
||||
if (mode === 'new') {
|
||||
return <ChecklistDetailClient checklistId="new" />;
|
||||
}
|
||||
|
||||
return <ChecklistListClient />;
|
||||
}
|
||||
|
||||
export default function ChecklistManagementPage() {
|
||||
return (
|
||||
<Suspense fallback={<ListPageSkeleton showHeader={false} />}>
|
||||
<ChecklistManagementContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -48,7 +48,7 @@ export function AuditProgressBar({
|
||||
activeDay === 1 ? 'bg-blue-50 border-blue-200' : 'bg-gray-50 border-gray-200'
|
||||
)}>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs font-medium text-gray-600">1일차: 기준/매뉴얼</span>
|
||||
<span className="text-xs font-medium text-gray-600">기준/매뉴얼 심사</span>
|
||||
<span className={cn(
|
||||
'text-xs font-bold',
|
||||
day1Percentage === 100 ? 'text-green-600' : 'text-gray-600'
|
||||
@@ -73,7 +73,7 @@ export function AuditProgressBar({
|
||||
activeDay === 2 ? 'bg-blue-50 border-blue-200' : 'bg-gray-50 border-gray-200'
|
||||
)}>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs font-medium text-gray-600">2일차: 로트추적</span>
|
||||
<span className="text-xs font-medium text-gray-600">로트 추적 심사</span>
|
||||
<span className={cn(
|
||||
'text-xs font-bold',
|
||||
day2Percentage === 100 ? 'text-green-600' : 'text-gray-600'
|
||||
|
||||
@@ -41,7 +41,7 @@ export function DayTabs({ activeDay, onDayChange, day1Progress, day2Progress }:
|
||||
>
|
||||
<Calendar className="h-4 w-4 shrink-0" />
|
||||
<span className="font-medium text-xs sm:text-sm">
|
||||
<span className="hidden sm:inline">1일차: 기준/매뉴얼</span>
|
||||
<span className="hidden sm:inline">기준/매뉴얼 심사</span>
|
||||
<span className="sm:hidden">1일차</span>
|
||||
</span>
|
||||
<span className={cn(
|
||||
@@ -65,7 +65,7 @@ export function DayTabs({ activeDay, onDayChange, day1Progress, day2Progress }:
|
||||
>
|
||||
<Calendar className="h-4 w-4 shrink-0" />
|
||||
<span className="font-medium text-xs sm:text-sm">
|
||||
<span className="hidden sm:inline">2일차: 로트추적</span>
|
||||
<span className="hidden sm:inline">로트 추적 심사</span>
|
||||
<span className="sm:hidden">2일차</span>
|
||||
</span>
|
||||
<span className={cn(
|
||||
@@ -105,7 +105,7 @@ export function DayTabs({ activeDay, onDayChange, day1Progress, day2Progress }:
|
||||
{/* 1일차 진행률 */}
|
||||
<div className="flex items-center gap-2 sm:gap-3">
|
||||
<span className="text-xs sm:text-sm text-gray-600 w-14 sm:w-28 shrink-0">
|
||||
<span className="hidden sm:inline">1일차: 기준/매뉴얼</span>
|
||||
<span className="hidden sm:inline">기준/매뉴얼 심사</span>
|
||||
<span className="sm:hidden">1일차</span>
|
||||
</span>
|
||||
<div className="flex-1 h-1.5 sm:h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
@@ -128,7 +128,7 @@ export function DayTabs({ activeDay, onDayChange, day1Progress, day2Progress }:
|
||||
{/* 2일차 진행률 */}
|
||||
<div className="flex items-center gap-2 sm:gap-3">
|
||||
<span className="text-xs sm:text-sm text-gray-600 w-14 sm:w-28 shrink-0">
|
||||
<span className="hidden sm:inline">2일차: 로트추적</span>
|
||||
<span className="hidden sm:inline">로트 추적 심사</span>
|
||||
<span className="sm:hidden">2일차</span>
|
||||
</span>
|
||||
<div className="flex-1 h-1.5 sm:h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
|
||||
@@ -291,7 +291,7 @@ export const DEFAULT_DOCUMENTS: Document[] = [
|
||||
{ id: 'def-8', type: 'quality', title: '품질관리서', count: 0, items: [] },
|
||||
];
|
||||
|
||||
// ===== 1일차: 기준/매뉴얼 심사 Mock 데이터 =====
|
||||
// ===== 기준/매뉴얼 심사 심사 Mock 데이터 =====
|
||||
|
||||
// 1일차 점검표 카테고리
|
||||
export const MOCK_DAY1_CATEGORIES: ChecklistCategory[] = [
|
||||
|
||||
@@ -255,7 +255,7 @@ export default function QualityInspectionPage() {
|
||||
: 'bg-white border-gray-200 text-gray-700 hover:border-blue-300'
|
||||
}`}
|
||||
>
|
||||
1일차: 기준/매뉴얼 심사
|
||||
기준/매뉴얼 심사 심사
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -266,7 +266,7 @@ export default function QualityInspectionPage() {
|
||||
: 'bg-white border-gray-200 text-gray-700 hover:border-blue-300'
|
||||
}`}
|
||||
>
|
||||
2일차: 로트추적 심사
|
||||
로트 추적 심사 심사
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
@@ -282,7 +282,7 @@ export default function QualityInspectionPage() {
|
||||
/>
|
||||
|
||||
{activeDay === 1 ? (
|
||||
// ===== 1일차: 기준/매뉴얼 심사 =====
|
||||
// ===== 기준/매뉴얼 심사 심사 =====
|
||||
<div className="flex-1 grid grid-cols-12 gap-3 sm:gap-4 lg:min-h-0">
|
||||
{/* 좌측: 점검표 항목 */}
|
||||
<div className={`col-span-12 min-h-[250px] sm:min-h-[300px] lg:min-h-0 lg:h-full overflow-auto ${
|
||||
@@ -326,7 +326,7 @@ export default function QualityInspectionPage() {
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
// ===== 2일차: 로트추적 심사 =====
|
||||
// ===== 로트 추적 심사 심사 =====
|
||||
<div className="flex-1 grid grid-cols-12 gap-3 sm:gap-4 lg:gap-6 lg:min-h-0">
|
||||
<div className="col-span-12 lg:col-span-3 min-h-[250px] sm:min-h-[300px] lg:min-h-0 lg:h-full overflow-auto lg:overflow-hidden">
|
||||
<ReportList
|
||||
|
||||
@@ -44,7 +44,7 @@ export interface DocumentItem {
|
||||
subType?: 'screen' | 'bending' | 'slat' | 'jointbar';
|
||||
}
|
||||
|
||||
// ===== 1일차: 기준/매뉴얼 심사 타입 =====
|
||||
// ===== 기준/매뉴얼 심사 심사 타입 =====
|
||||
|
||||
// 점검표 하위 항목
|
||||
export interface ChecklistSubItem {
|
||||
|
||||
315
src/components/checklist-management/ChecklistDetail.tsx
Normal file
315
src/components/checklist-management/ChecklistDetail.tsx
Normal file
@@ -0,0 +1,315 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 점검표 상세 뷰 컴포넌트
|
||||
*
|
||||
* 기획서 스크린샷 2 기준:
|
||||
* - 기본 정보: 점검표 번호, 점검표명, 상태
|
||||
* - 항목 목록 테이블: 드래그&드롭 순서변경 + 항목 등록 버튼
|
||||
* - 하단: 삭제, 수정 버튼
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ArrowLeft, Edit, GripVertical, Plus, 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 { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
|
||||
import { getChecklistItems, reorderChecklistItems, deleteChecklist } from './actions';
|
||||
import type { Checklist, ChecklistItem } from '@/types/checklist';
|
||||
|
||||
interface ChecklistDetailProps {
|
||||
checklist: Checklist;
|
||||
}
|
||||
|
||||
export function ChecklistDetail({ checklist }: ChecklistDetailProps) {
|
||||
const router = useRouter();
|
||||
const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);
|
||||
const { canUpdate } = usePermission();
|
||||
|
||||
const [items, setItems] = useState<ChecklistItem[]>([]);
|
||||
const [isItemsLoading, setIsItemsLoading] = useState(true);
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
// 드래그 상태
|
||||
const [dragIndex, setDragIndex] = useState<number | null>(null);
|
||||
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
|
||||
const dragNodeRef = useRef<HTMLTableRowElement | null>(null);
|
||||
|
||||
// 항목 목록 로드
|
||||
useEffect(() => {
|
||||
const loadItems = async () => {
|
||||
setIsItemsLoading(true);
|
||||
const result = await getChecklistItems(checklist.id);
|
||||
if (result.success && result.data) {
|
||||
setItems(result.data);
|
||||
}
|
||||
setIsItemsLoading(false);
|
||||
};
|
||||
loadItems();
|
||||
}, [checklist.id]);
|
||||
|
||||
// 네비게이션
|
||||
const handleEdit = () => {
|
||||
router.push(`/ko/master-data/checklist-management/${checklist.id}?mode=edit`);
|
||||
};
|
||||
|
||||
const handleList = () => {
|
||||
router.push('/ko/master-data/checklist-management');
|
||||
};
|
||||
|
||||
const handleAddItem = () => {
|
||||
router.push(`/ko/master-data/checklist-management/${checklist.id}/items/new`);
|
||||
};
|
||||
|
||||
const handleItemClick = (itemId: string) => {
|
||||
router.push(`/ko/master-data/checklist-management/${checklist.id}/items/${itemId}`);
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
const result = await deleteChecklist(checklist.id);
|
||||
if (result.success) {
|
||||
toast.success('점검표가 삭제되었습니다.');
|
||||
router.push('/ko/master-data/checklist-management');
|
||||
} else {
|
||||
toast.error(result.error || '삭제에 실패했습니다.');
|
||||
}
|
||||
} catch {
|
||||
toast.error('삭제 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
setDeleteDialogOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ===== 드래그&드롭 =====
|
||||
const handleDragStart = useCallback(
|
||||
(e: React.DragEvent<HTMLTableRowElement>, index: number) => {
|
||||
setDragIndex(index);
|
||||
dragNodeRef.current = e.currentTarget;
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
requestAnimationFrame(() => {
|
||||
if (dragNodeRef.current) dragNodeRef.current.style.opacity = '0.4';
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleDragOver = useCallback(
|
||||
(e: React.DragEvent<HTMLTableRowElement>, index: number) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
setDragOverIndex(index);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleDragEnd = useCallback(() => {
|
||||
if (dragNodeRef.current) dragNodeRef.current.style.opacity = '1';
|
||||
setDragIndex(null);
|
||||
setDragOverIndex(null);
|
||||
dragNodeRef.current = null;
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(e: React.DragEvent<HTMLTableRowElement>, dropIndex: number) => {
|
||||
e.preventDefault();
|
||||
if (dragIndex === null || dragIndex === dropIndex) return;
|
||||
|
||||
setItems((prev) => {
|
||||
const updated = [...prev];
|
||||
const [moved] = updated.splice(dragIndex, 1);
|
||||
updated.splice(dropIndex, 0, moved);
|
||||
const reordered = updated.map((item, i) => ({ ...item, order: i + 1 }));
|
||||
|
||||
reorderChecklistItems(
|
||||
checklist.id,
|
||||
reordered.map((it) => ({ id: it.id, order: it.order }))
|
||||
);
|
||||
|
||||
return reordered;
|
||||
});
|
||||
|
||||
handleDragEnd();
|
||||
},
|
||||
[dragIndex, handleDragEnd, checklist.id]
|
||||
);
|
||||
|
||||
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-3 gap-6">
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">점검표 번호</div>
|
||||
<div className="font-medium font-mono">{checklist.checklistCode}</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">점검표</div>
|
||||
<div className="font-medium">{checklist.checklistName}</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">상태</div>
|
||||
<Badge variant={checklist.status === '사용' ? 'default' : 'secondary'}>
|
||||
{checklist.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 항목 테이블 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-base">
|
||||
항목 목록
|
||||
{!isItemsLoading && (
|
||||
<span className="text-sm font-normal text-muted-foreground ml-2">
|
||||
총 {items.length}건
|
||||
</span>
|
||||
)}
|
||||
</CardTitle>
|
||||
<Button size="sm" onClick={handleAddItem}>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
항목 등록
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{isItemsLoading ? (
|
||||
<div className="p-8 text-center text-muted-foreground">로딩 중...</div>
|
||||
) : items.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">
|
||||
No.
|
||||
</th>
|
||||
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
|
||||
항목 번호
|
||||
</th>
|
||||
<th className="w-16 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="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
문서
|
||||
</th>
|
||||
<th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
사용
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((item, index) => (
|
||||
<tr
|
||||
key={item.id}
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(e, index)}
|
||||
onDragOver={(e) => handleDragOver(e, index)}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDrop={(e) => handleDrop(e, index)}
|
||||
onClick={() => handleItemClick(item.id)}
|
||||
className={`border-b cursor-pointer transition-colors hover:bg-muted/50 ${
|
||||
dragOverIndex === index && dragIndex !== index
|
||||
? 'border-t-2 border-t-primary'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
<td
|
||||
className="w-10 px-3 py-3 text-center cursor-grab active:cursor-grabbing"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
|
||||
</td>
|
||||
<td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">
|
||||
{index + 1}
|
||||
</td>
|
||||
<td className="px-3 py-3 text-sm font-mono">{item.itemCode}</td>
|
||||
<td className="w-16 px-3 py-3 text-center text-sm">
|
||||
{item.order}
|
||||
</td>
|
||||
<td className="px-3 py-3 text-sm font-medium">{item.itemName}</td>
|
||||
<td className="w-16 px-3 py-3 text-center text-sm">
|
||||
{item.documentCount}
|
||||
</td>
|
||||
<td className="w-16 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={item.status === '사용' ? 'default' : 'secondary'}
|
||||
className="text-xs"
|
||||
>
|
||||
{item.status}
|
||||
</Badge>
|
||||
</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={handleList} size="sm" className="md:size-default">
|
||||
<ArrowLeft className="h-4 w-4 md:mr-2" />
|
||||
<span className="hidden md:inline">목록으로</span>
|
||||
</Button>
|
||||
{canUpdate && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => setDeleteDialogOpen(true)}
|
||||
size="sm"
|
||||
className="md:size-default"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 md:mr-2" />
|
||||
<span className="hidden md:inline">삭제</span>
|
||||
</Button>
|
||||
<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>
|
||||
|
||||
<DeleteConfirmDialog
|
||||
open={deleteDialogOpen}
|
||||
onOpenChange={setDeleteDialogOpen}
|
||||
description="이 점검표를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
|
||||
loading={isDeleting}
|
||||
onConfirm={handleDelete}
|
||||
/>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
122
src/components/checklist-management/ChecklistDetailClient.tsx
Normal file
122
src/components/checklist-management/ChecklistDetailClient.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 점검표 상세 클라이언트 컴포넌트
|
||||
*
|
||||
* 라우팅:
|
||||
* - /[id] → 상세 보기 (view)
|
||||
* - /[id]?mode=edit → 수정 (edit)
|
||||
* - ?mode=new → 등록 (create)
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { ChecklistDetail } from './ChecklistDetail';
|
||||
import { ChecklistForm } from './ChecklistForm';
|
||||
import { getChecklistById } from './actions';
|
||||
import type { Checklist } from '@/types/checklist';
|
||||
import { DetailPageSkeleton } from '@/components/ui/skeleton';
|
||||
import { ErrorCard } from '@/components/ui/error-card';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
type DetailMode = 'view' | 'edit' | 'create';
|
||||
|
||||
interface ChecklistDetailClientProps {
|
||||
checklistId?: string;
|
||||
}
|
||||
|
||||
const BASE_PATH = '/ko/master-data/checklist-management';
|
||||
|
||||
export function ChecklistDetailClient({ checklistId }: ChecklistDetailClientProps) {
|
||||
const searchParams = useSearchParams();
|
||||
const modeFromQuery = searchParams.get('mode') as DetailMode | null;
|
||||
const isNewMode = !checklistId || checklistId === 'new';
|
||||
|
||||
const [mode, setMode] = useState<DetailMode>(() => {
|
||||
if (isNewMode) return 'create';
|
||||
if (modeFromQuery === 'edit') return 'edit';
|
||||
return 'view';
|
||||
});
|
||||
|
||||
const [checklistData, setChecklistData] = useState<Checklist | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(!isNewMode);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isNewMode) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await getChecklistById(checklistId!);
|
||||
if (result.success && result.data) {
|
||||
setChecklistData(result.data);
|
||||
} else {
|
||||
setError(result.error || '점검표 정보를 찾을 수 없습니다.');
|
||||
toast.error('점검표를 불러오는데 실패했습니다.');
|
||||
}
|
||||
} catch {
|
||||
setError('점검표 정보를 불러오는 중 오류가 발생했습니다.');
|
||||
toast.error('점검표를 불러오는데 실패했습니다.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [checklistId, isNewMode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isNewMode && modeFromQuery === 'edit') {
|
||||
setMode('edit');
|
||||
} else if (!isNewMode && !modeFromQuery) {
|
||||
setMode('view');
|
||||
}
|
||||
}, [modeFromQuery, isNewMode]);
|
||||
|
||||
if (isLoading) {
|
||||
return <DetailPageSkeleton sections={1} fieldsPerSection={3} />;
|
||||
}
|
||||
|
||||
if (error && !isNewMode) {
|
||||
return (
|
||||
<ErrorCard
|
||||
type="network"
|
||||
title="점검표 정보를 불러올 수 없습니다"
|
||||
description={error}
|
||||
tips={[
|
||||
'해당 점검표가 존재하는지 확인해주세요',
|
||||
'인터넷 연결 상태를 확인해주세요',
|
||||
]}
|
||||
homeButtonLabel="목록으로 이동"
|
||||
homeButtonHref={BASE_PATH}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (mode === 'create') {
|
||||
return <ChecklistForm mode="create" />;
|
||||
}
|
||||
|
||||
if (mode === 'edit' && checklistData) {
|
||||
return <ChecklistForm mode="edit" initialData={checklistData} />;
|
||||
}
|
||||
|
||||
if (mode === 'view' && checklistData) {
|
||||
return <ChecklistDetail checklist={checklistData} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorCard
|
||||
type="not-found"
|
||||
title="점검표를 찾을 수 없습니다"
|
||||
description="요청하신 점검표 정보가 존재하지 않습니다."
|
||||
homeButtonLabel="목록으로 이동"
|
||||
homeButtonHref={BASE_PATH}
|
||||
/>
|
||||
);
|
||||
}
|
||||
172
src/components/checklist-management/ChecklistForm.tsx
Normal file
172
src/components/checklist-management/ChecklistForm.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 점검표 등록/수정 폼 컴포넌트
|
||||
*
|
||||
* 기획서 스크린샷 2 기준:
|
||||
* - 기본 정보: 점검표 번호(자동), 점검표명, 상태
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
|
||||
import { toast } from 'sonner';
|
||||
import type { Checklist } from '@/types/checklist';
|
||||
import { createChecklist, updateChecklist } from './actions';
|
||||
import type { DetailConfig } from '@/components/templates/IntegratedDetailTemplate/types';
|
||||
|
||||
const createConfig: DetailConfig = {
|
||||
title: '점검표',
|
||||
description: '새로운 점검표를 등록합니다',
|
||||
basePath: '',
|
||||
fields: [],
|
||||
actions: {
|
||||
showBack: true,
|
||||
showEdit: false,
|
||||
showDelete: false,
|
||||
showSave: true,
|
||||
submitLabel: '등록',
|
||||
},
|
||||
};
|
||||
|
||||
const editConfig: DetailConfig = {
|
||||
...createConfig,
|
||||
description: '점검표 정보를 수정합니다',
|
||||
actions: {
|
||||
...createConfig.actions,
|
||||
submitLabel: '저장',
|
||||
},
|
||||
};
|
||||
|
||||
interface ChecklistFormProps {
|
||||
mode: 'create' | 'edit';
|
||||
initialData?: Checklist;
|
||||
}
|
||||
|
||||
export function ChecklistForm({ mode, initialData }: ChecklistFormProps) {
|
||||
const router = useRouter();
|
||||
const isEdit = mode === 'edit';
|
||||
|
||||
const [checklistName, setChecklistName] = useState(initialData?.checklistName || '');
|
||||
const [status, setStatus] = useState<string>(initialData?.status || '사용');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (): Promise<{ success: boolean; error?: string }> => {
|
||||
if (!checklistName.trim()) {
|
||||
toast.error('점검표명을 입력해주세요.');
|
||||
return { success: false, error: '점검표명을 입력해주세요.' };
|
||||
}
|
||||
|
||||
const formData = {
|
||||
checklistName: checklistName.trim(),
|
||||
status: status as '사용' | '미사용',
|
||||
};
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
if (isEdit && initialData?.id) {
|
||||
const result = await updateChecklist(initialData.id, formData);
|
||||
if (result.success) {
|
||||
toast.success('점검표가 수정되었습니다.');
|
||||
router.push(`/ko/master-data/checklist-management/${initialData.id}`);
|
||||
return { success: true };
|
||||
} else {
|
||||
toast.error(result.error || '수정에 실패했습니다.');
|
||||
return { success: false, error: result.error };
|
||||
}
|
||||
} else {
|
||||
const result = await createChecklist(formData);
|
||||
if (result.success && result.data) {
|
||||
toast.success('점검표가 등록되었습니다.');
|
||||
router.push(`/ko/master-data/checklist-management/${result.data.id}`);
|
||||
return { success: true };
|
||||
} else {
|
||||
toast.error(result.error || '등록에 실패했습니다.');
|
||||
return { success: false, error: result.error };
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
toast.error('처리 중 오류가 발생했습니다.');
|
||||
return { success: false, error: '처리 중 오류가 발생했습니다.' };
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
if (isEdit && initialData?.id) {
|
||||
router.push(`/ko/master-data/checklist-management/${initialData.id}`);
|
||||
} else {
|
||||
router.push('/ko/master-data/checklist-management');
|
||||
}
|
||||
};
|
||||
|
||||
const renderFormContent = useCallback(
|
||||
() => (
|
||||
<div className="space-y-6">
|
||||
<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-3 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label>점검표 번호</Label>
|
||||
<Input
|
||||
value={initialData?.checklistCode || '자동생성'}
|
||||
disabled
|
||||
className="bg-muted"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="checklistName">점검표 *</Label>
|
||||
<Input
|
||||
id="checklistName"
|
||||
value={checklistName}
|
||||
onChange={(e) => setChecklistName(e.target.value)}
|
||||
placeholder="점검표명을 입력하세요"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>상태</Label>
|
||||
<Select value={status} onValueChange={setStatus}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="사용">사용</SelectItem>
|
||||
<SelectItem value="미사용">미사용</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
),
|
||||
[checklistName, status, initialData?.checklistCode]
|
||||
);
|
||||
|
||||
const config = isEdit ? editConfig : createConfig;
|
||||
|
||||
return (
|
||||
<IntegratedDetailTemplate
|
||||
config={config}
|
||||
mode={isEdit ? 'edit' : 'create'}
|
||||
isLoading={false}
|
||||
onCancel={handleCancel}
|
||||
onSubmit={handleSubmit}
|
||||
renderForm={renderFormContent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
519
src/components/checklist-management/ChecklistListClient.tsx
Normal file
519
src/components/checklist-management/ChecklistListClient.tsx
Normal file
@@ -0,0 +1,519 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 점검표 목록 - UniversalListPage 기반
|
||||
*
|
||||
* 공정 목록(ProcessListClient)과 동일한 패턴:
|
||||
* - 클라이언트 사이드 필터링 (상태별)
|
||||
* - 드래그&드롭 순서 변경
|
||||
* - 상태 토글
|
||||
*/
|
||||
|
||||
import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ClipboardList, Plus, GripVertical } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { TableCell, TableRow, TableHead } from '@/components/ui/table';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
UniversalListPage,
|
||||
type UniversalListConfig,
|
||||
type SelectionHandlers,
|
||||
type RowClickHandlers,
|
||||
type ListParams,
|
||||
} from '@/components/templates/UniversalListPage';
|
||||
import { ListMobileCard, InfoField } from '@/components/organisms/MobileCard';
|
||||
import { toast } from 'sonner';
|
||||
import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
|
||||
import type { Checklist } from '@/types/checklist';
|
||||
import {
|
||||
getChecklistList,
|
||||
deleteChecklist,
|
||||
deleteChecklists,
|
||||
toggleChecklistStatus,
|
||||
getChecklistStats,
|
||||
reorderChecklists,
|
||||
} from './actions';
|
||||
|
||||
export default function ChecklistListClient() {
|
||||
const router = useRouter();
|
||||
|
||||
// ===== 상태 =====
|
||||
const [allChecklists, setAllChecklists] = useState<Checklist[]>([]);
|
||||
const [stats, setStats] = useState({ total: 0, active: 0, inactive: 0 });
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
|
||||
|
||||
// 날짜 범위 상태
|
||||
const [startDate, setStartDate] = useState('2025-01-01');
|
||||
const [endDate, setEndDate] = useState('2025-12-31');
|
||||
|
||||
// 검색어 상태
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
// 드래그&드롭 순서 변경 상태
|
||||
const [isOrderChanged, setIsOrderChanged] = useState(false);
|
||||
const dragIdRef = useRef<string | null>(null);
|
||||
const dragNodeRef = useRef<HTMLTableRowElement | null>(null);
|
||||
const allChecklistsRef = useRef(allChecklists);
|
||||
allChecklistsRef.current = allChecklists;
|
||||
|
||||
// ===== 데이터 로드 =====
|
||||
const loadData = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const [listResult, statsResult] = await Promise.all([
|
||||
getChecklistList(),
|
||||
getChecklistStats(),
|
||||
]);
|
||||
|
||||
if (listResult.success && listResult.data) {
|
||||
setAllChecklists(listResult.data.items);
|
||||
}
|
||||
if (statsResult.success && statsResult.data) {
|
||||
setStats(statsResult.data);
|
||||
}
|
||||
} catch {
|
||||
toast.error('데이터 로드에 실패했습니다.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
// ===== 핸들러 =====
|
||||
const handleRowClick = useCallback(
|
||||
(checklist: Checklist) => {
|
||||
router.push(`/ko/master-data/checklist-management/${checklist.id}`);
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
const handleCreate = useCallback(() => {
|
||||
router.push('/ko/master-data/checklist-management?mode=new');
|
||||
}, [router]);
|
||||
|
||||
const handleDeleteConfirm = useCallback(async () => {
|
||||
if (!deleteTargetId) return;
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await deleteChecklist(deleteTargetId);
|
||||
if (result.success) {
|
||||
toast.success('점검표가 삭제되었습니다.');
|
||||
setAllChecklists((prev) => prev.filter((c) => c.id !== deleteTargetId));
|
||||
} else {
|
||||
toast.error(result.error || '삭제에 실패했습니다.');
|
||||
}
|
||||
} catch {
|
||||
toast.error('삭제 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setDeleteDialogOpen(false);
|
||||
setDeleteTargetId(null);
|
||||
}
|
||||
}, [deleteTargetId]);
|
||||
|
||||
const handleBulkDelete = useCallback(
|
||||
async (selectedIds: string[]) => {
|
||||
if (selectedIds.length === 0) {
|
||||
toast.warning('삭제할 항목을 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await deleteChecklists(selectedIds);
|
||||
if (result.success) {
|
||||
toast.success(`${result.deletedCount}개 항목이 삭제되었습니다.`);
|
||||
await loadData();
|
||||
} else {
|
||||
toast.error(result.error || '일괄 삭제에 실패했습니다.');
|
||||
}
|
||||
} catch {
|
||||
toast.error('일괄 삭제 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[loadData]
|
||||
);
|
||||
|
||||
const handleToggleStatus = useCallback(
|
||||
async (checklistId: string) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await toggleChecklistStatus(checklistId);
|
||||
if (result.success && result.data) {
|
||||
toast.success('상태가 변경되었습니다.');
|
||||
setAllChecklists((prev) =>
|
||||
prev.map((c) => (c.id === checklistId ? result.data! : c))
|
||||
);
|
||||
} else {
|
||||
toast.error(result.error || '상태 변경에 실패했습니다.');
|
||||
}
|
||||
} catch {
|
||||
toast.error('상태 변경 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
// ===== 드래그&드롭 =====
|
||||
const handleDragStart = useCallback(
|
||||
(e: React.DragEvent<HTMLTableRowElement>, id: string) => {
|
||||
dragIdRef.current = id;
|
||||
dragNodeRef.current = e.currentTarget;
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
requestAnimationFrame(() => {
|
||||
if (dragNodeRef.current) dragNodeRef.current.style.opacity = '0.4';
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleDragOver = useCallback(
|
||||
(e: React.DragEvent<HTMLTableRowElement>) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
e.currentTarget.classList.add('border-t-2', 'border-t-primary');
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleDragLeave = useCallback(
|
||||
(e: React.DragEvent<HTMLTableRowElement>) => {
|
||||
const related = e.relatedTarget as Node;
|
||||
if (!e.currentTarget.contains(related)) {
|
||||
e.currentTarget.classList.remove('border-t-2', 'border-t-primary');
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleDragEnd = useCallback(() => {
|
||||
if (dragNodeRef.current) dragNodeRef.current.style.opacity = '1';
|
||||
dragIdRef.current = null;
|
||||
dragNodeRef.current = null;
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(e: React.DragEvent<HTMLTableRowElement>, dropId: string) => {
|
||||
e.preventDefault();
|
||||
e.currentTarget.classList.remove('border-t-2', 'border-t-primary');
|
||||
const dragId = dragIdRef.current;
|
||||
if (!dragId || dragId === dropId) {
|
||||
handleDragEnd();
|
||||
return;
|
||||
}
|
||||
setAllChecklists((prev) => {
|
||||
const updated = [...prev];
|
||||
const dragIdx = updated.findIndex((c) => c.id === dragId);
|
||||
const dropIdx = updated.findIndex((c) => c.id === dropId);
|
||||
if (dragIdx === -1 || dropIdx === -1) return prev;
|
||||
const [moved] = updated.splice(dragIdx, 1);
|
||||
updated.splice(dropIdx, 0, moved);
|
||||
return updated;
|
||||
});
|
||||
setIsOrderChanged(true);
|
||||
handleDragEnd();
|
||||
},
|
||||
[handleDragEnd]
|
||||
);
|
||||
|
||||
const handleSaveOrder = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const orderData = allChecklistsRef.current.map((c, idx) => ({
|
||||
id: c.id,
|
||||
order: idx + 1,
|
||||
}));
|
||||
const result = await reorderChecklists(orderData);
|
||||
if (result.success) {
|
||||
toast.success('순서가 저장되었습니다.');
|
||||
setIsOrderChanged(false);
|
||||
} else {
|
||||
toast.error(result.error || '순서 저장에 실패했습니다.');
|
||||
}
|
||||
} catch {
|
||||
toast.error('순서 저장 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// ===== UniversalListPage Config =====
|
||||
const config: UniversalListConfig<Checklist> = useMemo(
|
||||
() => ({
|
||||
title: '점검표 목록',
|
||||
icon: ClipboardList,
|
||||
basePath: '/master-data/checklist-management',
|
||||
idField: 'id',
|
||||
|
||||
actions: {
|
||||
getList: async (params?: ListParams) => {
|
||||
try {
|
||||
const [listResult, statsResult] = await Promise.all([
|
||||
getChecklistList(),
|
||||
getChecklistStats(),
|
||||
]);
|
||||
if (listResult.success && listResult.data) {
|
||||
setAllChecklists(listResult.data.items);
|
||||
if (statsResult.success && statsResult.data) {
|
||||
setStats(statsResult.data);
|
||||
}
|
||||
return {
|
||||
success: true,
|
||||
data: listResult.data.items,
|
||||
totalCount: listResult.data.items.length,
|
||||
totalPages: 1,
|
||||
};
|
||||
}
|
||||
return { success: false, error: '데이터 로드에 실패했습니다.' };
|
||||
} catch {
|
||||
return { success: false, error: '서버 오류가 발생했습니다.' };
|
||||
}
|
||||
},
|
||||
deleteItem: async (id: string) => {
|
||||
const result = await deleteChecklist(id);
|
||||
return { success: result.success, error: result.error };
|
||||
},
|
||||
deleteBulk: async (ids: string[]) => {
|
||||
const result = await deleteChecklists(ids);
|
||||
return { success: result.success, error: result.error };
|
||||
},
|
||||
},
|
||||
|
||||
// 테이블 컬럼 (showCheckbox: false → 수동 관리)
|
||||
showCheckbox: false,
|
||||
columns: [
|
||||
{ key: 'drag', label: '', className: 'w-[40px]' },
|
||||
{ key: 'checkbox', label: '', className: 'w-[50px]' },
|
||||
{ key: 'no', label: 'No.', className: 'w-[60px] text-center' },
|
||||
{ key: 'checklistCode', label: '점검표 번호', className: 'w-[120px]' },
|
||||
{ key: 'checklistName', label: '점검표', className: 'min-w-[200px]' },
|
||||
{ key: 'items', label: '항목', className: 'w-[80px] text-center' },
|
||||
{ key: 'documents', label: '문서', className: 'w-[80px] text-center' },
|
||||
{ key: 'status', label: '상태', className: 'w-[80px] text-center' },
|
||||
],
|
||||
|
||||
// 커스텀 테이블 헤더 (드래그 → 전체선택 체크박스 → No. → 데이터 순)
|
||||
renderCustomTableHeader: ({ displayData, selectedItems, onToggleSelectAll }) => (
|
||||
<>
|
||||
<TableHead className="w-[40px]" />
|
||||
<TableHead className="w-[50px] text-center">
|
||||
<Checkbox
|
||||
checked={displayData.length > 0 && selectedItems.size === displayData.length}
|
||||
onCheckedChange={onToggleSelectAll}
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead className="w-[60px] text-center">No.</TableHead>
|
||||
<TableHead className="w-[120px]">점검표 번호</TableHead>
|
||||
<TableHead className="min-w-[200px]">점검표</TableHead>
|
||||
<TableHead className="w-[80px] text-center">항목</TableHead>
|
||||
<TableHead className="w-[80px] text-center">문서</TableHead>
|
||||
<TableHead className="w-[80px] text-center">상태</TableHead>
|
||||
</>
|
||||
),
|
||||
|
||||
clientSideFiltering: true,
|
||||
itemsPerPage: 20,
|
||||
|
||||
hideSearch: true,
|
||||
searchValue: searchQuery,
|
||||
onSearchChange: setSearchQuery,
|
||||
|
||||
dateRangeSelector: {
|
||||
enabled: true,
|
||||
showPresets: true,
|
||||
startDate,
|
||||
endDate,
|
||||
onStartDateChange: setStartDate,
|
||||
onEndDateChange: setEndDate,
|
||||
},
|
||||
|
||||
filterConfig: [
|
||||
{
|
||||
key: 'status',
|
||||
label: '상태',
|
||||
type: 'single' as const,
|
||||
options: [
|
||||
{ value: '사용', label: '사용' },
|
||||
{ value: '미사용', label: '미사용' },
|
||||
],
|
||||
allOptionLabel: '전체',
|
||||
},
|
||||
],
|
||||
initialFilters: { status: '' },
|
||||
|
||||
customFilterFn: (
|
||||
items: Checklist[],
|
||||
filterValues: Record<string, string | string[]>
|
||||
) => {
|
||||
const statusFilter = filterValues.status as string;
|
||||
if (!statusFilter) return items;
|
||||
return items.filter((item) => item.status === statusFilter);
|
||||
},
|
||||
|
||||
searchFilter: (item, searchValue) => {
|
||||
if (!searchValue || !searchValue.trim()) return true;
|
||||
const search = searchValue.toLowerCase().trim();
|
||||
return (
|
||||
(item.checklistCode || '').toLowerCase().includes(search) ||
|
||||
(item.checklistName || '').toLowerCase().includes(search)
|
||||
);
|
||||
},
|
||||
|
||||
headerActions: () => (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleSaveOrder}
|
||||
disabled={!isOrderChanged}
|
||||
>
|
||||
순서 변경 저장
|
||||
</Button>
|
||||
),
|
||||
|
||||
createButton: {
|
||||
label: '점검표 등록',
|
||||
onClick: handleCreate,
|
||||
icon: Plus,
|
||||
},
|
||||
|
||||
onBulkDelete: handleBulkDelete,
|
||||
|
||||
renderTableRow: (
|
||||
checklist: Checklist,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<Checklist>
|
||||
) => (
|
||||
<TableRow
|
||||
key={checklist.id}
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(e, checklist.id)}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDrop={(e) => handleDrop(e, checklist.id)}
|
||||
className={`cursor-pointer hover:bg-muted/50 ${handlers.isSelected ? 'bg-blue-50' : ''}`}
|
||||
onClick={() => handleRowClick(checklist)}
|
||||
>
|
||||
<TableCell
|
||||
className="text-center cursor-grab active:cursor-grabbing"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
|
||||
</TableCell>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
checked={handlers.isSelected}
|
||||
onCheckedChange={handlers.onToggle}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="text-center text-muted-foreground">
|
||||
{globalIndex}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{checklist.checklistCode}</TableCell>
|
||||
<TableCell>{checklist.checklistName}</TableCell>
|
||||
<TableCell className="text-center">{checklist.itemCount}</TableCell>
|
||||
<TableCell className="text-center">{checklist.documentCount}</TableCell>
|
||||
<TableCell
|
||||
className="text-center"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Badge
|
||||
variant={checklist.status === '사용' ? 'default' : 'secondary'}
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleToggleStatus(checklist.id)}
|
||||
>
|
||||
{checklist.status}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
),
|
||||
|
||||
renderMobileCard: (
|
||||
checklist: Checklist,
|
||||
index: number,
|
||||
globalIndex: number,
|
||||
handlers: SelectionHandlers & RowClickHandlers<Checklist>
|
||||
) => (
|
||||
<ListMobileCard
|
||||
key={checklist.id}
|
||||
id={checklist.id}
|
||||
isSelected={handlers.isSelected}
|
||||
onToggleSelection={handlers.onToggle}
|
||||
onClick={() => handleRowClick(checklist)}
|
||||
headerBadges={
|
||||
<>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
#{globalIndex}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-xs font-mono">
|
||||
{checklist.checklistCode}
|
||||
</Badge>
|
||||
</>
|
||||
}
|
||||
title={checklist.checklistName}
|
||||
statusBadge={
|
||||
<Badge
|
||||
variant={checklist.status === '사용' ? 'default' : 'secondary'}
|
||||
className="cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleToggleStatus(checklist.id);
|
||||
}}
|
||||
>
|
||||
{checklist.status}
|
||||
</Badge>
|
||||
}
|
||||
infoGrid={
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
||||
<InfoField label="항목" value={`${checklist.itemCount}개`} />
|
||||
<InfoField label="문서" value={`${checklist.documentCount}개`} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
),
|
||||
}),
|
||||
[
|
||||
handleCreate,
|
||||
handleRowClick,
|
||||
handleToggleStatus,
|
||||
handleBulkDelete,
|
||||
startDate,
|
||||
endDate,
|
||||
searchQuery,
|
||||
isOrderChanged,
|
||||
handleSaveOrder,
|
||||
handleDragStart,
|
||||
handleDragOver,
|
||||
handleDragLeave,
|
||||
handleDragEnd,
|
||||
handleDrop,
|
||||
]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<UniversalListPage
|
||||
config={config}
|
||||
initialData={allChecklists}
|
||||
onSearchChange={setSearchQuery}
|
||||
/>
|
||||
<DeleteConfirmDialog
|
||||
open={deleteDialogOpen}
|
||||
onOpenChange={setDeleteDialogOpen}
|
||||
description="선택한 점검표를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
|
||||
loading={isLoading}
|
||||
onConfirm={handleDeleteConfirm}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
223
src/components/checklist-management/ItemDetail.tsx
Normal file
223
src/components/checklist-management/ItemDetail.tsx
Normal file
@@ -0,0 +1,223 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
110
src/components/checklist-management/ItemDetailClient.tsx
Normal file
110
src/components/checklist-management/ItemDetailClient.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 항목 상세 클라이언트 컴포넌트
|
||||
*
|
||||
* 라우팅:
|
||||
* - /[id]/items/[itemId] → 상세 보기
|
||||
* - /[id]/items/[itemId]?mode=edit → 수정
|
||||
* - /[id]/items/new → 등록
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { ItemDetail } from './ItemDetail';
|
||||
import { ItemForm } from './ItemForm';
|
||||
import { getChecklistItemById } from './actions';
|
||||
import type { ChecklistItem } from '@/types/checklist';
|
||||
import { DetailPageSkeleton } from '@/components/ui/skeleton';
|
||||
import { ErrorCard } from '@/components/ui/error-card';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
type DetailMode = 'view' | 'edit' | 'create';
|
||||
|
||||
interface ItemDetailClientProps {
|
||||
checklistId: string;
|
||||
itemId: string;
|
||||
}
|
||||
|
||||
export function ItemDetailClient({ checklistId, itemId }: ItemDetailClientProps) {
|
||||
const searchParams = useSearchParams();
|
||||
const modeFromQuery = searchParams.get('mode') as DetailMode | null;
|
||||
const isNewMode = itemId === 'new';
|
||||
|
||||
const [mode] = useState<DetailMode>(() => {
|
||||
if (isNewMode) return 'create';
|
||||
if (modeFromQuery === 'edit') return 'edit';
|
||||
return 'view';
|
||||
});
|
||||
|
||||
const [itemData, setItemData] = useState<ChecklistItem | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(!isNewMode);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isNewMode) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await getChecklistItemById(checklistId, itemId);
|
||||
if (result.success && result.data) {
|
||||
setItemData(result.data);
|
||||
} else {
|
||||
setError(result.error || '항목 정보를 찾을 수 없습니다.');
|
||||
toast.error('항목을 불러오는데 실패했습니다.');
|
||||
}
|
||||
} catch {
|
||||
setError('항목 정보를 불러오는 중 오류가 발생했습니다.');
|
||||
toast.error('항목을 불러오는데 실패했습니다.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [checklistId, itemId, isNewMode]);
|
||||
|
||||
if (isLoading) {
|
||||
return <DetailPageSkeleton sections={1} fieldsPerSection={4} />;
|
||||
}
|
||||
|
||||
if (error && !isNewMode) {
|
||||
return (
|
||||
<ErrorCard
|
||||
type="network"
|
||||
title="항목 정보를 불러올 수 없습니다"
|
||||
description={error}
|
||||
tips={['해당 항목이 존재하는지 확인해주세요']}
|
||||
homeButtonLabel="점검표로 돌아가기"
|
||||
homeButtonHref={`/ko/master-data/checklist-management/${checklistId}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (mode === 'create') {
|
||||
return <ItemForm mode="create" checklistId={checklistId} />;
|
||||
}
|
||||
|
||||
if (mode === 'edit' && itemData) {
|
||||
return <ItemForm mode="edit" checklistId={checklistId} initialData={itemData} />;
|
||||
}
|
||||
|
||||
if (mode === 'view' && itemData) {
|
||||
return <ItemDetail item={itemData} checklistId={checklistId} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorCard
|
||||
type="not-found"
|
||||
title="항목을 찾을 수 없습니다"
|
||||
description="요청하신 항목 정보가 존재하지 않습니다."
|
||||
homeButtonLabel="점검표로 돌아가기"
|
||||
homeButtonHref={`/ko/master-data/checklist-management/${checklistId}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
350
src/components/checklist-management/ItemForm.tsx
Normal file
350
src/components/checklist-management/ItemForm.tsx
Normal file
@@ -0,0 +1,350 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 항목 등록/수정 폼 컴포넌트
|
||||
*
|
||||
* 기획서 스크린샷 3 기준:
|
||||
* - 기본 정보: 항목 번호(자동), 항목명, 소개, 상태
|
||||
* - 문서 정보: 순서, 문서 번호, 문서, 개정, 시행일 + 행 추가/삭제
|
||||
*/
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Plus, Trash2, GripVertical } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
|
||||
import { toast } from 'sonner';
|
||||
import type { ChecklistItem, ChecklistDocumentFormData } from '@/types/checklist';
|
||||
import { createChecklistItem, updateChecklistItem } from './actions';
|
||||
import type { DetailConfig } from '@/components/templates/IntegratedDetailTemplate/types';
|
||||
|
||||
const itemCreateConfig: DetailConfig = {
|
||||
title: '항목',
|
||||
description: '새로운 항목을 등록합니다',
|
||||
basePath: '',
|
||||
fields: [],
|
||||
actions: {
|
||||
showBack: true,
|
||||
showEdit: false,
|
||||
showDelete: false,
|
||||
showSave: true,
|
||||
submitLabel: '등록',
|
||||
},
|
||||
};
|
||||
|
||||
const itemEditConfig: DetailConfig = {
|
||||
...itemCreateConfig,
|
||||
description: '항목 정보를 수정합니다',
|
||||
actions: {
|
||||
...itemCreateConfig.actions,
|
||||
submitLabel: '저장',
|
||||
},
|
||||
};
|
||||
|
||||
interface ItemFormProps {
|
||||
mode: 'create' | 'edit';
|
||||
checklistId: string;
|
||||
initialData?: ChecklistItem;
|
||||
}
|
||||
|
||||
export function ItemForm({ mode, checklistId, initialData }: ItemFormProps) {
|
||||
const router = useRouter();
|
||||
const isEdit = mode === 'edit';
|
||||
|
||||
const [itemName, setItemName] = useState(initialData?.itemName || '');
|
||||
const [description, setDescription] = useState(initialData?.description || '');
|
||||
const [status, setStatus] = useState<string>(initialData?.status || '사용');
|
||||
|
||||
// 문서 목록 상태
|
||||
const [documents, setDocuments] = useState<ChecklistDocumentFormData[]>(() => {
|
||||
if (initialData?.documents && initialData.documents.length > 0) {
|
||||
return initialData.documents.map((doc) => ({
|
||||
id: doc.id,
|
||||
documentCode: doc.documentCode,
|
||||
documentName: doc.documentName,
|
||||
revision: doc.revision,
|
||||
effectiveDate: doc.effectiveDate,
|
||||
order: doc.order,
|
||||
}));
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
const handleAddDocument = () => {
|
||||
setDocuments((prev) => [
|
||||
...prev,
|
||||
{
|
||||
documentCode: '',
|
||||
documentName: '',
|
||||
revision: '',
|
||||
effectiveDate: '',
|
||||
order: prev.length + 1,
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const handleRemoveDocument = (index: number) => {
|
||||
setDocuments((prev) => {
|
||||
const updated = prev.filter((_, i) => i !== index);
|
||||
return updated.map((doc, i) => ({ ...doc, order: i + 1 }));
|
||||
});
|
||||
};
|
||||
|
||||
const handleDocumentChange = (
|
||||
index: number,
|
||||
field: keyof ChecklistDocumentFormData,
|
||||
value: string | number
|
||||
) => {
|
||||
setDocuments((prev) =>
|
||||
prev.map((doc, i) => (i === index ? { ...doc, [field]: value } : doc))
|
||||
);
|
||||
};
|
||||
|
||||
const handleSubmit = async (): Promise<{ success: boolean; error?: string }> => {
|
||||
if (!itemName.trim()) {
|
||||
toast.error('항목명을 입력해주세요.');
|
||||
return { success: false, error: '항목명을 입력해주세요.' };
|
||||
}
|
||||
|
||||
const formData = {
|
||||
itemName: itemName.trim(),
|
||||
description: description.trim(),
|
||||
status: status as '사용' | '미사용',
|
||||
documents,
|
||||
};
|
||||
|
||||
try {
|
||||
if (isEdit && initialData?.id) {
|
||||
const result = await updateChecklistItem(checklistId, initialData.id, formData);
|
||||
if (result.success) {
|
||||
toast.success('항목이 수정되었습니다.');
|
||||
router.push(
|
||||
`/ko/master-data/checklist-management/${checklistId}/items/${initialData.id}`
|
||||
);
|
||||
return { success: true };
|
||||
} else {
|
||||
toast.error(result.error || '수정에 실패했습니다.');
|
||||
return { success: false, error: result.error };
|
||||
}
|
||||
} else {
|
||||
const result = await createChecklistItem(checklistId, formData);
|
||||
if (result.success && result.data) {
|
||||
toast.success('항목이 등록되었습니다.');
|
||||
router.push(`/ko/master-data/checklist-management/${checklistId}`);
|
||||
return { success: true };
|
||||
} else {
|
||||
toast.error(result.error || '등록에 실패했습니다.');
|
||||
return { success: false, error: result.error };
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
toast.error('처리 중 오류가 발생했습니다.');
|
||||
return { success: false, error: '처리 중 오류가 발생했습니다.' };
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
if (isEdit && initialData?.id) {
|
||||
router.push(
|
||||
`/ko/master-data/checklist-management/${checklistId}/items/${initialData.id}`
|
||||
);
|
||||
} else {
|
||||
router.push(`/ko/master-data/checklist-management/${checklistId}`);
|
||||
}
|
||||
};
|
||||
|
||||
const renderFormContent = useCallback(
|
||||
() => (
|
||||
<div className="space-y-6">
|
||||
{/* 기본 정보 */}
|
||||
<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-2">
|
||||
<Label>항목 번호</Label>
|
||||
<Input
|
||||
value={initialData?.itemCode || '자동생성'}
|
||||
disabled
|
||||
className="bg-muted"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="itemName">항목명 *</Label>
|
||||
<Input
|
||||
id="itemName"
|
||||
value={itemName}
|
||||
onChange={(e) => setItemName(e.target.value)}
|
||||
placeholder="항목명을 입력하세요"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">소개</Label>
|
||||
<Input
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="소개를 입력하세요"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>상태</Label>
|
||||
<Select value={status} onValueChange={setStatus}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="사용">사용</SelectItem>
|
||||
<SelectItem value="미사용">미사용</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 문서 정보 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-base">
|
||||
문서 정보
|
||||
<span className="text-sm font-normal text-muted-foreground ml-2">
|
||||
총 {documents.length}건
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button size="sm" type="button" onClick={handleAddDocument}>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
문서 추가
|
||||
</Button>
|
||||
</div>
|
||||
</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>
|
||||
<th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
삭제
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{documents.map((doc, index) => (
|
||||
<tr key={`doc-${index}`} className="border-b">
|
||||
<td className="w-10 px-3 py-2 text-center">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
|
||||
</td>
|
||||
<td className="w-14 px-3 py-2 text-center text-sm">
|
||||
{doc.order}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<Input
|
||||
value={doc.documentCode}
|
||||
onChange={(e) =>
|
||||
handleDocumentChange(index, 'documentCode', e.target.value)
|
||||
}
|
||||
placeholder="문서 번호"
|
||||
className="h-8"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<Input
|
||||
value={doc.documentName}
|
||||
onChange={(e) =>
|
||||
handleDocumentChange(index, 'documentName', e.target.value)
|
||||
}
|
||||
placeholder="문서명"
|
||||
className="h-8"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<Input
|
||||
value={doc.revision}
|
||||
onChange={(e) =>
|
||||
handleDocumentChange(index, 'revision', e.target.value)
|
||||
}
|
||||
placeholder="REV"
|
||||
className="h-8"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<Input
|
||||
type="date"
|
||||
value={doc.effectiveDate}
|
||||
onChange={(e) =>
|
||||
handleDocumentChange(index, 'effectiveDate', e.target.value)
|
||||
}
|
||||
className="h-8"
|
||||
/>
|
||||
</td>
|
||||
<td className="w-14 px-3 py-2 text-center">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 p-0 text-destructive hover:text-destructive"
|
||||
onClick={() => handleRemoveDocument(index)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
),
|
||||
[itemName, description, status, documents, initialData?.itemCode]
|
||||
);
|
||||
|
||||
const config = isEdit ? itemEditConfig : itemCreateConfig;
|
||||
|
||||
return (
|
||||
<IntegratedDetailTemplate
|
||||
config={config}
|
||||
mode={isEdit ? 'edit' : 'create'}
|
||||
isLoading={false}
|
||||
onCancel={handleCancel}
|
||||
onSubmit={handleSubmit}
|
||||
renderForm={renderFormContent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
342
src/components/checklist-management/actions.ts
Normal file
342
src/components/checklist-management/actions.ts
Normal file
@@ -0,0 +1,342 @@
|
||||
'use server';
|
||||
|
||||
/**
|
||||
* 점검표 관리 Server Actions
|
||||
*
|
||||
* 현재: Mock 데이터 기반
|
||||
* 추후: executeServerAction으로 백엔드 API 연동 전환
|
||||
*/
|
||||
|
||||
import type {
|
||||
Checklist,
|
||||
ChecklistFormData,
|
||||
ChecklistItem,
|
||||
ChecklistItemFormData,
|
||||
ChecklistDocument,
|
||||
} from '@/types/checklist';
|
||||
|
||||
// ============================================================================
|
||||
// Mock 데이터
|
||||
// ============================================================================
|
||||
|
||||
const MOCK_DOCUMENTS: ChecklistDocument[] = [
|
||||
{
|
||||
id: 'doc-1',
|
||||
itemId: 'item-1',
|
||||
documentCode: 'QM-std-1-1-1',
|
||||
documentName: '문서명.pdf',
|
||||
revision: 'REV12',
|
||||
effectiveDate: '2026-01-05',
|
||||
order: 1,
|
||||
},
|
||||
{
|
||||
id: 'doc-2',
|
||||
itemId: 'item-1',
|
||||
documentCode: 'QM-std-1-1-1',
|
||||
documentName: '문서명.pdf',
|
||||
revision: 'REV12',
|
||||
effectiveDate: '2026-01-06',
|
||||
order: 2,
|
||||
},
|
||||
];
|
||||
|
||||
const MOCK_ITEMS: ChecklistItem[] = [
|
||||
{
|
||||
id: 'item-1',
|
||||
checklistId: 'cl-1',
|
||||
itemCode: '123123',
|
||||
itemName: '1. 수입검사 기준 확인',
|
||||
description: '소개 문구',
|
||||
documentCount: 3,
|
||||
status: '사용',
|
||||
order: 1,
|
||||
documents: MOCK_DOCUMENTS,
|
||||
createdAt: '2026-01-01T00:00:00Z',
|
||||
updatedAt: '2026-01-01T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'item-2',
|
||||
checklistId: 'cl-1',
|
||||
itemCode: '123123',
|
||||
itemName: '항목명',
|
||||
description: '',
|
||||
documentCount: 3,
|
||||
status: '사용',
|
||||
order: 2,
|
||||
documents: [],
|
||||
createdAt: '2026-01-01T00:00:00Z',
|
||||
updatedAt: '2026-01-01T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'item-3',
|
||||
checklistId: 'cl-1',
|
||||
itemCode: '123123',
|
||||
itemName: '항목명',
|
||||
description: '',
|
||||
documentCount: 3,
|
||||
status: '사용',
|
||||
order: 3,
|
||||
documents: [],
|
||||
createdAt: '2026-01-01T00:00:00Z',
|
||||
updatedAt: '2026-01-01T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
const MOCK_CHECKLISTS: Checklist[] = [
|
||||
{
|
||||
id: 'cl-1',
|
||||
checklistCode: '변호명',
|
||||
checklistName: '점검표명',
|
||||
itemCount: 3,
|
||||
documentCount: 6,
|
||||
status: '사용',
|
||||
order: 1,
|
||||
createdAt: '2025-09-01T00:00:00Z',
|
||||
updatedAt: '2025-09-01T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'cl-2',
|
||||
checklistCode: '변호명',
|
||||
checklistName: '점검표명',
|
||||
itemCount: 3,
|
||||
documentCount: 6,
|
||||
status: '미사용',
|
||||
order: 2,
|
||||
createdAt: '2025-09-01T00:00:00Z',
|
||||
updatedAt: '2025-09-01T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'cl-3',
|
||||
checklistCode: '변호명',
|
||||
checklistName: '점검표명',
|
||||
itemCount: 3,
|
||||
documentCount: 6,
|
||||
status: '사용',
|
||||
order: 3,
|
||||
createdAt: '2025-09-01T00:00:00Z',
|
||||
updatedAt: '2025-09-01T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'cl-4',
|
||||
checklistCode: '변호명',
|
||||
checklistName: '점검표명',
|
||||
itemCount: 3,
|
||||
documentCount: 6,
|
||||
status: '미사용',
|
||||
order: 4,
|
||||
createdAt: '2025-09-01T00:00:00Z',
|
||||
updatedAt: '2025-09-01T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'cl-5',
|
||||
checklistCode: '변호명',
|
||||
checklistName: '점검표명',
|
||||
itemCount: 3,
|
||||
documentCount: 6,
|
||||
status: '사용',
|
||||
order: 5,
|
||||
createdAt: '2025-09-01T00:00:00Z',
|
||||
updatedAt: '2025-09-01T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'cl-6',
|
||||
checklistCode: '변호명',
|
||||
checklistName: '점검표명',
|
||||
itemCount: 3,
|
||||
documentCount: 6,
|
||||
status: '미사용',
|
||||
order: 6,
|
||||
createdAt: '2025-09-01T00:00:00Z',
|
||||
updatedAt: '2025-09-01T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'cl-7',
|
||||
checklistCode: '변호명',
|
||||
checklistName: '점검표명',
|
||||
itemCount: 3,
|
||||
documentCount: 6,
|
||||
status: '사용',
|
||||
order: 7,
|
||||
createdAt: '2025-09-01T00:00:00Z',
|
||||
updatedAt: '2025-09-01T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
// 점검표 CRUD
|
||||
// ============================================================================
|
||||
|
||||
export async function getChecklistList(): Promise<{
|
||||
success: boolean;
|
||||
data?: { items: Checklist[] };
|
||||
error?: string;
|
||||
}> {
|
||||
return { success: true, data: { items: [...MOCK_CHECKLISTS] } };
|
||||
}
|
||||
|
||||
export async function getChecklistById(id: string): Promise<{
|
||||
success: boolean;
|
||||
data?: Checklist;
|
||||
error?: string;
|
||||
}> {
|
||||
const checklist = MOCK_CHECKLISTS.find((c) => c.id === id);
|
||||
if (!checklist) return { success: false, error: '점검표를 찾을 수 없습니다.' };
|
||||
return { success: true, data: { ...checklist } };
|
||||
}
|
||||
|
||||
export async function createChecklist(data: ChecklistFormData): Promise<{
|
||||
success: boolean;
|
||||
data?: Checklist;
|
||||
error?: string;
|
||||
}> {
|
||||
const newChecklist: Checklist = {
|
||||
id: `cl-${Date.now()}`,
|
||||
checklistCode: `CL-${String(MOCK_CHECKLISTS.length + 1).padStart(3, '0')}`,
|
||||
checklistName: data.checklistName,
|
||||
itemCount: 0,
|
||||
documentCount: 0,
|
||||
status: data.status,
|
||||
order: MOCK_CHECKLISTS.length + 1,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
return { success: true, data: newChecklist };
|
||||
}
|
||||
|
||||
export async function updateChecklist(
|
||||
id: string,
|
||||
data: ChecklistFormData
|
||||
): Promise<{ success: boolean; data?: Checklist; error?: string }> {
|
||||
const checklist = MOCK_CHECKLISTS.find((c) => c.id === id);
|
||||
if (!checklist) return { success: false, error: '점검표를 찾을 수 없습니다.' };
|
||||
const updated = {
|
||||
...checklist,
|
||||
checklistName: data.checklistName,
|
||||
status: data.status,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
return { success: true, data: updated };
|
||||
}
|
||||
|
||||
export async function deleteChecklist(id: string): Promise<{
|
||||
success: boolean;
|
||||
error?: string;
|
||||
}> {
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function deleteChecklists(ids: string[]): Promise<{
|
||||
success: boolean;
|
||||
deletedCount?: number;
|
||||
error?: string;
|
||||
}> {
|
||||
return { success: true, deletedCount: ids.length };
|
||||
}
|
||||
|
||||
export async function toggleChecklistStatus(id: string): Promise<{
|
||||
success: boolean;
|
||||
data?: Checklist;
|
||||
error?: string;
|
||||
}> {
|
||||
const checklist = MOCK_CHECKLISTS.find((c) => c.id === id);
|
||||
if (!checklist) return { success: false, error: '점검표를 찾을 수 없습니다.' };
|
||||
const toggled = {
|
||||
...checklist,
|
||||
status: checklist.status === '사용' ? '미사용' as const : '사용' as const,
|
||||
};
|
||||
return { success: true, data: toggled };
|
||||
}
|
||||
|
||||
export async function reorderChecklists(
|
||||
items: { id: string; order: number }[]
|
||||
): Promise<{ success: boolean; error?: string }> {
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function getChecklistStats(): Promise<{
|
||||
success: boolean;
|
||||
data?: { total: number; active: number; inactive: number };
|
||||
error?: string;
|
||||
}> {
|
||||
const active = MOCK_CHECKLISTS.filter((c) => c.status === '사용').length;
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
total: MOCK_CHECKLISTS.length,
|
||||
active,
|
||||
inactive: MOCK_CHECKLISTS.length - active,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 점검표 항목 CRUD
|
||||
// ============================================================================
|
||||
|
||||
export async function getChecklistItems(checklistId: string): Promise<{
|
||||
success: boolean;
|
||||
data?: ChecklistItem[];
|
||||
error?: string;
|
||||
}> {
|
||||
return { success: true, data: [...MOCK_ITEMS] };
|
||||
}
|
||||
|
||||
export async function getChecklistItemById(
|
||||
checklistId: string,
|
||||
itemId: string
|
||||
): Promise<{ success: boolean; data?: ChecklistItem; error?: string }> {
|
||||
const item = MOCK_ITEMS.find((i) => i.id === itemId);
|
||||
if (!item) return { success: false, error: '항목을 찾을 수 없습니다.' };
|
||||
return { success: true, data: { ...item, documents: [...MOCK_DOCUMENTS] } };
|
||||
}
|
||||
|
||||
export async function createChecklistItem(
|
||||
checklistId: string,
|
||||
data: ChecklistItemFormData
|
||||
): Promise<{ success: boolean; data?: ChecklistItem; error?: string }> {
|
||||
const newItem: ChecklistItem = {
|
||||
id: `item-${Date.now()}`,
|
||||
checklistId,
|
||||
itemCode: String(Date.now()).slice(-6),
|
||||
itemName: data.itemName,
|
||||
description: data.description,
|
||||
documentCount: data.documents.length,
|
||||
status: data.status,
|
||||
order: MOCK_ITEMS.length + 1,
|
||||
documents: [],
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
return { success: true, data: newItem };
|
||||
}
|
||||
|
||||
export async function updateChecklistItem(
|
||||
checklistId: string,
|
||||
itemId: string,
|
||||
data: ChecklistItemFormData
|
||||
): Promise<{ success: boolean; data?: ChecklistItem; error?: string }> {
|
||||
const item = MOCK_ITEMS.find((i) => i.id === itemId);
|
||||
if (!item) return { success: false, error: '항목을 찾을 수 없습니다.' };
|
||||
const updated = {
|
||||
...item,
|
||||
itemName: data.itemName,
|
||||
description: data.description,
|
||||
status: data.status,
|
||||
updatedAt: new Date().toISOString(),
|
||||
};
|
||||
return { success: true, data: updated };
|
||||
}
|
||||
|
||||
export async function deleteChecklistItem(
|
||||
checklistId: string,
|
||||
itemId: string
|
||||
): Promise<{ success: boolean; error?: string }> {
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function reorderChecklistItems(
|
||||
checklistId: string,
|
||||
items: { id: string; order: number }[]
|
||||
): Promise<{ success: boolean; error?: string }> {
|
||||
return { success: true };
|
||||
}
|
||||
7
src/components/checklist-management/index.ts
Normal file
7
src/components/checklist-management/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export { default as ChecklistListClient } from './ChecklistListClient';
|
||||
export { ChecklistDetailClient } from './ChecklistDetailClient';
|
||||
export { ChecklistDetail } from './ChecklistDetail';
|
||||
export { ChecklistForm } from './ChecklistForm';
|
||||
export { ItemDetailClient } from './ItemDetailClient';
|
||||
export { ItemDetail } from './ItemDetail';
|
||||
export { ItemForm } from './ItemForm';
|
||||
@@ -1,13 +1,13 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* 수주서 문서 컴포넌트
|
||||
* - 스크린샷 기반 디자인
|
||||
* - 제목 좌측, 결재란 우측
|
||||
* - 신청업체/신청내용/납품정보 3열 구조
|
||||
* - 스크린, 모터, 절곡물 테이블
|
||||
* 수주서 문서 컴포넌트 (기획서 D1.8 기준 리디자인)
|
||||
* - 출고증(ShipmentOrderDocument)과 동일한 자재 섹션 구조
|
||||
* - 수주서 전용 헤더 (결재란, 로트번호, 제품코드, 인정번호)
|
||||
* - 배차정보/LOT 컬럼 없음
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
import { getTodayString } from "@/utils/date";
|
||||
import { OrderItem } from "../actions";
|
||||
import { ProductInfo } from "./OrderDocumentModal";
|
||||
@@ -15,8 +15,8 @@ import { ConstructionApprovalTable } from "@/components/document-system";
|
||||
|
||||
interface SalesOrderDocumentProps {
|
||||
documentNumber?: string;
|
||||
orderNumber: string; // 로트번호
|
||||
certificationNumber?: string; // 인정번호
|
||||
orderNumber: string;
|
||||
certificationNumber?: string;
|
||||
orderDate?: string;
|
||||
client: string;
|
||||
siteName?: string;
|
||||
@@ -35,23 +35,64 @@ interface SalesOrderDocumentProps {
|
||||
remarks?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 수량 포맷 함수
|
||||
*/
|
||||
function formatQuantity(quantity: number, unit?: string): string {
|
||||
const countableUnits = ["EA", "SET", "PCS", "개", "세트", "BOX", "ROLL"];
|
||||
const upperUnit = (unit || "").toUpperCase();
|
||||
// ===== 문서 전용 목데이터 (출고증과 동일 구조) =====
|
||||
|
||||
if (countableUnits.includes(upperUnit)) {
|
||||
return Math.round(quantity).toLocaleString();
|
||||
}
|
||||
const MOCK_SCREEN_ROWS = [
|
||||
{ no: 1, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
|
||||
{ no: 2, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
|
||||
];
|
||||
|
||||
const rounded = Math.round(quantity * 10000) / 10000;
|
||||
return rounded.toLocaleString(undefined, {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 4
|
||||
});
|
||||
}
|
||||
const MOCK_STEEL_ROWS = [
|
||||
{ no: 1, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
|
||||
{ no: 2, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
|
||||
];
|
||||
|
||||
const MOCK_MOTOR_LEFT = [
|
||||
{ item: '모터', type: '380V 단상', spec: 'KD-150K', qty: 6 },
|
||||
{ item: '브라켓트', type: '-', spec: '380X180', qty: 6 },
|
||||
{ item: '앵글', type: '밑침통 영금', spec: '40*40*380', qty: 4 },
|
||||
];
|
||||
|
||||
const MOCK_MOTOR_RIGHT = [
|
||||
{ item: '전동개폐기', type: '릴박스', spec: '-', qty: 1 },
|
||||
{ item: '전동개폐기', type: '매입', spec: '-', qty: 1 },
|
||||
];
|
||||
|
||||
const MOCK_GUIDE_RAIL_ITEMS = [
|
||||
{ name: '항목명', spec: 'L: 3,000', qty: 22 },
|
||||
{ name: '하부BASE', spec: '130X80', qty: 22 },
|
||||
];
|
||||
|
||||
const MOCK_GUIDE_SMOKE = { name: '연기차단재(W50)', spec: '2,438', qty: 4 };
|
||||
|
||||
const MOCK_CASE_ITEMS = [
|
||||
{ name: '500X330', spec: 'L: 4,000', qty: 3 },
|
||||
{ name: '500X330', spec: 'L: 5,000', qty: 4 },
|
||||
{ name: '상부덮개', spec: '1219X389', qty: 55 },
|
||||
{ name: '측면부 (마구리)', spec: '500X355', qty: '500X355' },
|
||||
];
|
||||
|
||||
const MOCK_CASE_SMOKE = { name: '연기차단재(W80)', spec: '3,000', qty: 4 };
|
||||
|
||||
const MOCK_BOTTOM_SCREEN = [
|
||||
{ name: '하단마감재', spec: '60X40', l1: 'L: 3,000', q1: 6, name2: '하단마감재', spec2: '60X40', l2: 'L: 4,000', q2: 6 },
|
||||
{ name: '하단보강엘비', spec: '60X17', l1: 'L: 3,000', q1: 6, name2: '하단보강엘비', spec2: '60X17', l2: 'L: 4,000', q2: 6 },
|
||||
{ name: '하단보강평철', spec: '-', l1: 'L: 3,000', q1: 6, name2: '하단보강평철', spec2: '-', l2: 'L: 4,000', q2: 6 },
|
||||
{ name: '하단무게평철', spec: '50X12T', l1: 'L: 3,000', q1: 6, name2: '하단무게평철', spec2: '50X12T', l2: 'L: 4,000', q2: 6 },
|
||||
];
|
||||
|
||||
const MOCK_BOTTOM_STEEL = { spec: '60X40', length: 'L: 3,000', qty: 22 };
|
||||
|
||||
const MOCK_SUBSIDIARY = [
|
||||
{ leftItem: '감기사프트', leftSpec: '4인치 4500', leftQty: 6, rightItem: '각파이프', rightSpec: '6000', rightQty: 4 },
|
||||
{ leftItem: '조인트바', leftSpec: '300', leftQty: 6, rightItem: '환봉', rightSpec: '3000', rightQty: 5 },
|
||||
];
|
||||
|
||||
// ===== 공통 스타일 =====
|
||||
const thBase = 'border-r border-gray-400 px-1 py-1';
|
||||
const tdBase = 'border-r border-gray-300 px-1 py-1';
|
||||
const tdCenter = `${tdBase} text-center`;
|
||||
const imgPlaceholder = 'flex items-center justify-center border border-dashed border-gray-300 text-gray-400';
|
||||
|
||||
export function SalesOrderDocument({
|
||||
documentNumber = "ABC123",
|
||||
@@ -73,53 +114,14 @@ export function SalesOrderDocument({
|
||||
products = [],
|
||||
remarks,
|
||||
}: SalesOrderDocumentProps) {
|
||||
// 스크린 제품만 필터링
|
||||
const screenProducts = products.filter(p =>
|
||||
p.productCategory?.includes("스크린") ||
|
||||
p.productName?.includes("스크린") ||
|
||||
p.productName?.includes("방화") ||
|
||||
p.productName?.includes("셔터")
|
||||
);
|
||||
const [bottomFinishView, setBottomFinishView] = useState<'screen' | 'steel'>('screen');
|
||||
|
||||
// 모터 아이템 필터링
|
||||
const motorItems = items.filter(item =>
|
||||
item.itemName?.toLowerCase().includes("모터") ||
|
||||
item.type?.includes("모터") ||
|
||||
item.itemCode?.startsWith("MT")
|
||||
);
|
||||
|
||||
// 브라켓 아이템 필터링
|
||||
const bracketItems = items.filter(item =>
|
||||
item.itemName?.includes("브라켓") ||
|
||||
item.type?.includes("브라켓")
|
||||
);
|
||||
|
||||
// 가이드레일 아이템 필터링
|
||||
const guideRailItems = items.filter(item =>
|
||||
item.itemName?.includes("가이드") ||
|
||||
item.itemName?.includes("레일") ||
|
||||
item.type?.includes("가이드")
|
||||
);
|
||||
|
||||
// 케이스 아이템 필터링
|
||||
const caseItems = items.filter(item =>
|
||||
item.itemName?.includes("케이스") ||
|
||||
item.itemName?.includes("셔터박스") ||
|
||||
item.type?.includes("케이스")
|
||||
);
|
||||
|
||||
// 하단마감재 아이템 필터링
|
||||
const bottomFinishItems = items.filter(item =>
|
||||
item.itemName?.includes("하단") ||
|
||||
item.itemName?.includes("마감") ||
|
||||
item.type?.includes("하단마감")
|
||||
);
|
||||
const motorRows = Math.max(MOCK_MOTOR_LEFT.length, MOCK_MOTOR_RIGHT.length);
|
||||
|
||||
return (
|
||||
<div className="bg-white p-8 min-h-full text-[11px]">
|
||||
{/* 헤더: 수주서 제목 (좌측) + 결재란 (우측) */}
|
||||
{/* ========== 헤더: 수주서 제목 + 결재란 ========== */}
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
{/* 수주서 제목 (좌측) */}
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-widest mb-2">수 주 서</h1>
|
||||
<div className="text-[10px] space-y-1">
|
||||
@@ -129,30 +131,26 @@ export function SalesOrderDocument({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 결재란 (우측) */}
|
||||
<ConstructionApprovalTable
|
||||
approvers={{ writer: { name: '홍길동' } }}
|
||||
/>
|
||||
<ConstructionApprovalTable approvers={{ writer: { name: '홍길동' } }} />
|
||||
</div>
|
||||
|
||||
{/* 상품명 / 제품명 / 로트번호 / 인정번호 */}
|
||||
{/* ========== 로트번호 / 제품명 / 제품코드 / 인정번호 ========== */}
|
||||
<table className="border border-gray-400 w-full mb-3 text-[10px]">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">상품명</td>
|
||||
<td className="px-2 py-1 border-r border-gray-400">{products[0]?.productCategory || "-"}</td>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품명</td>
|
||||
<td className="px-2 py-1 border-r border-gray-400">{products[0]?.productName || "-"}</td>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">로트번호</td>
|
||||
<td className="px-2 py-1 border-r border-gray-400">{orderNumber}</td>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품명</td>
|
||||
<td className="px-2 py-1 border-r border-gray-400">{products[0]?.productName || "-"}</td>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품코드</td>
|
||||
<td className="px-2 py-1 border-r border-gray-400">KWS01</td>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">인정번호</td>
|
||||
<td className="px-2 py-1">{certificationNumber}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* 3열 섹션: 신청업체 | 신청내용 | 납품정보 */}
|
||||
{/* ========== 3열 섹션: 신청업체 | 신청내용 | 납품정보 ========== */}
|
||||
<div className="border border-gray-400 mb-4">
|
||||
<div className="grid grid-cols-3">
|
||||
{/* 신청업체 */}
|
||||
@@ -165,21 +163,17 @@ export function SalesOrderDocument({
|
||||
<td className="px-2 py-1">{orderDate}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">업체명</td>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">수주처</td>
|
||||
<td className="px-2 py-1">{client}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">수주 담당자</td>
|
||||
<td className="px-2 py-1">{manager}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">담당자 연락처</td>
|
||||
<td className="px-2 py-1">{managerContact}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">배송지 주소</td>
|
||||
<td className="px-2 py-1">{address}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -201,14 +195,10 @@ export function SalesOrderDocument({
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">출고일</td>
|
||||
<td className="px-2 py-1">{expectedShipDate}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">셔터출수량</td>
|
||||
<td className="px-2 py-1">{shutterCount}개소</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium"> </td>
|
||||
<td className="px-2 py-1"> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -230,377 +220,411 @@ export function SalesOrderDocument({
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">인수자연락처</td>
|
||||
<td className="px-2 py-1">{recipientContact}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">배송방법</td>
|
||||
<td className="px-2 py-1">{deliveryMethod}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium"> </td>
|
||||
<td className="px-2 py-1"> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/* 배송지 주소 - 한 줄 병합 */}
|
||||
<div className="border-t border-gray-400 flex">
|
||||
<div className="bg-gray-100 px-2 py-1 w-20 shrink-0 font-medium">배송지 주소</div>
|
||||
<div className="px-2 py-1 flex-1">{address}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[10px] mb-4">아래와 같이 주문하오니 품질 및 납기일을 준수하여 주시기 바랍니다.</p>
|
||||
|
||||
{/* 1. 스크린 테이블 */}
|
||||
{/* ========== 1. 스크린 ========== */}
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">1. 스크린</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-8" rowSpan={2}>No</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-16" rowSpan={2}>품류</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>부호</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1" colSpan={2}>오픈사이즈</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1" colSpan={2}>제작사이즈</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-24" rowSpan={2}>가이드레일<br/>유형</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>샤프트<br/>(인치)</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>케이스<br/>(인치)</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1" colSpan={2}>모터</th>
|
||||
<th className={`${thBase} w-8`} rowSpan={2}>No</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>품류</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>부호</th>
|
||||
<th className={thBase} colSpan={2}>오픈사이즈</th>
|
||||
<th className={thBase} colSpan={2}>제작사이즈</th>
|
||||
<th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
|
||||
<th className={thBase} colSpan={2}>모터</th>
|
||||
<th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
|
||||
</tr>
|
||||
<tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
|
||||
<th className="border-r border-gray-400 px-1">가로</th>
|
||||
<th className="border-r border-gray-400 px-1">세로</th>
|
||||
<th className="border-r border-gray-400 px-1">가로</th>
|
||||
<th className="border-r border-gray-400 px-1">세로</th>
|
||||
<th className="border-r border-gray-400 px-1">브라켓트</th>
|
||||
<th className="border-r border-gray-400 px-1">용량Kg</th>
|
||||
<th className={thBase}>가로</th>
|
||||
<th className={thBase}>세로</th>
|
||||
<th className={thBase}>가로</th>
|
||||
<th className={thBase}>세로</th>
|
||||
<th className={thBase}>브라켓트</th>
|
||||
<th className={thBase}>용량Kg</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{screenProducts.length > 0 ? (
|
||||
screenProducts.map((product, index) => (
|
||||
<tr key={index} className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{index + 1}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{product.productCategory || "-"}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{product.code || "-"}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{product.openWidth || "-"}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{product.openHeight || "-"}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{product.openWidth || "-"}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{product.openHeight || "-"}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center text-[9px]">백면형<br/>(120X70)</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">380X180</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">300</td>
|
||||
<td className="px-1 py-1 text-center">SUS마감</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={13} className="px-2 py-3 text-center text-gray-400">
|
||||
등록된 스크린 제품이 없습니다
|
||||
</td>
|
||||
{MOCK_SCREEN_ROWS.map((row) => (
|
||||
<tr key={row.no} className="border-b border-gray-300">
|
||||
<td className={tdCenter}>{row.no}</td>
|
||||
<td className={tdCenter}>{row.type}</td>
|
||||
<td className={tdCenter}>{row.code}</td>
|
||||
<td className={tdCenter}>{row.openW.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.openH.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.madeW.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.madeH.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.guideRail}</td>
|
||||
<td className={tdCenter}>{row.shaft}</td>
|
||||
<td className={tdCenter}>{row.caseInch}</td>
|
||||
<td className={tdCenter}>{row.bracket}</td>
|
||||
<td className={tdCenter}>{row.capacity}</td>
|
||||
<td className="px-1 py-1 text-center">{row.finish}</td>
|
||||
</tr>
|
||||
)}
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. 모터 테이블 */}
|
||||
{/* ========== 2. 철재 ========== */}
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">2. 모터</p>
|
||||
<p className="font-bold mb-2">2. 철재</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-14">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
|
||||
<th className="px-2 py-1 w-14">수량</th>
|
||||
<th className={`${thBase} w-8`} rowSpan={2}>No.</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>부호</th>
|
||||
<th className={thBase} colSpan={2}>오픈사이즈</th>
|
||||
<th className={thBase} colSpan={2}>제작사이즈</th>
|
||||
<th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>조인트바<br />(규격)</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
|
||||
<th className={thBase} colSpan={2}>모터</th>
|
||||
<th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
|
||||
</tr>
|
||||
<tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
|
||||
<th className={thBase}>가로</th>
|
||||
<th className={thBase}>세로</th>
|
||||
<th className={thBase}>가로</th>
|
||||
<th className={thBase}>세로</th>
|
||||
<th className={thBase}>브라켓트</th>
|
||||
<th className={thBase}>용량Kg</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(motorItems.length > 0 || bracketItems.length > 0) ? (
|
||||
<>
|
||||
{/* 모터 행 */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{motorItems[0]?.spec || "KD-150K"}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">{motorItems[0] ? formatQuantity(motorItems[0].quantity, motorItems[0].unit) : "6"}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{motorItems[1]?.spec || "KD-150K"}</td>
|
||||
<td className="px-2 py-1 text-center">{motorItems[1] ? formatQuantity(motorItems[1].quantity, motorItems[1].unit) : "6"}</td>
|
||||
</tr>
|
||||
{/* 브라켓트 행 */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{bracketItems[0]?.spec || "380X180 [2-4\"]"}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[0] ? formatQuantity(bracketItems[0].quantity, bracketItems[0].unit) : "6"}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{bracketItems[1]?.spec || "380X180 [2-4\"]"}</td>
|
||||
<td className="px-2 py-1 text-center">{bracketItems[1] ? formatQuantity(bracketItems[1].quantity, bracketItems[1].unit) : "6"}</td>
|
||||
</tr>
|
||||
{/* 브라켓트 추가 행 (밑침통 영금) */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">밑침통 영금</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{bracketItems[2]?.spec || "∠40-40 L380"}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[2] ? formatQuantity(bracketItems[2].quantity, bracketItems[2].unit) : "44"}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1"></td>
|
||||
<td className="border-r border-gray-300 px-2 py-1"></td>
|
||||
<td className="border-r border-gray-300 px-2 py-1"></td>
|
||||
<td className="px-2 py-1 text-center"></td>
|
||||
</tr>
|
||||
</>
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={8} className="px-2 py-3 text-center text-gray-400">
|
||||
등록된 모터/브라켓 품목이 없습니다
|
||||
</td>
|
||||
{MOCK_STEEL_ROWS.map((row) => (
|
||||
<tr key={row.no} className="border-b border-gray-300">
|
||||
<td className={tdCenter}>{row.no}</td>
|
||||
<td className={tdCenter}>{row.code}</td>
|
||||
<td className={tdCenter}>{row.openW.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.openH.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.madeW.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.madeH.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.guideRail}</td>
|
||||
<td className={tdCenter}>{row.shaft}</td>
|
||||
<td className={tdCenter}>{row.jointBar}</td>
|
||||
<td className={tdCenter}>{row.caseInch}</td>
|
||||
<td className={tdCenter}>{row.bracket}</td>
|
||||
<td className={tdCenter}>{row.capacity}</td>
|
||||
<td className="px-1 py-1 text-center">{row.finish}</td>
|
||||
</tr>
|
||||
)}
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. 절곡물 */}
|
||||
{/* ========== 3. 모터 ========== */}
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">3. 절곡물</p>
|
||||
|
||||
{/* 3-1. 가이드레일 */}
|
||||
<div className="mb-3">
|
||||
<p className="text-[10px] font-medium mb-1">3-1. 가이드레일 - EGI 1.5ST + 마감재 EGI 1.1ST + 별도마감재 SUS 1.1ST</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-24">백면형 (120X70)</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-24">측면형 (120X120)</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="px-2 py-1 w-12">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{guideRailItems.length > 0 ? (
|
||||
<>
|
||||
{/* 1행: L: 3,000 / 22 */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
|
||||
<div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">22</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
|
||||
<div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
|
||||
<td className="px-2 py-1 text-center">22</td>
|
||||
</tr>
|
||||
{/* 2행: 하부BASE */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">하부BASE<br/>[130X80]</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">22</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center"></td>
|
||||
<td className="px-2 py-1 text-center"></td>
|
||||
</tr>
|
||||
{/* 3행: 빈 행 */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center"></td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center"></td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center"></td>
|
||||
<td className="px-2 py-1 text-center"></td>
|
||||
</tr>
|
||||
{/* 4행: 제품명 */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">KSS01</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
|
||||
<td className="px-2 py-1 text-center">KSS01</td>
|
||||
</tr>
|
||||
</>
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-2 py-2 text-center text-gray-400">
|
||||
등록된 가이드레일이 없습니다
|
||||
</td>
|
||||
<p className="font-bold mb-2">3. 모터</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className={`${thBase} w-20`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>구분</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className={`${thBase} w-10`}>수량</th>
|
||||
<th className={`${thBase} w-20`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>구분</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className="px-1 py-1 w-10">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Array.from({ length: motorRows }).map((_, i) => {
|
||||
const left = MOCK_MOTOR_LEFT[i];
|
||||
const right = MOCK_MOTOR_RIGHT[i];
|
||||
return (
|
||||
<tr key={i} className="border-b border-gray-300">
|
||||
<td className={tdBase}>{left?.item || ''}</td>
|
||||
<td className={tdBase}>{left?.type || ''}</td>
|
||||
<td className={tdBase}>{left?.spec || ''}</td>
|
||||
<td className={tdCenter}>{left?.qty ?? ''}</td>
|
||||
<td className={tdBase}>{right?.item || ''}</td>
|
||||
<td className={tdBase}>{right?.type || ''}</td>
|
||||
<td className={tdBase}>{right?.spec || ''}</td>
|
||||
<td className="px-1 py-1 text-center">{right?.qty ?? ''}</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 연기차단재 정보 */}
|
||||
<div className="mt-2 border border-gray-400">
|
||||
<table className="w-full text-[10px]">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
|
||||
<div className="font-medium">연기차단재(W50)</div>
|
||||
<div>• 가이드레일 마감재</div>
|
||||
<div className="text-red-600 font-medium">양측에 설치</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
|
||||
<div>EGI 0.8T +</div>
|
||||
<div>화이버글라스코팅직물</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
|
||||
<div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">3,000</td>
|
||||
<td className="px-2 py-1 text-center">4,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">44</td>
|
||||
<td className="px-2 py-1 text-center">1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 text-[10px]">
|
||||
<span className="font-medium">• 별도 추가사항</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3-2. 케이스(셔터박스) */}
|
||||
<div className="mb-3">
|
||||
<p className="text-[10px] font-medium mb-1">3-2. 케이스(셔터박스) - EGI 1.5ST</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-24"> </th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-24">규격</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">길이</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">측면부</th>
|
||||
<th className="px-2 py-1 w-12">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{caseItems.length > 0 ? (
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={3}>
|
||||
<div className="flex items-center justify-center h-16 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
|
||||
500X330<br/>(150X300,<br/>400K원)
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
|
||||
L: 4,000<br/>L: 5,000<br/>상부덮개<br/>(1219X389)
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
|
||||
3<br/>4<br/>55
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">500X355</td>
|
||||
<td className="px-2 py-1 text-center">22</td>
|
||||
</tr>
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-2 py-2 text-center text-gray-400">
|
||||
등록된 케이스가 없습니다
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 연기차단재 정보 */}
|
||||
<div className="mt-2 border border-gray-400">
|
||||
<table className="w-full text-[10px]">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
|
||||
<div className="font-medium">연기차단재(W50)</div>
|
||||
<div>• 판넬부, 전면부</div>
|
||||
<div className="text-red-600 font-medium">감싸에 설치</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
|
||||
<div>EGI 0.8T +</div>
|
||||
<div>화이버글라스코팅직물</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
|
||||
<div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
|
||||
<td className="px-2 py-1 text-center">3,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
|
||||
<td className="px-2 py-1 text-center">44</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3-3. 하단마감재 */}
|
||||
<div className="mb-3">
|
||||
<p className="text-[10px] font-medium mb-1">3-3. 하단마감재 - 하단마감재(EGI 1.5ST) + 하단보강앨비(EGI 1.5ST) + 하단 보강철(EGI 1.1ST) + 하단 무게형 철(50X12T)</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="px-2 py-1 w-12">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{bottomFinishItems.length > 0 ? (
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단마감재<br/>(60X40)</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단보강<br/>(60X17)</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단무게<br/>[50X12T]</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
|
||||
<td className="px-2 py-1 text-center">11</td>
|
||||
</tr>
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={9} className="px-2 py-2 text-center text-gray-400">
|
||||
등록된 하단마감재가 없습니다
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 특이사항 */}
|
||||
{/* ========== 4. 절곡물 ========== */}
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">4. 절곡물</p>
|
||||
|
||||
{/* 4-1. 가이드레일 */}
|
||||
<div className="mb-3">
|
||||
<p className="text-[10px] font-medium mb-1">4-1. 가이드레일 - EGI 1.5ST + 마감재 EGI 1.1ST + 별도마감재 SUS 1.1ST</p>
|
||||
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className={`${thBase} w-32`}>백면형 (120X70)</th>
|
||||
<th className={`${thBase} w-24`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className="px-1 py-1 w-14">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{MOCK_GUIDE_RAIL_ITEMS.map((item, i) => (
|
||||
<tr key={i} className="border-b border-gray-300">
|
||||
{i === 0 && (
|
||||
<td className={tdCenter} rowSpan={MOCK_GUIDE_RAIL_ITEMS.length}>
|
||||
<div className={`${imgPlaceholder} h-20 w-full`}>IMG</div>
|
||||
</td>
|
||||
)}
|
||||
<td className={tdCenter}>{item.name}</td>
|
||||
<td className={tdCenter}>{item.spec}</td>
|
||||
<td className="px-1 py-1 text-center">{item.qty}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 연기차단재 */}
|
||||
<div className="mt-1 border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
|
||||
<th className={`${thBase} w-32`}> </th>
|
||||
<th className={`${thBase} w-24`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className="px-1 py-1 w-14">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className={tdCenter}>
|
||||
<div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
|
||||
</td>
|
||||
<td className={tdCenter}>{MOCK_GUIDE_SMOKE.name}</td>
|
||||
<td className={tdCenter}>{MOCK_GUIDE_SMOKE.spec}</td>
|
||||
<td className="px-1 py-1 text-center">{MOCK_GUIDE_SMOKE.qty}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p className="mt-1 text-[10px]">
|
||||
<span className="font-medium">* 가이드레일 마감재 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 4-2. 케이스(셔터박스) */}
|
||||
<div className="mb-3">
|
||||
<p className="text-[10px] font-medium mb-1">4-2. 케이스(셔터박스) - EGI 1.5ST</p>
|
||||
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className={`${thBase} w-32`}> </th>
|
||||
<th className={`${thBase} w-24`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className="px-1 py-1 w-14">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{MOCK_CASE_ITEMS.map((item, i) => (
|
||||
<tr key={i} className="border-b border-gray-300">
|
||||
{i === 0 && (
|
||||
<td className={tdCenter} rowSpan={MOCK_CASE_ITEMS.length}>
|
||||
<div className={`${imgPlaceholder} h-24 w-full`}>IMG</div>
|
||||
</td>
|
||||
)}
|
||||
<td className={tdCenter}>{item.name}</td>
|
||||
<td className={tdCenter}>{item.spec}</td>
|
||||
<td className="px-1 py-1 text-center">{item.qty}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 연기차단재 */}
|
||||
<div className="mt-1 border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
|
||||
<th className={`${thBase} w-32`}> </th>
|
||||
<th className={`${thBase} w-24`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className="px-1 py-1 w-14">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className={tdCenter}>
|
||||
<div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
|
||||
</td>
|
||||
<td className={tdCenter}>{MOCK_CASE_SMOKE.name}</td>
|
||||
<td className={tdCenter}>{MOCK_CASE_SMOKE.spec}</td>
|
||||
<td className="px-1 py-1 text-center">{MOCK_CASE_SMOKE.qty}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p className="mt-1 text-[10px]">
|
||||
<span className="font-medium">* 전면부, 판넬부 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 4-3. 하단마감재 (토글: 스크린 / 절재) */}
|
||||
<div className="mb-3">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<button
|
||||
onClick={() => setBottomFinishView('screen')}
|
||||
className={`px-3 py-1 text-[10px] font-bold border rounded ${
|
||||
bottomFinishView === 'screen'
|
||||
? 'bg-gray-800 text-white border-gray-800'
|
||||
: 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
# 스크린의 경우
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setBottomFinishView('steel')}
|
||||
className={`px-3 py-1 text-[10px] font-bold border rounded ${
|
||||
bottomFinishView === 'steel'
|
||||
? 'bg-gray-800 text-white border-gray-800'
|
||||
: 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
# 절재의 경우
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{bottomFinishView === 'screen' ? (
|
||||
<>
|
||||
<p className="text-[10px] font-medium mb-1">
|
||||
4-3. 하단마감재 - 하단마감재(EGI 1.5ST) + 하단보강엘비(EGI 1.5ST) + 하단 보강평철(EGI 1.1ST) + 하단 무게평철(50X12T)
|
||||
</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className={`${thBase} w-20`}>항목</th>
|
||||
<th className={`${thBase} w-14`}>규격</th>
|
||||
<th className={`${thBase} w-16`}>길이</th>
|
||||
<th className={`${thBase} w-10`}>수량</th>
|
||||
<th className={`${thBase} w-20`}>항목</th>
|
||||
<th className={`${thBase} w-14`}>규격</th>
|
||||
<th className={`${thBase} w-16`}>길이</th>
|
||||
<th className="px-1 py-1 w-10">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{MOCK_BOTTOM_SCREEN.map((row, i) => (
|
||||
<tr key={i} className="border-b border-gray-300">
|
||||
<td className={tdBase}>{row.name}</td>
|
||||
<td className={tdCenter}>{row.spec}</td>
|
||||
<td className={tdCenter}>{row.l1}</td>
|
||||
<td className={tdCenter}>{row.q1}</td>
|
||||
<td className={tdBase}>{row.name2}</td>
|
||||
<td className={tdCenter}>{row.spec2}</td>
|
||||
<td className={tdCenter}>{row.l2}</td>
|
||||
<td className="px-1 py-1 text-center">{row.q2}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-[10px] font-medium mb-1">
|
||||
4-3. 하단마감재 -EGI 1.5ST
|
||||
</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className={`${thBase} w-32`}>하단마감재</th>
|
||||
<th className={`${thBase} w-14`}>규격</th>
|
||||
<th className={`${thBase} w-16`}>길이</th>
|
||||
<th className="px-1 py-1 w-10">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className={tdCenter}>
|
||||
<div className={`${imgPlaceholder} h-16 w-full`}>IMG</div>
|
||||
</td>
|
||||
<td className={tdCenter}>{MOCK_BOTTOM_STEEL.spec}</td>
|
||||
<td className={tdCenter}>{MOCK_BOTTOM_STEEL.length}</td>
|
||||
<td className="px-1 py-1 text-center">{MOCK_BOTTOM_STEEL.qty}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ========== 5. 부자재 ========== */}
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">5. 부자재</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className={`${thBase} w-24`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className={`${thBase} w-10`}>수량</th>
|
||||
<th className={`${thBase} w-24`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className="px-1 py-1 w-10">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{MOCK_SUBSIDIARY.map((row, i) => (
|
||||
<tr key={i} className="border-b border-gray-300">
|
||||
<td className={tdBase}>{row.leftItem}</td>
|
||||
<td className={tdCenter}>{row.leftSpec}</td>
|
||||
<td className={tdCenter}>{row.leftQty}</td>
|
||||
<td className={tdBase}>{row.rightItem}</td>
|
||||
<td className={tdCenter}>{row.rightSpec}</td>
|
||||
<td className="px-1 py-1 text-center">{row.rightQty}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ========== 특이사항 ========== */}
|
||||
{remarks && (
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">【 특이사항 】</p>
|
||||
@@ -611,4 +635,4 @@ export function SalesOrderDocument({
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 출고 문서 공통 컴포넌트 (수주서 레이아웃 기반)
|
||||
* - 출고증, 납품확인서에서 제목만 변경하여 사용
|
||||
* - 수주서(SalesOrderDocument)와 동일한 레이아웃
|
||||
* 출고 문서 공통 컴포넌트 (기획서 D1.8 기준 리디자인)
|
||||
* - 출고증: showDispatchInfo + showLotColumn
|
||||
* - 납품확인서: 기본값 (배차정보 없음, LOT 컬럼 없음)
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { ShipmentDetail } from '../types';
|
||||
import { DELIVERY_METHOD_LABELS } from '../types';
|
||||
import { ConstructionApprovalTable } from '@/components/document-system';
|
||||
@@ -14,56 +15,78 @@ interface ShipmentOrderDocumentProps {
|
||||
title: string;
|
||||
data: ShipmentDetail;
|
||||
showDispatchInfo?: boolean;
|
||||
showLotColumn?: boolean;
|
||||
}
|
||||
|
||||
export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }: ShipmentOrderDocumentProps) {
|
||||
// 스크린 제품 필터링 (productGroups 기반)
|
||||
const screenProducts = data.productGroups.filter(g =>
|
||||
g.productName?.includes('스크린') ||
|
||||
g.productName?.includes('방화') ||
|
||||
g.productName?.includes('셔터')
|
||||
);
|
||||
// ===== 문서 전용 목데이터 =====
|
||||
|
||||
// 전체 부품 목록
|
||||
const allParts = [
|
||||
...data.productGroups.flatMap(g => g.parts),
|
||||
...data.otherParts,
|
||||
];
|
||||
const MOCK_SCREEN_ROWS = [
|
||||
{ no: 1, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
|
||||
{ no: 2, type: '이(마)', code: 'FA123', openW: 4300, openH: 4300, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
|
||||
];
|
||||
|
||||
// 모터 아이템 필터링
|
||||
const motorItems = allParts.filter(part =>
|
||||
part.itemName?.includes('모터')
|
||||
);
|
||||
const MOCK_STEEL_ROWS = [
|
||||
{ no: 1, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
|
||||
{ no: 2, code: 'FA123', openW: 4300, openH: 3000, madeW: 4300, madeH: 3000, guideRail: '백면형', shaft: 5, jointBar: 5, caseInch: 5, bracket: '500X300 380X180', capacity: 300, finish: 'SUS마감' },
|
||||
];
|
||||
|
||||
// 브라켓 아이템 필터링
|
||||
const bracketItems = allParts.filter(part =>
|
||||
part.itemName?.includes('브라켓')
|
||||
);
|
||||
const MOCK_MOTOR_LEFT = [
|
||||
{ item: '모터', type: '380V 단상', spec: 'KD-150K', qty: 6, lot: '123123' },
|
||||
{ item: '브라켓트', type: '-', spec: '380X180', qty: 6, lot: '123123' },
|
||||
{ item: '앵글', type: '밑침통 영금', spec: '40*40*380', qty: 4, lot: '123123' },
|
||||
];
|
||||
|
||||
// 가이드레일 아이템 필터링
|
||||
const guideRailItems = allParts.filter(part =>
|
||||
part.itemName?.includes('가이드') ||
|
||||
part.itemName?.includes('레일')
|
||||
);
|
||||
const MOCK_MOTOR_RIGHT = [
|
||||
{ item: '전동개폐기', type: '릴박스', spec: '-', qty: 1, lot: '123123' },
|
||||
{ item: '전동개폐기', type: '매입', spec: '-', qty: 1, lot: '123123' },
|
||||
];
|
||||
|
||||
// 케이스 아이템 필터링
|
||||
const caseItems = allParts.filter(part =>
|
||||
part.itemName?.includes('케이스') ||
|
||||
part.itemName?.includes('셔터박스')
|
||||
);
|
||||
const MOCK_GUIDE_RAIL_ITEMS = [
|
||||
{ name: '항목명', spec: 'L: 3,000', qty: 22 },
|
||||
{ name: '하부BASE', spec: '130X80', qty: 22 },
|
||||
];
|
||||
|
||||
// 하단마감재 아이템 필터링
|
||||
const bottomFinishItems = allParts.filter(part =>
|
||||
part.itemName?.includes('하단') ||
|
||||
part.itemName?.includes('마감')
|
||||
);
|
||||
const MOCK_GUIDE_SMOKE = { name: '연기차단재(W50)', spec: '2,438', qty: 4 };
|
||||
|
||||
const MOCK_CASE_ITEMS = [
|
||||
{ name: '500X330', spec: 'L: 4,000', qty: 3 },
|
||||
{ name: '500X330', spec: 'L: 5,000', qty: 4 },
|
||||
{ name: '상부덮개', spec: '1219X389', qty: 55 },
|
||||
{ name: '측면부 (마구리)', spec: '500X355', qty: '500X355' },
|
||||
];
|
||||
|
||||
const MOCK_CASE_SMOKE = { name: '연기차단재(W80)', spec: '3,000', qty: 4 };
|
||||
|
||||
const MOCK_BOTTOM_SCREEN = [
|
||||
{ name: '하단마감재', spec: '60X40', l1: 'L: 3,000', q1: 6, name2: '하단마감재', spec2: '60X40', l2: 'L: 4,000', q2: 6 },
|
||||
{ name: '하단보강엘비', spec: '60X17', l1: 'L: 3,000', q1: 6, name2: '하단보강엘비', spec2: '60X17', l2: 'L: 4,000', q2: 6 },
|
||||
{ name: '하단보강평철', spec: '-', l1: 'L: 3,000', q1: 6, name2: '하단보강평철', spec2: '-', l2: 'L: 4,000', q2: 6 },
|
||||
{ name: '하단무게평철', spec: '50X12T', l1: 'L: 3,000', q1: 6, name2: '하단무게평철', spec2: '50X12T', l2: 'L: 4,000', q2: 6 },
|
||||
];
|
||||
|
||||
const MOCK_BOTTOM_STEEL = { spec: '60X40', length: 'L: 3,000', qty: 22 };
|
||||
|
||||
const MOCK_SUBSIDIARY = [
|
||||
{ leftItem: '감기사프트', leftSpec: '4인치 4500', leftQty: 6, rightItem: '각파이프', rightSpec: '6000', rightQty: 4 },
|
||||
{ leftItem: '조인트바', leftSpec: '300', leftQty: 6, rightItem: '환봉', rightSpec: '3000', rightQty: 5 },
|
||||
];
|
||||
|
||||
// ===== 공통 스타일 =====
|
||||
const thBase = 'border-r border-gray-400 px-1 py-1';
|
||||
const tdBase = 'border-r border-gray-300 px-1 py-1';
|
||||
const tdCenter = `${tdBase} text-center`;
|
||||
const imgPlaceholder = 'flex items-center justify-center border border-dashed border-gray-300 text-gray-400';
|
||||
|
||||
export function ShipmentOrderDocument({ title, data, showDispatchInfo = false, showLotColumn = false }: ShipmentOrderDocumentProps) {
|
||||
const [bottomFinishView, setBottomFinishView] = useState<'screen' | 'steel'>('screen');
|
||||
|
||||
const deliveryMethodLabel = DELIVERY_METHOD_LABELS[data.deliveryMethod] || '-';
|
||||
const fullAddress = [data.address, data.addressDetail].filter(Boolean).join(' ') || data.deliveryAddress || '-';
|
||||
const motorRows = Math.max(MOCK_MOTOR_LEFT.length, MOCK_MOTOR_RIGHT.length);
|
||||
|
||||
return (
|
||||
<div className="bg-white p-8 min-h-full text-[11px]">
|
||||
{/* 헤더: 제목 (좌측) + 결재란 (우측) */}
|
||||
{/* ========== 헤더: 제목 + 결재란 ========== */}
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-widest mb-2">{title}</h1>
|
||||
@@ -74,30 +97,26 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 결재란 (우측) */}
|
||||
<ConstructionApprovalTable
|
||||
approvers={{ writer: { name: '홍길동' } }}
|
||||
/>
|
||||
<ConstructionApprovalTable approvers={{ writer: { name: '홍길동' } }} />
|
||||
</div>
|
||||
|
||||
{/* 상품명 / 제품명 / 로트번호 / 인정번호 */}
|
||||
{/* ========== 로트번호 / 제품명 / 제품코드 / 인정번호 ========== */}
|
||||
<table className="border border-gray-400 w-full mb-3 text-[10px]">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">상품명</td>
|
||||
<td className="px-2 py-1 border-r border-gray-400">{data.productGroups[0]?.productName || '-'}</td>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품명</td>
|
||||
<td className="px-2 py-1 border-r border-gray-400">{data.products[0]?.itemName || '-'}</td>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">로트번호</td>
|
||||
<td className="px-2 py-1 border-r border-gray-400">{data.lotNo}</td>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품명</td>
|
||||
<td className="px-2 py-1 border-r border-gray-400">{data.productGroups[0]?.productName || '-'}</td>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">제품코드</td>
|
||||
<td className="px-2 py-1 border-r border-gray-400">KWS01</td>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium border-r border-gray-400 whitespace-nowrap">인정번호</td>
|
||||
<td className="px-2 py-1">-</td>
|
||||
<td className="px-2 py-1">ABC1234</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* 3열 섹션: 신청업체 | 신청내용 | 납품정보 */}
|
||||
{/* ========== 3열 섹션: 신청업체 | 신청내용 | 납품정보 ========== */}
|
||||
<div className="border border-gray-400 mb-4">
|
||||
<div className="grid grid-cols-3">
|
||||
{/* 신청업체 */}
|
||||
@@ -110,21 +129,17 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
|
||||
<td className="px-2 py-1">{data.scheduledDate}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">업체명</td>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">수주처</td>
|
||||
<td className="px-2 py-1">{data.customerName}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">수주 담당자</td>
|
||||
<td className="px-2 py-1">{data.registrant || '-'}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">담당자 연락처</td>
|
||||
<td className="px-2 py-1">{data.driverContact || '-'}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">배송지 주소</td>
|
||||
<td className="px-2 py-1">{fullAddress}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -146,14 +161,10 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">출고일</td>
|
||||
<td className="px-2 py-1">{data.shipmentDate || data.scheduledDate}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">셔터출수량</td>
|
||||
<td className="px-2 py-1">{data.productGroups.length}개소</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium"> </td>
|
||||
<td className="px-2 py-1"> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -175,21 +186,22 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">인수자연락처</td>
|
||||
<td className="px-2 py-1">{data.receiverContact || '-'}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium">배송방법</td>
|
||||
<td className="px-2 py-1">{deliveryMethodLabel}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bg-gray-100 px-2 py-1 font-medium"> </td>
|
||||
<td className="px-2 py-1"> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/* 배송지 주소 - 한 줄 병합 */}
|
||||
<div className="border-t border-gray-400 flex">
|
||||
<div className="bg-gray-100 px-2 py-1 w-20 shrink-0 font-medium">배송지 주소</div>
|
||||
<div className="px-2 py-1 flex-1">{fullAddress}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 배차정보 (출고증에서만 표시) */}
|
||||
{/* ========== 배차정보 (출고증에서만) ========== */}
|
||||
{showDispatchInfo && (() => {
|
||||
const dispatch = data.vehicleDispatches[0];
|
||||
return (
|
||||
@@ -221,366 +233,406 @@ export function ShipmentOrderDocument({ title, data, showDispatchInfo = false }:
|
||||
);
|
||||
})()}
|
||||
|
||||
<p className="text-[10px] mb-4">아래와 같이 주문하오니 품질 및 납기일을 준수하여 주시기 바랍니다.</p>
|
||||
{/* ========== 자재 및 철거 내역 헤더 ========== */}
|
||||
<div className="bg-gray-800 text-white text-center py-2 font-bold mb-4">
|
||||
자재 및 철거 내역
|
||||
</div>
|
||||
|
||||
{/* 1. 스크린 테이블 */}
|
||||
{/* ========== 1. 스크린 ========== */}
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">1. 스크린</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-8" rowSpan={2}>No</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-16" rowSpan={2}>품류</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>부호</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1" colSpan={2}>오픈사이즈</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1" colSpan={2}>제작사이즈</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-24" rowSpan={2}>가이드레일<br/>유형</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>샤프트<br/>(인치)</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1 w-14" rowSpan={2}>케이스<br/>(인치)</th>
|
||||
<th className="border-r border-gray-400 px-1 py-1" colSpan={2}>모터</th>
|
||||
<th className={`${thBase} w-8`} rowSpan={2}>No</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>품류</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>부호</th>
|
||||
<th className={thBase} colSpan={2}>오픈사이즈</th>
|
||||
<th className={thBase} colSpan={2}>제작사이즈</th>
|
||||
<th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
|
||||
<th className={thBase} colSpan={2}>모터</th>
|
||||
<th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
|
||||
</tr>
|
||||
<tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
|
||||
<th className="border-r border-gray-400 px-1">가로</th>
|
||||
<th className="border-r border-gray-400 px-1">세로</th>
|
||||
<th className="border-r border-gray-400 px-1">가로</th>
|
||||
<th className="border-r border-gray-400 px-1">세로</th>
|
||||
<th className="border-r border-gray-400 px-1">브라켓트</th>
|
||||
<th className="border-r border-gray-400 px-1">용량Kg</th>
|
||||
<th className={thBase}>가로</th>
|
||||
<th className={thBase}>세로</th>
|
||||
<th className={thBase}>가로</th>
|
||||
<th className={thBase}>세로</th>
|
||||
<th className={thBase}>브라켓트</th>
|
||||
<th className={thBase}>용량Kg</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{screenProducts.length > 0 ? (
|
||||
screenProducts.map((group, index) => {
|
||||
// specification에서 가로x세로 파싱 (예: "2000 x 2500 mm")
|
||||
const specMatch = group.specification?.match(/(\d+)\s*[xX×]\s*(\d+)/);
|
||||
const width = specMatch ? specMatch[1] : '-';
|
||||
const height = specMatch ? specMatch[2] : '-';
|
||||
|
||||
return (
|
||||
<tr key={group.id} className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{index + 1}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{group.productName || '-'}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">-</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{width}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{height}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{width}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">{height}</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center text-[9px]">백면형<br/>(120X70)</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">5</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">380X180</td>
|
||||
<td className="border-r border-gray-300 px-1 py-1 text-center">300</td>
|
||||
<td className="px-1 py-1 text-center">SUS마감</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={13} className="px-2 py-3 text-center text-gray-400">
|
||||
등록된 스크린 제품이 없습니다
|
||||
</td>
|
||||
{MOCK_SCREEN_ROWS.map((row) => (
|
||||
<tr key={row.no} className="border-b border-gray-300">
|
||||
<td className={tdCenter}>{row.no}</td>
|
||||
<td className={tdCenter}>{row.type}</td>
|
||||
<td className={tdCenter}>{row.code}</td>
|
||||
<td className={tdCenter}>{row.openW.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.openH.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.madeW.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.madeH.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.guideRail}</td>
|
||||
<td className={tdCenter}>{row.shaft}</td>
|
||||
<td className={tdCenter}>{row.caseInch}</td>
|
||||
<td className={tdCenter}>{row.bracket}</td>
|
||||
<td className={tdCenter}>{row.capacity}</td>
|
||||
<td className="px-1 py-1 text-center">{row.finish}</td>
|
||||
</tr>
|
||||
)}
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. 모터 테이블 */}
|
||||
{/* ========== 2. 절재 ========== */}
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">2. 모터</p>
|
||||
<p className="font-bold mb-2">2. 절재</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-14">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-28">항목</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구분</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-28">규격</th>
|
||||
<th className="px-2 py-1 w-14">수량</th>
|
||||
<th className={`${thBase} w-8`} rowSpan={2}>No.</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>부호</th>
|
||||
<th className={thBase} colSpan={2}>오픈사이즈</th>
|
||||
<th className={thBase} colSpan={2}>제작사이즈</th>
|
||||
<th className={`${thBase} w-16`} rowSpan={2}>가이드<br />레일</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>사프트<br />(인치)</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>조인트바<br />(규격)</th>
|
||||
<th className={`${thBase} w-14`} rowSpan={2}>케이스<br />(인치)</th>
|
||||
<th className={thBase} colSpan={2}>모터</th>
|
||||
<th className="px-1 py-1 w-16" rowSpan={2}>마감</th>
|
||||
</tr>
|
||||
<tr className="bg-gray-50 border-b border-gray-400 text-[9px]">
|
||||
<th className={thBase}>가로</th>
|
||||
<th className={thBase}>세로</th>
|
||||
<th className={thBase}>가로</th>
|
||||
<th className={thBase}>세로</th>
|
||||
<th className={thBase}>브라켓트</th>
|
||||
<th className={thBase}>용량Kg</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(motorItems.length > 0 || bracketItems.length > 0) ? (
|
||||
<>
|
||||
{/* 모터 행 */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{motorItems[0]?.specification || 'KD-150K'}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">{motorItems[0]?.quantity ?? '-'}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">모터(380V 단상)</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">모터 용량</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{motorItems[1]?.specification || 'KD-150K'}</td>
|
||||
<td className="px-2 py-1 text-center">{motorItems[1]?.quantity ?? '-'}</td>
|
||||
</tr>
|
||||
{/* 브라켓트 행 */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{bracketItems[0]?.specification || '380X180 [2-4"]'}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[0]?.quantity ?? '-'}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{bracketItems[1]?.specification || '380X180 [2-4"]'}</td>
|
||||
<td className="px-2 py-1 text-center">{bracketItems[1]?.quantity ?? '-'}</td>
|
||||
</tr>
|
||||
{/* 브라켓트 추가 행 */}
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1">브라켓트</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">밑침통 영금</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1">{bracketItems[2]?.specification || '∠40-40 L380'}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">{bracketItems[2]?.quantity ?? '-'}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1"></td>
|
||||
<td className="border-r border-gray-300 px-2 py-1"></td>
|
||||
<td className="border-r border-gray-300 px-2 py-1"></td>
|
||||
<td className="px-2 py-1 text-center"></td>
|
||||
</tr>
|
||||
</>
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={8} className="px-2 py-3 text-center text-gray-400">
|
||||
등록된 모터/브라켓 품목이 없습니다
|
||||
</td>
|
||||
{MOCK_STEEL_ROWS.map((row) => (
|
||||
<tr key={row.no} className="border-b border-gray-300">
|
||||
<td className={tdCenter}>{row.no}</td>
|
||||
<td className={tdCenter}>{row.code}</td>
|
||||
<td className={tdCenter}>{row.openW.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.openH.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.madeW.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.madeH.toLocaleString()}</td>
|
||||
<td className={tdCenter}>{row.guideRail}</td>
|
||||
<td className={tdCenter}>{row.shaft}</td>
|
||||
<td className={tdCenter}>{row.jointBar}</td>
|
||||
<td className={tdCenter}>{row.caseInch}</td>
|
||||
<td className={tdCenter}>{row.bracket}</td>
|
||||
<td className={tdCenter}>{row.capacity}</td>
|
||||
<td className="px-1 py-1 text-center">{row.finish}</td>
|
||||
</tr>
|
||||
)}
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. 절곡물 */}
|
||||
{/* ========== 3. 모터 ========== */}
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">3. 절곡물</p>
|
||||
|
||||
{/* 3-1. 가이드레일 */}
|
||||
<div className="mb-3">
|
||||
<p className="text-[10px] font-medium mb-1">3-1. 가이드레일 - EGI 1.5ST + 마감재 EGI 1.1ST + 별도마감재 SUS 1.1ST</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-24">백면형 (120X70)</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-24">측면형 (120X120)</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="px-2 py-1 w-12">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{guideRailItems.length > 0 ? (
|
||||
<>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
|
||||
<div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">{guideRailItems[0]?.quantity ?? 22}</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={4}>
|
||||
<div className="flex items-center justify-center h-20 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 3,000</td>
|
||||
<td className="px-2 py-1 text-center">{guideRailItems[1]?.quantity ?? 22}</td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">하부BASE<br/>[130X80]</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">22</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center"></td>
|
||||
<td className="px-2 py-1 text-center"></td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center"></td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center"></td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center"></td>
|
||||
<td className="px-2 py-1 text-center"></td>
|
||||
</tr>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">KSS01</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center bg-gray-100">제품명</td>
|
||||
<td className="px-2 py-1 text-center">KSS01</td>
|
||||
</tr>
|
||||
</>
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-2 py-2 text-center text-gray-400">
|
||||
등록된 가이드레일이 없습니다
|
||||
</td>
|
||||
<p className="font-bold mb-2">3. 모터</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className={`${thBase} w-20`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>구분</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className={`${thBase} w-10`}>수량</th>
|
||||
{showLotColumn && <th className={`${thBase} w-16`}>입고 LOT</th>}
|
||||
<th className={`${thBase} w-20`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>구분</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className={showLotColumn ? `${thBase} w-10` : 'px-1 py-1 w-10'}>수량</th>
|
||||
{showLotColumn && <th className="px-1 py-1 w-16">입고 LOT</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Array.from({ length: motorRows }).map((_, i) => {
|
||||
const left = MOCK_MOTOR_LEFT[i];
|
||||
const right = MOCK_MOTOR_RIGHT[i];
|
||||
return (
|
||||
<tr key={i} className="border-b border-gray-300">
|
||||
<td className={tdBase}>{left?.item || ''}</td>
|
||||
<td className={tdBase}>{left?.type || ''}</td>
|
||||
<td className={tdBase}>{left?.spec || ''}</td>
|
||||
<td className={tdCenter}>{left?.qty ?? ''}</td>
|
||||
{showLotColumn && <td className={tdCenter}>{left?.lot || ''}</td>}
|
||||
<td className={tdBase}>{right?.item || ''}</td>
|
||||
<td className={tdBase}>{right?.type || ''}</td>
|
||||
<td className={tdBase}>{right?.spec || ''}</td>
|
||||
<td className={showLotColumn ? tdCenter : 'px-1 py-1 text-center'}>{right?.qty ?? ''}</td>
|
||||
{showLotColumn && <td className="px-1 py-1 text-center">{right?.lot || ''}</td>}
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 연기차단재 정보 */}
|
||||
<div className="mt-2 border border-gray-400">
|
||||
<table className="w-full text-[10px]">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
|
||||
<div className="font-medium">연기차단재(W50)</div>
|
||||
<div>• 가이드레일 마감재</div>
|
||||
<div className="text-red-600 font-medium">양측에 설치</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
|
||||
<div>EGI 0.8T +</div>
|
||||
<div>화이버글라스코팅직물</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
|
||||
<div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">3,000</td>
|
||||
<td className="px-2 py-1 text-center">4,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">44</td>
|
||||
<td className="px-2 py-1 text-center">1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 text-[10px]">
|
||||
<span className="font-medium">• 별도 추가사항</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3-2. 케이스(셔터박스) */}
|
||||
<div className="mb-3">
|
||||
<p className="text-[10px] font-medium mb-1">3-2. 케이스(셔터박스) - EGI 1.5ST</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-24"> </th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-24">규격</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">길이</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">측면부</th>
|
||||
<th className="px-2 py-1 w-12">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{caseItems.length > 0 ? (
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400" rowSpan={3}>
|
||||
<div className="flex items-center justify-center h-16 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
|
||||
500X330<br/>(150X300,<br/>400K원)
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
|
||||
L: 4,000<br/>L: 5,000<br/>상부덮개<br/>(1219X389)
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-[9px]">
|
||||
3<br/>4<br/>55
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">500X355</td>
|
||||
<td className="px-2 py-1 text-center">22</td>
|
||||
</tr>
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-2 py-2 text-center text-gray-400">
|
||||
등록된 케이스가 없습니다
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 연기차단재 정보 */}
|
||||
<div className="mt-2 border border-gray-400">
|
||||
<table className="w-full text-[10px]">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
|
||||
<div className="font-medium">연기차단재(W50)</div>
|
||||
<div>• 판넬부, 전면부</div>
|
||||
<div className="text-red-600 font-medium">감싸에 설치</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 w-32" rowSpan={2}>
|
||||
<div>EGI 0.8T +</div>
|
||||
<div>화이버글라스코팅직물</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center text-gray-400 w-20" rowSpan={2}>
|
||||
<div className="flex items-center justify-center h-10 border border-dashed border-gray-300">
|
||||
IMG
|
||||
</div>
|
||||
</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 bg-gray-100">규격</td>
|
||||
<td className="px-2 py-1 text-center">3,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="border-r border-gray-300 px-2 py-1 bg-gray-100">수량</td>
|
||||
<td className="px-2 py-1 text-center">44</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3-3. 하단마감재 */}
|
||||
<div className="mb-3">
|
||||
<p className="text-[10px] font-medium mb-1">3-3. 하단마감재 - 하단마감재(EGI 1.5ST) + 하단보강앨비(EGI 1.5ST) + 하단 보강철(EGI 1.1ST) + 하단 무게형 철(50X12T)</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-12">수량</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-20">구성품</th>
|
||||
<th className="border-r border-gray-400 px-2 py-1 w-16">길이</th>
|
||||
<th className="px-2 py-1 w-12">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{bottomFinishItems.length > 0 ? (
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단마감재<br/>(60X40)</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단보강<br/>(60X17)</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">11</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-[9px]">하단무게<br/>[50X12T]</td>
|
||||
<td className="border-r border-gray-300 px-2 py-1 text-center">L: 4,000</td>
|
||||
<td className="px-2 py-1 text-center">11</td>
|
||||
</tr>
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={9} className="px-2 py-2 text-center text-gray-400">
|
||||
등록된 하단마감재가 없습니다
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 특이사항 */}
|
||||
{/* ========== 4. 절곡물 ========== */}
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">4. 절곡물</p>
|
||||
|
||||
{/* 4-1. 가이드레일 */}
|
||||
<div className="mb-3">
|
||||
<p className="text-[10px] font-medium mb-1">4-1. 가이드레일 - EGI 1.5ST + 마감재 EGI 1.1ST + 별도마감재 SUS 1.1ST</p>
|
||||
|
||||
{/* 메인 테이블 */}
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className={`${thBase} w-32`}>백면형 (120X70)</th>
|
||||
<th className={`${thBase} w-24`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className="px-1 py-1 w-14">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{MOCK_GUIDE_RAIL_ITEMS.map((item, i) => (
|
||||
<tr key={i} className="border-b border-gray-300">
|
||||
{i === 0 && (
|
||||
<td className={tdCenter} rowSpan={MOCK_GUIDE_RAIL_ITEMS.length}>
|
||||
<div className={`${imgPlaceholder} h-20 w-full`}>IMG</div>
|
||||
</td>
|
||||
)}
|
||||
<td className={tdCenter}>{item.name}</td>
|
||||
<td className={tdCenter}>{item.spec}</td>
|
||||
<td className="px-1 py-1 text-center">{item.qty}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 연기차단재 */}
|
||||
<div className="mt-1 border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
|
||||
<th className={`${thBase} w-32`}> </th>
|
||||
<th className={`${thBase} w-24`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className="px-1 py-1 w-14">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className={tdCenter}>
|
||||
<div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
|
||||
</td>
|
||||
<td className={tdCenter}>{MOCK_GUIDE_SMOKE.name}</td>
|
||||
<td className={tdCenter}>{MOCK_GUIDE_SMOKE.spec}</td>
|
||||
<td className="px-1 py-1 text-center">{MOCK_GUIDE_SMOKE.qty}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p className="mt-1 text-[10px]">
|
||||
<span className="font-medium">* 가이드레일 마감재 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 4-2. 케이스(셔터박스) */}
|
||||
<div className="mb-3">
|
||||
<p className="text-[10px] font-medium mb-1">4-2. 케이스(셔터박스) - EGI 1.5ST</p>
|
||||
|
||||
{/* 메인 테이블 */}
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className={`${thBase} w-32`}> </th>
|
||||
<th className={`${thBase} w-24`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className="px-1 py-1 w-14">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{MOCK_CASE_ITEMS.map((item, i) => (
|
||||
<tr key={i} className="border-b border-gray-300">
|
||||
{i === 0 && (
|
||||
<td className={tdCenter} rowSpan={MOCK_CASE_ITEMS.length}>
|
||||
<div className={`${imgPlaceholder} h-24 w-full`}>IMG</div>
|
||||
</td>
|
||||
)}
|
||||
<td className={tdCenter}>{item.name}</td>
|
||||
<td className={tdCenter}>{item.spec}</td>
|
||||
<td className="px-1 py-1 text-center">{item.qty}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 연기차단재 */}
|
||||
<div className="mt-1 border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-400 text-[10px]">
|
||||
<th className={`${thBase} w-32`}> </th>
|
||||
<th className={`${thBase} w-24`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className="px-1 py-1 w-14">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className={tdCenter}>
|
||||
<div className={`${imgPlaceholder} h-14 w-full`}>IMG</div>
|
||||
</td>
|
||||
<td className={tdCenter}>{MOCK_CASE_SMOKE.name}</td>
|
||||
<td className={tdCenter}>{MOCK_CASE_SMOKE.spec}</td>
|
||||
<td className="px-1 py-1 text-center">{MOCK_CASE_SMOKE.qty}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p className="mt-1 text-[10px]">
|
||||
<span className="font-medium">* 전면부, 판넬부 <span className="text-red-600 font-bold">양측에</span> 설치</span> - EGI 0.8T + 화이버글라스코팅직물
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 4-3. 하단마감재 (토글: 스크린 / 절재) */}
|
||||
<div className="mb-3">
|
||||
{/* 토글 버튼 */}
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<button
|
||||
onClick={() => setBottomFinishView('screen')}
|
||||
className={`px-3 py-1 text-[10px] font-bold border rounded ${
|
||||
bottomFinishView === 'screen'
|
||||
? 'bg-gray-800 text-white border-gray-800'
|
||||
: 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
# 스크린의 경우
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setBottomFinishView('steel')}
|
||||
className={`px-3 py-1 text-[10px] font-bold border rounded ${
|
||||
bottomFinishView === 'steel'
|
||||
? 'bg-gray-800 text-white border-gray-800'
|
||||
: 'bg-white text-gray-600 border-gray-400 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
# 절재의 경우
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{bottomFinishView === 'screen' ? (
|
||||
<>
|
||||
<p className="text-[10px] font-medium mb-1">
|
||||
4-3. 하단마감재 - 하단마감재(EGI 1.5ST) + 하단보강엘비(EGI 1.5ST) + 하단 보강평철(EGI 1.1ST) + 하단 무게평철(50X12T)
|
||||
</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className={`${thBase} w-20`}>항목</th>
|
||||
<th className={`${thBase} w-14`}>규격</th>
|
||||
<th className={`${thBase} w-16`}>길이</th>
|
||||
<th className={`${thBase} w-10`}>수량</th>
|
||||
<th className={`${thBase} w-20`}>항목</th>
|
||||
<th className={`${thBase} w-14`}>규격</th>
|
||||
<th className={`${thBase} w-16`}>길이</th>
|
||||
<th className="px-1 py-1 w-10">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{MOCK_BOTTOM_SCREEN.map((row, i) => (
|
||||
<tr key={i} className="border-b border-gray-300">
|
||||
<td className={tdBase}>{row.name}</td>
|
||||
<td className={tdCenter}>{row.spec}</td>
|
||||
<td className={tdCenter}>{row.l1}</td>
|
||||
<td className={tdCenter}>{row.q1}</td>
|
||||
<td className={tdBase}>{row.name2}</td>
|
||||
<td className={tdCenter}>{row.spec2}</td>
|
||||
<td className={tdCenter}>{row.l2}</td>
|
||||
<td className="px-1 py-1 text-center">{row.q2}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-[10px] font-medium mb-1">
|
||||
4-3. 하단마감재 -EGI 1.5ST
|
||||
</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className={`${thBase} w-32`}>하단마감재</th>
|
||||
<th className={`${thBase} w-14`}>규격</th>
|
||||
<th className={`${thBase} w-16`}>길이</th>
|
||||
<th className="px-1 py-1 w-10">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-b border-gray-300">
|
||||
<td className={tdCenter}>
|
||||
<div className={`${imgPlaceholder} h-16 w-full`}>IMG</div>
|
||||
</td>
|
||||
<td className={tdCenter}>{MOCK_BOTTOM_STEEL.spec}</td>
|
||||
<td className={tdCenter}>{MOCK_BOTTOM_STEEL.length}</td>
|
||||
<td className="px-1 py-1 text-center">{MOCK_BOTTOM_STEEL.qty}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ========== 5. 부자재 ========== */}
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">5. 부자재</p>
|
||||
<div className="border border-gray-400">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 border-b border-gray-400">
|
||||
<th className={`${thBase} w-24`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className={`${thBase} w-10`}>수량</th>
|
||||
<th className={`${thBase} w-24`}>항목</th>
|
||||
<th className={`${thBase} w-20`}>규격</th>
|
||||
<th className="px-1 py-1 w-10">수량</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{MOCK_SUBSIDIARY.map((row, i) => (
|
||||
<tr key={i} className="border-b border-gray-300">
|
||||
<td className={tdBase}>{row.leftItem}</td>
|
||||
<td className={tdCenter}>{row.leftSpec}</td>
|
||||
<td className={tdCenter}>{row.leftQty}</td>
|
||||
<td className={tdBase}>{row.rightItem}</td>
|
||||
<td className={tdCenter}>{row.rightSpec}</td>
|
||||
<td className="px-1 py-1 text-center">{row.rightQty}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ========== 특이사항 ========== */}
|
||||
{data.remarks && (
|
||||
<div className="mb-4">
|
||||
<p className="font-bold mb-2">【 특이사항 】</p>
|
||||
|
||||
@@ -13,5 +13,5 @@ interface ShippingSlipProps {
|
||||
}
|
||||
|
||||
export function ShippingSlip({ data }: ShippingSlipProps) {
|
||||
return <ShipmentOrderDocument title="출 고 증" data={data} showDispatchInfo />;
|
||||
return <ShipmentOrderDocument title="출 고 증" data={data} showDispatchInfo showLotColumn />;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ArrowLeft, Edit, GripVertical, Plus, Package } from 'lucide-react';
|
||||
import { ArrowLeft, Edit, GripVertical, Plus, Package, 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';
|
||||
@@ -19,7 +19,9 @@ import { PageLayout } from '@/components/organisms/PageLayout';
|
||||
import { PageHeader } from '@/components/organisms/PageHeader';
|
||||
import { useMenuStore } from '@/store/menuStore';
|
||||
import { usePermission } from '@/hooks/usePermission';
|
||||
import { getProcessSteps, reorderProcessSteps } from './actions';
|
||||
import { toast } from 'sonner';
|
||||
import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
|
||||
import { getProcessSteps, reorderProcessSteps, deleteProcess } from './actions';
|
||||
import type { Process, ProcessStep } from '@/types/process';
|
||||
|
||||
interface ProcessDetailProps {
|
||||
@@ -35,6 +37,10 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
|
||||
const [steps, setSteps] = useState<ProcessStep[]>([]);
|
||||
const [isStepsLoading, setIsStepsLoading] = useState(true);
|
||||
|
||||
// 삭제 다이얼로그 상태
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
// 드래그 상태
|
||||
const [dragIndex, setDragIndex] = useState<number | null>(null);
|
||||
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
|
||||
@@ -75,6 +81,24 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
|
||||
router.push(`/ko/master-data/process-management/${process.id}/steps/${stepId}`);
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
const result = await deleteProcess(process.id);
|
||||
if (result.success) {
|
||||
toast.success('공정이 삭제되었습니다.');
|
||||
router.push('/ko/master-data/process-management');
|
||||
} else {
|
||||
toast.error(result.error || '삭제에 실패했습니다.');
|
||||
}
|
||||
} catch {
|
||||
toast.error('삭제 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
setDeleteDialogOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
// ===== 드래그&드롭 (HTML5 네이티브) =====
|
||||
const handleDragStart = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
|
||||
setDragIndex(index);
|
||||
@@ -343,12 +367,27 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
|
||||
<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 className="flex items-center gap-2">
|
||||
<Button variant="destructive" onClick={() => setDeleteDialogOpen(true)} size="sm" className="md:size-default">
|
||||
<Trash2 className="h-4 w-4 md:mr-2" />
|
||||
<span className="hidden md:inline">삭제</span>
|
||||
</Button>
|
||||
<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>
|
||||
|
||||
{/* 삭제 확인 다이얼로그 */}
|
||||
<DeleteConfirmDialog
|
||||
open={deleteDialogOpen}
|
||||
onOpenChange={setDeleteDialogOpen}
|
||||
description="이 공정을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
|
||||
loading={isDeleting}
|
||||
onConfirm={handleDelete}
|
||||
/>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,10 +9,11 @@
|
||||
* - 삭제 다이얼로그
|
||||
*/
|
||||
|
||||
import { useState, useMemo, useCallback, useEffect } from 'react';
|
||||
import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Wrench, Plus } from 'lucide-react';
|
||||
import { TableCell, TableRow } from '@/components/ui/table';
|
||||
import { Wrench, Plus, GripVertical } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { TableCell, TableRow, TableHead } from '@/components/ui/table';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
@@ -26,7 +27,7 @@ import { ListMobileCard, InfoField } from '@/components/organisms/MobileCard';
|
||||
import { toast } from 'sonner';
|
||||
import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
|
||||
import type { Process } from '@/types/process';
|
||||
import { getProcessList, deleteProcess, deleteProcesses, toggleProcessActive, getProcessStats } from './actions';
|
||||
import { getProcessList, deleteProcess, deleteProcesses, toggleProcessActive, getProcessStats, reorderProcesses } from './actions';
|
||||
|
||||
interface ProcessListClientProps {
|
||||
initialData?: Process[];
|
||||
@@ -50,6 +51,13 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
// 검색어 상태
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
// 드래그&드롭 순서 변경 상태
|
||||
const [isOrderChanged, setIsOrderChanged] = useState(false);
|
||||
const dragProcessIdRef = useRef<string | null>(null);
|
||||
const dragNodeRef = useRef<HTMLTableRowElement | null>(null);
|
||||
const allProcessesRef = useRef(allProcesses);
|
||||
allProcessesRef.current = allProcesses;
|
||||
|
||||
// ===== 데이터 로드 =====
|
||||
const loadData = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
@@ -177,6 +185,78 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
}
|
||||
}, [allProcesses]);
|
||||
|
||||
// ===== 드래그&드롭 순서 변경 =====
|
||||
const handleDragStart = useCallback((e: React.DragEvent<HTMLTableRowElement>, processId: string) => {
|
||||
dragProcessIdRef.current = processId;
|
||||
dragNodeRef.current = e.currentTarget;
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
requestAnimationFrame(() => {
|
||||
if (dragNodeRef.current) {
|
||||
dragNodeRef.current.style.opacity = '0.4';
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent<HTMLTableRowElement>) => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
e.currentTarget.classList.add('border-t-2', 'border-t-primary');
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent<HTMLTableRowElement>) => {
|
||||
const related = e.relatedTarget as Node;
|
||||
if (!e.currentTarget.contains(related)) {
|
||||
e.currentTarget.classList.remove('border-t-2', 'border-t-primary');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDragEnd = useCallback(() => {
|
||||
if (dragNodeRef.current) {
|
||||
dragNodeRef.current.style.opacity = '1';
|
||||
}
|
||||
dragProcessIdRef.current = null;
|
||||
dragNodeRef.current = null;
|
||||
}, []);
|
||||
|
||||
const handleProcessDrop = useCallback((e: React.DragEvent<HTMLTableRowElement>, dropProcessId: string) => {
|
||||
e.preventDefault();
|
||||
e.currentTarget.classList.remove('border-t-2', 'border-t-primary');
|
||||
const dragId = dragProcessIdRef.current;
|
||||
if (!dragId || dragId === dropProcessId) {
|
||||
handleDragEnd();
|
||||
return;
|
||||
}
|
||||
setAllProcesses((prev) => {
|
||||
const updated = [...prev];
|
||||
const dragIdx = updated.findIndex(p => p.id === dragId);
|
||||
const dropIdx = updated.findIndex(p => p.id === dropProcessId);
|
||||
if (dragIdx === -1 || dropIdx === -1) return prev;
|
||||
const [moved] = updated.splice(dragIdx, 1);
|
||||
updated.splice(dropIdx, 0, moved);
|
||||
return updated;
|
||||
});
|
||||
setIsOrderChanged(true);
|
||||
handleDragEnd();
|
||||
}, [handleDragEnd]);
|
||||
|
||||
const handleSaveOrder = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const orderData = allProcessesRef.current.map((p, idx) => ({ id: p.id, order: idx + 1 }));
|
||||
const result = await reorderProcesses(orderData);
|
||||
if (result.success) {
|
||||
toast.success('순서가 저장되었습니다.');
|
||||
setIsOrderChanged(false);
|
||||
} else {
|
||||
toast.error(result.error || '순서 저장에 실패했습니다.');
|
||||
}
|
||||
} catch {
|
||||
toast.error('순서 저장 중 오류가 발생했습니다.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// ===== UniversalListPage Config =====
|
||||
const config: UniversalListConfig<Process> = useMemo(
|
||||
() => ({
|
||||
@@ -230,8 +310,11 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
},
|
||||
},
|
||||
|
||||
// 테이블 컬럼
|
||||
// 테이블 컬럼 (showCheckbox: false + renderCustomTableHeader로 수동 관리)
|
||||
showCheckbox: false,
|
||||
columns: [
|
||||
{ key: 'drag', label: '', className: 'w-[40px]' },
|
||||
{ key: 'checkbox', label: '', className: 'w-[50px]' },
|
||||
{ key: 'no', label: '번호', className: 'w-[60px] text-center' },
|
||||
{ key: 'processCode', label: '공정번호', className: 'w-[120px]' },
|
||||
{ key: 'processName', label: '공정명', className: 'min-w-[200px]' },
|
||||
@@ -240,6 +323,25 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
{ key: 'status', label: '상태', className: 'w-[80px] text-center' },
|
||||
],
|
||||
|
||||
// 커스텀 테이블 헤더 (드래그 → 전체선택 체크박스 → 번호 → 데이터 순)
|
||||
renderCustomTableHeader: ({ displayData, selectedItems, onToggleSelectAll }) => (
|
||||
<>
|
||||
<TableHead className="w-[40px]" />
|
||||
<TableHead className="w-[50px] text-center">
|
||||
<Checkbox
|
||||
checked={displayData.length > 0 && selectedItems.size === displayData.length}
|
||||
onCheckedChange={onToggleSelectAll}
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead className="w-[60px] text-center">번호</TableHead>
|
||||
<TableHead className="w-[120px]">공정번호</TableHead>
|
||||
<TableHead className="min-w-[200px]">공정명</TableHead>
|
||||
<TableHead className="w-[120px]">담당부서</TableHead>
|
||||
<TableHead className="w-[80px] text-center">품목</TableHead>
|
||||
<TableHead className="w-[80px] text-center">상태</TableHead>
|
||||
</>
|
||||
),
|
||||
|
||||
// 클라이언트 사이드 필터링
|
||||
clientSideFiltering: true,
|
||||
itemsPerPage: 20,
|
||||
@@ -292,6 +394,13 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
);
|
||||
},
|
||||
|
||||
// 순서 변경 저장 버튼
|
||||
headerActions: () => (
|
||||
<Button variant="outline" onClick={handleSaveOrder} disabled={!isOrderChanged}>
|
||||
순서 변경 저장
|
||||
</Button>
|
||||
),
|
||||
|
||||
// 등록 버튼 (공통 컴포넌트에서 오른쪽에 렌더링)
|
||||
createButton: {
|
||||
label: '공정 등록',
|
||||
@@ -315,9 +424,21 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
return (
|
||||
<TableRow
|
||||
key={process.id}
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(e, process.id)}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDrop={(e) => handleProcessDrop(e, process.id)}
|
||||
className={`cursor-pointer hover:bg-muted/50 ${handlers.isSelected ? 'bg-blue-50' : ''}`}
|
||||
onClick={() => handleRowClick(process)}
|
||||
>
|
||||
<TableCell
|
||||
className="text-center cursor-grab active:cursor-grabbing"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
|
||||
</TableCell>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
checked={handlers.isSelected}
|
||||
@@ -388,7 +509,7 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
);
|
||||
},
|
||||
}),
|
||||
[handleCreate, handleRowClick, handleToggleStatus, handleBulkDelete, startDate, endDate, searchQuery]
|
||||
[handleCreate, handleRowClick, handleToggleStatus, handleBulkDelete, startDate, endDate, searchQuery, isOrderChanged, handleSaveOrder, handleDragStart, handleDragOver, handleDragLeave, handleDragEnd, handleProcessDrop]
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@@ -321,6 +321,27 @@ export async function toggleProcessActive(id: string): Promise<{ success: boolea
|
||||
return { success: result.success, data: result.data, error: result.error };
|
||||
}
|
||||
|
||||
/**
|
||||
* 공정 순서 변경
|
||||
*/
|
||||
export async function reorderProcesses(
|
||||
processes: { id: string; order: number }[]
|
||||
): Promise<{ success: boolean; error?: string; __authError?: boolean }> {
|
||||
const result = await executeServerAction({
|
||||
url: `${API_URL}/api/v1/processes/reorder`,
|
||||
method: 'PATCH',
|
||||
body: {
|
||||
items: processes.map((p) => ({
|
||||
id: parseInt(p.id, 10),
|
||||
sort_order: p.order,
|
||||
})),
|
||||
},
|
||||
errorMessage: '공정 순서 변경에 실패했습니다.',
|
||||
});
|
||||
if (result.__authError) return { success: false, __authError: true };
|
||||
return { success: result.success, error: result.error };
|
||||
}
|
||||
|
||||
/**
|
||||
* 공정 옵션 목록 (드롭다운용)
|
||||
*/
|
||||
|
||||
@@ -91,7 +91,9 @@ export async function refreshMenus(): Promise<RefreshMenuResult> {
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.menus || !Array.isArray(data.menus)) {
|
||||
// 백엔드 ApiResponse::success() 응답 형식: { success, message, data: [...] }
|
||||
const apiMenus = data.data;
|
||||
if (!apiMenus || !Array.isArray(apiMenus)) {
|
||||
return {
|
||||
success: false,
|
||||
updated: false,
|
||||
@@ -100,7 +102,7 @@ export async function refreshMenus(): Promise<RefreshMenuResult> {
|
||||
}
|
||||
|
||||
// 3. 메뉴 변환
|
||||
const transformedMenus = transformApiMenusToMenuItems(data.menus);
|
||||
const transformedMenus = transformApiMenusToMenuItems(apiMenus);
|
||||
const newHash = generateMenuHash(transformedMenus);
|
||||
|
||||
// 4. 변경 없으면 업데이트 스킵
|
||||
@@ -159,7 +161,9 @@ export async function forceRefreshMenus(): Promise<RefreshMenuResult> {
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.menus || !Array.isArray(data.menus)) {
|
||||
// 백엔드 ApiResponse::success() 응답 형식: { success, message, data: [...] }
|
||||
const apiMenus = data.data;
|
||||
if (!apiMenus || !Array.isArray(apiMenus)) {
|
||||
return {
|
||||
success: false,
|
||||
updated: false,
|
||||
@@ -167,7 +171,7 @@ export async function forceRefreshMenus(): Promise<RefreshMenuResult> {
|
||||
};
|
||||
}
|
||||
|
||||
const transformedMenus = transformApiMenusToMenuItems(data.menus);
|
||||
const transformedMenus = transformApiMenusToMenuItems(apiMenus);
|
||||
|
||||
// localStorage 업데이트
|
||||
const userData = localStorage.getItem('user');
|
||||
|
||||
73
src/types/checklist.ts
Normal file
73
src/types/checklist.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
/**
|
||||
* 점검표 관리 타입 정의
|
||||
*/
|
||||
|
||||
// ============================================================================
|
||||
// 점검표 (Checklist)
|
||||
// ============================================================================
|
||||
|
||||
export interface Checklist {
|
||||
id: string;
|
||||
checklistCode: string; // 점검표 번호
|
||||
checklistName: string; // 점검표명
|
||||
itemCount: number; // 항목 수
|
||||
documentCount: number; // 문서 수
|
||||
status: '사용' | '미사용';
|
||||
order: number; // 정렬 순서
|
||||
items?: ChecklistItem[]; // 하위 항목 목록
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface ChecklistFormData {
|
||||
checklistName: string;
|
||||
status: '사용' | '미사용';
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 점검표 항목 (Checklist Item)
|
||||
// ============================================================================
|
||||
|
||||
export interface ChecklistItem {
|
||||
id: string;
|
||||
checklistId: string; // 소속 점검표 ID
|
||||
itemCode: string; // 항목 번호
|
||||
itemName: string; // 항목명
|
||||
description: string; // 소개
|
||||
documentCount: number; // 문서 수
|
||||
status: '사용' | '미사용';
|
||||
order: number; // 정렬 순서
|
||||
documents?: ChecklistDocument[]; // 하위 문서 목록
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface ChecklistItemFormData {
|
||||
itemName: string;
|
||||
description: string;
|
||||
status: '사용' | '미사용';
|
||||
documents: ChecklistDocumentFormData[];
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 점검표 문서 (Checklist Document)
|
||||
// ============================================================================
|
||||
|
||||
export interface ChecklistDocument {
|
||||
id: string;
|
||||
itemId: string; // 소속 항목 ID
|
||||
documentCode: string; // 문서 번호
|
||||
documentName: string; // 문서명 (파일명)
|
||||
revision: string; // 개정 (REV12 등)
|
||||
effectiveDate: string; // 시행일
|
||||
order: number; // 정렬 순서
|
||||
}
|
||||
|
||||
export interface ChecklistDocumentFormData {
|
||||
id?: string;
|
||||
documentCode: string;
|
||||
documentName: string;
|
||||
revision: string;
|
||||
effectiveDate: string;
|
||||
order: number;
|
||||
}
|
||||
Reference in New Issue
Block a user