feat: 생산/품질/자재/출고/주문 관리 페이지 구현

- 생산관리: 대시보드, 작업지시, 작업실적, 작업자화면
- 품질관리: 검사관리 (리스트/등록/상세)
- 자재관리: 입고관리, 재고현황
- 출고관리: 출하관리 (리스트/등록/상세/수정)
- 주문관리: 수주관리, 생산의뢰
- 기존 컴포넌트 개선: CardTransactionInquiry, VendorDetail, QuoteRegistration
- IntegratedListTemplateV2 개선
- 공통 컴포넌트 분석 문서 추가

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/production/WorkerScreen/CompletionConfirmDialog.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+/**
+ * 전량완료 확인 다이얼로그
+ *
+ * "자재 투입이 필요합니다" 안내 후 확인 클릭 시 MaterialInputModal로 이동
+ */
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { PROCESS_LABELS } from '../ProductionDashboard/types';
+import type { WorkOrder } from '../ProductionDashboard/types';
+
+interface CompletionConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  order: WorkOrder | null;
+  onConfirm: () => void; // 확인 클릭 시 → MaterialInputModal 열기
+}
+
+export function CompletionConfirmDialog({
+  open,
+  onOpenChange,
+  order,
+  onConfirm,
+}: CompletionConfirmDialogProps) {
+  const handleConfirm = () => {
+    onOpenChange(false);
+    onConfirm(); // 부모에서 MaterialInputModal 열기
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  if (!order) return null;
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="text-orange-600">
+            자재 투입이 필요합니다!
+          </AlertDialogTitle>
+          <AlertDialogDescription asChild>
+            <div className="space-y-3">
+              <div className="bg-gray-50 p-3 rounded-lg space-y-1 text-sm">
+                <p>
+                  <span className="text-muted-foreground">작업지시:</span>{' '}
+                  <span className="font-medium text-foreground">{order.orderNo}</span>
+                </p>
+                <p>
+                  <span className="text-muted-foreground">공정:</span>{' '}
+                  <span className="font-medium text-foreground">
+                    {PROCESS_LABELS[order.process]}
+                  </span>
+                </p>
+              </div>
+              <p className="text-orange-600 font-medium">
+                자재 투입 없이 완료 처리하시겠습니까?
+              </p>
+              <p className="text-sm text-muted-foreground">
+                (LOT 추적이 불가능해집니다)
+              </p>
+            </div>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={handleCancel}>취소</AlertDialogCancel>
+          <AlertDialogAction onClick={handleConfirm}>
+            확인
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

src/components/production/WorkerScreen/CompletionToast.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+/**
+ * 완료 토스트/뱃지 컴포넌트
+ *
+ * 검은색 라운드 배지, 상단 중앙 표시
+ * 3초 후 자동 fade out
+ */
+
+import { CheckCircle2 } from 'lucide-react';
+import type { CompletionToastInfo } from './types';
+
+interface CompletionToastProps {
+  info: CompletionToastInfo;
+}
+
+export function CompletionToast({ info }: CompletionToastProps) {
+  return (
+    <div className="fixed top-4 left-1/2 -translate-x-1/2 z-50 animate-in fade-in slide-in-from-top-2 duration-300">
+      <div className="bg-gray-900 text-white px-6 py-3 rounded-full shadow-lg flex items-center gap-2">
+        <CheckCircle2 className="h-5 w-5 text-green-400" />
+        <span className="font-medium">
+          {info.orderNo} 완료! ({info.quantity}EA)
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/production/WorkerScreen/IssueReportModal.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+/**
+ * 이슈 보고 모달
+ *
+ * - 이슈 유형 선택 (5개 버튼)
+ * - 상세 내용 textarea
+ * - 벨리데이션 & 성공 다이얼로그
+ */
+
+import { useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import type { WorkOrder } from '../ProductionDashboard/types';
+import type { IssueType } from './types';
+import { ISSUE_TYPE_LABELS } from './types';
+
+interface IssueReportModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  order: WorkOrder | null;
+}
+
+export function IssueReportModal({ open, onOpenChange, order }: IssueReportModalProps) {
+  const [selectedType, setSelectedType] = useState<IssueType | null>(null);
+  const [description, setDescription] = useState('');
+  const [showValidationAlert, setShowValidationAlert] = useState(false);
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
+
+  const issueTypes: IssueType[] = ['defect', 'noStock', 'delay', 'equipment', 'other'];
+
+  const handleSubmit = () => {
+    if (!selectedType) {
+      setShowValidationAlert(true);
+      return;
+    }
+
+    console.log('[이슈보고]', {
+      orderId: order?.id,
+      orderNo: order?.orderNo,
+      issueType: selectedType,
+      description,
+    });
+
+    setShowSuccessAlert(true);
+  };
+
+  const handleSuccessClose = () => {
+    setShowSuccessAlert(false);
+    setSelectedType(null);
+    setDescription('');
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    setSelectedType(null);
+    setDescription('');
+    onOpenChange(false);
+  };
+
+  if (!order) return null;
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-orange-500" />
+              이슈 보고
+            </DialogTitle>
+            <DialogDescription>
+              <span className="block">작업: {order.orderNo}</span>
+              <span className="block">{order.client}</span>
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            {/* 이슈 유형 선택 */}
+            <div>
+              <label className="text-sm font-medium mb-2 block">이슈 유형</label>
+              <div className="flex flex-wrap gap-2">
+                {issueTypes.map((type) => (
+                  <Button
+                    key={type}
+                    variant={selectedType === type ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => setSelectedType(type)}
+                    className={
+                      selectedType === type
+                        ? 'bg-orange-600 hover:bg-orange-700'
+                        : 'hover:bg-orange-50 hover:border-orange-300'
+                    }
+                  >
+                    {ISSUE_TYPE_LABELS[type]}
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            {/* 상세 내용 */}
+            <div>
+              <label className="text-sm font-medium mb-2 block">상세 내용</label>
+              <Textarea
+                placeholder="이슈 상세 내용을 입력하세요..."
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                rows={4}
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={handleCancel}>
+              취소
+            </Button>
+            <Button onClick={handleSubmit} className="bg-orange-600 hover:bg-orange-700">
+              보고
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 벨리데이션 알림 */}
+      <AlertDialog open={showValidationAlert} onOpenChange={setShowValidationAlert}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>알림</AlertDialogTitle>
+            <AlertDialogDescription>이슈 유형을 선택해주세요.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction>확인</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* 성공 알림 */}
+      <AlertDialog open={showSuccessAlert} onOpenChange={setShowSuccessAlert}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-green-600">
+              이슈가 보고되었습니다.
+            </AlertDialogTitle>
+            <AlertDialogDescription asChild>
+              <div className="space-y-2">
+                <p>
+                  <span className="text-muted-foreground">작업:</span>{' '}
+                  <span className="font-medium text-foreground">{order.orderNo}</span>
+                </p>
+                <p>
+                  <span className="text-muted-foreground">유형:</span>{' '}
+                  <span className="font-medium text-foreground">
+                    {selectedType && ISSUE_TYPE_LABELS[selectedType]}
+                  </span>
+                </p>
+              </div>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction onClick={handleSuccessClose}>확인</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

src/components/production/WorkerScreen/MaterialInputModal.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+/**
+ * 자재투입 모달
+ *
+ * - FIFO 순위 표시
+ * - 자재 테이블 (BOM 기준)
+ * - 투입 등록 기능
+ */
+
+import { useState } from 'react';
+import { Package } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import type { WorkOrder } from '../ProductionDashboard/types';
+import type { MaterialInput } from './types';
+
+// Mock 자재 데이터
+const MOCK_MATERIALS: MaterialInput[] = [
+  {
+    id: '1',
+    materialCode: 'KD-RM-001',
+    materialName: 'SPHC-SD 1.6T',
+    unit: 'KG',
+    currentStock: 500,
+    fifoRank: 1,
+  },
+  {
+    id: '2',
+    materialCode: 'KD-RM-002',
+    materialName: 'EGI 1.55T',
+    unit: 'KG',
+    currentStock: 350,
+    fifoRank: 2,
+  },
+  {
+    id: '3',
+    materialCode: 'KD-SM-001',
+    materialName: '볼트 M6x20',
+    unit: 'EA',
+    currentStock: 1200,
+    fifoRank: 3,
+  },
+];
+
+interface MaterialInputModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  order: WorkOrder | null;
+  /** 전량완료 흐름에서 사용 - 투입 등록/취소 후 완료 처리 */
+  onComplete?: () => void;
+  /** 전량완료 흐름 여부 (취소 시에도 완료 처리) */
+  isCompletionFlow?: boolean;
+  /** 자재 투입 저장 콜백 */
+  onSaveMaterials?: (orderId: string, materials: MaterialInput[]) => void;
+  /** 이미 투입된 자재 목록 */
+  savedMaterials?: MaterialInput[];
+}
+
+export function MaterialInputModal({
+  open,
+  onOpenChange,
+  order,
+  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);
+      if (next.has(materialId)) {
+        next.delete(materialId);
+      } else {
+        next.add(materialId);
+      }
+      return next;
+    });
+  };
+
+  // 자재 투입 등록
+  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);
+
+    // 전량완료 흐름이면 완료 처리
+    if (isCompletionFlow && onComplete) {
+      onComplete();
+    }
+  };
+
+  // 건너뛰기 (자재 없이 완료) - 전량완료 흐름에서만 사용
+  const handleSkip = () => {
+    setSelectedMaterials(new Set());
+    onOpenChange(false);
+    // 전량완료 흐름이면 완료 처리
+    if (onComplete) {
+      onComplete();
+    }
+  };
+
+  // 취소 (모달만 닫기)
+  const handleCancel = () => {
+    setSelectedMaterials(new Set());
+    onOpenChange(false);
+  };
+
+  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>
+    );
+  };
+
+  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>
+        </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>
+
+          {/* 자재 테이블 */}
+          {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>
+
+        <DialogFooter className="flex-col sm:flex-row gap-2">
+          <Button variant="outline" onClick={handleCancel}>
+            취소
+          </Button>
+          {isCompletionFlow && (
+            <Button variant="secondary" onClick={handleSkip}>
+              건너뛰기
+            </Button>
+          )}
+          <Button onClick={handleSubmit} disabled={selectedMaterials.size === 0}>
+            투입 등록
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/production/WorkerScreen/ProcessDetailSection.tsx

@@ -0,0 +1,285 @@
+'use client';
+
+/**
+ * 공정상세 섹션 컴포넌트
+ *
+ * WorkCard 내부에서 토글 확장되는 공정 상세 정보
+ * - 자재 투입 필요 섹션
+ * - 공정 단계 (5단계)
+ * - 각 단계별 세부 항목
+ */
+
+import { useState } from 'react';
+import { Package, CheckCircle2, Circle, AlertTriangle, MapPin, Ruler } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils';
+import type { ProcessStep, ProcessStepItem } from './types';
+
+// Mock 공정 단계 데이터
+const MOCK_PROCESS_STEPS: ProcessStep[] = [
+  {
+    id: 'step-1',
+    stepNo: 1,
+    name: '절곡판/코일 절단',
+    completed: 0,
+    total: 2,
+    items: [
+      {
+        id: 'item-1-1',
+        itemNo: '#1',
+        location: '1층 1호-A',
+        isPriority: true,
+        spec: 'W2500 × H3000',
+        material: '절곡판',
+        lot: 'LOT-절곡-2025-001',
+      },
+      {
+        id: 'item-1-2',
+        itemNo: '#2',
+        location: '1층 1호-B',
+        isPriority: false,
+        spec: 'W2000 × H2500',
+        material: '절곡판',
+        lot: 'LOT-절곡-2025-002',
+      },
+    ],
+  },
+  {
+    id: 'step-2',
+    stepNo: 2,
+    name: 'V컷팅',
+    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',
+      },
+    ],
+  },
+  {
+    id: 'step-3',
+    stepNo: 3,
+    name: '절곡',
+    completed: 0,
+    total: 3,
+    items: [
+      {
+        id: 'item-3-1',
+        itemNo: '#1',
+        location: '2층 1호',
+        isPriority: true,
+        spec: '90° × 2회',
+        material: '절곡판',
+        lot: 'LOT-절곡-2025-001',
+      },
+    ],
+  },
+  {
+    id: 'step-4',
+    stepNo: 4,
+    name: '중간검사',
+    isInspection: true,
+    completed: 0,
+    total: 1,
+    items: [],
+  },
+  {
+    id: 'step-5',
+    stepNo: 5,
+    name: '포장',
+    completed: 0,
+    total: 1,
+    items: [],
+  },
+];
+
+interface ProcessDetailSectionProps {
+  isExpanded: boolean;
+  materialRequired: boolean;
+  onMaterialInput: () => void;
+}
+
+export function ProcessDetailSection({
+  isExpanded,
+  materialRequired,
+  onMaterialInput,
+}: ProcessDetailSectionProps) {
+  const [steps] = useState<ProcessStep[]>(MOCK_PROCESS_STEPS);
+  const [expandedSteps, setExpandedSteps] = useState<Set<string>>(new Set());
+
+  const totalSteps = steps.length;
+  const completedSteps = steps.filter((s) => s.completed === s.total).length;
+
+  const toggleStep = (stepId: string) => {
+    setExpandedSteps((prev) => {
+      const next = new Set(prev);
+      if (next.has(stepId)) {
+        next.delete(stepId);
+      } else {
+        next.add(stepId);
+      }
+      return next;
+    });
+  };
+
+  if (!isExpanded) return null;
+
+  return (
+    <div className="mt-4 pt-4 border-t 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>
+      )}
+
+      {/* 공정 단계 헤더 */}
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-medium">공정 단계</h4>
+        <Badge variant="outline" className="text-xs">
+          {completedSteps}/{totalSteps} 완료
+        </Badge>
+      </div>
+
+      {/* 공정 단계 목록 */}
+      <div className="space-y-2">
+        {steps.map((step) => (
+          <ProcessStepCard
+            key={step.id}
+            step={step}
+            isExpanded={expandedSteps.has(step.id)}
+            onToggle={() => toggleStep(step.id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ===== 하위 컴포넌트 =====
+
+interface ProcessStepCardProps {
+  step: ProcessStep;
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+function ProcessStepCard({ step, isExpanded, onToggle }: 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>
+              <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>
+          </div>
+          {hasItems && (
+            <span className="text-xs text-muted-foreground">
+              {isExpanded ? '접기' : '펼치기'}
+            </span>
+          )}
+        </div>
+      </CollapsibleTrigger>
+
+      {hasItems && (
+        <CollapsibleContent>
+          <div className="ml-8 mt-2 space-y-2">
+            {step.items.map((item) => (
+              <ProcessStepItemCard key={item.id} item={item} />
+            ))}
+          </div>
+        </CollapsibleContent>
+      )}
+    </Collapsible>
+  );
+}
+
+interface ProcessStepItemCardProps {
+  item: ProcessStepItem;
+}
+
+function ProcessStepItemCard({ item }: 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>
+          {item.isPriority && (
+            <Badge variant="destructive" className="text-xs">
+              선행 생산
+            </Badge>
+          )}
+        </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" />
+          <span>자재: {item.material}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/production/WorkerScreen/WorkCard.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+/**
+ * 작업 카드 컴포넌트
+ *
+ * 각 작업 항목을 카드 형태로 표시
+ * 버튼: 전량완료, 공정상세, 자재투입, 작업일지, 이슈보고
+ * 공정상세 토글 시 ProcessDetailSection 표시
+ */
+
+import { useState } from 'react';
+import { CheckCircle, Layers, Package, FileText, AlertTriangle, ChevronDown } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import type { WorkOrder } from '../ProductionDashboard/types';
+import { PROCESS_LABELS, STATUS_LABELS } from '../ProductionDashboard/types';
+import { ProcessDetailSection } from './ProcessDetailSection';
+
+interface WorkCardProps {
+  order: WorkOrder;
+  onComplete: (order: WorkOrder) => void;
+  onProcessDetail: (order: WorkOrder) => void;
+  onMaterialInput: (order: WorkOrder) => void;
+  onWorkLog: (order: WorkOrder) => void;
+  onIssueReport: (order: WorkOrder) => void;
+}
+
+export function WorkCard({
+  order,
+  onComplete,
+  onProcessDetail,
+  onMaterialInput,
+  onWorkLog,
+  onIssueReport,
+}: 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.)
+  const formatDueDate = (dateStr: string) => {
+    const date = new Date(dateStr);
+    return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}.`;
+  };
+
+  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">
+          <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]}`}
+            >
+              {STATUS_LABELS[order.status]}
+            </Badge>
+          </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>
+          )}
+        </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>
+          )}
+        </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"
+          >
+            <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>
+
+        {/* 공정상세 섹션 (토글) */}
+        <ProcessDetailSection
+          isExpanded={isExpanded}
+          materialRequired={true}
+          onMaterialInput={() => onMaterialInput(order)}
+        />
+      </CardContent>
+    </Card>
+  );
+}

