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/WorkCard.tsx

@@ -3,13 +3,19 @@
 /**
  * 작업 카드 컴포넌트
  *
- * 각 작업 항목을 카드 형태로 표시
- * 버튼: 전량완료, 공정상세, 자재투입, 작업일지, 이슈보고
- * 공정상세 토글 시 ProcessDetailSection 표시
+ * 기획 화면에 맞춘 레이아웃:
+ * - 헤더 박스: 품목명 + 수량
+ * - 뱃지 영역: 순위/긴급/상태(좌측), 납기(우측)
+ * - 공정 + 작업번호
+ * - 업체/현장
+ * - 담당자
+ * - 지시 박스 (회색 배경)
+ * - 전량완료 버튼 (검은색, 전체너비)
+ * - 4버튼 2x2 그리드
  */
 
 import { useState } from 'react';
-import { CheckCircle, Layers, Package, FileText, AlertTriangle, ChevronDown } from 'lucide-react';
+import { ChevronDown } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -36,146 +42,145 @@ export function WorkCard({
 }: 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.)
+  // 납기일 포맷 (YYYY-MM-DD)
   const formatDueDate = (dateStr: string) => {
     const date = new Date(dateStr);
-    return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}.`;
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
   };
 
   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">
+    <Card className="bg-white shadow-sm border border-gray-200">
+      <CardContent className="p-0">
+        {/* 헤더 박스: 품목명 + 수량 */}
+        <div className="flex items-center justify-between p-4 border-b border-gray-100">
+          <h3 className="text-lg font-semibold text-gray-900">
+            {order.productName}
+          </h3>
+          <div className="text-right">
+            <span className="text-2xl font-bold text-gray-900">{order.quantity}</span>
+            <span className="text-sm text-gray-500 ml-1">EA</span>
+          </div>
+        </div>
+
+        {/* 본문 영역 */}
+        <div className="p-4 space-y-3">
+          {/* 뱃지 영역: 순위/긴급/상태(좌측), 납기(우측) */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              {/* 순위 뱃지 */}
+              {order.priority <= 3 && (
+                <Badge className="bg-emerald-500 hover:bg-emerald-500 text-white text-xs font-medium px-2.5 py-1 rounded">
+                  {order.priority}순위
+                </Badge>
+              )}
+              {/* 긴급 뱃지 */}
+              {order.isUrgent && (
+                <Badge className="bg-red-500 hover:bg-red-500 text-white text-xs font-medium px-2.5 py-1 rounded">
+                  긴급
+                </Badge>
+              )}
+              {/* 상태 뱃지 */}
+              <Badge
+                variant="secondary"
+                className="bg-gray-200 hover:bg-gray-200 text-gray-700 text-xs font-medium px-2.5 py-1 rounded"
+              >
+                {STATUS_LABELS[order.status]}
+              </Badge>
+            </div>
+            {/* 납기 */}
+            <div className="text-right">
+              <p className="text-xs text-gray-500">납기</p>
+              <p className="text-sm font-semibold text-gray-900">{formatDueDate(order.dueDate)}</p>
+            </div>
+          </div>
+
+          {/* 공정 뱃지 + 작업번호 */}
           <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]}`}
+              className="text-xs font-medium px-2.5 py-1 border-gray-300 text-gray-600 rounded"
             >
-              {STATUS_LABELS[order.status]}
+              {PROCESS_LABELS[order.process]}
             </Badge>
+            <span className="text-sm text-gray-700">{order.orderNo}</span>
           </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>
+
+          {/* 업체/현장 */}
+          <p className="text-sm text-gray-600">
+            {order.client} · {order.projectName}
+          </p>
+
+          {/* 담당자 */}
+          {order.assignees && order.assignees.length > 0 && (
+            <p className="text-sm text-gray-600">
+              담당: {order.assignees.join(', ')}
+            </p>
           )}
-        </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>
+          {/* 지시 박스 (회색 배경) */}
+          {order.instruction && (
+            <div className="p-3 bg-gray-100 rounded-lg">
+              <p className="text-sm text-gray-700">
+                <span className="font-medium">지시:</span> {order.instruction}
+              </p>
+            </div>
           )}
-        </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"
+            className="w-full bg-gray-900 hover:bg-gray-800 text-white font-medium py-3 rounded-lg"
           >
-            <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>
+          {/* 4버튼 2x2 그리드 */}
+          <div className="grid grid-cols-2 gap-2">
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsExpanded(!isExpanded);
+                onProcessDetail(order);
+              }}
+              className="w-full border-gray-300 text-gray-700 font-medium py-3 rounded-lg hover:bg-gray-50"
+            >
+              공정상세
+              <ChevronDown className={`ml-1 h-4 w-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => onMaterialInput(order)}
+              className="w-full border-gray-300 text-gray-700 font-medium py-3 rounded-lg hover:bg-gray-50"
+            >
+              자재투입
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => onWorkLog(order)}
+              className="w-full border-gray-300 text-gray-700 font-medium py-3 rounded-lg hover:bg-gray-50"
+            >
+              작업일지
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => onIssueReport(order)}
+              className="w-full border-gray-300 text-gray-700 font-medium py-3 rounded-lg hover:bg-gray-50"
+            >
+              이슈보고
+            </Button>
+          </div>
 
-        {/* 공정상세 섹션 (토글) */}
-        <ProcessDetailSection
-          isExpanded={isExpanded}
-          materialRequired={true}
-          onMaterialInput={() => onMaterialInput(order)}
-        />
+          {/* 공정상세 섹션 (토글) */}
+          <ProcessDetailSection
+            isExpanded={isExpanded}
+            materialRequired={true}
+            onMaterialInput={() => onMaterialInput(order)}
+          />
+        </div>
       </CardContent>
     </Card>
   );
-}
+}