refactor: WorkerScreen 컴포넌트 기획 디자인 적용
- WorkCard: 헤더 박스(품목명+수량), 뱃지 영역, 담당자 정보, 버튼 레이아웃 개선 - ProcessDetailSection: 자재 투입 섹션, 공정 단계 뱃지, 검사 요청 AlertDialog 추가 - MaterialInputModal: FIFO 순위 설명, 테이블 형태 자재 목록, 중복 닫기 버튼 제거 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
byeongcheolryu
@@ -3,18 +3,16 @@
|
||||
/**
|
||||
* 자재투입 모달
|
||||
*
|
||||
* - FIFO 순위 표시
|
||||
* - 자재 테이블 (BOM 기준)
|
||||
* - 투입 등록 기능
|
||||
* 기획 화면에 맞춘 레이아웃:
|
||||
* - FIFO 순위 설명 (1 최우선, 2 차선, 3+ 대기)
|
||||
* - ① 자재 선택 (BOM 기준) 테이블
|
||||
* - 취소 / 투입 등록 버튼 (전체 너비)
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Package } from 'lucide-react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
@@ -64,13 +62,9 @@ interface MaterialInputModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
order: WorkOrder | null;
|
||||
/** 전량완료 흐름에서 사용 - 투입 등록/취소 후 완료 처리 */
|
||||
onComplete?: () => void;
|
||||
/** 전량완료 흐름 여부 (취소 시에도 완료 처리) */
|
||||
isCompletionFlow?: boolean;
|
||||
/** 자재 투입 저장 콜백 */
|
||||
onSaveMaterials?: (orderId: string, materials: MaterialInput[]) => void;
|
||||
/** 이미 투입된 자재 목록 */
|
||||
savedMaterials?: MaterialInput[];
|
||||
}
|
||||
|
||||
@@ -81,14 +75,10 @@ export function MaterialInputModal({
|
||||
onComplete,
|
||||
isCompletionFlow = false,
|
||||
onSaveMaterials,
|
||||
savedMaterials = [],
|
||||
}: MaterialInputModalProps) {
|
||||
const [selectedMaterials, setSelectedMaterials] = useState<Set<string>>(new Set());
|
||||
const [materials] = useState<MaterialInput[]>(MOCK_MATERIALS);
|
||||
|
||||
// 이미 투입된 자재가 있으면 선택 상태로 초기화
|
||||
const hasSavedMaterials = savedMaterials.length > 0;
|
||||
|
||||
const handleToggleMaterial = (materialId: string) => {
|
||||
setSelectedMaterials((prev) => {
|
||||
const next = new Set(prev);
|
||||
@@ -101,144 +91,153 @@ export function MaterialInputModal({
|
||||
});
|
||||
};
|
||||
|
||||
// 자재 투입 등록
|
||||
// 투입 등록
|
||||
const handleSubmit = () => {
|
||||
if (!order) return;
|
||||
|
||||
// 선택된 자재 정보 추출
|
||||
const selectedMaterialList = materials.filter((m) => selectedMaterials.has(m.id));
|
||||
console.log('[자재투입] 저장:', order.id, selectedMaterialList);
|
||||
|
||||
// 자재 저장 콜백
|
||||
if (onSaveMaterials) {
|
||||
onSaveMaterials(order.id, selectedMaterialList);
|
||||
}
|
||||
|
||||
setSelectedMaterials(new Set());
|
||||
onOpenChange(false);
|
||||
resetAndClose();
|
||||
|
||||
// 전량완료 흐름이면 완료 처리
|
||||
if (isCompletionFlow && onComplete) {
|
||||
onComplete();
|
||||
}
|
||||
};
|
||||
|
||||
// 건너뛰기 (자재 없이 완료) - 전량완료 흐름에서만 사용
|
||||
const handleSkip = () => {
|
||||
setSelectedMaterials(new Set());
|
||||
onOpenChange(false);
|
||||
// 전량완료 흐름이면 완료 처리
|
||||
if (onComplete) {
|
||||
onComplete();
|
||||
}
|
||||
};
|
||||
|
||||
// 취소 (모달만 닫기)
|
||||
// 취소
|
||||
const handleCancel = () => {
|
||||
setSelectedMaterials(new Set());
|
||||
onOpenChange(false);
|
||||
resetAndClose();
|
||||
};
|
||||
|
||||
const getFifoRankBadge = (rank: number) => {
|
||||
const colors = {
|
||||
1: 'bg-red-100 text-red-800',
|
||||
2: 'bg-orange-100 text-orange-800',
|
||||
3: 'bg-gray-100 text-gray-800',
|
||||
};
|
||||
const labels = {
|
||||
1: '최우선',
|
||||
2: '차선',
|
||||
3: '대기',
|
||||
};
|
||||
return (
|
||||
<Badge className={colors[rank as 1 | 2 | 3] || colors[3]}>
|
||||
{rank}위 ({labels[rank as 1 | 2 | 3] || labels[3]})
|
||||
</Badge>
|
||||
);
|
||||
const resetAndClose = () => {
|
||||
setSelectedMaterials(new Set());
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
if (!order) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Package className="h-5 w-5" />
|
||||
투입자재 등록
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
작업지시 {order.orderNo}에 투입할 자재를 선택하세요.
|
||||
</DialogDescription>
|
||||
<DialogContent className="max-w-2xl p-0 gap-0">
|
||||
{/* 헤더 */}
|
||||
<DialogHeader className="p-6 pb-4">
|
||||
<DialogTitle className="text-xl font-semibold">투입자재 등록</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* FIFO 순위 안내 */}
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<span>FIFO 순위:</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Badge className="bg-red-100 text-red-800">1</Badge> 최우선
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Badge className="bg-orange-100 text-orange-800">2</Badge> 차선
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Badge className="bg-gray-100 text-gray-800">3+</Badge> 대기
|
||||
</span>
|
||||
<div className="px-6 pb-6 space-y-6">
|
||||
{/* FIFO 순위 설명 */}
|
||||
<div className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
|
||||
<span className="text-sm font-medium text-gray-700">FIFO 순위:</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Badge className="bg-gray-900 hover:bg-gray-900 text-white rounded-full w-6 h-6 flex items-center justify-center p-0 text-xs">
|
||||
1
|
||||
</Badge>
|
||||
<span className="text-sm text-gray-600">최우선</span>
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Badge className="bg-gray-900 hover:bg-gray-900 text-white rounded-full w-6 h-6 flex items-center justify-center p-0 text-xs">
|
||||
2
|
||||
</Badge>
|
||||
<span className="text-sm text-gray-600">차선</span>
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Badge className="bg-gray-900 hover:bg-gray-900 text-white rounded-full w-6 h-6 flex items-center justify-center p-0 text-xs">
|
||||
3+
|
||||
</Badge>
|
||||
<span className="text-sm text-gray-600">대기</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 자재 테이블 */}
|
||||
{materials.length === 0 ? (
|
||||
<div className="py-8 text-center text-muted-foreground border rounded-lg">
|
||||
이 공정에 배정된 자재가 없습니다.
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-12">선택</TableHead>
|
||||
<TableHead>자재코드</TableHead>
|
||||
<TableHead>자재명</TableHead>
|
||||
<TableHead>단위</TableHead>
|
||||
<TableHead className="text-right">현재고</TableHead>
|
||||
<TableHead>FIFO</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{materials.map((material) => (
|
||||
<TableRow key={material.id}>
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={selectedMaterials.has(material.id)}
|
||||
onCheckedChange={() => handleToggleMaterial(material.id)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{material.materialCode}</TableCell>
|
||||
<TableCell>{material.materialName}</TableCell>
|
||||
<TableCell>{material.unit}</TableCell>
|
||||
<TableCell className="text-right">{material.currentStock.toLocaleString()}</TableCell>
|
||||
<TableCell>{getFifoRankBadge(material.fifoRank)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
{/* 자재 선택 섹션 */}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-900 mb-3">
|
||||
① 자재 선택 (BOM 기준)
|
||||
</h3>
|
||||
|
||||
<DialogFooter className="flex-col sm:flex-row gap-2">
|
||||
<Button variant="outline" onClick={handleCancel}>
|
||||
취소
|
||||
</Button>
|
||||
{isCompletionFlow && (
|
||||
<Button variant="secondary" onClick={handleSkip}>
|
||||
건너뛰기
|
||||
{materials.length === 0 ? (
|
||||
<div className="border rounded-lg">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50">
|
||||
<TableHead className="text-center">자재코드</TableHead>
|
||||
<TableHead className="text-center">자재명</TableHead>
|
||||
<TableHead className="text-center">단위</TableHead>
|
||||
<TableHead className="text-center">현재고</TableHead>
|
||||
<TableHead className="text-center">선택</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-center py-12 text-gray-500">
|
||||
이 공정에 배정된 자재가 없습니다.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="border rounded-lg overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50">
|
||||
<TableHead className="text-center font-medium">자재코드</TableHead>
|
||||
<TableHead className="text-center font-medium">자재명</TableHead>
|
||||
<TableHead className="text-center font-medium">단위</TableHead>
|
||||
<TableHead className="text-center font-medium">현재고</TableHead>
|
||||
<TableHead className="text-center font-medium">선택</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{materials.map((material) => (
|
||||
<TableRow key={material.id}>
|
||||
<TableCell className="text-center font-medium">
|
||||
{material.materialCode}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">{material.materialName}</TableCell>
|
||||
<TableCell className="text-center">{material.unit}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
{material.currentStock.toLocaleString()}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Checkbox
|
||||
checked={selectedMaterials.has(material.id)}
|
||||
onCheckedChange={() => handleToggleMaterial(material.id)}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 버튼 영역 */}
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCancel}
|
||||
className="flex-1 py-6 text-base font-medium"
|
||||
>
|
||||
취소
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={handleSubmit} disabled={selectedMaterials.size === 0}>
|
||||
투입 등록
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={selectedMaterials.size === 0}
|
||||
className="flex-1 py-6 text-base font-medium bg-gray-400 hover:bg-gray-500 disabled:bg-gray-300"
|
||||
>
|
||||
투입 등록
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,28 +3,38 @@
|
||||
/**
|
||||
* 공정상세 섹션 컴포넌트
|
||||
*
|
||||
* WorkCard 내부에서 토글 확장되는 공정 상세 정보
|
||||
* - 자재 투입 필요 섹션
|
||||
* - 공정 단계 (5단계)
|
||||
* - 각 단계별 세부 항목
|
||||
* 기획 화면에 맞춘 레이아웃:
|
||||
* - 자재 투입 필요 섹션 (흰색 박스, 검은색 전체너비 버튼)
|
||||
* - 공정 단계 (N단계) + N/N 완료
|
||||
* - 숫자 뱃지 + 공정명 + 검사 뱃지 + 진행률
|
||||
* - 검사 항목: 검사 요청 버튼
|
||||
* - 상세 정보: 위치, 규격, LOT, 자재
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Package, CheckCircle2, Circle, AlertTriangle, MapPin, Ruler } from 'lucide-react';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { ProcessStep, ProcessStepItem } from './types';
|
||||
|
||||
// Mock 공정 단계 데이터
|
||||
// Mock 공정 단계 데이터 (기획서 기준 8단계)
|
||||
const MOCK_PROCESS_STEPS: ProcessStep[] = [
|
||||
{
|
||||
id: 'step-1',
|
||||
stepNo: 1,
|
||||
name: '절곡판/코일 절단',
|
||||
name: '자재투입',
|
||||
completed: 0,
|
||||
total: 2,
|
||||
total: 3,
|
||||
items: [
|
||||
{
|
||||
id: 'item-1-1',
|
||||
@@ -32,71 +42,113 @@ const MOCK_PROCESS_STEPS: ProcessStep[] = [
|
||||
location: '1층 1호-A',
|
||||
isPriority: true,
|
||||
spec: 'W2500 × H3000',
|
||||
material: '절곡판',
|
||||
lot: 'LOT-절곡-2025-001',
|
||||
material: '스크린 원단',
|
||||
lot: 'LOT-스크-2025-001',
|
||||
},
|
||||
{
|
||||
id: 'item-1-2',
|
||||
itemNo: '#2',
|
||||
location: '1층 1호-B',
|
||||
location: '1층 2호-B',
|
||||
isPriority: false,
|
||||
spec: 'W2000 × H2500',
|
||||
material: '절곡판',
|
||||
lot: 'LOT-절곡-2025-002',
|
||||
spec: 'W2600 × H3120',
|
||||
material: '스크린 원단',
|
||||
lot: 'LOT-스크-2025-002',
|
||||
},
|
||||
{
|
||||
id: 'item-1-3',
|
||||
itemNo: '#3',
|
||||
location: '2층 3호-C',
|
||||
isPriority: false,
|
||||
spec: 'W2700 × H3240',
|
||||
material: '스크린 원단',
|
||||
lot: 'LOT-스크-2025-003',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'step-2',
|
||||
stepNo: 2,
|
||||
name: 'V컷팅',
|
||||
name: '절단매수확인',
|
||||
completed: 0,
|
||||
total: 2,
|
||||
items: [
|
||||
{
|
||||
id: 'item-2-1',
|
||||
itemNo: '#1',
|
||||
location: '1층 2호-A',
|
||||
isPriority: false,
|
||||
spec: 'V10 × L2500',
|
||||
material: 'V컷팅재',
|
||||
lot: 'LOT-V컷-2025-001',
|
||||
},
|
||||
],
|
||||
total: 3,
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
id: 'step-3',
|
||||
stepNo: 3,
|
||||
name: '절곡',
|
||||
completed: 0,
|
||||
name: '원단 절단',
|
||||
completed: 3,
|
||||
total: 3,
|
||||
items: [
|
||||
{
|
||||
id: 'item-3-1',
|
||||
itemNo: '#1',
|
||||
location: '2층 1호',
|
||||
isPriority: true,
|
||||
spec: '90° × 2회',
|
||||
material: '절곡판',
|
||||
lot: 'LOT-절곡-2025-001',
|
||||
},
|
||||
],
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
id: 'step-4',
|
||||
stepNo: 4,
|
||||
name: '중간검사',
|
||||
name: '절단 Check',
|
||||
isInspection: true,
|
||||
completed: 0,
|
||||
total: 1,
|
||||
total: 3,
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
id: 'step-5',
|
||||
stepNo: 5,
|
||||
name: '미싱',
|
||||
completed: 1,
|
||||
total: 3,
|
||||
items: [
|
||||
{
|
||||
id: 'item-5-1',
|
||||
itemNo: '#1',
|
||||
location: '1층 1호-A',
|
||||
isPriority: true,
|
||||
spec: 'W2500 × H3000',
|
||||
material: '스크린 원단',
|
||||
lot: 'LOT-스크-2025-001',
|
||||
},
|
||||
{
|
||||
id: 'item-5-2',
|
||||
itemNo: '#2',
|
||||
location: '1층 2호-B',
|
||||
isPriority: false,
|
||||
spec: 'W2600 × H3120',
|
||||
material: '스크린 원단',
|
||||
lot: 'LOT-스크-2025-002',
|
||||
},
|
||||
{
|
||||
id: 'item-5-3',
|
||||
itemNo: '#3',
|
||||
location: '2층 3호-C',
|
||||
isPriority: false,
|
||||
spec: 'W2700 × H3240',
|
||||
material: '스크린 원단',
|
||||
lot: 'LOT-스크-2025-003',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'step-6',
|
||||
stepNo: 6,
|
||||
name: '앤드락 작업',
|
||||
completed: 0,
|
||||
total: 3,
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
id: 'step-7',
|
||||
stepNo: 7,
|
||||
name: '중간검사',
|
||||
isInspection: true,
|
||||
completed: 0,
|
||||
total: 3,
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
id: 'step-8',
|
||||
stepNo: 8,
|
||||
name: '포장',
|
||||
completed: 0,
|
||||
total: 1,
|
||||
total: 3,
|
||||
items: [],
|
||||
},
|
||||
];
|
||||
@@ -112,8 +164,11 @@ export function ProcessDetailSection({
|
||||
materialRequired,
|
||||
onMaterialInput,
|
||||
}: ProcessDetailSectionProps) {
|
||||
const [steps] = useState<ProcessStep[]>(MOCK_PROCESS_STEPS);
|
||||
const [expandedSteps, setExpandedSteps] = useState<Set<string>>(new Set());
|
||||
const [steps, setSteps] = useState<ProcessStep[]>(MOCK_PROCESS_STEPS);
|
||||
const [expandedSteps, setExpandedSteps] = useState<Set<string>>(new Set(['step-1']));
|
||||
const [inspectionDialogOpen, setInspectionDialogOpen] = useState(false);
|
||||
const [inspectionStepName, setInspectionStepName] = useState('');
|
||||
const [pendingInspectionStepId, setPendingInspectionStepId] = useState<string | null>(null);
|
||||
|
||||
const totalSteps = steps.length;
|
||||
const completedSteps = steps.filter((s) => s.completed === s.total).length;
|
||||
@@ -130,39 +185,58 @@ export function ProcessDetailSection({
|
||||
});
|
||||
};
|
||||
|
||||
// 검사 요청 핸들러
|
||||
const handleInspectionRequest = (step: ProcessStep) => {
|
||||
setInspectionStepName(step.name);
|
||||
setPendingInspectionStepId(step.id);
|
||||
setInspectionDialogOpen(true);
|
||||
};
|
||||
|
||||
// 검사 요청 확인 후 완료 처리
|
||||
const handleInspectionConfirm = () => {
|
||||
if (pendingInspectionStepId) {
|
||||
setSteps((prev) =>
|
||||
prev.map((step) =>
|
||||
step.id === pendingInspectionStepId
|
||||
? { ...step, completed: step.total }
|
||||
: step
|
||||
)
|
||||
);
|
||||
// 다음 단계 펼치기
|
||||
const stepIndex = steps.findIndex((s) => s.id === pendingInspectionStepId);
|
||||
if (stepIndex < steps.length - 1) {
|
||||
setExpandedSteps((prev) => new Set([...prev, steps[stepIndex + 1].id]));
|
||||
}
|
||||
}
|
||||
setInspectionDialogOpen(false);
|
||||
setPendingInspectionStepId(null);
|
||||
};
|
||||
|
||||
if (!isExpanded) return null;
|
||||
|
||||
return (
|
||||
<div className="mt-4 pt-4 border-t space-y-4">
|
||||
<div className="mt-4 pt-4 border-t border-gray-200 space-y-4">
|
||||
{/* 자재 투입 필요 섹션 */}
|
||||
{materialRequired && (
|
||||
<div className="bg-orange-50 border border-orange-200 rounded-lg p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle className="h-4 w-4 text-orange-500" />
|
||||
<span className="text-sm font-medium text-orange-800">
|
||||
자재 투입이 필요합니다
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={onMaterialInput}
|
||||
className="border-orange-300 text-orange-700 hover:bg-orange-100"
|
||||
>
|
||||
<Package className="mr-1 h-4 w-4" />
|
||||
자재 투입하기
|
||||
</Button>
|
||||
</div>
|
||||
<div className="border border-gray-200 rounded-lg p-4">
|
||||
<p className="text-sm font-medium text-gray-900 mb-3">자재 투입 필요</p>
|
||||
<Button
|
||||
onClick={onMaterialInput}
|
||||
className="w-full bg-gray-900 hover:bg-gray-800 text-white font-medium py-3 rounded-lg"
|
||||
>
|
||||
자재 투입하기
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 공정 단계 헤더 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="text-sm font-medium">공정 단계</h4>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{completedSteps}/{totalSteps} 완료
|
||||
</Badge>
|
||||
<h4 className="text-sm font-semibold text-gray-900">
|
||||
공정 단계 ({totalSteps}단계)
|
||||
</h4>
|
||||
<span className="text-sm text-gray-500">
|
||||
{completedSteps} / {totalSteps} 완료
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 공정 단계 목록 */}
|
||||
@@ -173,9 +247,30 @@ export function ProcessDetailSection({
|
||||
step={step}
|
||||
isExpanded={expandedSteps.has(step.id)}
|
||||
onToggle={() => toggleStep(step.id)}
|
||||
onInspectionRequest={() => handleInspectionRequest(step)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 검사 요청 완료 다이얼로그 */}
|
||||
<AlertDialog open={inspectionDialogOpen} onOpenChange={setInspectionDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>검사 요청 완료</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{inspectionStepName} 검사 요청이 품질팀에 전송되었습니다.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogAction
|
||||
onClick={handleInspectionConfirm}
|
||||
className="bg-gray-900 hover:bg-gray-800"
|
||||
>
|
||||
확인
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -186,99 +281,153 @@ interface ProcessStepCardProps {
|
||||
step: ProcessStep;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
onInspectionRequest: () => void;
|
||||
}
|
||||
|
||||
function ProcessStepCard({ step, isExpanded, onToggle }: ProcessStepCardProps) {
|
||||
function ProcessStepCard({ step, isExpanded, onToggle, onInspectionRequest }: ProcessStepCardProps) {
|
||||
const isCompleted = step.completed === step.total;
|
||||
const hasItems = step.items.length > 0;
|
||||
|
||||
return (
|
||||
<Collapsible open={isExpanded} onOpenChange={onToggle}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-between p-3 rounded-lg border cursor-pointer transition-colors',
|
||||
isCompleted
|
||||
? 'bg-green-50 border-green-200'
|
||||
: 'bg-gray-50 border-gray-200 hover:bg-gray-100'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{isCompleted ? (
|
||||
<CheckCircle2 className="h-5 w-5 text-green-500" />
|
||||
) : (
|
||||
<Circle className="h-5 w-5 text-gray-400" />
|
||||
<div
|
||||
className={cn(
|
||||
'border rounded-lg overflow-hidden',
|
||||
isCompleted ? 'bg-gray-50 border-gray-300' : 'bg-white border-gray-200'
|
||||
)}
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div
|
||||
onClick={onToggle}
|
||||
className="flex items-center justify-between p-3 cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 숫자 뱃지 */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center w-7 h-7 rounded-full text-sm font-medium',
|
||||
isCompleted
|
||||
? 'bg-gray-400 text-white'
|
||||
: 'bg-gray-900 text-white'
|
||||
)}
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">
|
||||
{step.stepNo}. {step.name}
|
||||
</span>
|
||||
{step.isInspection && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
검사
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{step.completed}/{step.total} 완료
|
||||
</span>
|
||||
</div>
|
||||
>
|
||||
{step.stepNo}
|
||||
</div>
|
||||
{hasItems && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{isExpanded ? '접기' : '펼치기'}
|
||||
</span>
|
||||
{/* 공정명 + 검사 뱃지 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-gray-900">{step.name}</span>
|
||||
{step.isInspection && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-xs bg-gray-200 text-gray-700 px-2 py-0.5"
|
||||
>
|
||||
검사
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 진행률 + 완료 표시 */}
|
||||
<div className="flex items-center gap-2">
|
||||
{isCompleted && (
|
||||
<span className="text-xs font-medium text-gray-600">완료</span>
|
||||
)}
|
||||
<span className="text-sm text-gray-500">
|
||||
{step.completed}/{step.total}
|
||||
</span>
|
||||
{(hasItems || step.isInspection) && (
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
'h-4 w-4 text-gray-400 transition-transform',
|
||||
isExpanded && 'rotate-180'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleTrigger>
|
||||
</div>
|
||||
|
||||
{hasItems && (
|
||||
<CollapsibleContent>
|
||||
<div className="ml-8 mt-2 space-y-2">
|
||||
{step.items.map((item) => (
|
||||
<ProcessStepItemCard key={item.id} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
{/* 검사 요청 버튼 (검사 항목일 때만) */}
|
||||
{step.isInspection && !isCompleted && isExpanded && (
|
||||
<div className="px-3 pb-3">
|
||||
<Button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onInspectionRequest();
|
||||
}}
|
||||
className="w-full bg-gray-900 hover:bg-gray-800 text-white font-medium py-2.5 rounded-lg"
|
||||
>
|
||||
검사 요청
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Collapsible>
|
||||
|
||||
{/* 상세 항목 리스트 */}
|
||||
{hasItems && isExpanded && (
|
||||
<div className="border-t border-gray-100">
|
||||
{step.items.map((item, index) => (
|
||||
<ProcessStepItemCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
index={index + 1}
|
||||
isCompleted={index < step.completed}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ProcessStepItemCardProps {
|
||||
item: ProcessStepItem;
|
||||
index: number;
|
||||
isCompleted: boolean;
|
||||
}
|
||||
|
||||
function ProcessStepItemCard({ item }: ProcessStepItemCardProps) {
|
||||
function ProcessStepItemCard({ item, index, isCompleted }: ProcessStepItemCardProps) {
|
||||
return (
|
||||
<div className="p-3 bg-white border rounded-lg text-sm">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{item.itemNo}</span>
|
||||
<div className="flex gap-3 p-3 border-b border-gray-50 last:border-b-0">
|
||||
{/* 인덱스 뱃지 */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center w-7 h-7 rounded-lg text-sm font-bold flex-shrink-0',
|
||||
isCompleted
|
||||
? 'bg-gray-300 text-gray-600'
|
||||
: 'bg-gray-100 text-gray-900'
|
||||
)}
|
||||
>
|
||||
{index}
|
||||
</div>
|
||||
|
||||
{/* 상세 정보 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* 첫 번째 줄: #N + 위치 + 선행생산 + 완료 */}
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<span className="text-sm font-semibold text-gray-900">{item.itemNo}</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-xs bg-gray-100 border-gray-300 text-gray-700 px-2 py-0.5"
|
||||
>
|
||||
{item.location}
|
||||
</Badge>
|
||||
{item.isPriority && (
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
<Badge className="text-xs bg-yellow-400 hover:bg-yellow-400 text-yellow-900 px-2 py-0.5">
|
||||
선행 생산
|
||||
</Badge>
|
||||
)}
|
||||
{isCompleted && (
|
||||
<span className="text-xs font-medium text-gray-500 ml-auto">완료</span>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant="outline" className="text-xs font-mono">
|
||||
{item.lot}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<MapPin className="h-3 w-3" />
|
||||
<span>{item.location}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Ruler className="h-3 w-3" />
|
||||
<span>{item.spec}</span>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-center gap-1">
|
||||
<Package className="h-3 w-3" />
|
||||
|
||||
{/* 두 번째 줄: 규격 + 자재 */}
|
||||
<div className="flex items-center justify-between text-xs text-gray-600">
|
||||
<span>규격: {item.spec}</span>
|
||||
<span>자재: {item.material}</span>
|
||||
</div>
|
||||
|
||||
{/* 세 번째 줄: LOT */}
|
||||
<div className="text-xs text-gray-500 mt-0.5">
|
||||
LOT: {item.lot}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -3,13 +3,19 @@
|
||||
/**
|
||||
* 작업 카드 컴포넌트
|
||||
*
|
||||
* 각 작업 항목을 카드 형태로 표시
|
||||
* 버튼: 전량완료, 공정상세, 자재투입, 작업일지, 이슈보고
|
||||
* 공정상세 토글 시 ProcessDetailSection 표시
|
||||
* 기획 화면에 맞춘 레이아웃:
|
||||
* - 헤더 박스: 품목명 + 수량
|
||||
* - 뱃지 영역: 순위/긴급/상태(좌측), 납기(우측)
|
||||
* - 공정 + 작업번호
|
||||
* - 업체/현장
|
||||
* - 담당자
|
||||
* - 지시 박스 (회색 배경)
|
||||
* - 전량완료 버튼 (검은색, 전체너비)
|
||||
* - 4버튼 2x2 그리드
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { CheckCircle, Layers, Package, FileText, AlertTriangle, ChevronDown } from 'lucide-react';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -36,146 +42,145 @@ export function WorkCard({
|
||||
}: WorkCardProps) {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
|
||||
// 상태별 배지 스타일
|
||||
const statusBadgeStyle = {
|
||||
waiting: 'bg-gray-100 text-gray-700 border-gray-200',
|
||||
inProgress: 'bg-blue-100 text-blue-700 border-blue-200',
|
||||
completed: 'bg-green-100 text-green-700 border-green-200',
|
||||
};
|
||||
|
||||
// 납기일 포맷 (YYYY. M. D.)
|
||||
// 납기일 포맷 (YYYY-MM-DD)
|
||||
const formatDueDate = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}.`;
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className={`${order.isUrgent ? 'border-red-200 bg-red-50/30' : 'bg-gray-50/50'} shadow-sm`}>
|
||||
<CardContent className="p-5">
|
||||
{/* 상단: 작업번호 + 상태 + 순위 */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<Card className="bg-white shadow-sm border border-gray-200">
|
||||
<CardContent className="p-0">
|
||||
{/* 헤더 박스: 품목명 + 수량 */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-100">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
{order.productName}
|
||||
</h3>
|
||||
<div className="text-right">
|
||||
<span className="text-2xl font-bold text-gray-900">{order.quantity}</span>
|
||||
<span className="text-sm text-gray-500 ml-1">EA</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 본문 영역 */}
|
||||
<div className="p-4 space-y-3">
|
||||
{/* 뱃지 영역: 순위/긴급/상태(좌측), 납기(우측) */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{/* 순위 뱃지 */}
|
||||
{order.priority <= 3 && (
|
||||
<Badge className="bg-emerald-500 hover:bg-emerald-500 text-white text-xs font-medium px-2.5 py-1 rounded">
|
||||
{order.priority}순위
|
||||
</Badge>
|
||||
)}
|
||||
{/* 긴급 뱃지 */}
|
||||
{order.isUrgent && (
|
||||
<Badge className="bg-red-500 hover:bg-red-500 text-white text-xs font-medium px-2.5 py-1 rounded">
|
||||
긴급
|
||||
</Badge>
|
||||
)}
|
||||
{/* 상태 뱃지 */}
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="bg-gray-200 hover:bg-gray-200 text-gray-700 text-xs font-medium px-2.5 py-1 rounded"
|
||||
>
|
||||
{STATUS_LABELS[order.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
{/* 납기 */}
|
||||
<div className="text-right">
|
||||
<p className="text-xs text-gray-500">납기</p>
|
||||
<p className="text-sm font-semibold text-gray-900">{formatDueDate(order.dueDate)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 공정 뱃지 + 작업번호 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-base font-semibold text-gray-900">
|
||||
{order.orderNo}
|
||||
</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs font-medium rounded-full px-3 py-0.5 ${statusBadgeStyle[order.status]}`}
|
||||
className="text-xs font-medium px-2.5 py-1 border-gray-300 text-gray-600 rounded"
|
||||
>
|
||||
{STATUS_LABELS[order.status]}
|
||||
{PROCESS_LABELS[order.process]}
|
||||
</Badge>
|
||||
<span className="text-sm text-gray-700">{order.orderNo}</span>
|
||||
</div>
|
||||
{order.priority <= 3 && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-sm font-semibold rounded-full px-3 py-1 border-red-400 text-red-500 bg-white"
|
||||
>
|
||||
순위 {order.priority}
|
||||
</Badge>
|
||||
|
||||
{/* 업체/현장 */}
|
||||
<p className="text-sm text-gray-600">
|
||||
{order.client} · {order.projectName}
|
||||
</p>
|
||||
|
||||
{/* 담당자 */}
|
||||
{order.assignees && order.assignees.length > 0 && (
|
||||
<p className="text-sm text-gray-600">
|
||||
담당: {order.assignees.join(', ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 제품명 + 수량 */}
|
||||
<div className="flex items-start justify-between mb-1">
|
||||
<div className="flex-1 space-y-0.5">
|
||||
<h3 className="font-semibold text-lg text-gray-900">{order.productName}</h3>
|
||||
<p className="text-sm text-gray-500">{order.client}</p>
|
||||
<p className="text-sm text-gray-500">{order.projectName}</p>
|
||||
</div>
|
||||
<div className="text-right pl-4">
|
||||
<p className="text-3xl font-bold text-gray-900">{order.quantity}</p>
|
||||
<p className="text-sm text-gray-500">EA</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 공정 + 납기 */}
|
||||
<div className="flex items-center gap-3 mt-4 mb-4">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-sm font-medium rounded-full px-3 py-1 bg-white border-gray-300 text-gray-700"
|
||||
>
|
||||
{PROCESS_LABELS[order.process]}
|
||||
</Badge>
|
||||
<span className="text-sm text-gray-500">
|
||||
납기: {formatDueDate(order.dueDate)}
|
||||
</span>
|
||||
{order.isDelayed && order.delayDays && (
|
||||
<span className="text-sm text-orange-600 font-medium">
|
||||
+{order.delayDays}일 지연
|
||||
</span>
|
||||
{/* 지시 박스 (회색 배경) */}
|
||||
{order.instruction && (
|
||||
<div className="p-3 bg-gray-100 rounded-lg">
|
||||
<p className="text-sm text-gray-700">
|
||||
<span className="font-medium">지시:</span> {order.instruction}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 지시사항 */}
|
||||
{order.instruction && (
|
||||
<div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg text-sm text-yellow-800">
|
||||
{order.instruction}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 버튼 영역 - 첫 번째 줄 */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{/* 전량완료 버튼 - 검은색, 전체 너비 */}
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => onComplete(order)}
|
||||
className="bg-green-500 hover:bg-green-600 text-white rounded-full px-4 h-9"
|
||||
className="w-full bg-gray-900 hover:bg-gray-800 text-white font-medium py-3 rounded-lg"
|
||||
>
|
||||
<CheckCircle className="mr-1.5 h-4 w-4" />
|
||||
전량완료
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setIsExpanded(!isExpanded);
|
||||
onProcessDetail(order);
|
||||
}}
|
||||
className="rounded-full px-4 h-9 border-gray-300"
|
||||
>
|
||||
<Layers className="mr-1.5 h-4 w-4" />
|
||||
공정상세
|
||||
<ChevronDown className={`ml-1 h-4 w-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => onMaterialInput(order)}
|
||||
className="rounded-full px-4 h-9 border-gray-300"
|
||||
>
|
||||
<Package className="mr-1.5 h-4 w-4" />
|
||||
자재투입
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => onWorkLog(order)}
|
||||
className="rounded-full px-4 h-9 border-gray-300"
|
||||
>
|
||||
<FileText className="mr-1.5 h-4 w-4" />
|
||||
작업일지
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 버튼 영역 - 두 번째 줄 (이슈보고) */}
|
||||
<div className="mt-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => onIssueReport(order)}
|
||||
className="rounded-full px-4 h-9 border-orange-300 text-orange-500 hover:bg-orange-50 hover:text-orange-600"
|
||||
>
|
||||
<AlertTriangle className="mr-1.5 h-4 w-4" />
|
||||
이슈보고
|
||||
</Button>
|
||||
</div>
|
||||
{/* 4버튼 2x2 그리드 */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setIsExpanded(!isExpanded);
|
||||
onProcessDetail(order);
|
||||
}}
|
||||
className="w-full border-gray-300 text-gray-700 font-medium py-3 rounded-lg hover:bg-gray-50"
|
||||
>
|
||||
공정상세
|
||||
<ChevronDown className={`ml-1 h-4 w-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => onMaterialInput(order)}
|
||||
className="w-full border-gray-300 text-gray-700 font-medium py-3 rounded-lg hover:bg-gray-50"
|
||||
>
|
||||
자재투입
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => onWorkLog(order)}
|
||||
className="w-full border-gray-300 text-gray-700 font-medium py-3 rounded-lg hover:bg-gray-50"
|
||||
>
|
||||
작업일지
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => onIssueReport(order)}
|
||||
className="w-full border-gray-300 text-gray-700 font-medium py-3 rounded-lg hover:bg-gray-50"
|
||||
>
|
||||
이슈보고
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 공정상세 섹션 (토글) */}
|
||||
<ProcessDetailSection
|
||||
isExpanded={isExpanded}
|
||||
materialRequired={true}
|
||||
onMaterialInput={() => onMaterialInput(order)}
|
||||
/>
|
||||
{/* 공정상세 섹션 (토글) */}
|
||||
<ProcessDetailSection
|
||||
isExpanded={isExpanded}
|
||||
materialRequired={true}
|
||||
onMaterialInput={() => onMaterialInput(order)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user