refactor: 모달 Content 컴포넌트 분리 및 파일 입력 UI 공통화

- 모달 컴포넌트에서 Content 분리하여 재사용성 향상
  - EstimateDocumentContent, DirectConstructionContent 등
  - WorkLogContent, QuotePreviewContent, ReceivingReceiptContent
- 파일 입력 공통 UI 컴포넌트 추가
  - file-dropzone, file-input, file-list, image-upload
- 폼 컴포넌트 코드 정리 및 중복 제거 (-4,056줄)

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

src/components/production/WorkerScreen/WorkLogModal.tsx

@@ -3,24 +3,17 @@
 /**
  * 작업일지 모달
  *
- * - 헤더: sam-design 작업일지 스타일
- * - 내부 문서: 스크린샷 기준 작업일지 양식
- * - API 연동 완료 (2025-01-14)
+ * document-system 통합 버전 (2026-01-22)
+ * - DocumentViewer 사용
+ * - WorkLogContent로 문서 본문 분리
  */
 
 import { useState, useEffect } from 'react';
-import { Printer, X, Loader2 } 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 { printArea } from '@/lib/print-utils';
+import { Loader2 } from 'lucide-react';
+import { DocumentViewer } from '@/components/document-system';
 import { getWorkOrderById } from '../WorkOrders/actions';
-import type { WorkOrder, WorkOrderItem } from '../WorkOrders/types';
-import { ITEM_STATUS_LABELS } from '../WorkOrders/types';
+import type { WorkOrder } from '../WorkOrders/types';
+import { WorkLogContent } from './WorkLogContent';
 
 interface WorkLogModalProps {
   open: boolean;
@@ -28,32 +21,6 @@ interface WorkLogModalProps {
   workOrderId: string | null;
 }
 
-// 작업 통계 타입
-interface WorkStats {
-  orderQty: number;
-  completedQty: number;
-  inProgressQty: number;
-  waitingQty: number;
-  progress: number;
-}
-
-// 품목 데이터에서 작업 통계 계산
-function calculateWorkStats(items: WorkOrderItem[]): WorkStats {
-  const orderQty = items.length;
-  const completedQty = items.filter(i => i.status === 'completed').length;
-  const inProgressQty = items.filter(i => i.status === 'in_progress').length;
-  const waitingQty = items.filter(i => i.status === 'waiting').length;
-  const progress = orderQty > 0 ? Math.round((completedQty / orderQty) * 100) : 0;
-
-  return {
-    orderQty,
-    completedQty,
-    inProgressQty,
-    waitingQty,
-    progress,
-  };
-}
-
 export function WorkLogModal({ open, onOpenChange, workOrderId }: WorkLogModalProps) {
   const [order, setOrder] = useState<WorkOrder | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -86,283 +53,30 @@ export function WorkLogModal({ open, onOpenChange, workOrderId }: WorkLogModalPr
     }
   }, [open, workOrderId]);
 
-  const handlePrint = () => {
-    printArea({ title: '작업일지 인쇄' });
-  };
-
   if (!workOrderId) return null;
 
-  // 로딩 상태
-  if (isLoading) {
-    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>작업일지 로딩 중</DialogTitle>
-          </VisuallyHidden>
-          <div className="flex items-center justify-center h-64">
-            <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  // 에러 상태
-  if (error || !order) {
-    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>작업일지 오류</DialogTitle>
-          </VisuallyHidden>
-          <div className="flex flex-col items-center justify-center h-64 gap-4">
-            <p className="text-muted-foreground">{error || '데이터를 불러올 수 없습니다.'}</p>
-            <Button variant="outline" onClick={() => onOpenChange(false)}>
-              닫기
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  const today = new Date().toLocaleDateString('ko-KR', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-  }).replace(/\. /g, '-').replace('.', '');
-
-  const documentNo = `WL-${order.processCode.toUpperCase().slice(0, 3)}`;
-
-  // 품목 데이터
-  const items = order.items || [];
-
-  // 작업 통계 계산
-  const workStats = calculateWorkStats(items);
-
-  // 주 담당자
-  const primaryAssignee = order.assignees?.find(a => a.isPrimary)?.name || order.assignee || '-';
+  // 로딩/에러 상태는 DocumentViewer 내부에서 처리
+  const subtitle = order ? `${order.processName} 생산부서` : undefined;
 
   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.workOrderNo}</DialogTitle>
