feat: 공정관리 페이지 및 컴포넌트 추가
- 공정관리 목록/상세/등록/수정 페이지 구현 - ProcessListClient, ProcessDetail, ProcessForm 컴포넌트 추가 - ProcessWorkLogPreviewModal, RuleModal 추가 - MobileCard 공통 컴포넌트 추가 - WorkLogModal.tsx 개선 - .gitignore 업데이트 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
byeongcheolryu
324
src/components/process-management/ProcessListClient.tsx
Normal file
324
src/components/process-management/ProcessListClient.tsx
Normal file
@@ -0,0 +1,324 @@
|
||||
'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,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user