feat(WEB): 공정관리/작업지시/작업자화면 기능 강화 및 템플릿 개선

- 공정관리: ProcessDetail/ProcessForm/ProcessList 개선, StepDetail/StepForm 신규 추가
- 작업지시: WorkOrderDetail/Edit/List UI 개선, 작업지시서 문서 추가
- 작업자화면: WorkerScreen 대폭 개선, MaterialInputModal/WorkLogModal 수정, WorkItemCard 신규
- 영업주문: 주문 상세 페이지 개선
- 입고관리: 상세/actions 수정
- 템플릿: IntegratedDetailTemplate/IntegratedListTemplateV2/UniversalListPage 기능 확장
- UI: confirm-dialog 개선

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

src/components/production/WorkerScreen/MaterialInputModal.tsx

@@ -1,13 +1,11 @@
 'use client';
 
 /**
- * 자재투입 모달
- * API 연동 완료 (2025-12-26)
+ * 자재투입 모달 (기획서 기반)
  *
- * 기획 화면에 맞춘 레이아웃:
- * - FIFO 순위 설명 (1 최우선, 2 차선, 3+ 대기)
- * - ① 자재 선택 (BOM 기준) 테이블
- * - 취소 / 투입 등록 버튼 (전체 너비)
+ * 기획서 변경: BOM 체크박스 → 투입수량 입력 테이블
+ * 컬럼: 로트번호 | 품목명 | 수량 | 단위 | 투입 수량 (input, 숫자만)
+ * 하단: 취소 / 투입
  */
 
 import { useState, useEffect, useCallback } from 'react';
