fix: [work-orders] 작업지시 수정 화면 리팩토링

- 불필요한 코드 제거, 구조 정리

src/components/production/WorkOrders/WorkOrderEdit.tsx

@@ -7,10 +7,9 @@
  * 공정 진행 토글 + 품목 테이블 추가 (2026-02-05)
  */
 
-import { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { invalidateDashboard } from '@/lib/dashboard-invalidation';
 import { useRouter } from 'next/navigation';
-import { SquarePen, Trash2 } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { DatePicker } from '@/components/ui/date-picker';
 import { Label } from '@/components/ui/label';
@@ -34,7 +33,6 @@ import {
 import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
 import { AssigneeSelectModal } from './AssigneeSelectModal';
 import { toast } from 'sonner';
-import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import { getWorkOrderById, updateWorkOrder, getProcessOptions, type ProcessOption } from './actions';
 import type { WorkOrder, WorkOrderItem, ProcessStep } from './types';
@@ -46,11 +44,6 @@ interface ProcessStepStatus {
   [key: string]: boolean;
 }
 
-// 수정 가능한 품목 타입
-interface EditableItem extends WorkOrderItem {
-  isEditing?: boolean;
-  editQuantity?: number;
-}
 
 interface FormData {
   // 기본 정보 (읽기 전용)
@@ -61,6 +54,7 @@ interface FormData {
 
   // 수정 가능 정보
   processId: number | null;
+  department: string;
   scheduledDate: string;
   priority: number;
   assignees: string[];
@@ -82,13 +76,13 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
     orderNo: '',
     itemCount: 0,
     processId: null,
+    department: '',
     scheduledDate: '',
     priority: 5,
     assignees: [],
     note: '',
   });
   const [isAssigneeModalOpen, setIsAssigneeModalOpen] = useState(false);
-  const [deleteTargetItemId, setDeleteTargetItemId] = useState<string | null>(null);
   const [assigneeNames, setAssigneeNames] = useState<string[]>([]);
   const [validationErrors, setValidationErrors] = useState<Record<string, string>>({});
   const [isLoading, setIsLoading] = useState(true);
@@ -101,7 +95,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
   const [stepStatus, setStepStatus] = useState<ProcessStepStatus>({});
 
   // 품목 목록 (수정 가능)
-  const [items, setItems] = useState<EditableItem[]>([]);
+  const [items, setItems] = useState<WorkOrderItem[]>([]);
 
   // 데이터 로드
   const loadData = useCallback(async () => {
@@ -121,6 +115,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
           orderNo: order.lotNo,
           itemCount: order.items?.length || 0,
           processId: order.processId,
+          department: order.department || '',
           scheduledDate: order.scheduledDate || '',
           priority: order.priority || 5,
           assignees: order.assignees?.map(a => a.id) || [],
@@ -271,60 +266,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
     toast.success(`공정 단계 상태가 변경되었습니다.`);
   }, []);
 
-  // 품목 수량 수정 시작
-  const handleItemEditStart = useCallback((itemId: string) => {
-    setItems(prev =>
-      prev.map(item =>
-        item.id === itemId
-          ? { ...item, isEditing: true, editQuantity: item.quantity }
-          : item
-      )
-    );
-  }, []);
-
-  // 품목 수량 변경
-  const handleItemQuantityChange = useCallback((itemId: string, quantity: number) => {
-    setItems(prev =>
-      prev.map(item =>
-        item.id === itemId ? { ...item, editQuantity: quantity } : item
-      )
-    );
-  }, []);
-
-  // 품목 수량 수정 저장
-  const handleItemEditSave = useCallback((itemId: string) => {
-    setItems(prev =>
-      prev.map(item =>
-        item.id === itemId
-          ? { ...item, quantity: item.editQuantity || item.quantity, isEditing: false }
-          : item
-      )
-    );
-    // TODO: API 호출로 서버에 저장
-    toast.success('수량이 수정되었습니다.');
-  }, []);
-
-  // 품목 수량 수정 취소
-  const handleItemEditCancel = useCallback((itemId: string) => {
-    setItems(prev =>
-      prev.map(item =>
-        item.id === itemId ? { ...item, isEditing: false } : item
-      )
-    );
-  }, []);
-
-  // 품목 삭제
-  const handleItemDelete = useCallback((itemId: string) => {
-    setDeleteTargetItemId(itemId);
-  }, []);
-
-  const handleItemDeleteConfirm = useCallback(() => {
-    if (!deleteTargetItemId) return;
-    setItems(prev => prev.filter(item => item.id !== deleteTargetItemId));
-    // TODO: API 호출로 서버에서 삭제
-    toast.success('품목이 삭제되었습니다.');
-    setDeleteTargetItemId(null);
-  }, [deleteTargetItemId]);
+  // (품목 테이블은 읽기전용 — 수정/삭제 기능 제거됨)
 
   // 동적 config (작업지시 번호 포함)
   const dynamicConfig = {
@@ -350,29 +292,12 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
               <Input value={workOrder?.salesOrderDate || '-'} disabled className="bg-muted" />
             </div>
             <div className="space-y-1">
-              <Label className="text-sm text-muted-foreground">공정 *</Label>
-              <Select
-                value={formData.processId?.toString() || ''}
-                onValueChange={(value) => {
-                  setFormData({ ...formData, processId: parseInt(value) });
-                  if (validationErrors.processId) {
-                    setValidationErrors(prev => { const { processId: _, ...rest } = prev; return rest; });
-                  }
-                }}
-                disabled={isLoadingProcesses}
-              >
-                <SelectTrigger className={`bg-white ${validationErrors.processId ? 'border-red-500' : ''}`}>
-                  <SelectValue placeholder={isLoadingProcesses ? '로딩 중...' : '공정 선택'} />
-                </SelectTrigger>
-                <SelectContent>
-                  {processOptions.map((process) => (
-                    <SelectItem key={process.id} value={process.id.toString()}>
-                      {process.processName}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              {validationErrors.processId && <p className="text-sm text-red-500">{validationErrors.processId}</p>}
+              <Label className="text-sm text-muted-foreground">공정</Label>
+              <Input
+                value={processOptions.find(p => p.id === formData.processId)?.processName || workOrder?.processName || '-'}
+                disabled
+                className="bg-muted"
+              />
             </div>
             <div className="space-y-1">
               <Label className="text-sm text-muted-foreground">구분</Label>
@@ -390,11 +315,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
             </div>
             <div className="space-y-1">
               <Label className="text-sm text-muted-foreground">현장명</Label>
-              <Input
-                value={formData.projectName}
-                onChange={(e) => setFormData({ ...formData, projectName: e.target.value })}
-                className="bg-white"
-              />
+              <Input value={formData.projectName || '-'} disabled className="bg-muted" />
             </div>
             <div className="space-y-1">
               <Label className="text-sm text-muted-foreground">수주 담당자</Label>
@@ -446,7 +367,12 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
             {/* 4행: 부서(읽기) | 생산 담당자(선택) | 상태(읽기) | 비고(입력) */}
             <div className="space-y-1">
               <Label className="text-sm text-muted-foreground">부서</Label>
-              <Input value={workOrder?.department || '-'} disabled className="bg-muted" />
+              <Input
+                value={formData.department}
+                onChange={(e) => setFormData({ ...formData, department: e.target.value })}
+                className="bg-white"
+                placeholder="부서명 입력"
+              />
             </div>
             <div className="space-y-1">
               <Label className="text-sm text-muted-foreground">생산 담당자</Label>
@@ -523,86 +449,99 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
             </div>
           </div>
 
-          {/* 품목 테이블 */}
+          {/* 작업 품목 - 개소별 그룹 */}
           {items.length > 0 ? (
-            <Table>
-              <TableHeader>
-                <TableRow className="bg-muted/50">
-                  <TableHead>로트번호</TableHead>
-                  <TableHead>품목명</TableHead>
-                  <TableHead className="w-32 text-right">수량</TableHead>
-                  <TableHead className="w-20">단위</TableHead>
-                  <TableHead className="w-24 text-center">관리</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {items.map((item) => (
-                  <TableRow key={item.id}>
-                    <TableCell>{workOrder?.lotNo || '-'}</TableCell>
-                    <TableCell className="font-medium">{item.productName}</TableCell>
-                    <TableCell className="text-right">
-                      {item.isEditing ? (
-                        <div className="flex items-center gap-1 justify-end">
-                          <Input
-                            type="number"
-                            value={item.editQuantity}
-                            onChange={(e) =>
-                              handleItemQuantityChange(item.id, parseInt(e.target.value) || 0)
-                            }
-                            className="w-20 h-8 text-right"
-                            min={0}
-                          />
-                          <Button
-                            type="button"
-                            size="sm"
-                            variant="ghost"
-                            className="h-8 px-2 text-green-600 hover:text-green-700"
-                            onClick={() => handleItemEditSave(item.id)}
-                          >
-                            ✓
-                          </Button>
-                          <Button
-                            type="button"
-                            size="sm"
-                            variant="ghost"
-                            className="h-8 px-2 text-gray-500 hover:text-gray-600"
-                            onClick={() => handleItemEditCancel(item.id)}
-                          >
-                            ✕
-                          </Button>
-                        </div>
-                      ) : (
-                        item.quantity
-                      )}
-                    </TableCell>
-                    <TableCell>{item.unit}</TableCell>
-                    <TableCell>
-                      <div className="flex items-center justify-center gap-1">
-                        <Button
-                          type="button"
-                          size="sm"
-                          variant="ghost"
-                          className="h-8 w-8 p-0"
-                          onClick={() => handleItemEditStart(item.id)}
-                          disabled={item.isEditing}
-                        >
-                          <SquarePen className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          type="button"
-                          size="sm"
-                          variant="ghost"
-                          className="h-8 w-8 p-0 text-red-500 hover:text-red-600"
-                          onClick={() => handleItemDelete(item.id)}
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+            <div className="space-y-6">
+              {/* 개소별 품목 그룹 */}
+              <div>
+                <h4 className="text-sm font-semibold text-muted-foreground mb-2">개소별 품목</h4>
+                <Table>
+                  <TableHeader>
+                    <TableRow className="bg-muted/50">
+                      <TableHead className="w-36">개소</TableHead>
+                      <TableHead>품목명</TableHead>
+                      <TableHead className="w-24 text-right">수량</TableHead>
+                      <TableHead className="w-20">단위</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {(() => {
+                      const nodeGroups = new Map<string, { label: string; items: WorkOrderItem[] }>();
+                      for (const item of items) {
+                        const floorLabel = item.floorCode !== '-' ? item.floorCode : '';
+                        const key = item.orderNodeId != null ? String(item.orderNodeId) : (floorLabel || 'none');
+                        const label = floorLabel || item.orderNodeName || `개소 ${nodeGroups.size + 1}`;
+                        if (!nodeGroups.has(key)) {
+                          nodeGroups.set(key, { label, items: [] });
+                        }
+                        nodeGroups.get(key)!.items.push(item);
+                      }
+                      const rows: React.ReactNode[] = [];
+                      for (const [key, group] of nodeGroups) {
+                        group.items.forEach((item, idx) => {
+                          rows.push(
+                            <TableRow key={`node-${key}-${item.id}`} className={idx === 0 ? 'border-t-2' : ''}>
+                              {idx === 0 && (
+                                <TableCell rowSpan={group.items.length} className="align-top font-medium bg-muted/30">
+                                  {group.label}
+                                </TableCell>
+                              )}
+                              <TableCell>{item.productName}</TableCell>
+                              <TableCell className="text-right">{item.quantity}</TableCell>
+                              <TableCell>{item.unit}</TableCell>
+                            </TableRow>
+                          );
+                        });
+                      }
+                      return rows;
+                    })()}
+                  </TableBody>
+                </Table>
+              </div>
+
+              {/* 품목별 합산 그룹 */}
+              <div>
+                <h4 className="text-sm font-semibold text-muted-foreground mb-2">품목별 합산</h4>
+                <Table>
+                  <TableHeader>
+                    <TableRow className="bg-muted/50">
+                      <TableHead className="w-12 text-center">No</TableHead>
+                      <TableHead>품목명</TableHead>
+                      <TableHead className="w-24 text-right">합산수량</TableHead>
+                      <TableHead className="w-20">단위</TableHead>
+                      <TableHead className="w-20 text-right">개소수</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {(() => {
+                      const itemMap = new Map<string, { productName: string; totalQty: number; unit: string; nodeCount: number }>();
+                      for (const item of items) {
+                        const key = `${item.productName}||${item.unit}`;
+                        if (!itemMap.has(key)) {
+                          itemMap.set(key, { productName: item.productName, totalQty: 0, unit: item.unit, nodeCount: 0 });
+                        }
+                        const entry = itemMap.get(key)!;
+                        entry.totalQty += Number(item.quantity);
+                        entry.nodeCount += 1;
+                      }
+                      let no = 0;
+                      return Array.from(itemMap.values()).map((entry) => {
+                        no++;
+                        return (
+                          <TableRow key={`sum-${entry.productName}-${entry.unit}`}>
+                            <TableCell className="text-center">{no}</TableCell>
+                            <TableCell className="font-medium">{entry.productName}</TableCell>
+                            <TableCell className="text-right">{entry.totalQty}</TableCell>
+                            <TableCell>{entry.unit}</TableCell>
+                            <TableCell className="text-right">{entry.nodeCount}</TableCell>
+                          </TableRow>
+                        );
+                      });
+                    })()}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
           ) : (
             <p className="text-muted-foreground text-center py-8">
               등록된 품목이 없습니다.
@@ -610,7 +549,7 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
           )}
         </section>
       </div>
-  ), [formData, validationErrors, processOptions, isLoadingProcesses, assigneeNames, workOrder, processSteps, stepStatus, items, handleStepToggle, handleItemEditStart, handleItemQuantityChange, handleItemEditSave, handleItemEditCancel, handleItemDelete]);
+  ), [formData, validationErrors, processOptions, isLoadingProcesses, assigneeNames, workOrder, processSteps, stepStatus, items, handleStepToggle]);
 
   return (
     <>
@@ -636,14 +575,6 @@ export function WorkOrderEdit({ orderId }: WorkOrderEditProps) {
         }}
       />
 
-      {/* 품목 삭제 확인 다이얼로그 */}
-      <DeleteConfirmDialog
-        open={deleteTargetItemId !== null}
-        onOpenChange={(open) => !open && setDeleteTargetItemId(null)}
-        onConfirm={handleItemDeleteConfirm}
-        title="품목 삭제"
-        description="이 품목을 삭제하시겠습니까?"
-      />
     </>
   );
 }