feat(WEB): 공정관리/작업지시/작업자화면 기능 강화 및 템플릿 개선
- 공정관리: ProcessDetail/ProcessForm/ProcessList 개선, StepDetail/StepForm 신규 추가 - 작업지시: WorkOrderDetail/Edit/List UI 개선, 작업지시서 문서 추가 - 작업자화면: WorkerScreen 대폭 개선, MaterialInputModal/WorkLogModal 수정, WorkItemCard 신규 - 영업주문: 주문 상세 페이지 개선 - 입고관리: 상세/actions 수정 - 템플릿: IntegratedDetailTemplate/IntegratedListTemplateV2/UniversalListPage 기능 확장 - UI: confirm-dialog 개선 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
유병철
@@ -1,17 +1,25 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo } from 'react';
|
||||
/**
|
||||
* 공정 상세 페이지 (리디자인)
|
||||
*
|
||||
* 기획서 스크린샷 1 기준:
|
||||
* - 기본 정보: 공정번호, 공정형, 담당부서, 담당자, 생산일자, 상태
|
||||
* - 품목 설정 정보: 품목 선택 버튼 + 개수 표시
|
||||
* - 단계 테이블: 드래그&드롭 순서변경 + 단계 등록 버튼
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { List, Edit, Wrench, Package, ArrowLeft } from 'lucide-react';
|
||||
import { ArrowLeft, Edit, GripVertical, Plus, Package } 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 { ProcessWorkLogPreviewModal } from './ProcessWorkLogPreviewModal';
|
||||
import { useMenuStore } from '@/store/menuStore';
|
||||
import type { Process } from '@/types/process';
|
||||
import { MATCHING_TYPE_OPTIONS } from '@/types/process';
|
||||
import { getProcessSteps } from './actions';
|
||||
import type { Process, ProcessStep } from '@/types/process';
|
||||
|
||||
interface ProcessDetailProps {
|
||||
process: Process;
|
||||
@@ -19,26 +27,36 @@ interface ProcessDetailProps {
|
||||
|
||||
export function ProcessDetail({ process }: ProcessDetailProps) {
|
||||
const router = useRouter();
|
||||
const [workLogModalOpen, setWorkLogModalOpen] = useState(false);
|
||||
const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);
|
||||
|
||||
// 패턴 규칙과 개별 품목 분리
|
||||
const { patternRules, individualItems } = useMemo(() => {
|
||||
const patterns = process.classificationRules.filter(
|
||||
(rule) => rule.registrationType === 'pattern'
|
||||
);
|
||||
const individuals = process.classificationRules.filter(
|
||||
(rule) => rule.registrationType === 'individual'
|
||||
);
|
||||
return { patternRules: patterns, individualItems: individuals };
|
||||
}, [process.classificationRules]);
|
||||
// 단계 목록 상태
|
||||
const [steps, setSteps] = useState<ProcessStep[]>([]);
|
||||
const [isStepsLoading, setIsStepsLoading] = useState(true);
|
||||
|
||||
// 매칭 타입 라벨
|
||||
const getMatchingTypeLabel = (type: string) => {
|
||||
const option = MATCHING_TYPE_OPTIONS.find((opt) => opt.value === type);
|
||||
return option?.label || type;
|
||||
};
|
||||
// 드래그 상태
|
||||
const [dragIndex, setDragIndex] = useState<number | null>(null);
|
||||
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
|
||||
const dragNodeRef = useRef<HTMLTableRowElement | null>(null);
|
||||
|
||||
// 품목 개수 계산 (기존 classificationRules에서 individual 품목)
|
||||
const itemCount = process.classificationRules
|
||||
.filter((r) => r.registrationType === 'individual')
|
||||
.reduce((sum, r) => sum + (r.items?.length || 0), 0);
|
||||
|
||||
// 단계 목록 로드
|
||||
useEffect(() => {
|
||||
const loadSteps = async () => {
|
||||
setIsStepsLoading(true);
|
||||
const result = await getProcessSteps(process.id);
|
||||
if (result.success && result.data) {
|
||||
setSteps(result.data);
|
||||
}
|
||||
setIsStepsLoading(false);
|
||||
};
|
||||
loadSteps();
|
||||
}, [process.id]);
|
||||
|
||||
// 네비게이션
|
||||
const handleEdit = () => {
|
||||
router.push(`/ko/master-data/process-management/${process.id}?mode=edit`);
|
||||
};
|
||||
@@ -47,17 +65,61 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
|
||||
router.push('/ko/master-data/process-management');
|
||||
};
|
||||
|
||||
const handleViewWorkLog = () => {
|
||||
setWorkLogModalOpen(true);
|
||||
const handleAddStep = () => {
|
||||
router.push(`/ko/master-data/process-management/${process.id}/steps/new`);
|
||||
};
|
||||
|
||||
const handleStepClick = (stepId: string) => {
|
||||
router.push(`/ko/master-data/process-management/${process.id}/steps/${stepId}`);
|
||||
};
|
||||
|
||||
// ===== 드래그&드롭 (HTML5 네이티브) =====
|
||||
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;
|
||||
|
||||
setSteps((prev) => {
|
||||
const updated = [...prev];
|
||||
const [moved] = updated.splice(dragIndex, 1);
|
||||
updated.splice(dropIndex, 0, moved);
|
||||
// 순서 재할당
|
||||
return updated.map((step, i) => ({ ...step, order: i + 1 }));
|
||||
});
|
||||
|
||||
handleDragEnd();
|
||||
}, [dragIndex, handleDragEnd]);
|
||||
|
||||
return (
|
||||
<PageLayout>
|
||||
{/* 헤더 */}
|
||||
<PageHeader
|
||||
title="공정 상세"
|
||||
icon={Wrench}
|
||||
/>
|
||||
<PageHeader title="공정 상세" />
|
||||
|
||||
<div className="space-y-6 pb-24">
|
||||
{/* 기본 정보 */}
|
||||
@@ -66,202 +128,199 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
|
||||
<CardTitle className="text-base">기본 정보</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
{/* 반응형 6열 그리드: PC 6열, 태블릿 4열, 작은태블릿 2열, 모바일 1열 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
|
||||
<div className="space-y-1 lg:col-span-2">
|
||||
<div className="text-sm text-muted-foreground">공정코드</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">공정번호</div>
|
||||
<div className="font-medium">{process.processCode}</div>
|
||||
</div>
|
||||
<div className="space-y-1 lg:col-span-2">
|
||||
<div className="text-sm text-muted-foreground">공정명</div>
|
||||
<div className="font-medium">{process.processName}</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">공정구분</div>
|
||||
<div className="text-sm text-muted-foreground">공정형</div>
|
||||
<Badge variant="secondary">{process.processType}</Badge>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">담당부서</div>
|
||||
<div className="font-medium">{process.department}</div>
|
||||
<div className="font-medium">{process.department || '-'}</div>
|
||||
</div>
|
||||
<div className="space-y-1 lg:col-span-2">
|
||||
<div className="text-sm text-muted-foreground">작업일지 양식</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">
|
||||
{process.workLogTemplate || '-'}
|
||||
</span>
|
||||
{process.workLogTemplate && (
|
||||
<Button variant="outline" size="sm" onClick={handleViewWorkLog}>
|
||||
양식 보기
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 등록 정보 */}
|
||||
<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 md:grid-cols-4 lg:grid-cols-6 gap-6">
|
||||
<div className="space-y-1 lg:col-span-3">
|
||||
<div className="text-sm text-muted-foreground">등록일</div>
|
||||
<div className="font-medium">{process.createdAt}</div>
|
||||
</div>
|
||||
<div className="space-y-1 lg:col-span-3">
|
||||
<div className="text-sm text-muted-foreground">최종수정일</div>
|
||||
<div className="font-medium">{process.updatedAt}</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 자동 분류 규칙 (패턴 기반) */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Wrench className="h-4 w-4" />
|
||||
자동 분류 규칙
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
{patternRules.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<Wrench className="h-10 w-10 mx-auto mb-3 opacity-30" />
|
||||
<p className="text-sm">등록된 자동 분류 규칙이 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{patternRules.map((rule) => (
|
||||
<div
|
||||
key={rule.id}
|
||||
className="flex items-center justify-between p-4 border rounded-lg"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge variant={rule.isActive ? 'default' : 'secondary'}>
|
||||
{rule.isActive ? '활성' : '비활성'}
|
||||
</Badge>
|
||||
<div>
|
||||
<div className="font-medium">
|
||||
{rule.ruleType} · {getMatchingTypeLabel(rule.matchingType)} · "{rule.conditionValue}"
|
||||
</div>
|
||||
{rule.description && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{rule.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="outline">우선순위: {rule.priority}</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 개별 품목 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Package className="h-4 w-4" />
|
||||
개별 품목
|
||||
{individualItems.length > 0 && individualItems[0].items && (
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
{individualItems[0].items.length}개
|
||||
</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
{individualItems.length === 0 || !individualItems[0].items?.length ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<Package className="h-10 w-10 mx-auto mb-3 opacity-30" />
|
||||
<p className="text-sm">등록된 개별 품목이 없습니다</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-80 overflow-y-auto">
|
||||
<div className="space-y-2">
|
||||
{individualItems[0].items.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center justify-between p-3 border rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="outline" className="font-mono text-xs">
|
||||
{item.code}
|
||||
</Badge>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 세부 작업단계 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<CardTitle className="text-base">세부 작업단계</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
{process.workSteps.length > 0 ? (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{process.workSteps.map((step, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="px-3 py-1.5 bg-muted/50"
|
||||
>
|
||||
<span className="bg-primary text-primary-foreground rounded-full w-5 h-5 flex items-center justify-center text-xs mr-2">
|
||||
{index + 1}
|
||||
</span>
|
||||
{step}
|
||||
</Badge>
|
||||
{index < process.workSteps.length - 1 && (
|
||||
<span className="text-muted-foreground">{'>'}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-muted-foreground">-</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 작업 정보 */}
|
||||
<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 md:grid-cols-4 lg:grid-cols-6 gap-6">
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">필요인원</div>
|
||||
<div className="font-medium">{process.requiredWorkers}명</div>
|
||||
<div className="text-sm text-muted-foreground">담당자</div>
|
||||
<div className="font-medium">{process.manager || '-'}</div>
|
||||
</div>
|
||||
<div className="space-y-1 lg:col-span-2">
|
||||
<div className="text-sm text-muted-foreground">설비정보</div>
|
||||
<div className="font-medium">{process.equipmentInfo || '-'}</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">생산일자</div>
|
||||
<div className="font-medium">
|
||||
{process.useProductionDate ? '사용' : '미사용'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1 lg:col-span-3">
|
||||
<div className="text-sm text-muted-foreground">설명</div>
|
||||
<div className="font-medium">{process.description || '-'}</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">상태</div>
|
||||
<Badge variant={process.status === '사용중' ? 'default' : 'secondary'}>
|
||||
{process.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 품목 설정 정보 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Package className="h-4 w-4" />
|
||||
품목 설정 정보
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
품목을 선택하면 이 공정으로 분류됩니다
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="outline" className="text-sm">
|
||||
{itemCount}개
|
||||
</Badge>
|
||||
<Button variant="outline" size="sm" onClick={handleEdit}>
|
||||
품목 선택
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
{/* 단계 테이블 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-base">
|
||||
단계
|
||||
{!isStepsLoading && (
|
||||
<span className="text-sm font-normal text-muted-foreground ml-2">
|
||||
총 {steps.length}건
|
||||
</span>
|
||||
)}
|
||||
</CardTitle>
|
||||
<Button size="sm" onClick={handleAddStep}>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
단계 등록
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{isStepsLoading ? (
|
||||
<div className="p-8 text-center text-muted-foreground">
|
||||
로딩 중...
|
||||
</div>
|
||||
) : steps.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>
|
||||
<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="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
|
||||
단계명
|
||||
</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
필수여부
|
||||
</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
승인여부
|
||||
</th>
|
||||
<th className="w-20 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>
|
||||
{steps.map((step, index) => (
|
||||
<tr
|
||||
key={step.id}
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(e, index)}
|
||||
onDragOver={(e) => handleDragOver(e, index)}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDrop={(e) => handleDrop(e, index)}
|
||||
onClick={() => handleStepClick(step.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">
|
||||
{step.stepCode}
|
||||
</td>
|
||||
<td className="px-3 py-3 text-sm font-medium">
|
||||
{step.stepName}
|
||||
</td>
|
||||
<td className="w-20 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.isRequired ? 'default' : 'outline'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.isRequired ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="w-20 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.needsApproval ? 'default' : 'outline'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.needsApproval ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="w-20 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.needsInspection ? 'default' : 'outline'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.needsInspection ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="w-16 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.isActive ? 'default' : 'secondary'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.isActive ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 하단 액션 버튼 (sticky) */}
|
||||
<div className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}>
|
||||
<div
|
||||
className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}
|
||||
>
|
||||
<Button variant="outline" onClick={handleList}>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
목록으로
|
||||
@@ -271,13 +330,6 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
|
||||
수정
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 작업일지 양식 미리보기 모달 */}
|
||||
<ProcessWorkLogPreviewModal
|
||||
open={workLogModalOpen}
|
||||
onOpenChange={setWorkLogModalOpen}
|
||||
process={process}
|
||||
/>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,24 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 공정 등록/수정 폼 컴포넌트
|
||||
* IntegratedDetailTemplate 마이그레이션 (2025-01-20)
|
||||
* 공정 등록/수정 폼 컴포넌트 (리디자인)
|
||||
*
|
||||
* 기획서 스크린샷 1 기준:
|
||||
* - 기본 정보: 공정명(자동생성), 공정형, 담당부서, 담당자, 생산일자, 상태
|
||||
* - 품목 설정 정보: 품목 선택 팝업 연동
|
||||
* - 단계 관리: 단계 등록/수정/삭제 (인라인)
|
||||
*
|
||||
* 제거된 섹션: 자동분류규칙, 작업정보, 설명
|
||||
*/
|
||||
|
||||
import { useState, useCallback, useEffect } from 'react';
|
||||
import { useState, useCallback, useEffect, useRef } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Plus, Wrench, Trash2, Pencil } from 'lucide-react';
|
||||
import { Plus, GripVertical, Trash2, Package } from 'lucide-react';
|
||||
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
|
||||
import { processCreateConfig, processEditConfig } from './processConfig';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { QuantityInput } from '@/components/ui/quantity-input';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
@@ -25,20 +28,18 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { RuleModal } from './RuleModal';
|
||||
import { toast } from 'sonner';
|
||||
import type { Process, ClassificationRule, ProcessType } from '@/types/process';
|
||||
import { PROCESS_TYPE_OPTIONS, MATCHING_TYPE_OPTIONS } from '@/types/process';
|
||||
import { createProcess, updateProcess, getDepartmentOptions, type DepartmentOption } from './actions';
|
||||
|
||||
// 작업일지 양식 옵션 (추후 API 연동 가능)
|
||||
const WORK_LOG_OPTIONS = [
|
||||
{ value: '스크린 작업일지', label: '스크린 작업일지' },
|
||||
{ value: '절곡 작업일지', label: '절곡 작업일지' },
|
||||
{ value: '슬랫 작업일지', label: '슬랫 작업일지' },
|
||||
{ value: '재고생산 작업일지', label: '재고생산 작업일지' },
|
||||
{ value: '포장 작업일지', label: '포장 작업일지' },
|
||||
];
|
||||
import type { Process, ClassificationRule, ProcessType, ProcessStep } from '@/types/process';
|
||||
import { PROCESS_TYPE_OPTIONS } from '@/types/process';
|
||||
import {
|
||||
createProcess,
|
||||
updateProcess,
|
||||
getDepartmentOptions,
|
||||
getProcessSteps,
|
||||
type DepartmentOption,
|
||||
} from './actions';
|
||||
|
||||
interface ProcessFormProps {
|
||||
mode: 'create' | 'edit';
|
||||
@@ -49,36 +50,48 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
const router = useRouter();
|
||||
const isEdit = mode === 'edit';
|
||||
|
||||
// 폼 상태
|
||||
// 기본 정보 상태
|
||||
const [processName, setProcessName] = useState(initialData?.processName || '');
|
||||
const [processType, setProcessType] = useState<ProcessType>(
|
||||
initialData?.processType || '생산'
|
||||
);
|
||||
const [department, setDepartment] = useState(initialData?.department || '');
|
||||
const [workLogTemplate, setWorkLogTemplate] = useState(
|
||||
initialData?.workLogTemplate || ''
|
||||
const [manager, setManager] = useState(initialData?.manager || '');
|
||||
const [useProductionDate, setUseProductionDate] = useState(
|
||||
initialData?.useProductionDate ?? false
|
||||
);
|
||||
const [isActive, setIsActive] = useState(
|
||||
initialData ? initialData.status === '사용중' : true
|
||||
);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// 품목 분류 규칙 (기존 로직 유지)
|
||||
const [classificationRules, setClassificationRules] = useState<ClassificationRule[]>(
|
||||
initialData?.classificationRules || []
|
||||
);
|
||||
const [requiredWorkers, setRequiredWorkers] = useState(
|
||||
initialData?.requiredWorkers || 1
|
||||
);
|
||||
const [equipmentInfo, setEquipmentInfo] = useState(initialData?.equipmentInfo || '');
|
||||
const [workSteps, setWorkSteps] = useState(initialData?.workSteps?.join(', ') || '');
|
||||
const [note, setNote] = useState(initialData?.note || '');
|
||||
const [isActive, setIsActive] = useState(initialData ? initialData.status === '사용중' : true);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// 단계 목록 상태
|
||||
const [steps, setSteps] = useState<ProcessStep[]>([]);
|
||||
const [isStepsLoading, setIsStepsLoading] = useState(isEdit);
|
||||
|
||||
// 부서 목록 상태
|
||||
const [departmentOptions, setDepartmentOptions] = useState<DepartmentOption[]>([]);
|
||||
const [isDepartmentsLoading, setIsDepartmentsLoading] = useState(true);
|
||||
|
||||
// 규칙 모달 상태
|
||||
// 품목 선택 모달 상태
|
||||
const [ruleModalOpen, setRuleModalOpen] = useState(false);
|
||||
const [editingRule, setEditingRule] = useState<ClassificationRule | undefined>(undefined);
|
||||
|
||||
// 부서 목록 로드
|
||||
// 드래그 상태
|
||||
const [dragIndex, setDragIndex] = useState<number | null>(null);
|
||||
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
|
||||
|
||||
// 품목 개수 계산
|
||||
const itemCount = classificationRules
|
||||
.filter((r) => r.registrationType === 'individual')
|
||||
.reduce((sum, r) => sum + (r.items?.length || 0), 0);
|
||||
|
||||
// 부서 목록 + 단계 목록 로드
|
||||
useEffect(() => {
|
||||
const loadDepartments = async () => {
|
||||
setIsDepartmentsLoading(true);
|
||||
@@ -89,20 +102,28 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
loadDepartments();
|
||||
}, []);
|
||||
|
||||
// 규칙 추가/수정
|
||||
useEffect(() => {
|
||||
if (isEdit && initialData?.id) {
|
||||
const loadSteps = async () => {
|
||||
setIsStepsLoading(true);
|
||||
const result = await getProcessSteps(initialData.id);
|
||||
if (result.success && result.data) {
|
||||
setSteps(result.data);
|
||||
}
|
||||
setIsStepsLoading(false);
|
||||
};
|
||||
loadSteps();
|
||||
}
|
||||
}, [isEdit, initialData?.id]);
|
||||
|
||||
// 품목 규칙 추가/수정
|
||||
const handleSaveRule = useCallback(
|
||||
(ruleData: Omit<ClassificationRule, 'id' | 'createdAt'>) => {
|
||||
if (editingRule) {
|
||||
// 수정 모드
|
||||
setClassificationRules((prev) =>
|
||||
prev.map((r) =>
|
||||
r.id === editingRule.id
|
||||
? { ...r, ...ruleData }
|
||||
: r
|
||||
)
|
||||
prev.map((r) => (r.id === editingRule.id ? { ...r, ...ruleData } : r))
|
||||
);
|
||||
} else {
|
||||
// 추가 모드
|
||||
const newRule: ClassificationRule = {
|
||||
...ruleData,
|
||||
id: `rule-${Date.now()}`,
|
||||
@@ -115,18 +136,6 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
[editingRule]
|
||||
);
|
||||
|
||||
// 규칙 수정 모달 열기
|
||||
const handleEditRule = useCallback((rule: ClassificationRule) => {
|
||||
setEditingRule(rule);
|
||||
setRuleModalOpen(true);
|
||||
}, []);
|
||||
|
||||
// 규칙 삭제
|
||||
const handleDeleteRule = useCallback((ruleId: string) => {
|
||||
setClassificationRules((prev) => prev.filter((r) => r.id !== ruleId));
|
||||
}, []);
|
||||
|
||||
// 모달 닫기
|
||||
const handleModalClose = useCallback((open: boolean) => {
|
||||
setRuleModalOpen(open);
|
||||
if (!open) {
|
||||
@@ -134,22 +143,91 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 단계 삭제
|
||||
const handleDeleteStep = useCallback((stepId: string) => {
|
||||
setSteps((prev) => prev.filter((s) => s.id !== stepId));
|
||||
}, []);
|
||||
|
||||
// 단계 상세 이동
|
||||
const handleStepClick = (stepId: string) => {
|
||||
if (isEdit && initialData?.id) {
|
||||
router.push(`/ko/master-data/process-management/${initialData.id}/steps/${stepId}`);
|
||||
}
|
||||
};
|
||||
|
||||
// 단계 등록 이동
|
||||
const handleAddStep = () => {
|
||||
if (isEdit && initialData?.id) {
|
||||
router.push(`/ko/master-data/process-management/${initialData.id}/steps/new`);
|
||||
} else {
|
||||
toast.info('공정을 먼저 등록한 후 단계를 추가할 수 있습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
// 드래그&드롭
|
||||
const dragNodeRef = useRef<HTMLElement | null>(null);
|
||||
|
||||
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';
|
||||
}
|
||||
dragNodeRef.current = null;
|
||||
setDragIndex(null);
|
||||
setDragOverIndex(null);
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(e: React.DragEvent<HTMLTableRowElement>, dropIndex: number) => {
|
||||
e.preventDefault();
|
||||
if (dragIndex === null || dragIndex === dropIndex) {
|
||||
handleDragEnd();
|
||||
return;
|
||||
}
|
||||
|
||||
setSteps((prev) => {
|
||||
const updated = [...prev];
|
||||
const [moved] = updated.splice(dragIndex, 1);
|
||||
updated.splice(dropIndex, 0, moved);
|
||||
return updated.map((step, i) => ({ ...step, order: i + 1 }));
|
||||
});
|
||||
|
||||
handleDragEnd();
|
||||
},
|
||||
[dragIndex, handleDragEnd]
|
||||
);
|
||||
|
||||
// 제출
|
||||
const handleSubmit = async () => {
|
||||
const handleSubmit = async (): Promise<{ success: boolean; error?: string }> => {
|
||||
if (!processName.trim()) {
|
||||
toast.error('공정명을 입력해주세요.');
|
||||
return;
|
||||
return { success: false, error: '공정명을 입력해주세요.' };
|
||||
}
|
||||
if (!department) {
|
||||
toast.error('담당부서를 선택해주세요.');
|
||||
return;
|
||||
return { success: false, error: '담당부서를 선택해주세요.' };
|
||||
}
|
||||
|
||||
const formData = {
|
||||
processName: processName.trim(),
|
||||
processType,
|
||||
department,
|
||||
workLogTemplate: workLogTemplate || undefined,
|
||||
classificationRules: classificationRules.map((rule) => ({
|
||||
registrationType: rule.registrationType,
|
||||
ruleType: rule.ruleType,
|
||||
@@ -159,10 +237,8 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
description: rule.description,
|
||||
isActive: rule.isActive,
|
||||
})),
|
||||
requiredWorkers,
|
||||
equipmentInfo: equipmentInfo.trim() || undefined,
|
||||
workSteps: workSteps,
|
||||
note: note.trim() || undefined,
|
||||
requiredWorkers: 1,
|
||||
workSteps: '',
|
||||
isActive,
|
||||
};
|
||||
|
||||
@@ -173,294 +249,343 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
if (result.success) {
|
||||
toast.success('공정이 수정되었습니다.');
|
||||
router.push('/ko/master-data/process-management');
|
||||
return { success: true };
|
||||
} else {
|
||||
toast.error(result.error || '수정에 실패했습니다.');
|
||||
return { success: false, error: result.error };
|
||||
}
|
||||
} else {
|
||||
const result = await createProcess(formData);
|
||||
if (result.success) {
|
||||
toast.success('공정이 등록되었습니다.');
|
||||
router.push('/ko/master-data/process-management');
|
||||
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 = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
// ===== 폼 콘텐츠 렌더링 =====
|
||||
const renderFormContent = useCallback(() => (
|
||||
<>
|
||||
<div className="space-y-6">
|
||||
{/* 기본 정보 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<CardTitle className="text-base">기본 정보</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
{/* 반응형 6열 그리드: PC 6열, 태블릿 4열, 작은태블릿 2열, 모바일 1열 */}
|
||||
{/* 4개 필드 → 2+1+2+1 = 6열 채움 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
|
||||
<div className="space-y-2 lg:col-span-2">
|
||||
<Label htmlFor="processName">공정명 *</Label>
|
||||
<Input
|
||||
id="processName"
|
||||
value={processName}
|
||||
onChange={(e) => setProcessName(e.target.value)}
|
||||
placeholder="예: 스크린"
|
||||
/>
|
||||
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 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="processName">공정명 *</Label>
|
||||
<Input
|
||||
id="processName"
|
||||
value={processName}
|
||||
onChange={(e) => setProcessName(e.target.value)}
|
||||
placeholder="예: 스크린"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>공정형</Label>
|
||||
<Select
|
||||
value={processType}
|
||||
onValueChange={(v) => setProcessType(v as ProcessType)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PROCESS_TYPE_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>담당부서 *</Label>
|
||||
<Select
|
||||
value={department}
|
||||
onValueChange={setDepartment}
|
||||
disabled={isDepartmentsLoading}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue
|
||||
placeholder={isDepartmentsLoading ? '로딩 중...' : '선택하세요'}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{departmentOptions.map((opt) => (
|
||||
<SelectItem key={opt.id} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>담당자</Label>
|
||||
<Input
|
||||
value={manager}
|
||||
onChange={(e) => setManager(e.target.value)}
|
||||
placeholder="담당자명"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>생산일자</Label>
|
||||
<div className="flex items-center gap-2 h-10">
|
||||
<Switch
|
||||
checked={useProductionDate}
|
||||
onCheckedChange={setUseProductionDate}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{useProductionDate ? '사용' : '미사용'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>상태</Label>
|
||||
<Select
|
||||
value={isActive ? '사용중' : '미사용'}
|
||||
onValueChange={(v) => setIsActive(v === '사용중')}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="사용중">사용중</SelectItem>
|
||||
<SelectItem value="미사용">미사용</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>공정구분</Label>
|
||||
<Select
|
||||
value={processType}
|
||||
onValueChange={(v) => setProcessType(v as ProcessType)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PROCESS_TYPE_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2 lg:col-span-2">
|
||||
<Label>담당부서 *</Label>
|
||||
<Select value={department} onValueChange={setDepartment} disabled={isDepartmentsLoading}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={isDepartmentsLoading ? "로딩 중..." : "선택하세요"} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{departmentOptions.map((opt) => (
|
||||
<SelectItem key={opt.id} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>작업일지 양식</Label>
|
||||
<Select value={workLogTemplate} onValueChange={setWorkLogTemplate}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{WORK_LOG_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 자동 분류 규칙 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base">자동 분류 규칙</CardTitle>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
품목이 이 공정에 이동으로 분류되는 규칙을 생성합니다.
|
||||
</p>
|
||||
{/* 품목 설정 정보 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Package className="h-4 w-4" />
|
||||
품목 설정 정보
|
||||
</CardTitle>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
품목을 선택하면 이 공정으로 분류됩니다
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant="outline" className="text-sm">
|
||||
{itemCount}개
|
||||
</Badge>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setRuleModalOpen(true)}
|
||||
>
|
||||
품목 선택
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={() => setRuleModalOpen(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
규칙 추가
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
{classificationRules.length === 0 ? (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
<Wrench className="h-12 w-12 mx-auto mb-4 opacity-30" />
|
||||
<p className="font-medium">품목별 규칙이 없습니다</p>
|
||||
<p className="text-sm mt-1">
|
||||
규칙을 추가하면 해당 패턴의 품목이 이 공정으로 분류됩니다
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{classificationRules.map((rule, index) => {
|
||||
// 개별 품목인 경우 품목 개수 계산
|
||||
const isIndividual = rule.registrationType === 'individual';
|
||||
const itemCount = isIndividual
|
||||
? rule.conditionValue.split(',').filter(Boolean).length
|
||||
: 0;
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
return (
|
||||
<div
|
||||
key={rule.id}
|
||||
className="flex items-start justify-between p-4 border rounded-lg"
|
||||
>
|
||||
<div className="flex gap-3">
|
||||
{/* 번호 */}
|
||||
<span className="text-muted-foreground font-medium mt-0.5">
|
||||
{index + 1}.
|
||||
</span>
|
||||
<div className="space-y-1">
|
||||
{/* 제목 */}
|
||||
<div className="font-medium">
|
||||
{isIndividual ? (
|
||||
<>개별 품목 지정 - {itemCount}개 품목</>
|
||||
) : (
|
||||
<>
|
||||
{rule.ruleType}{' '}
|
||||
{
|
||||
MATCHING_TYPE_OPTIONS.find(
|
||||
(o) => o.value === rule.matchingType
|
||||
)?.label
|
||||
}{' '}
|
||||
"{rule.conditionValue}"
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* 뱃지 + 우선순위 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{isIndividual
|
||||
? `${itemCount}개 품목 배정됨`
|
||||
: rule.isActive
|
||||
? '활성'
|
||||
: '비활성'}
|
||||
{/* 단계 테이블 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-base">
|
||||
단계
|
||||
{!isStepsLoading && (
|
||||
<span className="text-sm font-normal text-muted-foreground ml-2">
|
||||
총 {steps.length}건
|
||||
</span>
|
||||
)}
|
||||
</CardTitle>
|
||||
<Button type="button" size="sm" onClick={handleAddStep}>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
단계 등록
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{isStepsLoading ? (
|
||||
<div className="p-8 text-center text-muted-foreground">로딩 중...</div>
|
||||
) : steps.length === 0 ? (
|
||||
<div className="p-8 text-center text-muted-foreground">
|
||||
{isEdit
|
||||
? '등록된 단계가 없습니다. [단계 등록] 버튼으로 추가해주세요.'
|
||||
: '공정을 먼저 등록한 후 단계를 추가할 수 있습니다.'}
|
||||
</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" />
|
||||
<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="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
|
||||
단계명
|
||||
</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
필수여부
|
||||
</th>
|
||||
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
||||
승인여부
|
||||
</th>
|
||||
<th className="w-20 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>
|
||||
<th className="w-12 px-3 py-3" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{steps.map((step, index) => (
|
||||
<tr
|
||||
key={step.id}
|
||||
draggable
|
||||
onDragStart={(e) => handleDragStart(e, index)}
|
||||
onDragOver={(e) => handleDragOver(e, index)}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDrop={(e) => handleDrop(e, index)}
|
||||
onClick={() => handleStepClick(step.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">{step.stepCode}</td>
|
||||
<td className="px-3 py-3 text-sm font-medium">{step.stepName}</td>
|
||||
<td className="w-20 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.isRequired ? 'default' : 'outline'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.isRequired ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
우선순위: {rule.priority}
|
||||
</span>
|
||||
</div>
|
||||
{/* 설명 */}
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{isIndividual
|
||||
? `직접 선택한 품목 ${itemCount}개`
|
||||
: rule.description || ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 수정/삭제 버튼 */}
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleEditRule(rule)}
|
||||
className="h-8 w-8"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteRule(rule.id)}
|
||||
className="h-8 w-8 text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</td>
|
||||
<td className="w-20 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.needsApproval ? 'default' : 'outline'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.needsApproval ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="w-20 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.needsInspection ? 'default' : 'outline'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.needsInspection ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="w-16 px-3 py-3 text-center">
|
||||
<Badge
|
||||
variant={step.isActive ? 'default' : 'secondary'}
|
||||
className="text-xs"
|
||||
>
|
||||
{step.isActive ? 'Y' : 'N'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="w-12 px-3 py-3 text-center">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-muted-foreground hover:text-destructive"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteStep(step.id);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 작업 정보 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<CardTitle className="text-base">작업 정보</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
{/* 반응형 6열 그리드: PC 6열, 태블릿 4열, 작은태블릿 2열, 모바일 1열 */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label>필요인원</Label>
|
||||
<QuantityInput
|
||||
value={requiredWorkers}
|
||||
onChange={(value) => setRequiredWorkers(value ?? 1)}
|
||||
min={1}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2 lg:col-span-2">
|
||||
<Label>설비정보</Label>
|
||||
<Input
|
||||
value={equipmentInfo}
|
||||
onChange={(e) => setEquipmentInfo(e.target.value)}
|
||||
placeholder="예: 미싱기 3대, 절단기 1대"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2 lg:col-span-3">
|
||||
<Label>세부 작업단계 (쉼표로 구분)</Label>
|
||||
<Input
|
||||
value={workSteps}
|
||||
onChange={(e) => setWorkSteps(e.target.value)}
|
||||
placeholder="예: 원단절단, 미싱, 핸드작업, 중간검사, 포장"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* 품목 선택 모달 */}
|
||||
<RuleModal
|
||||
open={ruleModalOpen}
|
||||
onOpenChange={handleModalClose}
|
||||
onAdd={handleSaveRule}
|
||||
editRule={editingRule}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
[
|
||||
processName,
|
||||
processType,
|
||||
department,
|
||||
manager,
|
||||
useProductionDate,
|
||||
isActive,
|
||||
classificationRules,
|
||||
steps,
|
||||
isStepsLoading,
|
||||
ruleModalOpen,
|
||||
editingRule,
|
||||
departmentOptions,
|
||||
isDepartmentsLoading,
|
||||
itemCount,
|
||||
dragIndex,
|
||||
dragOverIndex,
|
||||
handleSaveRule,
|
||||
handleModalClose,
|
||||
handleDeleteStep,
|
||||
handleAddStep,
|
||||
handleStepClick,
|
||||
handleDragStart,
|
||||
handleDragOver,
|
||||
handleDragEnd,
|
||||
handleDrop,
|
||||
isEdit,
|
||||
initialData?.id,
|
||||
]
|
||||
);
|
||||
|
||||
{/* 설명 */}
|
||||
<Card>
|
||||
<CardHeader className="bg-muted/50">
|
||||
<CardTitle className="text-base">설명</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label>설명</Label>
|
||||
<Textarea
|
||||
value={note}
|
||||
onChange={(e) => setNote(e.target.value)}
|
||||
placeholder="공정에 대한 설명"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="isActive"
|
||||
checked={isActive}
|
||||
onCheckedChange={(checked) => setIsActive(checked as boolean)}
|
||||
/>
|
||||
<Label htmlFor="isActive" className="font-normal">
|
||||
사용함
|
||||
</Label>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 규칙 추가/수정 모달 */}
|
||||
<RuleModal
|
||||
open={ruleModalOpen}
|
||||
onOpenChange={handleModalClose}
|
||||
onAdd={handleSaveRule}
|
||||
editRule={editingRule}
|
||||
/>
|
||||
</>
|
||||
), [
|
||||
processName, processType, department, workLogTemplate, classificationRules,
|
||||
requiredWorkers, equipmentInfo, workSteps, note, isActive, ruleModalOpen,
|
||||
editingRule, departmentOptions, isDepartmentsLoading, handleSaveRule,
|
||||
handleEditRule, handleDeleteRule, handleModalClose,
|
||||
]);
|
||||
|
||||
// Config 선택 (create/edit)
|
||||
const config = isEdit ? processEditConfig : processCreateConfig;
|
||||
|
||||
return (
|
||||
@@ -468,8 +593,6 @@ export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
||||
config={config}
|
||||
mode={isEdit ? 'edit' : 'create'}
|
||||
isLoading={isDepartmentsLoading}
|
||||
isSubmitting={isLoading}
|
||||
onBack={handleCancel}
|
||||
onCancel={handleCancel}
|
||||
onSubmit={handleSubmit}
|
||||
renderForm={renderFormContent}
|
||||
|
||||
@@ -11,8 +11,7 @@
|
||||
|
||||
import { useState, useMemo, useCallback, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Wrench, Plus, Pencil, Trash2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Wrench, Plus } from 'lucide-react';
|
||||
import { TableCell, TableRow } from '@/components/ui/table';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
@@ -21,7 +20,6 @@ import {
|
||||
type UniversalListConfig,
|
||||
type SelectionHandlers,
|
||||
type RowClickHandlers,
|
||||
type TabOption,
|
||||
type ListParams,
|
||||
} from '@/components/templates/UniversalListPage';
|
||||
import { ListMobileCard, InfoField } from '@/components/organisms/MobileCard';
|
||||
@@ -179,13 +177,6 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
}
|
||||
}, [allProcesses]);
|
||||
|
||||
// ===== 탭 옵션 =====
|
||||
const tabs: TabOption[] = useMemo(() => [
|
||||
{ value: 'all', label: '전체', count: stats.total },
|
||||
{ value: '사용중', label: '사용중', count: stats.active },
|
||||
{ value: '미사용', label: '미사용', count: stats.inactive },
|
||||
], [stats]);
|
||||
|
||||
// ===== UniversalListPage Config =====
|
||||
const config: UniversalListConfig<Process> = useMemo(
|
||||
() => ({
|
||||
@@ -242,14 +233,12 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
// 테이블 컬럼
|
||||
columns: [
|
||||
{ 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: 'processCode', label: '공정번호', className: 'w-[120px]' },
|
||||
{ key: 'processName', label: '공정명', className: 'min-w-[200px]' },
|
||||
{ key: 'department', label: '담당부서', className: 'w-[120px]' },
|
||||
{ key: 'classificationRules', label: '분류규칙', className: 'w-[80px] text-center' },
|
||||
{ key: 'requiredWorkers', label: '인원', className: 'w-[60px] text-center' },
|
||||
{ key: 'steps', label: '단계', className: 'w-[80px] text-center' },
|
||||
{ key: 'items', label: '품목', className: 'w-[80px] text-center' },
|
||||
{ key: 'status', label: '상태', className: 'w-[80px] text-center' },
|
||||
{ key: 'actions', label: '작업', className: 'w-[100px] text-center' },
|
||||
],
|
||||
|
||||
// 클라이언트 사이드 필터링
|
||||
@@ -271,10 +260,26 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
onEndDateChange: setEndDate,
|
||||
},
|
||||
|
||||
// 탭 필터 (공통 컴포넌트에서 처리)
|
||||
tabFilter: (item, tabValue) => {
|
||||
if (tabValue === 'all') return true;
|
||||
return item.status === tabValue;
|
||||
// 필터 설정 (상태 필터)
|
||||
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);
|
||||
},
|
||||
|
||||
// 검색 필터
|
||||
@@ -288,10 +293,6 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
);
|
||||
},
|
||||
|
||||
// 탭 (공통 컴포넌트에서 Card 안에 렌더링)
|
||||
tabs,
|
||||
defaultTab: 'all',
|
||||
|
||||
// 등록 버튼 (공통 컴포넌트에서 오른쪽에 렌더링)
|
||||
createButton: {
|
||||
label: '공정 등록',
|
||||
@@ -309,6 +310,9 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
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}
|
||||
@@ -323,63 +327,19 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
</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.processName}</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">{process.workSteps.length}</TableCell>
|
||||
<TableCell className="text-center">{itemCount > 0 ? itemCount : '-'}</TableCell>
|
||||
<TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
|
||||
<Badge
|
||||
variant={process.status === '사용중' ? 'default' : 'secondary'}
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleToggleStatus(process.id)}
|
||||
>
|
||||
{process.status}
|
||||
{process.status === '사용중' ? '사용' : '미사용'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{handlers.isSelected && (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleEdit(process);
|
||||
}}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteClick(process.id);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
},
|
||||
@@ -391,6 +351,9 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
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}
|
||||
@@ -414,60 +377,21 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
|
||||
handleToggleStatus(process.id);
|
||||
}}
|
||||
>
|
||||
{process.status}
|
||||
{process.status === '사용중' ? '사용' : '미사용'}
|
||||
</Badge>
|
||||
}
|
||||
infoGrid={
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-3">
|
||||
<InfoField label="구분" value={process.processType} />
|
||||
<InfoField label="담당부서" value={process.department} />
|
||||
<InfoField label="인원" value={`${process.requiredWorkers}명`} />
|
||||
<InfoField
|
||||
label="분류규칙"
|
||||
value={process.classificationRules.length > 0 ? `${process.classificationRules.length}개` : '-'}
|
||||
/>
|
||||
{process.description && (
|
||||
<div className="col-span-2">
|
||||
<InfoField label="설명" value={process.description} />
|
||||
</div>
|
||||
)}
|
||||
<InfoField label="단계" value={`${process.workSteps.length}개`} />
|
||||
<InfoField label="품목" value={itemCount > 0 ? `${itemCount}개` : '-'} />
|
||||
</div>
|
||||
}
|
||||
actions={
|
||||
handlers.isSelected ? (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="default"
|
||||
size="default"
|
||||
className="flex-1 h-11"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleEdit(process);
|
||||
}}
|
||||
>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
수정
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="default"
|
||||
className="flex-1 h-11 border-red-200 text-red-600 hover:border-red-300 bg-transparent"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteClick(process.id);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
},
|
||||
}),
|
||||
[tabs, handleCreate, handleRowClick, handleEdit, handleDeleteClick, handleToggleStatus, handleBulkDelete, startDate, endDate, searchQuery]
|
||||
[handleCreate, handleRowClick, handleToggleStatus, handleBulkDelete, startDate, endDate, searchQuery]
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
139
src/components/process-management/StepDetail.tsx
Normal file
139
src/components/process-management/StepDetail.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 단계 상세 뷰 컴포넌트
|
||||
*
|
||||
* 기획서 스크린샷 2 기준:
|
||||
* - 기본 정보: 단계코드, 단계명, 필수여부, 승인여부, 검사여부, 상태
|
||||
* - 연결 정보: 유형(팝업/없음), 도달(입고완료 자재 목록 등)
|
||||
* - 완료 정보: 유형(선택 완료 시 완료/클릭 시 완료)
|
||||
*/
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ArrowLeft, Edit } 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 type { ProcessStep } from '@/types/process';
|
||||
|
||||
interface StepDetailProps {
|
||||
step: ProcessStep;
|
||||
processId: string;
|
||||
}
|
||||
|
||||
export function StepDetail({ step, processId }: StepDetailProps) {
|
||||
const router = useRouter();
|
||||
const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);
|
||||
|
||||
const handleEdit = () => {
|
||||
router.push(
|
||||
`/ko/master-data/process-management/${processId}/steps/${step.id}?mode=edit`
|
||||
);
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
router.push(`/ko/master-data/process-management/${processId}`);
|
||||
};
|
||||
|
||||
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 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">단계코드</div>
|
||||
<div className="font-medium font-mono">{step.stepCode}</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">단계명</div>
|
||||
<div className="font-medium">{step.stepName}</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">필수여부</div>
|
||||
<Badge variant={step.isRequired ? 'default' : 'outline'}>
|
||||
{step.isRequired ? '필수' : '선택'}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">승인여부</div>
|
||||
<Badge variant={step.needsApproval ? 'default' : 'outline'}>
|
||||
{step.needsApproval ? '필요' : '불필요'}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">검사여부</div>
|
||||
<Badge variant={step.needsInspection ? 'default' : 'outline'}>
|
||||
{step.needsInspection ? '필요' : '불필요'}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">상태</div>
|
||||
<Badge variant={step.isActive ? 'default' : 'secondary'}>
|
||||
{step.isActive ? '사용' : '미사용'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 연결 정보 */}
|
||||
<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 gap-6">
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">유형</div>
|
||||
<div className="font-medium">{step.connectionType}</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">도달</div>
|
||||
<div className="font-medium">{step.connectionTarget || '-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 완료 정보 */}
|
||||
<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 gap-6">
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm text-muted-foreground">유형</div>
|
||||
<div className="font-medium">{step.completionType}</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 하단 액션 버튼 (sticky) */}
|
||||
<div
|
||||
className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}
|
||||
>
|
||||
<Button variant="outline" onClick={handleBack}>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
공정으로 돌아가기
|
||||
</Button>
|
||||
<Button onClick={handleEdit}>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
수정
|
||||
</Button>
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
114
src/components/process-management/StepDetailClient.tsx
Normal file
114
src/components/process-management/StepDetailClient.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 단계 상세 클라이언트 컴포넌트
|
||||
*
|
||||
* 라우팅:
|
||||
* - /[id]/steps/[stepId] → 상세 보기
|
||||
* - /[id]/steps/[stepId]?mode=edit → 수정
|
||||
* - /[id]/steps/new → 등록
|
||||
*/
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { StepDetail } from './StepDetail';
|
||||
import { StepForm } from './StepForm';
|
||||
import { getProcessStepById } from './actions';
|
||||
import type { ProcessStep } from '@/types/process';
|
||||
import { DetailPageSkeleton } from '@/components/ui/skeleton';
|
||||
import { ErrorCard } from '@/components/ui/error-card';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
type DetailMode = 'view' | 'edit' | 'create';
|
||||
|
||||
interface StepDetailClientProps {
|
||||
processId: string;
|
||||
stepId: string;
|
||||
}
|
||||
|
||||
export function StepDetailClient({ processId, stepId }: StepDetailClientProps) {
|
||||
const searchParams = useSearchParams();
|
||||
const modeFromQuery = searchParams.get('mode') as DetailMode | null;
|
||||
const isNewMode = stepId === 'new';
|
||||
|
||||
const [mode] = useState<DetailMode>(() => {
|
||||
if (isNewMode) return 'create';
|
||||
if (modeFromQuery === 'edit') return 'edit';
|
||||
return 'view';
|
||||
});
|
||||
|
||||
const [stepData, setStepData] = useState<ProcessStep | 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 getProcessStepById(processId, stepId);
|
||||
if (result.success && result.data) {
|
||||
setStepData(result.data);
|
||||
} else {
|
||||
setError(result.error || '단계 정보를 찾을 수 없습니다.');
|
||||
toast.error('단계를 불러오는데 실패했습니다.');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('단계 조회 실패:', err);
|
||||
setError('단계 정보를 불러오는 중 오류가 발생했습니다.');
|
||||
toast.error('단계를 불러오는데 실패했습니다.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [processId, stepId, 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/process-management/${processId}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (mode === 'create') {
|
||||
return <StepForm mode="create" processId={processId} />;
|
||||
}
|
||||
|
||||
if (mode === 'edit' && stepData) {
|
||||
return <StepForm mode="edit" processId={processId} initialData={stepData} />;
|
||||
}
|
||||
|
||||
if (mode === 'view' && stepData) {
|
||||
return <StepDetail step={stepData} processId={processId} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorCard
|
||||
type="not-found"
|
||||
title="단계를 찾을 수 없습니다"
|
||||
description="요청하신 단계 정보가 존재하지 않습니다."
|
||||
homeButtonLabel="공정 상세로 이동"
|
||||
homeButtonHref={`/ko/master-data/process-management/${processId}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
332
src/components/process-management/StepForm.tsx
Normal file
332
src/components/process-management/StepForm.tsx
Normal file
@@ -0,0 +1,332 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* 단계 등록/수정 폼 컴포넌트
|
||||
*
|
||||
* 기획서 스크린샷 2 기준:
|
||||
* - 기본 정보: 단계코드(자동), 단계명, 필수여부, 승인여부, 검사여부, 상태
|
||||
* - 연결 정보: 유형(팝업/없음), 도달(Select)
|
||||
* - 완료 정보: 유형(선택 완료 시 완료/클릭 시 완료)
|
||||
*/
|
||||
|
||||
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 { ProcessStep, StepConnectionType, StepCompletionType } from '@/types/process';
|
||||
import {
|
||||
STEP_CONNECTION_TYPE_OPTIONS,
|
||||
STEP_COMPLETION_TYPE_OPTIONS,
|
||||
STEP_CONNECTION_TARGET_OPTIONS,
|
||||
} from '@/types/process';
|
||||
import { createProcessStep, updateProcessStep } from './actions';
|
||||
import type { DetailConfig } from '@/components/templates/IntegratedDetailTemplate/types';
|
||||
|
||||
const stepCreateConfig: DetailConfig = {
|
||||
title: '단계',
|
||||
description: '새로운 단계를 등록합니다',
|
||||
basePath: '',
|
||||
fields: [],
|
||||
actions: {
|
||||
showBack: true,
|
||||
showEdit: false,
|
||||
showDelete: false,
|
||||
showSave: true,
|
||||
submitLabel: '등록',
|
||||
},
|
||||
};
|
||||
|
||||
const stepEditConfig: DetailConfig = {
|
||||
...stepCreateConfig,
|
||||
title: '단계',
|
||||
description: '단계 정보를 수정합니다',
|
||||
actions: {
|
||||
...stepCreateConfig.actions,
|
||||
submitLabel: '저장',
|
||||
},
|
||||
};
|
||||
|
||||
interface StepFormProps {
|
||||
mode: 'create' | 'edit';
|
||||
processId: string;
|
||||
initialData?: ProcessStep;
|
||||
}
|
||||
|
||||
export function StepForm({ mode, processId, initialData }: StepFormProps) {
|
||||
const router = useRouter();
|
||||
const isEdit = mode === 'edit';
|
||||
|
||||
// 기본 정보
|
||||
const [stepName, setStepName] = useState(initialData?.stepName || '');
|
||||
const [isRequired, setIsRequired] = useState(
|
||||
initialData?.isRequired ? '필수' : '선택'
|
||||
);
|
||||
const [needsApproval, setNeedsApproval] = useState(
|
||||
initialData?.needsApproval ? '필요' : '불필요'
|
||||
);
|
||||
const [needsInspection, setNeedsInspection] = useState(
|
||||
initialData?.needsInspection ? '필요' : '불필요'
|
||||
);
|
||||
const [isActive, setIsActive] = useState(
|
||||
initialData?.isActive !== false ? '사용' : '미사용'
|
||||
);
|
||||
|
||||
// 연결 정보
|
||||
const [connectionType, setConnectionType] = useState<StepConnectionType>(
|
||||
initialData?.connectionType || '없음'
|
||||
);
|
||||
const [connectionTarget, setConnectionTarget] = useState(
|
||||
initialData?.connectionTarget || ''
|
||||
);
|
||||
|
||||
// 완료 정보
|
||||
const [completionType, setCompletionType] = useState<StepCompletionType>(
|
||||
initialData?.completionType || '클릭 시 완료'
|
||||
);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
// 제출
|
||||
const handleSubmit = async (): Promise<{ success: boolean; error?: string }> => {
|
||||
if (!stepName.trim()) {
|
||||
toast.error('단계명을 입력해주세요.');
|
||||
return { success: false, error: '단계명을 입력해주세요.' };
|
||||
}
|
||||
|
||||
const stepData: Omit<ProcessStep, 'id'> = {
|
||||
stepCode: initialData?.stepCode || `STP-${Date.now().toString().slice(-6)}`,
|
||||
stepName: stepName.trim(),
|
||||
isRequired: isRequired === '필수',
|
||||
needsApproval: needsApproval === '필요',
|
||||
needsInspection: needsInspection === '필요',
|
||||
isActive: isActive === '사용',
|
||||
order: initialData?.order || 0,
|
||||
connectionType,
|
||||
connectionTarget: connectionType === '팝업' ? connectionTarget : undefined,
|
||||
completionType,
|
||||
};
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
if (isEdit && initialData?.id) {
|
||||
const result = await updateProcessStep(processId, initialData.id, stepData);
|
||||
if (result.success) {
|
||||
toast.success('단계가 수정되었습니다.');
|
||||
router.push(`/ko/master-data/process-management/${processId}`);
|
||||
return { success: true };
|
||||
} else {
|
||||
toast.error(result.error || '수정에 실패했습니다.');
|
||||
return { success: false, error: result.error };
|
||||
}
|
||||
} else {
|
||||
const result = await createProcessStep(processId, stepData);
|
||||
if (result.success) {
|
||||
toast.success('단계가 등록되었습니다.');
|
||||
router.push(`/ko/master-data/process-management/${processId}`);
|
||||
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 = () => {
|
||||
router.push(`/ko/master-data/process-management/${processId}`);
|
||||
};
|
||||
|
||||
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 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label>단계코드</Label>
|
||||
<Input
|
||||
value={initialData?.stepCode || '자동생성'}
|
||||
disabled
|
||||
className="bg-muted"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="stepName">단계명 *</Label>
|
||||
<Input
|
||||
id="stepName"
|
||||
value={stepName}
|
||||
onChange={(e) => setStepName(e.target.value)}
|
||||
placeholder="예: 자재투입"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>필수여부</Label>
|
||||
<Select value={isRequired} onValueChange={setIsRequired}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="필수">필수</SelectItem>
|
||||
<SelectItem value="선택">선택</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>승인여부</Label>
|
||||
<Select value={needsApproval} onValueChange={setNeedsApproval}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="필요">필요</SelectItem>
|
||||
<SelectItem value="불필요">불필요</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>검사여부</Label>
|
||||
<Select value={needsInspection} onValueChange={setNeedsInspection}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="필요">필요</SelectItem>
|
||||
<SelectItem value="불필요">불필요</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>상태</Label>
|
||||
<Select value={isActive} onValueChange={setIsActive}>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="사용">사용</SelectItem>
|
||||
<SelectItem value="미사용">미사용</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 연결 정보 */}
|
||||
<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 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label>유형</Label>
|
||||
<Select
|
||||
value={connectionType}
|
||||
onValueChange={(v) => setConnectionType(v as StepConnectionType)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{STEP_CONNECTION_TYPE_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>도달</Label>
|
||||
<Select value={connectionTarget} onValueChange={setConnectionTarget}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{STEP_CONNECTION_TARGET_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 완료 정보 */}
|
||||
<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 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label>유형</Label>
|
||||
<Select
|
||||
value={completionType}
|
||||
onValueChange={(v) => setCompletionType(v as StepCompletionType)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{STEP_COMPLETION_TYPE_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
),
|
||||
[
|
||||
stepName,
|
||||
isRequired,
|
||||
needsApproval,
|
||||
needsInspection,
|
||||
isActive,
|
||||
connectionType,
|
||||
connectionTarget,
|
||||
completionType,
|
||||
initialData?.stepCode,
|
||||
]
|
||||
);
|
||||
|
||||
const config = isEdit ? stepEditConfig : stepCreateConfig;
|
||||
|
||||
return (
|
||||
<IntegratedDetailTemplate
|
||||
config={config}
|
||||
mode={isEdit ? 'edit' : 'create'}
|
||||
isLoading={false}
|
||||
onCancel={handleCancel}
|
||||
onSubmit={handleSubmit}
|
||||
renderForm={renderFormContent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
import { isNextRedirectError } from '@/lib/utils/redirect-error';
|
||||
import { serverFetch } from '@/lib/api/fetch-wrapper';
|
||||
import type { Process, ProcessFormData, ClassificationRule, IndividualItem } from '@/types/process';
|
||||
import type { Process, ProcessFormData, ClassificationRule, IndividualItem, ProcessStep } from '@/types/process';
|
||||
|
||||
// ============================================================================
|
||||
// API 타입 정의
|
||||
@@ -661,3 +661,152 @@ export async function getItemList(params?: GetItemListParams): Promise<ItemOptio
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 공정 단계 (Process Step) - 목데이터 및 스텁 함수
|
||||
// 백엔드 API 미준비 → 프론트엔드 목데이터로 운영
|
||||
// ============================================================================
|
||||
|
||||
const MOCK_STEPS: Record<string, ProcessStep[]> = {
|
||||
// processId별로 목데이터 보유
|
||||
default: [
|
||||
{
|
||||
id: 'step-1',
|
||||
stepCode: 'STP-001',
|
||||
stepName: '자재투입',
|
||||
isRequired: true,
|
||||
needsApproval: false,
|
||||
needsInspection: false,
|
||||
isActive: true,
|
||||
order: 1,
|
||||
connectionType: '팝업',
|
||||
connectionTarget: '입고완료 자재 목록',
|
||||
completionType: '선택 완료 시 완료',
|
||||
},
|
||||
{
|
||||
id: 'step-2',
|
||||
stepCode: 'STP-002',
|
||||
stepName: '미싱',
|
||||
isRequired: true,
|
||||
needsApproval: false,
|
||||
needsInspection: false,
|
||||
isActive: true,
|
||||
order: 2,
|
||||
connectionType: '없음',
|
||||
completionType: '클릭 시 완료',
|
||||
},
|
||||
{
|
||||
id: 'step-3',
|
||||
stepCode: 'STP-003',
|
||||
stepName: '중간검사',
|
||||
isRequired: false,
|
||||
needsApproval: true,
|
||||
needsInspection: true,
|
||||
isActive: true,
|
||||
order: 3,
|
||||
connectionType: '없음',
|
||||
completionType: '클릭 시 완료',
|
||||
},
|
||||
{
|
||||
id: 'step-4',
|
||||
stepCode: 'STP-004',
|
||||
stepName: '포장',
|
||||
isRequired: true,
|
||||
needsApproval: false,
|
||||
needsInspection: false,
|
||||
isActive: true,
|
||||
order: 4,
|
||||
connectionType: '없음',
|
||||
completionType: '클릭 시 완료',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
/**
|
||||
* 공정 단계 목록 조회 (목데이터)
|
||||
*/
|
||||
export async function getProcessSteps(processId: string): Promise<{
|
||||
success: boolean;
|
||||
data?: ProcessStep[];
|
||||
error?: string;
|
||||
}> {
|
||||
// 목데이터 반환
|
||||
const steps = MOCK_STEPS[processId] || MOCK_STEPS['default'];
|
||||
return { success: true, data: steps };
|
||||
}
|
||||
|
||||
/**
|
||||
* 공정 단계 상세 조회 (목데이터)
|
||||
*/
|
||||
export async function getProcessStepById(processId: string, stepId: string): Promise<{
|
||||
success: boolean;
|
||||
data?: ProcessStep;
|
||||
error?: string;
|
||||
}> {
|
||||
const steps = MOCK_STEPS[processId] || MOCK_STEPS['default'];
|
||||
const step = steps.find((s) => s.id === stepId);
|
||||
if (!step) {
|
||||
return { success: false, error: '단계를 찾을 수 없습니다.' };
|
||||
}
|
||||
return { success: true, data: step };
|
||||
}
|
||||
|
||||
/**
|
||||
* 공정 단계 생성 (스텁)
|
||||
*/
|
||||
export async function createProcessStep(
|
||||
_processId: string,
|
||||
data: Omit<ProcessStep, 'id'>
|
||||
): Promise<{ success: boolean; data?: ProcessStep; error?: string }> {
|
||||
const newStep: ProcessStep = {
|
||||
...data,
|
||||
id: `step-${Date.now()}`,
|
||||
};
|
||||
return { success: true, data: newStep };
|
||||
}
|
||||
|
||||
/**
|
||||
* 공정 단계 수정 (스텁)
|
||||
*/
|
||||
export async function updateProcessStep(
|
||||
_processId: string,
|
||||
stepId: string,
|
||||
data: Partial<ProcessStep>
|
||||
): Promise<{ success: boolean; data?: ProcessStep; error?: string }> {
|
||||
return {
|
||||
success: true,
|
||||
data: {
|
||||
id: stepId,
|
||||
stepCode: data.stepCode || '',
|
||||
stepName: data.stepName || '',
|
||||
isRequired: data.isRequired ?? false,
|
||||
needsApproval: data.needsApproval ?? false,
|
||||
needsInspection: data.needsInspection ?? false,
|
||||
isActive: data.isActive ?? true,
|
||||
order: data.order ?? 0,
|
||||
connectionType: data.connectionType || '없음',
|
||||
connectionTarget: data.connectionTarget,
|
||||
completionType: data.completionType || '클릭 시 완료',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 공정 단계 삭제 (스텁)
|
||||
*/
|
||||
export async function deleteProcessStep(
|
||||
_processId: string,
|
||||
_stepId: string
|
||||
): Promise<{ success: boolean; error?: string }> {
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* 공정 단계 순서 변경 (스텁)
|
||||
*/
|
||||
export async function reorderProcessSteps(
|
||||
_processId: string,
|
||||
_stepIds: string[]
|
||||
): Promise<{ success: boolean; error?: string }> {
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
@@ -3,4 +3,7 @@ export { ProcessForm } from './ProcessForm';
|
||||
export { ProcessDetail } from './ProcessDetail';
|
||||
export { ProcessDetailClientV2 } from './ProcessDetailClientV2';
|
||||
export { RuleModal } from './RuleModal';
|
||||
export { ProcessWorkLogPreviewModal } from './ProcessWorkLogPreviewModal';
|
||||
export { ProcessWorkLogPreviewModal } from './ProcessWorkLogPreviewModal';
|
||||
export { StepDetail } from './StepDetail';
|
||||
export { StepForm } from './StepForm';
|
||||
export { StepDetailClient } from './StepDetailClient';
|
||||
|
||||
Reference in New Issue
Block a user