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>

src/components/production/WorkerScreen/ProcessDetailSection.tsx

@@ -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>
   );