b1686aaf66
- MobileCard 접기/펼치기(collapsible) 기능 추가 및 반응형 레이아웃 개선 - DatePicker 공휴일/세무일정 색상 코딩 통합, DateTimePicker 신규 추가 - useCalendarScheduleInit 훅으로 전역 공휴일/일정 데이터 캐싱 - 전 도메인 날짜 필드 DatePicker 표준화 (104 files) - 생산대시보드/작업지시 모바일 호환성 강화 - 견적서/주문관리 반응형 그리드 적용 - 회계 모듈 기능 개선 (매입상세 결재연동, 미수금현황 조회조건 등) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
546 lines
20 KiB
TypeScript
546 lines
20 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* 공정 목록 - UniversalListPage 마이그레이션
|
|
*
|
|
* 기존 IntegratedListTemplateV2 → UniversalListPage config 기반으로 변환
|
|
* - 클라이언트 사이드 필터링 (탭별, 검색)
|
|
* - 상태 토글 기능
|
|
* - 삭제 다이얼로그
|
|
*/
|
|
|
|
import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useDateRange } from '@/hooks';
|
|
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 {
|
|
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 { Process } from '@/types/process';
|
|
import { getProcessList, deleteProcess, deleteProcesses, toggleProcessActive, getProcessStats, reorderProcesses } from './actions';
|
|
|
|
interface ProcessListClientProps {
|
|
initialData?: Process[];
|
|
initialStats?: { total: number; active: number; inactive: number };
|
|
}
|
|
|
|
export default function ProcessListClient({ initialData = [], initialStats }: ProcessListClientProps) {
|
|
const router = useRouter();
|
|
|
|
// ===== 상태 =====
|
|
const [allProcesses, setAllProcesses] = useState<Process[]>(initialData);
|
|
const [stats, setStats] = useState(initialStats ?? { 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, endDate, setStartDate, setEndDate } = useDateRange('currentYear');
|
|
|
|
// 검색어 상태
|
|
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);
|
|
try {
|
|
const [listResult, statsResult] = await Promise.all([
|
|
getProcessList({ size: 1000 }),
|
|
getProcessStats(),
|
|
]);
|
|
|
|
if (listResult.success && listResult.data) {
|
|
setAllProcesses(listResult.data.items);
|
|
}
|
|
if (statsResult.success && statsResult.data) {
|
|
setStats({
|
|
total: statsResult.data.total,
|
|
active: statsResult.data.active,
|
|
inactive: statsResult.data.inactive,
|
|
});
|
|
}
|
|
} catch {
|
|
toast.error('데이터 로드에 실패했습니다.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
// 초기 데이터가 없으면 로드
|
|
useEffect(() => {
|
|
if (initialData.length === 0) {
|
|
loadData();
|
|
}
|
|
}, [initialData.length, loadData]);
|
|
|
|
// ===== 핸들러 =====
|
|
const handleRowClick = useCallback((process: Process) => {
|
|
router.push(`/ko/master-data/process-management/${process.id}?mode=view`);
|
|
}, [router]);
|
|
|
|
const handleCreate = useCallback(() => {
|
|
router.push('/ko/master-data/process-management?mode=new');
|
|
}, [router]);
|
|
|
|
const handleEdit = useCallback((process: Process) => {
|
|
router.push(`/ko/master-data/process-management/${process.id}?mode=edit`);
|
|
}, [router]);
|
|
|
|
const handleDeleteClick = useCallback((processId: string) => {
|
|
setDeleteTargetId(processId);
|
|
setDeleteDialogOpen(true);
|
|
}, []);
|
|
|
|
const handleDeleteConfirm = useCallback(async () => {
|
|
if (!deleteTargetId) return;
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
const result = await deleteProcess(deleteTargetId);
|
|
if (result.success) {
|
|
toast.success('공정이 삭제되었습니다.');
|
|
const deletedProcess = allProcesses.find((p) => p.id === deleteTargetId);
|
|
setAllProcesses((prev) => prev.filter((p) => p.id !== deleteTargetId));
|
|
setStats((prev) => ({
|
|
...prev,
|
|
total: prev.total - 1,
|
|
active: prev.active - (deletedProcess?.status === '사용중' ? 1 : 0),
|
|
inactive: prev.inactive - (deletedProcess?.status === '미사용' ? 1 : 0),
|
|
}));
|
|
} else {
|
|
toast.error(result.error || '삭제에 실패했습니다.');
|
|
}
|
|
} catch {
|
|
toast.error('삭제 중 오류가 발생했습니다.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
setDeleteDialogOpen(false);
|
|
setDeleteTargetId(null);
|
|
}
|
|
}, [deleteTargetId, allProcesses]);
|
|
|
|
const handleBulkDelete = useCallback(async (selectedIds: string[]) => {
|
|
if (selectedIds.length === 0) {
|
|
toast.warning('삭제할 항목을 선택해주세요.');
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
const result = await deleteProcesses(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 (processId: string) => {
|
|
setIsLoading(true);
|
|
try {
|
|
const result = await toggleProcessActive(processId);
|
|
if (result.success && result.data) {
|
|
toast.success('상태가 변경되었습니다.');
|
|
setAllProcesses((prev) => prev.map((p) => (p.id === processId ? result.data! : p)));
|
|
const oldProcess = allProcesses.find((p) => p.id === processId);
|
|
if (oldProcess) {
|
|
const wasActive = oldProcess.status === '사용중';
|
|
setStats((prev) => ({
|
|
...prev,
|
|
active: wasActive ? prev.active - 1 : prev.active + 1,
|
|
inactive: wasActive ? prev.inactive + 1 : prev.inactive - 1,
|
|
}));
|
|
}
|
|
} else {
|
|
toast.error(result.error || '상태 변경에 실패했습니다.');
|
|
}
|
|
} catch {
|
|
toast.error('상태 변경 중 오류가 발생했습니다.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [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(
|
|
() => ({
|
|
// 페이지 기본 정보
|
|
title: '공정 목록',
|
|
icon: Wrench,
|
|
basePath: '/master-data/process-management',
|
|
|
|
// ID 추출
|
|
idField: 'id',
|
|
|
|
// API 액션
|
|
actions: {
|
|
getList: async (params?: ListParams) => {
|
|
try {
|
|
const [listResult, statsResult] = await Promise.all([
|
|
getProcessList({ size: 1000 }),
|
|
getProcessStats(),
|
|
]);
|
|
|
|
if (listResult.success && listResult.data) {
|
|
setAllProcesses(listResult.data.items);
|
|
|
|
if (statsResult.success && statsResult.data) {
|
|
setStats({
|
|
total: statsResult.data.total,
|
|
active: statsResult.data.active,
|
|
inactive: statsResult.data.inactive,
|
|
});
|
|
}
|
|
|
|
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 deleteProcess(id);
|
|
return { success: result.success, error: result.error };
|
|
},
|
|
deleteBulk: async (ids: string[]) => {
|
|
const result = await deleteProcesses(ids);
|
|
return { success: result.success, error: result.error };
|
|
},
|
|
},
|
|
|
|
// 테이블 컬럼 (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]' },
|
|
{ key: 'department', label: '담당부서', className: 'w-[120px]' },
|
|
{ key: 'items', label: '품목', className: 'w-[80px] text-center' },
|
|
{ key: 'inspection', label: '중간검사', className: 'w-[90px] text-center' },
|
|
{ key: 'workLog', label: '작업일지', className: 'w-[90px] text-center' },
|
|
{ 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-[90px] text-center">중간검사</TableHead>
|
|
<TableHead className="w-[90px] 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: Process[], 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.processCode || '').toLowerCase().includes(search) ||
|
|
(item.processName || '').toLowerCase().includes(search) ||
|
|
(item.department || '').toLowerCase().includes(search)
|
|
);
|
|
},
|
|
|
|
// 순서 변경 저장 버튼
|
|
headerActions: () => (
|
|
<Button variant="outline" onClick={handleSaveOrder} disabled={!isOrderChanged}>
|
|
순서 변경 저장
|
|
</Button>
|
|
),
|
|
|
|
// 등록 버튼 (공통 컴포넌트에서 오른쪽에 렌더링)
|
|
createButton: {
|
|
label: '공정 등록',
|
|
onClick: handleCreate,
|
|
icon: Plus,
|
|
},
|
|
|
|
// 일괄 삭제 핸들러
|
|
onBulkDelete: handleBulkDelete,
|
|
|
|
// 테이블 행 렌더링
|
|
renderTableRow: (
|
|
process: Process,
|
|
index: number,
|
|
globalIndex: number,
|
|
handlers: SelectionHandlers & RowClickHandlers<Process>
|
|
) => {
|
|
const itemCount = process.classificationRules
|
|
.filter(r => r.registrationType === 'individual')
|
|
.reduce((sum, r) => sum + (r.items?.length || 0), 0);
|
|
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}
|
|
onCheckedChange={handlers.onToggle}
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="text-center text-muted-foreground">{globalIndex}</TableCell>
|
|
<TableCell className="font-medium">{process.processCode}</TableCell>
|
|
<TableCell>{process.processName}</TableCell>
|
|
<TableCell>{process.department}</TableCell>
|
|
<TableCell className="text-center">{itemCount > 0 ? itemCount : '-'}</TableCell>
|
|
<TableCell className="text-center">
|
|
<Badge variant={process.needsInspection ? 'default' : 'secondary'}>
|
|
{process.needsInspection ? '사용' : '미사용'}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<Badge variant={process.needsWorkLog ? 'default' : 'secondary'}>
|
|
{process.needsWorkLog ? '사용' : '미사용'}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
|
<Badge
|
|
variant={process.status === '사용중' ? 'default' : 'secondary'}
|
|
className="cursor-pointer"
|
|
onClick={() => handleToggleStatus(process.id)}
|
|
>
|
|
{process.status === '사용중' ? '사용' : '미사용'}
|
|
</Badge>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
},
|
|
|
|
// 모바일 카드 렌더링
|
|
renderMobileCard: (
|
|
process: Process,
|
|
index: number,
|
|
globalIndex: number,
|
|
handlers: SelectionHandlers & RowClickHandlers<Process>
|
|
) => {
|
|
const itemCount = process.classificationRules
|
|
.filter(r => r.registrationType === 'individual')
|
|
.reduce((sum, r) => sum + (r.items?.length || 0), 0);
|
|
return (
|
|
<ListMobileCard
|
|
key={process.id}
|
|
id={process.id}
|
|
isSelected={handlers.isSelected}
|
|
onToggleSelection={handlers.onToggle}
|
|
onClick={() => handleRowClick(process)}
|
|
headerBadges={
|
|
<>
|
|
<Badge variant="outline" className="text-xs">{globalIndex}</Badge>
|
|
<Badge variant="outline" className="text-xs font-mono">{process.processCode}</Badge>
|
|
</>
|
|
}
|
|
title={process.processName}
|
|
statusBadge={
|
|
<Badge
|
|
variant={process.status === '사용중' ? 'default' : 'secondary'}
|
|
className="cursor-pointer"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleToggleStatus(process.id);
|
|
}}
|
|
>
|
|
{process.status === '사용중' ? '사용' : '미사용'}
|
|
</Badge>
|
|
}
|
|
infoGrid={
|
|
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
|
<InfoField label="담당부서" value={process.department} />
|
|
<InfoField label="품목" value={itemCount > 0 ? `${itemCount}개` : '-'} />
|
|
<InfoField label="중간검사" value={process.needsInspection ? '사용' : '미사용'} />
|
|
<InfoField label="작업일지" value={process.needsWorkLog ? '사용' : '미사용'} />
|
|
</div>
|
|
}
|
|
/>
|
|
);
|
|
},
|
|
}),
|
|
[handleCreate, handleRowClick, handleToggleStatus, handleBulkDelete, startDate, endDate, searchQuery, isOrderChanged, handleSaveOrder, handleDragStart, handleDragOver, handleDragLeave, handleDragEnd, handleProcessDrop]
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<UniversalListPage config={config} initialData={allProcesses} onSearchChange={setSearchQuery} />
|
|
|
|
{/* 삭제 확인 다이얼로그 */}
|
|
<DeleteConfirmDialog
|
|
open={deleteDialogOpen}
|
|
onOpenChange={setDeleteDialogOpen}
|
|
description="선택한 공정을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
|
|
loading={isLoading}
|
|
onConfirm={handleDeleteConfirm}
|
|
/>
|
|
</>
|
|
);
|
|
}
|