@@ -20,8 +18,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
 import {
   Table,
   TableBody,
@@ -54,20 +51,48 @@ export function MaterialInputModal({
   isCompletionFlow = false,
   onSaveMaterials,
 }: MaterialInputModalProps) {
-  const [selectedMaterials, setSelectedMaterials] = useState<Set<string>>(new Set());
   const [materials, setMaterials] = useState<MaterialForInput[]>([]);
+  const [inputQuantities, setInputQuantities] = useState<Record<string, string>>({});
   const [isLoading, setIsLoading] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // 목업 자재 데이터 (기획서 기반 10행)
+  const MOCK_MATERIALS: MaterialForInput[] = Array.from({ length: 10 }, (_, i) => ({
+    id: 100 + i,
+    materialCode: '123123',
+    materialName: '품목명',
+    unit: 'm',
+    currentStock: 500,
+    fifoRank: i + 1,
+  }));
+
   // API로 자재 목록 로드
   const loadMaterials = useCallback(async () => {
     if (!order) return;
 
     setIsLoading(true);
     try {
+      // 목업 아이템인 경우 목업 자재 데이터 사용
+      if (order.id.startsWith('mock-')) {
+        setMaterials(MOCK_MATERIALS);
+        const initialQuantities: Record<string, string> = {};
+        MOCK_MATERIALS.forEach((m) => {
+          initialQuantities[String(m.id)] = '';
+        });
+        setInputQuantities(initialQuantities);
+        setIsLoading(false);
+        return;
+      }
+
       const result = await getMaterialsForWorkOrder(order.id);
       if (result.success) {
         setMaterials(result.data);
+        // 초기 투입 수량 비우기
+        const initialQuantities: Record<string, string> = {};
+        result.data.forEach((m) => {
+          initialQuantities[String(m.id)] = '';
+        });
+        setInputQuantities(initialQuantities);
       } else {
         toast.error(result.error || '자재 목록 조회에 실패했습니다.');
       }
@@ -87,47 +112,50 @@ export function MaterialInputModal({
     }
   }, [open, order, loadMaterials]);
 
-  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 handleQuantityChange = (materialId: string, value: string) => {
+    // 숫자만 허용
+    const numericValue = value.replace(/[^0-9]/g, '');
+    setInputQuantities((prev) => ({
+      ...prev,
+      [materialId]: numericValue,
+    }));
   };
 
   // 투입 등록
   const handleSubmit = async () => {
     if (!order) return;
 
+    // 투입 수량이 입력된 항목 필터
+    const materialsWithQuantity = materials.filter((m) => {
+      const qty = inputQuantities[String(m.id)];
+      return qty && parseInt(qty) > 0;
+    });
+
+    if (materialsWithQuantity.length === 0) {
+      toast.error('투입 수량을 입력해주세요.');
+      return;
+    }
+
     setIsSubmitting(true);
     try {
-      // 선택된 자재 ID 배열
-      const materialIds = materials
-        .filter((m) => selectedMaterials.has(String(m.id)))
-        .map((m) => m.id);
-
+      const materialIds = materialsWithQuantity.map((m) => m.id);
       const result = await registerMaterialInput(order.id, materialIds);
 
       if (result.success) {
         toast.success('자재 투입이 등록되었습니다.');
 
-        // onSaveMaterials 콜백 호출 (기존 호환성)
+        // onSaveMaterials 콜백 호출
         if (onSaveMaterials) {
-          const selectedMaterialList: MaterialInput[] = materials
-            .filter((m) => selectedMaterials.has(String(m.id)))
-            .map((m) => ({
-              id: String(m.id),
-              materialCode: m.materialCode,
-              materialName: m.materialName,
-              unit: m.unit,
-              currentStock: m.currentStock,
-              fifoRank: m.fifoRank,
-            }));
-          onSaveMaterials(order.id, selectedMaterialList);
+          const savedList: MaterialInput[] = materialsWithQuantity.map((m) => ({
+            id: String(m.id),
+            lotNo: '', // API에서 가져올 필드
+            materialName: m.materialName,
+            quantity: m.currentStock,
+            unit: m.unit,
+            inputQuantity: parseInt(inputQuantities[String(m.id)] || '0'),
+          }));
+          onSaveMaterials(order.id, savedList);
         }
 
         resetAndClose();
@@ -147,13 +175,12 @@ export function MaterialInputModal({
     }
   };
 
-  // 취소
   const handleCancel = () => {
     resetAndClose();
   };
 
   const resetAndClose = () => {
-    setSelectedMaterials(new Set());
+    setInputQuantities({});
     onOpenChange(false);
   };
 
@@ -164,100 +191,79 @@ export function MaterialInputModal({
       <DialogContent className="max-w-2xl p-0 gap-0">
         {/* 헤더 */}
         <DialogHeader className="p-6 pb-4">
-          <DialogTitle className="text-xl font-semibold">투입자재 등록</DialogTitle>
+          <DialogTitle className="text-xl font-semibold">자재 투입</DialogTitle>
         </DialogHeader>
 
         <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>
+          {/* 자재 목록 테이블 */}
+          {isLoading ? (
+            <ContentSkeleton type="table" rows={4} />
+          ) : 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>
-
-          {/* 자재 선택 섹션 */}
-          <div>
-            <h3 className="text-sm font-medium text-gray-900 mb-3">
-              ① 자재 선택 (BOM 기준)
-            </h3>
-
-            {isLoading ? (
-              <ContentSkeleton type="table" rows={4} />
-            ) : 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">
-                        이 공정에 배정된 자재가 없습니다.
+          ) : (
+            <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 text-sm">
+                        {material.materialCode}
+                      </TableCell>
+                      <TableCell className="text-center text-sm">
+                        {material.materialName}
+                      </TableCell>
+                      <TableCell className="text-center text-sm">
+                        {material.currentStock.toLocaleString()}
+                      </TableCell>
+                      <TableCell className="text-center text-sm">
+                        {material.unit}
+                      </TableCell>
+                      <TableCell className="text-center">
+                        <Input
+                          type="text"
+                          inputMode="numeric"
+                          placeholder="0"
+                          value={inputQuantities[String(material.id)] || ''}
+                          onChange={(e) =>
+                            handleQuantityChange(String(material.id), e.target.value)
+                          }
+                          className="w-20 mx-auto text-center h-8 text-sm"
+                        />
                       </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(String(material.id))}
-                            onCheckedChange={() => handleToggleMaterial(String(material.id))}
-                          />
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </div>
-            )}
-          </div>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
 
           {/* 버튼 영역 */}
           <div className="flex gap-3">
@@ -271,8 +277,8 @@ export function MaterialInputModal({
             </Button>
             <Button
               onClick={handleSubmit}
-              disabled={selectedMaterials.size === 0 || isSubmitting}
-              className="flex-1 py-6 text-base font-medium bg-gray-400 hover:bg-gray-500 disabled:bg-gray-300"
+              disabled={isSubmitting}
+              className="flex-1 py-6 text-base font-medium bg-gray-900 hover:bg-gray-800"
             >
               {isSubmitting ? (
                 <>
@@ -280,7 +286,7 @@ export function MaterialInputModal({
                   등록 중...
                 </>
               ) : (
-                '투입 등록'
+                '투입'
               )}
             </Button>
           </div>