feat(WEB): 공정관리 드래그 순서변경, 수주서/출고증 리디자인, 체크리스트 관리 추가

- 공정관리: 드래그&드롭 순서 변경 기능 추가 (reorderProcesses API)
- 수주서(SalesOrderDocument): 기획서 D1.8 기준 리디자인, 출고증과 동일 자재 섹션 구조
- 출고증(ShipmentOrderDocument): 레이아웃 개선
- 체크리스트 관리 페이지 신규 추가 (master-data/checklist-management)
- QMS 품질감사: 타입 및 목데이터 수정
- menuRefresh 유틸 정리

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

src/components/checklist-management/ChecklistListClient.tsx

@@ -0,0 +1,519 @@
+'use client';
+
+/**
+ * 점검표 목록 - UniversalListPage 기반
+ *
+ * 공정 목록(ProcessListClient)과 동일한 패턴:
+ * - 클라이언트 사이드 필터링 (상태별)
+ * - 드래그&드롭 순서 변경
+ * - 상태 토글
+ */
+
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { ClipboardList, Plus, GripVertical } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { TableCell, TableRow, TableHead } from '@/components/ui/table';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Badge } from '@/components/ui/badge';
+import {
+  UniversalListPage,
+  type UniversalListConfig,
+  type SelectionHandlers,
+  type RowClickHandlers,
+  type ListParams,
+} from '@/components/templates/UniversalListPage';
+import { ListMobileCard, InfoField } from '@/components/organisms/MobileCard';
+import { toast } from 'sonner';
+import { DeleteConfirmDialog } from '@/components/ui/confirm-dialog';
+import type { Checklist } from '@/types/checklist';
+import {
+  getChecklistList,
+  deleteChecklist,
+  deleteChecklists,
+  toggleChecklistStatus,
+  getChecklistStats,
+  reorderChecklists,
+} from './actions';
+
+export default function ChecklistListClient() {
+  const router = useRouter();
+
+  // ===== 상태 =====
+  const [allChecklists, setAllChecklists] = useState<Checklist[]>([]);
+  const [stats, setStats] = useState({ total: 0, active: 0, inactive: 0 });
+  const [isLoading, setIsLoading] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+
+  // 날짜 범위 상태
+  const [startDate, setStartDate] = useState('2025-01-01');
+  const [endDate, setEndDate] = useState('2025-12-31');
+
+  // 검색어 상태
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // 드래그&드롭 순서 변경 상태
+  const [isOrderChanged, setIsOrderChanged] = useState(false);
+  const dragIdRef = useRef<string | null>(null);
+  const dragNodeRef = useRef<HTMLTableRowElement | null>(null);
+  const allChecklistsRef = useRef(allChecklists);
+  allChecklistsRef.current = allChecklists;
+
+  // ===== 데이터 로드 =====
+  const loadData = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const [listResult, statsResult] = await Promise.all([
+        getChecklistList(),
+        getChecklistStats(),
+      ]);
+
+      if (listResult.success && listResult.data) {
+        setAllChecklists(listResult.data.items);
+      }
+      if (statsResult.success && statsResult.data) {
+        setStats(statsResult.data);
+      }
+    } catch {
+      toast.error('데이터 로드에 실패했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  // ===== 핸들러 =====
+  const handleRowClick = useCallback(
+    (checklist: Checklist) => {
+      router.push(`/ko/master-data/checklist-management/${checklist.id}`);
+    },
+    [router]
+  );
+
+  const handleCreate = useCallback(() => {
+    router.push('/ko/master-data/checklist-management?mode=new');
+  }, [router]);
+
+  const handleDeleteConfirm = useCallback(async () => {
+    if (!deleteTargetId) return;
+    setIsLoading(true);
+    try {
+      const result = await deleteChecklist(deleteTargetId);
+      if (result.success) {
+        toast.success('점검표가 삭제되었습니다.');
+        setAllChecklists((prev) => prev.filter((c) => c.id !== deleteTargetId));
+      } else {
+        toast.error(result.error || '삭제에 실패했습니다.');
+      }
+    } catch {
+      toast.error('삭제 중 오류가 발생했습니다.');
+    } finally {
+      setIsLoading(false);
+      setDeleteDialogOpen(false);
+      setDeleteTargetId(null);
+    }
+  }, [deleteTargetId]);
+
+  const handleBulkDelete = useCallback(
+    async (selectedIds: string[]) => {
+      if (selectedIds.length === 0) {
+        toast.warning('삭제할 항목을 선택해주세요.');
+        return;
+      }
+      setIsLoading(true);
+      try {
+        const result = await deleteChecklists(selectedIds);
+        if (result.success) {
+          toast.success(`${result.deletedCount}개 항목이 삭제되었습니다.`);
+          await loadData();
+        } else {
+          toast.error(result.error || '일괄 삭제에 실패했습니다.');
+        }
+      } catch {
+        toast.error('일괄 삭제 중 오류가 발생했습니다.');
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [loadData]
+  );
+
+  const handleToggleStatus = useCallback(
+    async (checklistId: string) => {
+      setIsLoading(true);
+      try {
+        const result = await toggleChecklistStatus(checklistId);
+        if (result.success && result.data) {
+          toast.success('상태가 변경되었습니다.');
+          setAllChecklists((prev) =>
+            prev.map((c) => (c.id === checklistId ? result.data! : c))
+          );
+        } else {
+          toast.error(result.error || '상태 변경에 실패했습니다.');
+        }
+      } catch {
+        toast.error('상태 변경 중 오류가 발생했습니다.');
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+
+  // ===== 드래그&드롭 =====
+  const handleDragStart = useCallback(
+    (e: React.DragEvent<HTMLTableRowElement>, id: string) => {
+      dragIdRef.current = id;
+      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>) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      e.currentTarget.classList.add('border-t-2', 'border-t-primary');
+    },
+    []
+  );
+
+  const handleDragLeave = useCallback(
+    (e: React.DragEvent<HTMLTableRowElement>) => {
+      const related = e.relatedTarget as Node;
+      if (!e.currentTarget.contains(related)) {
+        e.currentTarget.classList.remove('border-t-2', 'border-t-primary');
+      }
+    },
+    []
+  );
+
+  const handleDragEnd = useCallback(() => {
+    if (dragNodeRef.current) dragNodeRef.current.style.opacity = '1';
+    dragIdRef.current = null;
+    dragNodeRef.current = null;
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLTableRowElement>, dropId: string) => {
+      e.preventDefault();
+      e.currentTarget.classList.remove('border-t-2', 'border-t-primary');
+      const dragId = dragIdRef.current;
+      if (!dragId || dragId === dropId) {
+        handleDragEnd();
+        return;
+      }
+      setAllChecklists((prev) => {
+        const updated = [...prev];
+        const dragIdx = updated.findIndex((c) => c.id === dragId);
+        const dropIdx = updated.findIndex((c) => c.id === dropId);
+        if (dragIdx === -1 || dropIdx === -1) return prev;
+        const [moved] = updated.splice(dragIdx, 1);
+        updated.splice(dropIdx, 0, moved);
+        return updated;
+      });
+      setIsOrderChanged(true);
+      handleDragEnd();
+    },
+    [handleDragEnd]
+  );
+
+  const handleSaveOrder = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const orderData = allChecklistsRef.current.map((c, idx) => ({
+        id: c.id,
+        order: idx + 1,
+      }));
+      const result = await reorderChecklists(orderData);
+      if (result.success) {
+        toast.success('순서가 저장되었습니다.');
+        setIsOrderChanged(false);
+      } else {
+        toast.error(result.error || '순서 저장에 실패했습니다.');
+      }
+    } catch {
+      toast.error('순서 저장 중 오류가 발생했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // ===== UniversalListPage Config =====
+  const config: UniversalListConfig<Checklist> = useMemo(
+    () => ({
+      title: '점검표 목록',
+      icon: ClipboardList,
+      basePath: '/master-data/checklist-management',
+      idField: 'id',
+
+      actions: {
+        getList: async (params?: ListParams) => {
+          try {
+            const [listResult, statsResult] = await Promise.all([
+              getChecklistList(),
+              getChecklistStats(),
+            ]);
+            if (listResult.success && listResult.data) {
+              setAllChecklists(listResult.data.items);
+              if (statsResult.success && statsResult.data) {
+                setStats(statsResult.data);
+              }
+              return {
+                success: true,
+                data: listResult.data.items,
+                totalCount: listResult.data.items.length,
+                totalPages: 1,
+              };
+            }
+            return { success: false, error: '데이터 로드에 실패했습니다.' };
+          } catch {
+            return { success: false, error: '서버 오류가 발생했습니다.' };
+          }
+        },
+        deleteItem: async (id: string) => {
+          const result = await deleteChecklist(id);
+          return { success: result.success, error: result.error };
+        },
+        deleteBulk: async (ids: string[]) => {
+          const result = await deleteChecklists(ids);
+          return { success: result.success, error: result.error };
+        },
+      },
+
+      // 테이블 컬럼 (showCheckbox: false → 수동 관리)
+      showCheckbox: false,
+      columns: [
+        { key: 'drag', label: '', className: 'w-[40px]' },
+        { key: 'checkbox', label: '', className: 'w-[50px]' },
+        { key: 'no', label: 'No.', className: 'w-[60px] text-center' },
+        { key: 'checklistCode', label: '점검표 번호', className: 'w-[120px]' },
+        { key: 'checklistName', label: '점검표', className: 'min-w-[200px]' },
+        { key: 'items', label: '항목', className: 'w-[80px] text-center' },
+        { key: 'documents', label: '문서', className: 'w-[80px] text-center' },
+        { key: 'status', label: '상태', className: 'w-[80px] text-center' },
+      ],
+
+      // 커스텀 테이블 헤더 (드래그 → 전체선택 체크박스 → No. → 데이터 순)
+      renderCustomTableHeader: ({ displayData, selectedItems, onToggleSelectAll }) => (
+        <>
+          <TableHead className="w-[40px]" />
+          <TableHead className="w-[50px] text-center">
+            <Checkbox
+              checked={displayData.length > 0 && selectedItems.size === displayData.length}
+              onCheckedChange={onToggleSelectAll}
+            />
+          </TableHead>
+          <TableHead className="w-[60px] text-center">No.</TableHead>
+          <TableHead className="w-[120px]">점검표 번호</TableHead>
+          <TableHead className="min-w-[200px]">점검표</TableHead>
+          <TableHead className="w-[80px] text-center">항목</TableHead>
+          <TableHead className="w-[80px] text-center">문서</TableHead>
+          <TableHead className="w-[80px] text-center">상태</TableHead>
+        </>
+      ),
+
+      clientSideFiltering: true,
+      itemsPerPage: 20,
+
+      hideSearch: true,
+      searchValue: searchQuery,
+      onSearchChange: setSearchQuery,
+
+      dateRangeSelector: {
+        enabled: true,
+        showPresets: true,
+        startDate,
+        endDate,
+        onStartDateChange: setStartDate,
+        onEndDateChange: setEndDate,
+      },
+
+      filterConfig: [
+        {
+          key: 'status',
+          label: '상태',
+          type: 'single' as const,
+          options: [
+            { value: '사용', label: '사용' },
+            { value: '미사용', label: '미사용' },
+          ],
+          allOptionLabel: '전체',
+        },
+      ],
+      initialFilters: { status: '' },
+
+      customFilterFn: (
+        items: Checklist[],
+        filterValues: Record<string, string | string[]>
+      ) => {
+        const statusFilter = filterValues.status as string;
+        if (!statusFilter) return items;
+        return items.filter((item) => item.status === statusFilter);
+      },
+
+      searchFilter: (item, searchValue) => {
+        if (!searchValue || !searchValue.trim()) return true;
+        const search = searchValue.toLowerCase().trim();
+        return (
+          (item.checklistCode || '').toLowerCase().includes(search) ||
+          (item.checklistName || '').toLowerCase().includes(search)
+        );
+      },
+
+      headerActions: () => (
+        <Button
+          variant="outline"
+          onClick={handleSaveOrder}
+          disabled={!isOrderChanged}
+        >
+          순서 변경 저장
+        </Button>
+      ),
+
+      createButton: {
+        label: '점검표 등록',
+        onClick: handleCreate,
+        icon: Plus,
+      },
+
+      onBulkDelete: handleBulkDelete,
+
+      renderTableRow: (
+        checklist: Checklist,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<Checklist>
+      ) => (
+        <TableRow
+          key={checklist.id}
+          draggable
+          onDragStart={(e) => handleDragStart(e, checklist.id)}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDragEnd={handleDragEnd}
+          onDrop={(e) => handleDrop(e, checklist.id)}
+          className={`cursor-pointer hover:bg-muted/50 ${handlers.isSelected ? 'bg-blue-50' : ''}`}
+          onClick={() => handleRowClick(checklist)}
+        >
+          <TableCell
+            className="text-center cursor-grab active:cursor-grabbing"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
+          </TableCell>
+          <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+            <Checkbox
+              checked={handlers.isSelected}
+              onCheckedChange={handlers.onToggle}
+            />
+          </TableCell>
+          <TableCell className="text-center text-muted-foreground">
+            {globalIndex}
+          </TableCell>
+          <TableCell className="font-medium">{checklist.checklistCode}</TableCell>
+          <TableCell>{checklist.checklistName}</TableCell>
+          <TableCell className="text-center">{checklist.itemCount}</TableCell>
+          <TableCell className="text-center">{checklist.documentCount}</TableCell>
+          <TableCell
+            className="text-center"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Badge
+              variant={checklist.status === '사용' ? 'default' : 'secondary'}
+              className="cursor-pointer"
+              onClick={() => handleToggleStatus(checklist.id)}
+            >
+              {checklist.status}
+            </Badge>
+          </TableCell>
+        </TableRow>
+      ),
+
+      renderMobileCard: (
+        checklist: Checklist,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<Checklist>
+      ) => (
+        <ListMobileCard
+          key={checklist.id}
+          id={checklist.id}
+          isSelected={handlers.isSelected}
+          onToggleSelection={handlers.onToggle}
+          onClick={() => handleRowClick(checklist)}
+          headerBadges={
+            <>
+              <Badge variant="outline" className="text-xs">
+                #{globalIndex}
+              </Badge>
+              <Badge variant="outline" className="text-xs font-mono">
+                {checklist.checklistCode}
+              </Badge>
+            </>
+          }
+          title={checklist.checklistName}
+          statusBadge={
+            <Badge
+              variant={checklist.status === '사용' ? 'default' : 'secondary'}
+              className="cursor-pointer"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleToggleStatus(checklist.id);
+              }}
+            >
+              {checklist.status}
+            </Badge>
+          }
+          infoGrid={
+            <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+              <InfoField label="항목" value={`${checklist.itemCount}개`} />
+              <InfoField label="문서" value={`${checklist.documentCount}개`} />
+            </div>
+          }
+        />
+      ),
+    }),
+    [
+      handleCreate,
+      handleRowClick,
+      handleToggleStatus,
+      handleBulkDelete,
+      startDate,
+      endDate,
+      searchQuery,
+      isOrderChanged,
+      handleSaveOrder,
+      handleDragStart,
+      handleDragOver,
+      handleDragLeave,
+      handleDragEnd,
+      handleDrop,
+    ]
+  );
+
+  return (
+    <>
+      <UniversalListPage
+        config={config}
+        initialData={allChecklists}
+        onSearchChange={setSearchQuery}
+      />
+      <DeleteConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        description="선택한 점검표를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
+        loading={isLoading}
+        onConfirm={handleDeleteConfirm}
+      />
+    </>
+  );
+}