-        </VisuallyHidden>
-        {/* 모달 헤더 - sam-design 스타일 (인쇄 시 숨김) */}
-        <div className="print-hidden 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">
-              {order.processName} 생산부서
-            </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>
+    <DocumentViewer
+      title="작업일지"
+      subtitle={subtitle}
+      preset="inspection"
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      {isLoading ? (
+        <div className="flex items-center justify-center h-64 bg-white">
+          <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
         </div>
-
-        {/* 문서 본문 (인쇄 시 이 영역만 출력) */}
-        <div className="print-area 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">{order.processName} 생산부서</p>
-            </div>
-
-            {/* 우측: 결재라인 */}
-            <div className="shrink-0 text-xs">
-              <table className="border-collapse">
-                <tbody>
-                  {/* 첫 번째 행: 결재 + 작성/검토/승인 */}
-                  <tr>
-                    <td rowSpan={3} className="w-8 text-center font-medium bg-gray-100 border-r border-b border-gray-300 align-middle">
-                      <div className="flex flex-col items-center">
-                        <span>결</span>
-                        <span>재</span>
-                      </div>
-                    </td>
-                    <td className="w-16 p-2 text-center font-medium bg-gray-100 border-r border-b border-gray-300">작성</td>
-                    <td className="w-16 p-2 text-center font-medium bg-gray-100 border-r border-b border-gray-300">검토</td>
-                    <td className="w-16 p-2 text-center font-medium bg-gray-100 border-b border-gray-300">승인</td>
-                  </tr>
-                  {/* 두 번째 행: 이름 + 날짜 */}
-                  <tr>
-                    <td className="w-16 p-2 text-center border-r border-b border-gray-300">
-                      <div>{primaryAssignee}</div>
-                      <div className="text-[10px] text-gray-500">
-                        {new Date().toLocaleDateString('ko-KR', { month: '2-digit', day: '2-digit' }).replace('. ', '/').replace('.', '')}
-                      </div>
-                    </td>
-                    <td className="w-16 p-2 text-center border-r border-b border-gray-300"></td>
-                    <td className="w-16 p-2 text-center border-b border-gray-300"></td>
-                  </tr>
-                  {/* 세 번째 행: 부서 */}
-                  <tr>
-                    <td className="w-16 p-2 text-center bg-gray-50 border-r border-gray-300">판매/전진</td>
-                    <td className="w-16 p-2 text-center bg-gray-50 border-r border-gray-300">생산</td>
-                    <td className="w-16 p-2 text-center bg-gray-50">품질</td>
-                  </tr>
-                </tbody>
-              </table>
-            </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">{order.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">
-                  {order.dueDate !== '-' ? 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">{order.workOrderNo}</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.length > 0 ? (
-              items.map((item, index) => (
-                <div
-                  key={item.id}
-                  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.productName}</div>
-                  <div className="col-span-2 p-2 text-sm text-center border-r border-gray-300">{item.floorCode}</div>
-                  <div className="col-span-2 p-2 text-sm text-center border-r border-gray-300">{item.specification}</div>
-                  <div className="col-span-1 p-2 text-sm text-center border-r border-gray-300">{item.quantity}</div>
-                  <div className="col-span-2 p-2 text-sm text-center">{ITEM_STATUS_LABELS[item.status]}</div>
-                </div>
-              ))
-            ) : (
-              <div className="p-4 text-center text-muted-foreground text-sm">
-                등록된 품목이 없습니다.
-              </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">
-              {order.processName} 작업내역
-            </div>
-
-            {/* 수량 및 진행률 */}
-            <div className="grid grid-cols-6 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.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 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.waitingQty} 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.inProgressQty} 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.completedQty} EA</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.note || '-'}
-            </div>
-          </div>
+      ) : error || !order ? (
+        <div className="flex flex-col items-center justify-center h-64 gap-4 bg-white">
+          <p className="text-muted-foreground">{error || '데이터를 불러올 수 없습니다.'}</p>
         </div>
-      </DialogContent>
-    </Dialog>
+      ) : (
+        <WorkLogContent data={order} />
+      )}
+    </DocumentViewer>
   );
-}
+}