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/process-management/ProcessDetail.tsx

@@ -1,17 +1,25 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+/**
+ * 공정 상세 페이지 (리디자인)
+ *
+ * 기획서 스크린샷 1 기준:
+ * - 기본 정보: 공정번호, 공정형, 담당부서, 담당자, 생산일자, 상태
+ * - 품목 설정 정보: 품목 선택 버튼 + 개수 표시
+ * - 단계 테이블: 드래그&드롭 순서변경 + 단계 등록 버튼
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
-import { List, Edit, Wrench, Package, ArrowLeft } from 'lucide-react';
+import { ArrowLeft, Edit, GripVertical, Plus, Package } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { PageLayout } from '@/components/organisms/PageLayout';
 import { PageHeader } from '@/components/organisms/PageHeader';
-import { ProcessWorkLogPreviewModal } from './ProcessWorkLogPreviewModal';
 import { useMenuStore } from '@/store/menuStore';
-import type { Process } from '@/types/process';
-import { MATCHING_TYPE_OPTIONS } from '@/types/process';
+import { getProcessSteps } from './actions';
+import type { Process, ProcessStep } from '@/types/process';
 
 interface ProcessDetailProps {
   process: Process;
@@ -19,26 +27,36 @@ interface ProcessDetailProps {
 
 export function ProcessDetail({ process }: ProcessDetailProps) {
   const router = useRouter();
-  const [workLogModalOpen, setWorkLogModalOpen] = useState(false);
   const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);
 
-  // 패턴 규칙과 개별 품목 분리
-  const { patternRules, individualItems } = useMemo(() => {
-    const patterns = process.classificationRules.filter(
-      (rule) => rule.registrationType === 'pattern'
-    );
-    const individuals = process.classificationRules.filter(
-      (rule) => rule.registrationType === 'individual'
-    );
-    return { patternRules: patterns, individualItems: individuals };
-  }, [process.classificationRules]);
+  // 단계 목록 상태
+  const [steps, setSteps] = useState<ProcessStep[]>([]);
+  const [isStepsLoading, setIsStepsLoading] = useState(true);
 
-  // 매칭 타입 라벨
-  const getMatchingTypeLabel = (type: string) => {
-    const option = MATCHING_TYPE_OPTIONS.find((opt) => opt.value === type);
-    return option?.label || type;
-  };
+  // 드래그 상태
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+  const dragNodeRef = useRef<HTMLTableRowElement | null>(null);
 
+  // 품목 개수 계산 (기존 classificationRules에서 individual 품목)
+  const itemCount = process.classificationRules
+    .filter((r) => r.registrationType === 'individual')
+    .reduce((sum, r) => sum + (r.items?.length || 0), 0);
+
+  // 단계 목록 로드
+  useEffect(() => {
+    const loadSteps = async () => {
+      setIsStepsLoading(true);
+      const result = await getProcessSteps(process.id);
+      if (result.success && result.data) {
+        setSteps(result.data);
+      }
+      setIsStepsLoading(false);
+    };
+    loadSteps();
+  }, [process.id]);
+
+  // 네비게이션
   const handleEdit = () => {
     router.push(`/ko/master-data/process-management/${process.id}?mode=edit`);
   };
@@ -47,17 +65,61 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
     router.push('/ko/master-data/process-management');
   };
 
-  const handleViewWorkLog = () => {
-    setWorkLogModalOpen(true);
+  const handleAddStep = () => {
+    router.push(`/ko/master-data/process-management/${process.id}/steps/new`);
   };
 
+  const handleStepClick = (stepId: string) => {
+    router.push(`/ko/master-data/process-management/${process.id}/steps/${stepId}`);
+  };
+
+  // ===== 드래그&드롭 (HTML5 네이티브) =====
+  const handleDragStart = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
+    setDragIndex(index);
+    dragNodeRef.current = e.currentTarget;
+    e.dataTransfer.effectAllowed = 'move';
+    // 약간의 딜레이로 드래그 시작 시 스타일 적용
+    requestAnimationFrame(() => {
+      if (dragNodeRef.current) {
+        dragNodeRef.current.style.opacity = '0.4';
+      }
+    });
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    setDragOverIndex(index);
+  }, []);
+
+  const handleDragEnd = useCallback(() => {
+    if (dragNodeRef.current) {
+      dragNodeRef.current.style.opacity = '1';
+    }
+    setDragIndex(null);
+    setDragOverIndex(null);
+    dragNodeRef.current = null;
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent<HTMLTableRowElement>, dropIndex: number) => {
+    e.preventDefault();
+    if (dragIndex === null || dragIndex === dropIndex) return;
+
+    setSteps((prev) => {
+      const updated = [...prev];
+      const [moved] = updated.splice(dragIndex, 1);
+      updated.splice(dropIndex, 0, moved);
+      // 순서 재할당
+      return updated.map((step, i) => ({ ...step, order: i + 1 }));
+    });
+
+    handleDragEnd();
+  }, [dragIndex, handleDragEnd]);
+
   return (
     <PageLayout>
       {/* 헤더 */}
