324 lines
11 KiB
TypeScript
324 lines
11 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState, useMemo, useCallback } from 'react';
|
||
|
|
import { useRouter } from 'next/navigation';
|
||
|
|
import { Wrench, Plus, Pencil, Trash2 } from 'lucide-react';
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { TableCell, TableRow } from '@/components/ui/table';
|
||
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
||
|
|
import { Badge } from '@/components/ui/badge';
|
||
|
|
import { IntegratedListTemplateV2, TabOption, TableColumn } from '@/components/templates/IntegratedListTemplateV2';
|
||
|
|
import { MobileCard } from '@/components/molecules/MobileCard';
|
||
|
|
import type { Process, ProcessStatus } from '@/types/process';
|
||
|
|
|
||
|
|
// Mock 데이터
|
||
|
|
const mockProcesses: Process[] = [
|
||
|
|
{
|
||
|
|
id: '1',
|
||
|
|
processCode: 'P-004',
|
||
|
|
processName: '재고(포밍)',
|
||
|
|
description: '철판을 포밍하여 절곡 부품(반제품) 생산 후 재고 입고',
|
||
|
|
processType: '생산',
|
||
|
|
department: '포밍생산부서',
|
||
|
|
workLogTemplate: '재고생산 작업일지',
|
||
|
|
classificationRules: [],
|
||
|
|
requiredWorkers: 2,
|
||
|
|
workSteps: ['포밍', '검사', '포장'],
|
||
|
|
status: '사용중',
|
||
|
|
createdAt: '2025-01-01',
|
||
|
|
updatedAt: '2025-01-15',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '2',
|
||
|
|
processCode: 'P-003',
|
||
|
|
processName: '슬랫',
|
||
|
|
description: '슬랫 코일 절단 및 성형',
|
||
|
|
processType: '생산',
|
||
|
|
department: '슬랫생산부서',
|
||
|
|
classificationRules: [],
|
||
|
|
requiredWorkers: 3,
|
||
|
|
workSteps: ['절단', '성형', '검사'],
|
||
|
|
status: '사용중',
|
||
|
|
createdAt: '2025-01-01',
|
||
|
|
updatedAt: '2025-01-10',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '3',
|
||
|
|
processCode: 'P-002',
|
||
|
|
processName: '절곡',
|
||
|
|
description: '가이드레일, 케이스, 하단마감재 제작',
|
||
|
|
processType: '생산',
|
||
|
|
department: '절곡생산부서',
|
||
|
|
classificationRules: [],
|
||
|
|
requiredWorkers: 4,
|
||
|
|
workSteps: ['절단', '절곡', '용접', '검사'],
|
||
|
|
status: '사용중',
|
||
|
|
createdAt: '2025-01-01',
|
||
|
|
updatedAt: '2025-01-08',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '4',
|
||
|
|
processCode: 'P-001',
|
||
|
|
processName: '스크린',
|
||
|
|
description: '방화스크린 원단 가공 및 조립',
|
||
|
|
processType: '생산',
|
||
|
|
department: '스크린생산부서',
|
||
|
|
classificationRules: [],
|
||
|
|
requiredWorkers: 3,
|
||
|
|
workSteps: ['원단가공', '조립', '검사', '포장'],
|
||
|
|
status: '사용중',
|
||
|
|
createdAt: '2025-01-01',
|
||
|
|
updatedAt: '2025-01-05',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
// 테이블 컬럼 정의
|
||
|
|
const tableColumns: TableColumn[] = [
|
||
|
|
{ key: 'no', label: '번호', className: 'w-[60px] text-center' },
|
||
|
|
{ key: 'processCode', label: '공정코드', className: 'w-[100px]' },
|
||
|
|
{ key: 'processName', label: '공정명', className: 'min-w-[250px]' },
|
||
|
|
{ key: 'processType', label: '구분', className: 'w-[80px] text-center' },
|
||
|
|
{ key: 'department', label: '담당부서', className: 'w-[120px]' },
|
||
|
|
{ key: 'classificationRules', label: '분류규칙', className: 'w-[80px] text-center' },
|
||
|
|
{ key: 'requiredWorkers', label: '인원', className: 'w-[60px] text-center' },
|
||
|
|
{ key: 'status', label: '상태', className: 'w-[80px] text-center' },
|
||
|
|
{ key: 'actions', label: '작업', className: 'w-[100px] text-center' },
|
||
|
|
];
|
||
|
|
|
||
|
|
// 탭 옵션 계산
|
||
|
|
function getTabOptions(processes: Process[]): TabOption[] {
|
||
|
|
const total = processes.length;
|
||
|
|
const active = processes.filter(p => p.status === '사용중').length;
|
||
|
|
const inactive = processes.filter(p => p.status === '미사용').length;
|
||
|
|
|
||
|
|
return [
|
||
|
|
{ value: 'all', label: '전체', count: total },
|
||
|
|
{ value: '사용중', label: '사용중', count: active },
|
||
|
|
{ value: '미사용', label: '미사용', count: inactive },
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ProcessListClient() {
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
// 상태
|
||
|
|
const [processes] = useState<Process[]>(mockProcesses);
|
||
|
|
const [activeTab, setActiveTab] = useState('all');
|
||
|
|
const [searchValue, setSearchValue] = useState('');
|
||
|
|
const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
|
||
|
|
const [currentPage, setCurrentPage] = useState(1);
|
||
|
|
const itemsPerPage = 20;
|
||
|
|
|
||
|
|
// 필터링된 데이터
|
||
|
|
const filteredProcesses = useMemo(() => {
|
||
|
|
return processes.filter(process => {
|
||
|
|
// 탭 필터
|
||
|
|
if (activeTab !== 'all' && process.status !== activeTab) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
// 검색 필터
|
||
|
|
if (searchValue) {
|
||
|
|
const search = searchValue.toLowerCase();
|
||
|
|
return (
|
||
|
|
process.processCode.toLowerCase().includes(search) ||
|
||
|
|
process.processName.toLowerCase().includes(search) ||
|
||
|
|
process.department.toLowerCase().includes(search)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
});
|
||
|
|
}, [processes, activeTab, searchValue]);
|
||
|
|
|
||
|
|
// 페이지네이션
|
||
|
|
const totalPages = Math.ceil(filteredProcesses.length / itemsPerPage);
|
||
|
|
const paginatedData = useMemo(() => {
|
||
|
|
const start = (currentPage - 1) * itemsPerPage;
|
||
|
|
return filteredProcesses.slice(start, start + itemsPerPage);
|
||
|
|
}, [filteredProcesses, currentPage, itemsPerPage]);
|
||
|
|
|
||
|
|
// 탭 옵션
|
||
|
|
const tabOptions = useMemo(() => getTabOptions(processes), [processes]);
|
||
|
|
|
||
|
|
// 핸들러
|
||
|
|
const handleTabChange = useCallback((value: string) => {
|
||
|
|
setActiveTab(value);
|
||
|
|
setCurrentPage(1);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleSearchChange = useCallback((value: string) => {
|
||
|
|
setSearchValue(value);
|
||
|
|
setCurrentPage(1);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleToggleSelection = useCallback((id: string) => {
|
||
|
|
setSelectedItems(prev => {
|
||
|
|
const newSet = new Set(prev);
|
||
|
|
if (newSet.has(id)) {
|
||
|
|
newSet.delete(id);
|
||
|
|
} else {
|
||
|
|
newSet.add(id);
|
||
|
|
}
|
||
|
|
return newSet;
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleToggleSelectAll = useCallback(() => {
|
||
|
|
if (selectedItems.size === paginatedData.length) {
|
||
|
|
setSelectedItems(new Set());
|
||
|
|
} else {
|
||
|
|
setSelectedItems(new Set(paginatedData.map(p => p.id)));
|
||
|
|
}
|
||
|
|
}, [selectedItems.size, paginatedData]);
|
||
|
|
|
||
|
|
const handleRowClick = useCallback((process: Process) => {
|
||
|
|
router.push(`/ko/master-data/process-management/${process.id}`);
|
||
|
|
}, [router]);
|
||
|
|
|
||
|
|
const handleCreate = useCallback(() => {
|
||
|
|
router.push('/ko/master-data/process-management/new');
|
||
|
|
}, [router]);
|
||
|
|
|
||
|
|
const handleEdit = useCallback((e: React.MouseEvent, processId: string) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
router.push(`/ko/master-data/process-management/${processId}/edit`);
|
||
|
|
}, [router]);
|
||
|
|
|
||
|
|
const handleDelete = useCallback((e: React.MouseEvent, processId: string) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
// TODO: 삭제 확인 모달 및 API 연동
|
||
|
|
console.log('Delete process:', processId);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 테이블 행 렌더링
|
||
|
|
const renderTableRow = useCallback((process: Process, index: number, globalIndex: number) => {
|
||
|
|
const isSelected = selectedItems.has(process.id);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TableRow
|
||
|
|
key={process.id}
|
||
|
|
className="cursor-pointer hover:bg-muted/50"
|
||
|
|
onClick={() => handleRowClick(process)}
|
||
|
|
>
|
||
|
|
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||
|
|
<Checkbox
|
||
|
|
checked={isSelected}
|
||
|
|
onCheckedChange={() => handleToggleSelection(process.id)}
|
||
|
|
/>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-center text-muted-foreground">{globalIndex}</TableCell>
|
||
|
|
<TableCell className="font-medium">{process.processCode}</TableCell>
|
||
|
|
<TableCell>
|
||
|
|
<div>
|
||
|
|
<div className="font-medium">{process.processName}</div>
|
||
|
|
{process.description && (
|
||
|
|
<div className="text-sm text-muted-foreground">{process.description}</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-center">
|
||
|
|
<Badge variant="secondary">{process.processType}</Badge>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>{process.department}</TableCell>
|
||
|
|
<TableCell className="text-center">
|
||
|
|
{process.classificationRules.length > 0 ? (
|
||
|
|
<Badge variant="outline">{process.classificationRules.length}</Badge>
|
||
|
|
) : (
|
||
|
|
<span className="text-muted-foreground">-</span>
|
||
|
|
)}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-center">{process.requiredWorkers}명</TableCell>
|
||
|
|
<TableCell className="text-center">
|
||
|
|
<Badge variant={process.status === '사용중' ? 'default' : 'secondary'}>
|
||
|
|
{process.status}
|
||
|
|
</Badge>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell className="text-center">
|
||
|
|
{isSelected && (
|
||
|
|
<div className="flex items-center justify-center gap-2">
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-8 w-8"
|
||
|
|
onClick={(e) => handleEdit(e, process.id)}
|
||
|
|
>
|
||
|
|
<Pencil className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-8 w-8 text-destructive hover:text-destructive"
|
||
|
|
onClick={(e) => handleDelete(e, process.id)}
|
||
|
|
>
|
||
|
|
<Trash2 className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
);
|
||
|
|
}, [selectedItems, handleToggleSelection, handleRowClick, handleEdit, handleDelete]);
|
||
|
|
|
||
|
|
// 모바일 카드 렌더링
|
||
|
|
const renderMobileCard = useCallback((
|
||
|
|
process: Process,
|
||
|
|
index: number,
|
||
|
|
globalIndex: number,
|
||
|
|
isSelected: boolean,
|
||
|
|
onToggle: () => void
|
||
|
|
) => {
|
||
|
|
return (
|
||
|
|
<MobileCard
|
||
|
|
title={process.processName}
|
||
|
|
subtitle={process.processCode}
|
||
|
|
description={process.description}
|
||
|
|
badge={process.status}
|
||
|
|
badgeVariant={process.status === '사용중' ? 'default' : 'secondary'}
|
||
|
|
isSelected={isSelected}
|
||
|
|
onToggle={onToggle}
|
||
|
|
onClick={() => handleRowClick(process)}
|
||
|
|
details={[
|
||
|
|
{ label: '구분', value: process.processType },
|
||
|
|
{ label: '담당부서', value: process.department },
|
||
|
|
{ label: '인원', value: `${process.requiredWorkers}명` },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}, [handleRowClick]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<IntegratedListTemplateV2
|
||
|
|
title="공정 목록"
|
||
|
|
icon={Wrench}
|
||
|
|
headerActions={
|
||
|
|
<div className="flex justify-end w-full">
|
||
|
|
<Button onClick={handleCreate} className="gap-2">
|
||
|
|
<Plus className="h-4 w-4" />
|
||
|
|
공정 등록
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
searchValue={searchValue}
|
||
|
|
onSearchChange={handleSearchChange}
|
||
|
|
searchPlaceholder="공정코드, 공정명, 담당부서 검색"
|
||
|
|
tabs={tabOptions}
|
||
|
|
activeTab={activeTab}
|
||
|
|
onTabChange={handleTabChange}
|
||
|
|
tableColumns={tableColumns}
|
||
|
|
data={paginatedData}
|
||
|
|
allData={filteredProcesses}
|
||
|
|
selectedItems={selectedItems}
|
||
|
|
onToggleSelection={handleToggleSelection}
|
||
|
|
onToggleSelectAll={handleToggleSelectAll}
|
||
|
|
getItemId={(item) => item.id}
|
||
|
|
renderTableRow={renderTableRow}
|
||
|
|
renderMobileCard={renderMobileCard}
|
||
|
|
pagination={{
|
||
|
|
currentPage,
|
||
|
|
totalPages,
|
||
|
|
totalItems: filteredProcesses.length,
|
||
|
|
itemsPerPage,
|
||
|
|
onPageChange: setCurrentPage,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|