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/WorkOrders/documents/ScreenInspectionContent.tsx

@@ -0,0 +1,383 @@
+'use client';
+
+/**
+ * 스크린 중간검사 성적서 문서 콘텐츠
+ *
+ * 기획서 기준:
+ * - 헤더: "중간검사성적서 (스크린)" + 결재란
+ * - 기본정보: 제품명/스크린, 규격/와이어 글라스 코팅직물, 수주처, 현장명 | 제품LOT NO, 로트크기, 검사일자, 검사자
+ * - ■ 중간검사 기준서: 도해 + 검사항목/검사기준/검사방법/검사주기/관련규정
+ *   가공상태, 재봉상태, 조립상태, 치수(길이/높이/간격)
+ * - ■ 중간검사 DATA: No, 가공상태결모양(양호/불량), 재봉상태결모양(양호/불량), 조립상태(양호/불량),
+ *   길이(도면치수/측정값입력), 나비(도면치수/측정값입력), 간격(기준치/OK·NG선택), 판정(자동)
+ * - 부적합 내용 / 종합판정(자동)
+ */
+
+import { useState, useCallback, useMemo } from 'react';
+import type { WorkOrder } from '../types';
+
+interface ScreenInspectionContentProps {
+  data: WorkOrder;
+  readOnly?: boolean;
+}
+
+type CheckStatus = '양호' | '불량' | null;
+type GapResult = 'OK' | 'NG' | null;
+
+interface InspectionRow {
+  id: number;
+  processStatus: CheckStatus;     // 가공상태 결모양
+  sewingStatus: CheckStatus;      // 재봉상태 결모양
+  assemblyStatus: CheckStatus;    // 조립상태
+  lengthDesign: string;           // 길이 도면치수 (표시용)
+  lengthMeasured: string;         // 길이 측정값 (입력)
+  widthDesign: string;            // 나비 도면치수 (표시용)
+  widthMeasured: string;          // 나비 측정값 (입력)
+  gapStandard: string;            // 간격 기준치 (표시용)
+  gapResult: GapResult;           // 간격 측정값 (OK/NG 선택)
+}
+
+const DEFAULT_ROW_COUNT = 6;
+
+export function ScreenInspectionContent({ data: order, readOnly = false }: ScreenInspectionContentProps) {
+  const fullDate = new Date().toLocaleDateString('ko-KR', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  const today = new Date().toLocaleDateString('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).replace(/\. /g, '-').replace('.', '');
+
+  const documentNo = order.workOrderNo || 'ABC123';
+  const primaryAssignee = order.assignees?.find(a => a.isPrimary)?.name || order.assignee || '-';
+
+  const [rows, setRows] = useState<InspectionRow[]>(() =>
+    Array.from({ length: DEFAULT_ROW_COUNT }, (_, i) => ({
+      id: i + 1,
+      processStatus: null,
+      sewingStatus: null,
+      assemblyStatus: null,
+      lengthDesign: '7,400',
+      lengthMeasured: '',
+      widthDesign: '2,950',
+      widthMeasured: '',
+      gapStandard: '400 이하',
+      gapResult: null,
+    }))
+  );
+
+  const [inadequateContent, setInadequateContent] = useState('');
+
+  const handleStatusChange = useCallback((rowId: number, field: 'processStatus' | 'sewingStatus' | 'assemblyStatus', value: CheckStatus) => {
+    if (readOnly) return;
+    setRows(prev => prev.map(row =>
+      row.id === rowId ? { ...row, [field]: value } : row
+    ));
+  }, [readOnly]);
+
+  const handleInputChange = useCallback((rowId: number, field: 'lengthMeasured' | 'widthMeasured', value: string) => {
+    if (readOnly) return;
+    setRows(prev => prev.map(row =>
+      row.id === rowId ? { ...row, [field]: value } : row
+    ));
+  }, [readOnly]);
+
+  const handleGapChange = useCallback((rowId: number, value: GapResult) => {
+    if (readOnly) return;
+    setRows(prev => prev.map(row =>
+      row.id === rowId ? { ...row, gapResult: value } : row
+    ));
+  }, [readOnly]);
+
+  // 행별 판정 자동 계산
+  const getRowJudgment = useCallback((row: InspectionRow): '적' | '부' | null => {
+    const { processStatus, sewingStatus, assemblyStatus, gapResult } = row;
+    // 하나라도 불량 or NG → 부
+    if (processStatus === '불량' || sewingStatus === '불량' || assemblyStatus === '불량' || gapResult === 'NG') {
+      return '부';
+    }
+    // 모두 양호 + OK → 적
+    if (processStatus === '양호' && sewingStatus === '양호' && assemblyStatus === '양호' && gapResult === 'OK') {
+      return '적';
+    }
+    return null;
+  }, []);
+
+  // 종합판정 자동 계산
+  const overallResult = useMemo(() => {
+    const judgments = rows.map(getRowJudgment);
+    if (judgments.some(j => j === '부')) return '불합격';
+    if (judgments.every(j => j === '적')) return '합격';
+    return null;
+  }, [rows, getRowJudgment]);
+
+  // 체크박스 렌더 (양호/불량)
+  const renderCheckStatus = (rowId: number, field: 'processStatus' | 'sewingStatus' | 'assemblyStatus', value: CheckStatus) => (
+    <td className="border border-gray-400 p-1">
+      <div className="flex flex-col items-center gap-0.5">
+        <label className="flex items-center gap-0.5 cursor-pointer text-xs">
+          <input
+            type="checkbox"
+            checked={value === '양호'}
+            onChange={() => handleStatusChange(rowId, field, value === '양호' ? null : '양호')}
+            disabled={readOnly}
+            className="w-3 h-3"
+          />
+          양호
+        </label>
+        <label className="flex items-center gap-0.5 cursor-pointer text-xs">
+          <input
+            type="checkbox"
+            checked={value === '불량'}
+            onChange={() => handleStatusChange(rowId, field, value === '불량' ? null : '불량')}
+            disabled={readOnly}
+            className="w-3 h-3"
+          />
+          불량
+        </label>
+      </div>
+    </td>
+  );
+
+  const inputClass = 'w-full text-center border-0 bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-500 rounded text-xs';
+
+  return (
+    <div className="p-6 bg-white">
+      {/* ===== 헤더 영역 ===== */}
+      <div className="flex justify-between items-start mb-6">
+        <div>
+          <h1 className="text-2xl font-bold">중간검사성적서 (스크린)</h1>
+          <p className="text-xs text-gray-500 mt-1">
+            문서번호: {documentNo} | 작성일자: {fullDate}
+          </p>
+        </div>
+
+        {/* 결재란 */}
+        <table className="border-collapse text-sm flex-shrink-0">
+          <tbody>
+            <tr>
+              <td className="border border-gray-400 px-4 py-1 text-center align-middle" rowSpan={3}>결<br/>재</td>
+              <td className="border border-gray-400 px-6 py-1 text-center">작성</td>
+              <td className="border border-gray-400 px-6 py-1 text-center">승인</td>
+              <td className="border border-gray-400 px-6 py-1 text-center">승인</td>
+              <td className="border border-gray-400 px-6 py-1 text-center">승인</td>
+            </tr>
+            <tr>
+              <td className="border border-gray-400 px-6 py-3 text-center">{primaryAssignee}</td>
+              <td className="border border-gray-400 px-6 py-3 text-center text-gray-400">이름</td>
+              <td className="border border-gray-400 px-6 py-3 text-center text-gray-400">이름</td>
+              <td className="border border-gray-400 px-6 py-3 text-center text-gray-400">이름</td>
+            </tr>
+            <tr>
+              <td className="border border-gray-400 px-6 py-1 text-center">부서명</td>
+              <td className="border border-gray-400 px-6 py-1 text-center">부서명</td>
+              <td className="border border-gray-400 px-6 py-1 text-center">부서명</td>
+              <td className="border border-gray-400 px-6 py-1 text-center">부서명</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* ===== 기본 정보 ===== */}
+      <table className="w-full border-collapse text-xs mb-6">
+        <tbody>
+          <tr>
+            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium w-24">제품명</td>
+            <td className="border border-gray-400 px-3 py-2">스크린</td>
+            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium w-28">제품 LOT NO</td>
+            <td className="border border-gray-400 px-3 py-2">{order.lotNo || '-'}</td>
+          </tr>
+          <tr>
+            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium">규격</td>
+            <td className="border border-gray-400 px-3 py-2">와이어 글라스 코팅직물</td>
+            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium">로트크기</td>
+            <td className="border border-gray-400 px-3 py-2">{order.items?.length || 0} 개소</td>
+          </tr>
+          <tr>
+            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium">수주처</td>
+            <td className="border border-gray-400 px-3 py-2">{order.client || '-'}</td>
+            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium">검사일자</td>
+            <td className="border border-gray-400 px-3 py-2">{today}</td>
+          </tr>
+          <tr>
+            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium">현장명</td>
+            <td className="border border-gray-400 px-3 py-2">{order.projectName || '-'}</td>
+            <td className="border border-gray-400 bg-gray-50 px-3 py-2 font-medium">검사자</td>
+            <td className="border border-gray-400 px-3 py-2">{primaryAssignee}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      {/* ===== 중간검사 기준서 ===== */}
+      <div className="mb-1 font-bold text-sm">■ 중간검사 기준서</div>
+      <table className="w-full border-collapse text-xs mb-6">
+        <tbody>
+          <tr>
+            {/* 도해 영역 */}
+            <td className="border border-gray-400 p-4 text-center text-gray-300 align-middle w-1/4" rowSpan={8}>
+              <div className="h-40 flex items-center justify-center">도해 이미지 영역</div>
+            </td>
+            {/* 헤더 행 */}
+            <th className="border border-gray-400 bg-gray-100 px-2 py-1 text-center" colSpan={2}>검사항목</th>
+            <th className="border border-gray-400 bg-gray-100 px-2 py-1 text-center">검사기준</th>
+            <th className="border border-gray-400 bg-gray-100 px-2 py-1 text-center">검사방법</th>
+            <th className="border border-gray-400 bg-gray-100 px-2 py-1 text-center">검사주기</th>
+            <th className="border border-gray-400 bg-gray-100 px-2 py-1 text-center">관련규정</th>
+          </tr>
+          <tr>
+            <td className="border border-gray-400 px-2 py-1 font-medium" colSpan={2}>가공상태</td>
+            <td className="border border-gray-400 px-2 py-1">사용상 해로운 결함이 없을것</td>
+            <td className="border border-gray-400 px-2 py-1 text-center">육안검사</td>
+            <td className="border border-gray-400 px-2 py-1 text-center"></td>
+            <td className="border border-gray-400 px-2 py-1">KS F 4510 5.1항</td>
+          </tr>
+          <tr>
+            <td className="border border-gray-400 px-2 py-1 font-medium" colSpan={2}>재봉상태</td>
+            <td className="border border-gray-400 px-2 py-1">내화실험 되어 견고하게</td>
+            <td className="border border-gray-400 px-2 py-1 text-center"></td>
+            <td className="border border-gray-400 px-2 py-1 text-center"></td>
+            <td className="border border-gray-400 px-2 py-1"></td>
+          </tr>
+          <tr>
+            <td className="border border-gray-400 px-2 py-1 font-medium" colSpan={2}>조립상태</td>
+            <td className="border border-gray-400 px-2 py-1">엔도확인 견고하게 조립되어야 함</td>
+            <td className="border border-gray-400 px-2 py-1 text-center"></td>
+            <td className="border border-gray-400 px-2 py-1 text-center"></td>
+            <td className="border border-gray-400 px-2 py-1">KS F 4510<br/>n = 1, c = 0</td>
+          </tr>
+          <tr>
+            <td className="border border-gray-400 px-2 py-1 font-medium bg-gray-50" rowSpan={3}>치수<br/>(mm)</td>
+            <td className="border border-gray-400 px-2 py-1 font-medium">길이</td>
+            <td className="border border-gray-400 px-2 py-1">도면치수 ± 4</td>
+            <td className="border border-gray-400 px-2 py-1 text-center"></td>
+            <td className="border border-gray-400 px-2 py-1 text-center"></td>
+            <td className="border border-gray-400 px-2 py-1"></td>
+          </tr>
+          <tr>
+            <td className="border border-gray-400 px-2 py-1 font-medium">높이</td>
+            <td className="border border-gray-400 px-2 py-1">도면치수 + 제한없음 − 40</td>
+            <td className="border border-gray-400 px-2 py-1 text-center"></td>
+            <td className="border border-gray-400 px-2 py-1 text-center"></td>
+            <td className="border border-gray-400 px-2 py-1"></td>
+          </tr>
+          <tr>
+            <td className="border border-gray-400 px-2 py-1 font-medium">간격</td>
+            <td className="border border-gray-400 px-2 py-1">400 이하</td>
+            <td className="border border-gray-400 px-2 py-1 text-center">GONO 게이지</td>
+            <td className="border border-gray-400 px-2 py-1 text-center"></td>
+            <td className="border border-gray-400 px-2 py-1">자체규정</td>
+          </tr>
+        </tbody>
+      </table>
+
+      {/* ===== 중간검사 DATA ===== */}
+      <div className="mb-1 font-bold text-sm">■ 중간검사 DATA</div>
+      <table className="w-full border-collapse text-xs mb-4">
+        <thead>
+          <tr className="bg-gray-100">
+            <th className="border border-gray-400 p-1 w-8" rowSpan={2}>No.</th>
+            <th className="border border-gray-400 p-1 w-16" rowSpan={2}>가공상태<br/>결모양</th>
+            <th className="border border-gray-400 p-1 w-16" rowSpan={2}>재봉상태<br/>결모양</th>
+            <th className="border border-gray-400 p-1 w-16" rowSpan={2}>조립상태</th>
+            <th className="border border-gray-400 p-1" colSpan={2}>길이 (mm)</th>
+            <th className="border border-gray-400 p-1" colSpan={2}>나비 (mm)</th>
+            <th className="border border-gray-400 p-1" colSpan={2}>간격 (mm)</th>
+            <th className="border border-gray-400 p-1 w-14" rowSpan={2}>판정<br/>(적/부)</th>
+          </tr>
+          <tr className="bg-gray-100">
+            <th className="border border-gray-400 p-1 w-16">도면치수</th>
+            <th className="border border-gray-400 p-1 w-16">측정값</th>
+            <th className="border border-gray-400 p-1 w-16">도면치수</th>
+            <th className="border border-gray-400 p-1 w-16">측정값</th>
+            <th className="border border-gray-400 p-1 w-16">기준치</th>
+            <th className="border border-gray-400 p-1 w-16">측정값</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => {
+            const judgment = getRowJudgment(row);
+            return (
+              <tr key={row.id}>
+                <td className="border border-gray-400 p-1 text-center">{row.id}</td>
+                {/* 가공상태 - 양호/불량 체크 */}
+                {renderCheckStatus(row.id, 'processStatus', row.processStatus)}
+                {/* 재봉상태 - 양호/불량 체크 */}
+                {renderCheckStatus(row.id, 'sewingStatus', row.sewingStatus)}
+                {/* 조립상태 - 양호/불량 체크 */}
+                {renderCheckStatus(row.id, 'assemblyStatus', row.assemblyStatus)}
+                {/* 길이 - 도면치수 표시 + 측정값 입력 */}
+                <td className="border border-gray-400 p-1 text-center">{row.lengthDesign}</td>
+                <td className="border border-gray-400 p-1">
+                  <input type="text" value={row.lengthMeasured} onChange={(e) => handleInputChange(row.id, 'lengthMeasured', e.target.value)} disabled={readOnly} className={inputClass} placeholder="-" />
+                </td>
+                {/* 나비 - 도면치수 표시 + 측정값 입력 */}
+                <td className="border border-gray-400 p-1 text-center">{row.widthDesign}</td>
+                <td className="border border-gray-400 p-1">
+                  <input type="text" value={row.widthMeasured} onChange={(e) => handleInputChange(row.id, 'widthMeasured', e.target.value)} disabled={readOnly} className={inputClass} placeholder="-" />
+                </td>
+                {/* 간격 - 기준치 표시 + OK/NG 선택 */}
+                <td className="border border-gray-400 p-1 text-center">{row.gapStandard}</td>
+                <td className="border border-gray-400 p-1">
+                  <div className="flex flex-col items-center gap-0.5">
+                    <label className="flex items-center gap-0.5 cursor-pointer text-xs">
+                      <input
+                        type="checkbox"
+                        checked={row.gapResult === 'OK'}
+                        onChange={() => handleGapChange(row.id, row.gapResult === 'OK' ? null : 'OK')}
+                        disabled={readOnly}
+                        className="w-3 h-3"
+                      />
+                      OK
+                    </label>
+                    <label className="flex items-center gap-0.5 cursor-pointer text-xs">
+                      <input
+                        type="checkbox"
+                        checked={row.gapResult === 'NG'}
+                        onChange={() => handleGapChange(row.id, row.gapResult === 'NG' ? null : 'NG')}
+                        disabled={readOnly}
+                        className="w-3 h-3"
+                      />
+                      NG
+                    </label>
+                  </div>
+                </td>
+                {/* 판정 - 자동 계산 */}
+                <td className={`border border-gray-400 p-1 text-center font-bold ${
+                  judgment === '적' ? 'text-blue-600' : judgment === '부' ? 'text-red-600' : 'text-gray-300'
+                }`}>
+                  {judgment || '-'}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+
+      {/* ===== 부적합 내용 + 종합판정 ===== */}
+      <table className="w-full border-collapse text-xs">
+        <tbody>
+          <tr>
+            <td className="border border-gray-400 bg-gray-100 px-3 py-2 font-medium w-24 align-top">부적합 내용</td>
+            <td className="border border-gray-400 px-3 py-2" colSpan={2}>
+              <textarea value={inadequateContent} onChange={(e) => !readOnly && setInadequateContent(e.target.value)} disabled={readOnly}
+                className="w-full border-0 bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-500 rounded text-xs resize-none" rows={2} />
+            </td>
+            <td className="border border-gray-400 bg-gray-100 px-3 py-2 font-medium text-center w-24">종합판정</td>
+          </tr>
+          <tr>
+            <td className="border border-gray-400 px-3 py-2" colSpan={3}></td>
+            <td className={`border border-gray-400 px-3 py-2 text-center font-bold text-sm ${
+              overallResult === '합격' ? 'text-blue-600' : overallResult === '불합격' ? 'text-red-600' : 'text-gray-400'
+            }`}>
+              {overallResult || '합격'}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}