src/components/production/WorkerScreen/WorkCompletionResultDialog.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+/**
+ * 작업 완료 결과 다이얼로그
+ *
+ * 스크린샷 기준:
+ * - ✅ 작업이 완료되었습니다
+ * - 🔲 제품검사LOT: KD-SA-251223-01
+ * - ✅ 제품검사(FQC)가 자동 생성되었습니다.
+ * - [품질관리 > 제품검사]에서 검사를 진행하세요.
+ */
+
+import { CheckSquare, Square } from 'lucide-react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+interface WorkCompletionResultDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  lotNo: string;
+  onConfirm: () => void;
+}
+
+export function WorkCompletionResultDialog({
+  open,
+  onOpenChange,
+  lotNo,
+  onConfirm,
+}: WorkCompletionResultDialogProps) {
+  const handleConfirm = () => {
+    onConfirm();
+    onOpenChange(false);
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="bg-zinc-900 text-white border-zinc-700">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="sr-only">작업 완료</AlertDialogTitle>
+          <AlertDialogDescription asChild>
+            <div className="space-y-3 text-white">
+              {/* ✅ 작업이 완료되었습니다 */}
+              <div className="flex items-center gap-2">
+                <CheckSquare className="h-5 w-5 text-green-500 fill-green-500" />
+                <span className="text-base">작업이 완료되었습니다.</span>
+              </div>
+
+              {/* 🔲 제품검사LOT */}
+              <div className="flex items-center gap-2">
+                <Square className="h-5 w-5 text-zinc-500" />
+                <span className="text-base text-zinc-400">제품검사LOT: {lotNo}</span>
+              </div>
+
+              {/* ✅ 제품검사(FQC)가 자동 생성되었습니다 */}
+              <div className="flex items-center gap-2">
+                <CheckSquare className="h-5 w-5 text-green-500 fill-green-500" />
+                <span className="text-base">제품검사(FQC)가 자동 생성되었습니다.</span>
+              </div>
+
+              {/* 안내 메시지 */}
+              <p className="text-sm text-zinc-400 pl-7">
+                [품질관리 &gt; 제품검사]에서 검사를 진행하세요.
+              </p>
+            </div>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="flex justify-center sm:justify-center">
+          <AlertDialogAction
+            onClick={handleConfirm}
+            className="bg-pink-200 hover:bg-pink-300 text-zinc-900 font-medium px-8"
+          >
+            확인
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

src/components/production/WorkerScreen/WorkLogModal.tsx

@@ -0,0 +1,272 @@
+'use client';
+
+/**
+ * 작업일지 모달
+ *
+ * - 헤더: sam-design 작업일지 스타일
+ * - 내부 문서: 스크린샷 기준 작업일지 양식
+ */
+
+import { Printer, X } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { Button } from '@/components/ui/button';
+import type { WorkOrder } from '../ProductionDashboard/types';
+import { PROCESS_LABELS } from '../ProductionDashboard/types';
+
+interface WorkLogModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  order: WorkOrder | null;
+}
+
+export function WorkLogModal({ open, onOpenChange, order }: WorkLogModalProps) {
+  const handlePrint = () => {
+    window.print();
+  };
+
+  if (!order) return null;
+
+  const today = new Date().toLocaleDateString('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).replace(/\. /g, '-').replace('.', '');
+
+  const documentNo = `WL-${order.process.toUpperCase().slice(0, 3)}`;
+  const lotNo = `KD-TS-${new Date().toISOString().slice(2, 10).replace(/-/g, '')}-01`;
+
+  // 샘플 품목 데이터 (스크린샷 기준)
+  const items = [
+    { no: 1, name: '스크린 사타 (표준형)', location: '1층/A-01', spec: '3000×2500', qty: 1, status: '대기' },
+    { no: 2, name: '스크린 사타 (표준형)', location: '2층/A-02', spec: '3000×2500', qty: 1, status: '대기' },
+    { no: 3, name: '스크린 사타 (표준형)', location: '3층/A-03', spec: '-', qty: '-', status: '대기' },
+  ];
+
+  // 작업내역 데이터 (스크린샷 기준)
+  const workStats = {
+    workType: '필름 스크린',
+    workWidth: '1016mm',
+    general: 3,
+    ironing: 3,
+    sandblast: 3,
+    packing: 1,
+    orderQty: 3,
+    completedQty: 1,
+    progress: 33,
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-5xl max-h-[90vh] overflow-y-auto p-0 gap-0 bg-gray-100">
+        {/* 접근성을 위한 숨겨진 타이틀 */}
+        <VisuallyHidden>
+          <DialogTitle>작업일지 - {order.orderNo}</DialogTitle>
+        </VisuallyHidden>
+        {/* 모달 헤더 - sam-design 스타일 */}
+        <div className="flex items-center justify-between px-6 py-4 border-b bg-white sticky top-0 z-10">
+          <div className="flex items-center gap-3">
+            <span className="font-semibold text-lg">작업일지</span>
+            <span className="text-sm text-muted-foreground">
+              {PROCESS_LABELS[order.process]} 생산부서
+            </span>
+            <span className="text-sm text-muted-foreground">
+              ({documentNo})
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={handlePrint}>
+              <Printer className="w-4 h-4 mr-1.5" />
+              인쇄
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => onOpenChange(false)}
+            >
+              <X className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+
+        {/* 문서 본문 */}
+        <div className="m-6 p-6 bg-white rounded-lg shadow-sm">
+          {/* 문서 헤더: 로고 + 제목 + 결재라인 */}
+          <div className="flex justify-between items-start mb-6 border border-gray-300">
+            {/* 좌측: 로고 영역 */}
+            <div className="w-24 border-r border-gray-300 flex flex-col items-center justify-center p-3">
+              <span className="text-2xl font-bold">KD</span>
+              <span className="text-xs text-gray-500">정동기업</span>
+            </div>
+
+            {/* 중앙: 문서 제목 */}
+            <div className="flex-1 flex flex-col items-center justify-center p-3 border-r border-gray-300">
+              <h1 className="text-xl font-bold tracking-widest mb-1">작 업 일 지</h1>
+              <p className="text-xs text-gray-500">{documentNo}</p>
+              <p className="text-sm font-medium mt-1">{PROCESS_LABELS[order.process]} 생산부서</p>
+            </div>
+
+            {/* 우측: 결재라인 */}
+            <div className="shrink-0 text-xs">
+              {/* 첫 번째 행: 작성/검토/승인 */}
+              <div className="grid grid-cols-3 border-b border-gray-300">
+                <div className="w-16 p-2 text-center font-medium bg-gray-100 border-r border-gray-300">작성</div>
+                <div className="w-16 p-2 text-center font-medium bg-gray-100 border-r border-gray-300">검토</div>
+                <div className="w-16 p-2 text-center font-medium bg-gray-100">승인</div>
+              </div>
+              {/* 두 번째 행: 이름 */}
+              <div className="grid grid-cols-3 border-b border-gray-300">
+                <div className="w-16 p-2 text-center border-r border-gray-300">{order.assignees[0] || '-'}</div>
+                <div className="w-16 p-2 text-center border-r border-gray-300"></div>
+                <div className="w-16 p-2 text-center"></div>
+              </div>
+              {/* 세 번째 행: 부서 */}
+              <div className="grid grid-cols-3">
+                <div className="w-16 p-2 text-center bg-gray-50 border-r border-gray-300">판매</div>
+                <div className="w-16 p-2 text-center bg-gray-50 border-r border-gray-300">생산</div>
+                <div className="w-16 p-2 text-center bg-gray-50">품질</div>
+              </div>
+            </div>
+          </div>
+
+          {/* 기본 정보 테이블 */}
+          <div className="border border-gray-300 mb-6">
+            {/* Row 1 */}
+            <div className="grid grid-cols-2 border-b border-gray-300">
+              <div className="flex border-r border-gray-300">
+                <div className="w-24 bg-gray-100 p-3 text-sm font-medium border-r border-gray-300 flex items-center">
+                  발주처
+                </div>
+                <div className="flex-1 p-3 text-sm flex items-center">{order.client}</div>
+              </div>
+              <div className="flex">
+                <div className="w-24 bg-gray-100 p-3 text-sm font-medium border-r border-gray-300 flex items-center">
+                  현장명
+                </div>
+                <div className="flex-1 p-3 text-sm flex items-center">{order.projectName}</div>
+              </div>
+            </div>
+
+            {/* Row 2 */}
+            <div className="grid grid-cols-2 border-b border-gray-300">
+              <div className="flex border-r border-gray-300">
+                <div className="w-24 bg-gray-100 p-3 text-sm font-medium border-r border-gray-300 flex items-center">
+                  작업일자
+                </div>
+                <div className="flex-1 p-3 text-sm flex items-center">{today}</div>
+              </div>
+              <div className="flex">
+                <div className="w-24 bg-gray-100 p-3 text-sm font-medium border-r border-gray-300 flex items-center">
+                  LOT NO.
+                </div>
+                <div className="flex-1 p-3 text-sm flex items-center">{lotNo}</div>
+              </div>
+            </div>
+
+            {/* Row 3 */}
+            <div className="grid grid-cols-2">
+              <div className="flex border-r border-gray-300">
+                <div className="w-24 bg-gray-100 p-3 text-sm font-medium border-r border-gray-300 flex items-center">
+                  납기일
+                </div>
+                <div className="flex-1 p-3 text-sm flex items-center">
+                  {new Date(order.dueDate).toLocaleDateString('ko-KR', {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                  }).replace(/\. /g, '-').replace('.', '')}
+                </div>
+              </div>
+              <div className="flex">
+                <div className="w-24 bg-gray-100 p-3 text-sm font-medium border-r border-gray-300 flex items-center">
+                  규격
+                </div>
+                <div className="flex-1 p-3 text-sm flex items-center">W- x H-</div>
+              </div>
+            </div>
+          </div>
+
+          {/* 품목 테이블 */}
+          <div className="border border-gray-300 mb-6">
+            {/* 테이블 헤더 */}
+            <div className="grid grid-cols-12 border-b border-gray-300 bg-gray-100">
+              <div className="col-span-1 p-2 text-sm font-medium text-center border-r border-gray-300">No</div>
+              <div className="col-span-4 p-2 text-sm font-medium text-center border-r border-gray-300">품목명</div>
+              <div className="col-span-2 p-2 text-sm font-medium text-center border-r border-gray-300">출/부호</div>
+              <div className="col-span-2 p-2 text-sm font-medium text-center border-r border-gray-300">규격</div>
+              <div className="col-span-1 p-2 text-sm font-medium text-center border-r border-gray-300">수량</div>
+              <div className="col-span-2 p-2 text-sm font-medium text-center">상태</div>
+            </div>
+
+            {/* 테이블 데이터 */}
+            {items.map((item, index) => (
+              <div
+                key={item.no}
+                className={`grid grid-cols-12 ${index < items.length - 1 ? 'border-b border-gray-300' : ''}`}
+              >
+                <div className="col-span-1 p-2 text-sm text-center border-r border-gray-300">{item.no}</div>
+                <div className="col-span-4 p-2 text-sm border-r border-gray-300">{item.name}</div>
+                <div className="col-span-2 p-2 text-sm text-center border-r border-gray-300">{item.location}</div>
+                <div className="col-span-2 p-2 text-sm text-center border-r border-gray-300">{item.spec}</div>
+                <div className="col-span-1 p-2 text-sm text-center border-r border-gray-300">{item.qty}</div>
+                <div className="col-span-2 p-2 text-sm text-center">{item.status}</div>
+              </div>
+            ))}
+          </div>
+
+          {/* 작업내역 */}
+          <div className="border border-gray-300 mb-6">
+            {/* 검정 헤더 */}
+            <div className="bg-gray-800 text-white p-2.5 text-sm font-medium text-center">
+              {PROCESS_LABELS[order.process]} 작업내역
+            </div>
+
+            {/* 작업내역 그리드 */}
+            <div className="grid grid-cols-4 border-b border-gray-300">
+              <div className="p-2 text-sm bg-gray-100 border-r border-gray-300 text-center font-medium">화단 유형</div>
+              <div className="p-2 text-sm border-r border-gray-300 text-center">{workStats.workType}</div>
+              <div className="p-2 text-sm bg-gray-100 border-r border-gray-300 text-center font-medium">화단 폭</div>
+              <div className="p-2 text-sm text-center">{workStats.workWidth}</div>
+            </div>
+            <div className="grid grid-cols-4 border-b border-gray-300">
+              <div className="p-2 text-sm bg-gray-100 border-r border-gray-300 text-center font-medium">화단일반</div>
+              <div className="p-2 text-sm border-r border-gray-300 text-center">{workStats.general} EA</div>
+              <div className="p-2 text-sm bg-gray-100 border-r border-gray-300 text-center font-medium">이싱</div>
+              <div className="p-2 text-sm text-center">{workStats.ironing} EA</div>
+            </div>
+            <div className="grid grid-cols-4 border-b border-gray-300">
+              <div className="p-2 text-sm bg-gray-100 border-r border-gray-300 text-center font-medium">센드락 작업</div>
+              <div className="p-2 text-sm border-r border-gray-300 text-center">{workStats.sandblast} EA</div>
+              <div className="p-2 text-sm bg-gray-100 border-r border-gray-300 text-center font-medium">포장</div>
+              <div className="p-2 text-sm text-center">{workStats.packing} EA</div>
+            </div>
+            {/* 수량 및 진행률 */}
+            <div className="grid grid-cols-6">
+              <div className="p-2 text-sm bg-gray-100 border-r border-gray-300 text-center font-medium">지시수량</div>
+              <div className="p-2 text-sm border-r border-gray-300 text-center">{workStats.orderQty} EA</div>
+              <div className="p-2 text-sm bg-gray-100 border-r border-gray-300 text-center font-medium">완료수량</div>
+              <div className="p-2 text-sm border-r border-gray-300 text-center">{workStats.completedQty} EA</div>
+              <div className="p-2 text-sm bg-gray-100 border-r border-gray-300 text-center font-medium">진행률</div>
+              <div className="p-2 text-sm text-center font-medium text-blue-600">{workStats.progress}%</div>
+            </div>
+          </div>
+
+          {/* 특이 사항 */}
+          <div className="border border-gray-300">
+            <div className="bg-gray-800 text-white p-2.5 text-sm font-medium text-center">
+              특이사항
+            </div>
+            <div className="p-4 min-h-[60px] text-sm">
+              {order.instruction || '-'}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/production/WorkerScreen/index.tsx

@@ -0,0 +1,325 @@
+'use client';
+
+/**
+ * 작업자 화면 메인 컴포넌트
+ *
+ * 기능:
+ * - 상단 통계 카드 4개 (할당/작업중/완료/긴급)
+ * - 내 작업 목록 카드 리스트
+ * - 각 작업 카드별 버튼 (전량완료/공정상세/자재투입/작업일지/이슈보고)
+ */
+
+import { useState, useMemo, useCallback } from 'react';
+import { ClipboardList, PlayCircle, CheckCircle2, AlertTriangle } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { PageLayout } from '@/components/organisms/PageLayout';
+import { generateMockWorkOrders } from '../ProductionDashboard/mockData';
+import type { WorkOrder } from '../ProductionDashboard/types';
+import type { WorkerStats, CompletionToastInfo, MaterialInput } from './types';
+import { WorkCard } from './WorkCard';
+import { CompletionConfirmDialog } from './CompletionConfirmDialog';
+import { CompletionToast } from './CompletionToast';
+import { MaterialInputModal } from './MaterialInputModal';
+import { WorkLogModal } from './WorkLogModal';
+import { IssueReportModal } from './IssueReportModal';
+import { WorkCompletionResultDialog } from './WorkCompletionResultDialog';
+
+export default function WorkerScreen() {
+  // ===== 상태 관리 =====
+  const [workOrders, setWorkOrders] = useState<WorkOrder[]>(() =>
+    generateMockWorkOrders().filter((o) => o.status !== 'completed')
+  );
+
+  // 모달/다이얼로그 상태
+  const [selectedOrder, setSelectedOrder] = useState<WorkOrder | null>(null);
+  const [isCompletionDialogOpen, setIsCompletionDialogOpen] = useState(false);
+  const [isMaterialModalOpen, setIsMaterialModalOpen] = useState(false);
+  const [isWorkLogModalOpen, setIsWorkLogModalOpen] = useState(false);
+  const [isIssueReportModalOpen, setIsIssueReportModalOpen] = useState(false);
+
+  // 전량완료 흐름 상태
+  const [isCompletionFlow, setIsCompletionFlow] = useState(false);
+  const [isCompletionResultOpen, setIsCompletionResultOpen] = useState(false);
+  const [completionLotNo, setCompletionLotNo] = useState('');
+
+  // 투입된 자재 관리 (orderId -> MaterialInput[])
+  const [inputMaterialsMap, setInputMaterialsMap] = useState<Map<string, MaterialInput[]>>(
+    new Map()
+  );
+
+  // 완료 토스트 상태
+  const [toastInfo, setToastInfo] = useState<CompletionToastInfo | null>(null);
+
+  // 정렬 상태
+  const [sortBy, setSortBy] = useState<'dueDate' | 'latest'>('dueDate');
+
+  // ===== 통계 계산 =====
+  const stats: WorkerStats = useMemo(() => {
+    return {
+      assigned: workOrders.length,
+      inProgress: workOrders.filter((o) => o.status === 'inProgress').length,
+      completed: 0, // 완료된 것은 목록에서 제외되므로 0
+      urgent: workOrders.filter((o) => o.isUrgent).length,
+    };
+  }, [workOrders]);
+
+  // ===== 정렬된 작업 목록 =====
+  const sortedWorkOrders = useMemo(() => {
+    return [...workOrders].sort((a, b) => {
+      if (sortBy === 'dueDate') {
+        // 납기일순 (가까운 날짜 먼저)
+        return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime();
+      } else {
+        // 최신등록순 (최근 ID가 더 큼 = 최근 등록)
+        return b.id.localeCompare(a.id);
+      }
+    });
+  }, [workOrders, sortBy]);
+
+  // ===== 핸들러 =====
+
+  // 전량완료 버튼 클릭
+  const handleComplete = useCallback(
+    (order: WorkOrder) => {
+      setSelectedOrder(order);
+
+      // 이미 투입된 자재가 있으면 바로 완료 결과 팝업
+      const savedMaterials = inputMaterialsMap.get(order.id);
+      if (savedMaterials && savedMaterials.length > 0) {
+        // LOT 번호 생성
+        const lotNo = `KD-SA-${new Date().toISOString().slice(2, 10).replace(/-/g, '')}-01`;
+        setCompletionLotNo(lotNo);
+        setIsCompletionResultOpen(true);
+      } else {
+        // 자재 투입이 필요합니다 팝업
+        setIsCompletionDialogOpen(true);
+      }
+    },
+    [inputMaterialsMap]
+  );
+
+  // "자재 투입이 필요합니다" 팝업에서 확인 클릭 → MaterialInputModal 열기
+  const handleCompletionConfirm = useCallback(() => {
+    setIsCompletionFlow(true);
+    setIsMaterialModalOpen(true);
+  }, []);
+
+  // MaterialInputModal에서 투입 등록/건너뛰기 후 → 작업 완료 결과 팝업 표시
+  const handleWorkCompletion = useCallback(() => {
+    if (!selectedOrder) return;
+
+    // LOT 번호 생성
+    const lotNo = `KD-SA-${new Date().toISOString().slice(2, 10).replace(/-/g, '')}-01`;
+    setCompletionLotNo(lotNo);
+
+    // 완료 결과 팝업 표시
+    setIsCompletionResultOpen(true);
+    setIsCompletionFlow(false);
+  }, [selectedOrder]);
+
+  // 자재 저장 핸들러
+  const handleSaveMaterials = useCallback((orderId: string, materials: MaterialInput[]) => {
+    setInputMaterialsMap((prev) => {
+      const next = new Map(prev);
+      next.set(orderId, materials);
+      return next;
+    });
+  }, []);
+
+  // 완료 결과 팝업에서 확인 → 목록에서 제거
+  const handleCompletionResultConfirm = useCallback(() => {
+    if (!selectedOrder) return;
+
+    // 투입된 자재 맵에서도 제거
+    setInputMaterialsMap((prev) => {
+      const next = new Map(prev);
+      next.delete(selectedOrder.id);
+      return next;
+    });
+
+    // 목록에서 제거
+    setWorkOrders((prev) => prev.filter((o) => o.id !== selectedOrder.id));
+    setSelectedOrder(null);
+    setCompletionLotNo('');
+  }, [selectedOrder]);
+
+  const handleProcessDetail = useCallback((order: WorkOrder) => {
+    setSelectedOrder(order);
+    // 공정상세는 카드 내 토글로 처리 (Phase 4에서 구현)
+    console.log('[공정상세] 토글:', order.orderNo);
+  }, []);
+
+  const handleMaterialInput = useCallback((order: WorkOrder) => {
+    setSelectedOrder(order);
+    setIsMaterialModalOpen(true);
+  }, []);
+
+  const handleWorkLog = useCallback((order: WorkOrder) => {
+    setSelectedOrder(order);
+    setIsWorkLogModalOpen(true);
+  }, []);
+
+  const handleIssueReport = useCallback((order: WorkOrder) => {
+    setSelectedOrder(order);
+    setIsIssueReportModalOpen(true);
+  }, []);
+
+  return (
+    <PageLayout>
+      <div className="space-y-6">
+        {/* 완료 토스트 */}
+        {toastInfo && <CompletionToast info={toastInfo} />}
+
+        {/* 헤더 */}
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+            <ClipboardList className="h-5 w-5 text-primary" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold">작업자 화면</h1>
+            <p className="text-sm text-muted-foreground">내 작업 목록을 확인하고 관리합니다.</p>
+          </div>
+        </div>
+
+        {/* 통계 카드 */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <StatCard
+            title="할일"
+            value={stats.assigned}
+            icon={<ClipboardList className="h-4 w-4" />}
+            variant="default"
+          />
+          <StatCard
+            title="작업중"
+            value={stats.inProgress}
+            icon={<PlayCircle className="h-4 w-4" />}
+            variant="blue"
+          />
+          <StatCard
+            title="완료"
+            value={stats.completed}
+            icon={<CheckCircle2 className="h-4 w-4" />}
+            variant="green"
+          />
+          <StatCard
+            title="긴급"
+            value={stats.urgent}
+            icon={<AlertTriangle className="h-4 w-4" />}
+            variant="red"
+          />
+        </div>
+
+        {/* 작업 목록 */}
+        <div>
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-lg font-semibold">내 작업 목록</h2>
+            <Select value={sortBy} onValueChange={(value: 'dueDate' | 'latest') => setSortBy(value)}>
+              <SelectTrigger className="w-[140px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="dueDate">납기일순</SelectItem>
+                <SelectItem value="latest">최신등록순</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          {sortedWorkOrders.length === 0 ? (
+            <Card>
+              <CardContent className="py-12 text-center text-muted-foreground">
+                배정된 작업이 없습니다.
+              </CardContent>
+            </Card>
+          ) : (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              {sortedWorkOrders.map((order) => (
+                <WorkCard
+                  key={order.id}
+                  order={order}
+                  onComplete={handleComplete}
+                  onProcessDetail={handleProcessDetail}
+                  onMaterialInput={handleMaterialInput}
+                  onWorkLog={handleWorkLog}
+                  onIssueReport={handleIssueReport}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 모달/다이얼로그 */}
+      <CompletionConfirmDialog
+        open={isCompletionDialogOpen}
+        onOpenChange={setIsCompletionDialogOpen}
+        order={selectedOrder}
+        onConfirm={handleCompletionConfirm}
+      />
+
+      <MaterialInputModal
+        open={isMaterialModalOpen}
+        onOpenChange={setIsMaterialModalOpen}
+        order={selectedOrder}
+        isCompletionFlow={isCompletionFlow}
+        onComplete={handleWorkCompletion}
+        onSaveMaterials={handleSaveMaterials}
+        savedMaterials={selectedOrder ? inputMaterialsMap.get(selectedOrder.id) : undefined}
+      />
+
+      <WorkLogModal
+        open={isWorkLogModalOpen}
+        onOpenChange={setIsWorkLogModalOpen}
+        order={selectedOrder}
+      />
+
+      <IssueReportModal
+        open={isIssueReportModalOpen}
+        onOpenChange={setIsIssueReportModalOpen}
+        order={selectedOrder}
+      />
+
+      <WorkCompletionResultDialog
+        open={isCompletionResultOpen}
+        onOpenChange={setIsCompletionResultOpen}
+        lotNo={completionLotNo}
+        onConfirm={handleCompletionResultConfirm}
+      />
+    </PageLayout>
+  );
+}
+
+// ===== 하위 컴포넌트 =====
+
+interface StatCardProps {
+  title: string;
+  value: number;
+  icon: React.ReactNode;
+  variant: 'default' | 'blue' | 'green' | 'red';
+}
+
+function StatCard({ title, value, icon, variant }: StatCardProps) {
+  const variantClasses = {
+    default: 'bg-gray-50 text-gray-700',
+    blue: 'bg-blue-50 text-blue-700',
+    green: 'bg-green-50 text-green-700',
+    red: 'bg-red-50 text-red-700',
+  };
+
+  return (
+    <Card className={variantClasses[variant]}>
+      <CardContent className="p-4">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium">{title}</span>
+          {icon}
+        </div>
+        <p className="text-2xl font-bold mt-2">{value}</p>
+      </CardContent>
+    </Card>
+  );
+}

src/components/production/WorkerScreen/types.ts

@@ -0,0 +1,74 @@
+// 작업자 화면 타입 정의
+
+import type { WorkOrder, ProcessType } from '../ProductionDashboard/types';
+
+// 작업자 작업 아이템 (WorkOrder 확장)
+export interface WorkerWorkItem extends WorkOrder {
+  processDetail?: ProcessDetail;
+}
+
+// 공정상세 정보
+export interface ProcessDetail {
+  materialRequired: boolean;
+  steps: ProcessStep[];
+  totalSteps: number;
+  completedSteps: number;
+}
+
+// 공정 단계
+export interface ProcessStep {
+  id: string;
+  stepNo: number;
+  name: string;
+  isInspection?: boolean;
+  completed: number;
+  total: number;
+  items: ProcessStepItem[];
+}
+
+// 공정 단계 상세 항목
+export interface ProcessStepItem {
+  id: string;
+  itemNo: string;        // #1, #2
+  location: string;      // 1층 1호-A
+  isPriority: boolean;   // 선행 생산
+  spec: string;          // W2500 × H3000
+  material: string;      // 자재: 절곡판
+  lot: string;           // LOT-절곡-2025-001
+}
+
+// 자재 투입 정보
+export interface MaterialInput {
+  id: string;
+  materialCode: string;
+  materialName: string;
+  unit: string;
+  currentStock: number;
+  fifoRank: number;      // FIFO 순위 (1: 최우선, 2: 차선, 3+: 대기)
+}
+
+// 이슈 유형
+export type IssueType = 'defect' | 'noStock' | 'delay' | 'equipment' | 'other';
+
+export const ISSUE_TYPE_LABELS: Record<IssueType, string> = {
+  defect: '불량품 발생',
+  noStock: '재고 없음',
+  delay: '일정 지연',
+  equipment: '설비 문제',
+  other: '기타',
+};
+
+// 작업자 화면 통계
+export interface WorkerStats {
+  assigned: number;
+  inProgress: number;
+  completed: number;
+  urgent: number;
+}
+
+// 완료 토스트 정보
+export interface CompletionToastInfo {
+  orderNo: string;
+  quantity: number;
+  lotNo: string;
+}