-      <PageHeader
-        title="공정 상세"
-        icon={Wrench}
-      />
+      <PageHeader title="공정 상세" />
 
       <div className="space-y-6 pb-24">
         {/* 기본 정보 */}
@@ -66,202 +128,199 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
             <CardTitle className="text-base">기본 정보</CardTitle>
           </CardHeader>
           <CardContent className="pt-6">
-            {/* 반응형 6열 그리드: PC 6열, 태블릿 4열, 작은태블릿 2열, 모바일 1열 */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
-              <div className="space-y-1 lg:col-span-2">
-                <div className="text-sm text-muted-foreground">공정코드</div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
+              <div className="space-y-1">
+                <div className="text-sm text-muted-foreground">공정번호</div>
                 <div className="font-medium">{process.processCode}</div>
               </div>
-              <div className="space-y-1 lg:col-span-2">
-                <div className="text-sm text-muted-foreground">공정명</div>
-                <div className="font-medium">{process.processName}</div>
-              </div>
               <div className="space-y-1">
-                <div className="text-sm text-muted-foreground">공정구분</div>
+                <div className="text-sm text-muted-foreground">공정형</div>
                 <Badge variant="secondary">{process.processType}</Badge>
               </div>
               <div className="space-y-1">
                 <div className="text-sm text-muted-foreground">담당부서</div>
-                <div className="font-medium">{process.department}</div>
+                <div className="font-medium">{process.department || '-'}</div>
               </div>
-              <div className="space-y-1 lg:col-span-2">
-                <div className="text-sm text-muted-foreground">작업일지 양식</div>
-                <div className="flex items-center gap-2">
-                  <span className="font-medium">
-                    {process.workLogTemplate || '-'}
-                  </span>
-                  {process.workLogTemplate && (
-                    <Button variant="outline" size="sm" onClick={handleViewWorkLog}>
-                      양식 보기
-                    </Button>
-                  )}
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* 등록 정보 */}
-        <Card>
-          <CardHeader className="bg-muted/50">
-            <CardTitle className="text-base">등록 정보</CardTitle>
-          </CardHeader>
-          <CardContent className="pt-6">
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
-              <div className="space-y-1 lg:col-span-3">
-                <div className="text-sm text-muted-foreground">등록일</div>
-                <div className="font-medium">{process.createdAt}</div>
-              </div>
-              <div className="space-y-1 lg:col-span-3">
-                <div className="text-sm text-muted-foreground">최종수정일</div>
-                <div className="font-medium">{process.updatedAt}</div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* 자동 분류 규칙 (패턴 기반) */}
-        <Card>
-          <CardHeader className="bg-muted/50">
-            <CardTitle className="text-base flex items-center gap-2">
-              <Wrench className="h-4 w-4" />
-              자동 분류 규칙
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="pt-6">
-            {patternRules.length === 0 ? (
-              <div className="text-center py-8 text-muted-foreground">
-                <Wrench className="h-10 w-10 mx-auto mb-3 opacity-30" />
-                <p className="text-sm">등록된 자동 분류 규칙이 없습니다</p>
-              </div>
-            ) : (
-              <div className="space-y-3">
-                {patternRules.map((rule) => (
-                  <div
-                    key={rule.id}
-                    className="flex items-center justify-between p-4 border rounded-lg"
-                  >
-                    <div className="flex items-center gap-4">
-                      <Badge variant={rule.isActive ? 'default' : 'secondary'}>
-                        {rule.isActive ? '활성' : '비활성'}
-                      </Badge>
-                      <div>
-                        <div className="font-medium">
-                          {rule.ruleType} · {getMatchingTypeLabel(rule.matchingType)} · "{rule.conditionValue}"
-                        </div>
-                        {rule.description && (
-                          <div className="text-sm text-muted-foreground">
-                            {rule.description}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                    <Badge variant="outline">우선순위: {rule.priority}</Badge>
-                  </div>
-                ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* 개별 품목 */}
-        <Card>
-          <CardHeader className="bg-muted/50">
-            <CardTitle className="text-base flex items-center gap-2">
-              <Package className="h-4 w-4" />
-              개별 품목
-              {individualItems.length > 0 && individualItems[0].items && (
-                <Badge variant="secondary" className="ml-2">
-                  {individualItems[0].items.length}개
-                </Badge>
-              )}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="pt-6">
-            {individualItems.length === 0 || !individualItems[0].items?.length ? (
-              <div className="text-center py-8 text-muted-foreground">
-                <Package className="h-10 w-10 mx-auto mb-3 opacity-30" />
-                <p className="text-sm">등록된 개별 품목이 없습니다</p>
-              </div>
-            ) : (
-              <div className="max-h-80 overflow-y-auto">
-                <div className="space-y-2">
-                  {individualItems[0].items.map((item) => (
-                    <div
-                      key={item.id}
-                      className="flex items-center justify-between p-3 border rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors"
-                    >
-                      <div className="flex items-center gap-3">
-                        <Badge variant="outline" className="font-mono text-xs">
-                          {item.code}
-                        </Badge>
-                        <span className="font-medium">{item.name}</span>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* 세부 작업단계 */}
-        <Card>
-          <CardHeader className="bg-muted/50">
-            <CardTitle className="text-base">세부 작업단계</CardTitle>
-          </CardHeader>
-          <CardContent className="pt-6">
-            {process.workSteps.length > 0 ? (
-              <div className="flex items-center gap-2 flex-wrap">
-                {process.workSteps.map((step, index) => (
-                  <div key={index} className="flex items-center gap-2">
-                    <Badge
-                      variant="outline"
-                      className="px-3 py-1.5 bg-muted/50"
-                    >
-                      <span className="bg-primary text-primary-foreground rounded-full w-5 h-5 flex items-center justify-center text-xs mr-2">
-                        {index + 1}
-                      </span>
-                      {step}
-                    </Badge>
-                    {index < process.workSteps.length - 1 && (
-                      <span className="text-muted-foreground">{'>'}</span>
-                    )}
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="text-muted-foreground">-</div>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* 작업 정보 */}
-        <Card>
-          <CardHeader className="bg-muted/50">
-            <CardTitle className="text-base">작업 정보</CardTitle>
-          </CardHeader>
-          <CardContent className="pt-6">
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
               <div className="space-y-1">
-                <div className="text-sm text-muted-foreground">필요인원</div>
-                <div className="font-medium">{process.requiredWorkers}명</div>
+                <div className="text-sm text-muted-foreground">담당자</div>
+                <div className="font-medium">{process.manager || '-'}</div>
               </div>
-              <div className="space-y-1 lg:col-span-2">
-                <div className="text-sm text-muted-foreground">설비정보</div>
-                <div className="font-medium">{process.equipmentInfo || '-'}</div>
+              <div className="space-y-1">
+                <div className="text-sm text-muted-foreground">생산일자</div>
+                <div className="font-medium">
+                  {process.useProductionDate ? '사용' : '미사용'}
+                </div>
               </div>
-              <div className="space-y-1 lg:col-span-3">
-                <div className="text-sm text-muted-foreground">설명</div>
-                <div className="font-medium">{process.description || '-'}</div>
+              <div className="space-y-1">
+                <div className="text-sm text-muted-foreground">상태</div>
+                <Badge variant={process.status === '사용중' ? 'default' : 'secondary'}>
+                  {process.status}
+                </Badge>
               </div>
             </div>
           </CardContent>
         </Card>
+
+        {/* 품목 설정 정보 */}
+        <Card>
+          <CardHeader className="bg-muted/50">
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-base flex items-center gap-2">
+                  <Package className="h-4 w-4" />
+                  품목 설정 정보
+                </CardTitle>
+                <p className="text-sm text-muted-foreground mt-1">
+                  품목을 선택하면 이 공정으로 분류됩니다
+                </p>
+              </div>
+              <div className="flex items-center gap-3">
+                <Badge variant="outline" className="text-sm">
+                  {itemCount}개
+                </Badge>
+                <Button variant="outline" size="sm" onClick={handleEdit}>
+                  품목 선택
+                </Button>
+              </div>
+            </div>
+          </CardHeader>
+        </Card>
+
+        {/* 단계 테이블 */}
+        <Card>
+          <CardHeader className="bg-muted/50">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-base">
+                단계
+                {!isStepsLoading && (
+                  <span className="text-sm font-normal text-muted-foreground ml-2">
+                    총 {steps.length}건
+                  </span>
+                )}
+              </CardTitle>
+              <Button size="sm" onClick={handleAddStep}>
+                <Plus className="h-4 w-4 mr-1" />
+                단계 등록
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="p-0">
+            {isStepsLoading ? (
+              <div className="p-8 text-center text-muted-foreground">
+                로딩 중...
+              </div>
+            ) : steps.length === 0 ? (
+              <div className="p-8 text-center text-muted-foreground">
+                등록된 단계가 없습니다. [단계 등록] 버튼으로 추가해주세요.
+              </div>
+            ) : (
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b bg-muted/30">
+                      <th className="w-10 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
+                        {/* 드래그 핸들 헤더 */}
+                      </th>
+                      <th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
+                        No.
+                      </th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
+                        단계코드
+                      </th>
+                      <th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
+                        단계명
+                      </th>
+                      <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
+                        필수여부
+                      </th>
+                      <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
+                        승인여부
+                      </th>
+                      <th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
+                        검사여부
+                      </th>
+                      <th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
+                        사용
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {steps.map((step, index) => (
+                      <tr
+                        key={step.id}
+                        draggable
+                        onDragStart={(e) => handleDragStart(e, index)}
+                        onDragOver={(e) => handleDragOver(e, index)}
+                        onDragEnd={handleDragEnd}
+                        onDrop={(e) => handleDrop(e, index)}
+                        onClick={() => handleStepClick(step.id)}
+                        className={`border-b cursor-pointer transition-colors hover:bg-muted/50 ${
+                          dragOverIndex === index && dragIndex !== index
+                            ? 'border-t-2 border-t-primary'
+                            : ''
+                        }`}
+                      >
+                        <td
+                          className="w-10 px-3 py-3 text-center cursor-grab active:cursor-grabbing"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
+                        </td>
+                        <td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">
+                          {index + 1}
+                        </td>
+                        <td className="px-3 py-3 text-sm font-mono">
+                          {step.stepCode}
+                        </td>
+                        <td className="px-3 py-3 text-sm font-medium">
+                          {step.stepName}
+                        </td>
+                        <td className="w-20 px-3 py-3 text-center">
+                          <Badge
+                            variant={step.isRequired ? 'default' : 'outline'}
+                            className="text-xs"
+                          >
+                            {step.isRequired ? 'Y' : 'N'}
+                          </Badge>
+                        </td>
+                        <td className="w-20 px-3 py-3 text-center">
+                          <Badge
+                            variant={step.needsApproval ? 'default' : 'outline'}
+                            className="text-xs"
+                          >
+                            {step.needsApproval ? 'Y' : 'N'}
+                          </Badge>
+                        </td>
+                        <td className="w-20 px-3 py-3 text-center">
+                          <Badge
+                            variant={step.needsInspection ? 'default' : 'outline'}
+                            className="text-xs"
+                          >
+                            {step.needsInspection ? 'Y' : 'N'}
+                          </Badge>
+                        </td>
+                        <td className="w-16 px-3 py-3 text-center">
+                          <Badge
+                            variant={step.isActive ? 'default' : 'secondary'}
+                            className="text-xs"
+                          >
+                            {step.isActive ? 'Y' : 'N'}
+                          </Badge>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </CardContent>
+        </Card>
       </div>
 
       {/* 하단 액션 버튼 (sticky) */}
-      <div className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}>
+      <div
+        className={`fixed bottom-6 ${sidebarCollapsed ? 'left-[156px]' : 'left-[316px]'} right-[48px] px-6 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 flex items-center justify-between`}
+      >
         <Button variant="outline" onClick={handleList}>
           <ArrowLeft className="h-4 w-4 mr-2" />
           목록으로
@@ -271,13 +330,6 @@ export function ProcessDetail({ process }: ProcessDetailProps) {
           수정
         </Button>
       </div>
-
-      {/* 작업일지 양식 미리보기 모달 */}
-      <ProcessWorkLogPreviewModal
-        open={workLogModalOpen}
-        onOpenChange={setWorkLogModalOpen}
-        process={process}
-      />
     </PageLayout>
   );
-}
+}