Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/components/hr/SalaryManagement/index.tsx
#	src/components/production/WorkResults/WorkResultList.tsx
#	tsconfig.tsbuildinfo

src/components/process-management/ProcessListClient.tsx

@@ -1,5 +1,14 @@
 'use client';
 
+/**
+ * 공정 목록 - UniversalListPage 마이그레이션
+ *
+ * 기존 IntegratedListTemplateV2 → UniversalListPage config 기반으로 변환
+ * - 클라이언트 사이드 필터링 (탭별, 검색)
+ * - 상태 토글 기능
+ * - 삭제 다이얼로그
+ */
+
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { Wrench, Plus, Pencil, Trash2, Loader2 } from 'lucide-react';
@@ -7,8 +16,15 @@ import { Button } from '@/components/ui/button';
 import { TableCell, TableRow } from '@/components/ui/table';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Badge } from '@/components/ui/badge';
-import { IntegratedListTemplateV2, TabOption, TableColumn } from '@/components/templates/IntegratedListTemplateV2';
-import { MobileCard } from '@/components/molecules/MobileCard';
+import {
+  UniversalListPage,
+  type UniversalListConfig,
+  type SelectionHandlers,
+  type RowClickHandlers,
+  type TabOption,
+  type ListParams,
+} from '@/components/templates/UniversalListPage';
+import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
 import { toast } from 'sonner';
 import {
   AlertDialog,
@@ -23,19 +39,6 @@ import {
 import type { Process } from '@/types/process';
 import { getProcessList, deleteProcess, deleteProcesses, toggleProcessActive, getProcessStats } from './actions';
 
-// 테이블 컬럼 정의
-const tableColumns: TableColumn[] = [
-  { key: 'no', label: '번호', className: 'w-[60px] text-center' },
-  { key: 'processCode', label: '공정코드', className: 'w-[100px]' },
-  { key: 'processName', label: '공정명', className: 'min-w-[250px]' },
-  { key: 'processType', label: '구분', className: 'w-[80px] text-center' },
-  { key: 'department', label: '담당부서', className: 'w-[120px]' },
-  { key: 'classificationRules', label: '분류규칙', className: 'w-[80px] text-center' },
-  { key: 'requiredWorkers', label: '인원', className: 'w-[60px] text-center' },
-  { key: 'status', label: '상태', className: 'w-[80px] text-center' },
-  { key: 'actions', label: '작업', className: 'w-[100px] text-center' },
-];
-
 interface ProcessListClientProps {
   initialData?: Process[];
   initialStats?: { total: number; active: number; inactive: number };
@@ -44,29 +47,24 @@ interface ProcessListClientProps {
 export default function ProcessListClient({ initialData = [], initialStats }: ProcessListClientProps) {
   const router = useRouter();
 
-  // 상태
-  const [processes, setProcesses] = useState<Process[]>(initialData);
+  // ===== 상태 =====
+  const [allProcesses, setAllProcesses] = useState<Process[]>(initialData);
   const [stats, setStats] = useState(initialStats ?? { total: 0, active: 0, inactive: 0 });
-  const [activeTab, setActiveTab] = useState('all');
-  const [searchValue, setSearchValue] = useState('');
-  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
-  const [currentPage, setCurrentPage] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
-  const itemsPerPage = 20;
 
-  // 데이터 로드
+  // ===== 데이터 로드 =====
   const loadData = useCallback(async () => {
     setIsLoading(true);
     try {
       const [listResult, statsResult] = await Promise.all([
-        getProcessList({ size: 1000 }), // 전체 조회
+        getProcessList({ size: 1000 }),
         getProcessStats(),
       ]);
 
       if (listResult.success && listResult.data) {
-        setProcesses(listResult.data.items);
+        setAllProcesses(listResult.data.items);
       }
       if (statsResult.success && statsResult.data) {
         setStats({
@@ -89,95 +87,20 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
     }
   }, [initialData.length, loadData]);
 
-  // 필터링된 데이터
-  const filteredProcesses = useMemo(() => {
-    return processes.filter((process) => {
-      // 탭 필터
-      if (activeTab !== 'all' && process.status !== activeTab) {
-        return false;
-      }
-      // 검색 필터
-      if (searchValue) {
-        const search = searchValue.toLowerCase();
-        return (
-          process.processCode.toLowerCase().includes(search) ||
-          process.processName.toLowerCase().includes(search) ||
-          process.department.toLowerCase().includes(search)
-        );
-      }
-      return true;
-    });
-  }, [processes, activeTab, searchValue]);
-
-  // 페이지네이션
-  const totalPages = Math.ceil(filteredProcesses.length / itemsPerPage);
-  const paginatedData = useMemo(() => {
-    const start = (currentPage - 1) * itemsPerPage;
-    return filteredProcesses.slice(start, start + itemsPerPage);
-  }, [filteredProcesses, currentPage, itemsPerPage]);
-
-  // 탭 옵션
-  const tabOptions: TabOption[] = useMemo(
-    () => [
-      { value: 'all', label: '전체', count: stats.total },
-      { value: '사용중', label: '사용중', count: stats.active },
-      { value: '미사용', label: '미사용', count: stats.inactive },
-    ],
-    [stats]
-  );
-
-  // 핸들러
-  const handleTabChange = useCallback((value: string) => {
-    setActiveTab(value);
-    setCurrentPage(1);
-  }, []);
-
-  const handleSearchChange = useCallback((value: string) => {
-    setSearchValue(value);
-    setCurrentPage(1);
-  }, []);
-
-  const handleToggleSelection = useCallback((id: string) => {
-    setSelectedItems((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(id)) {
-        newSet.delete(id);
-      } else {
-        newSet.add(id);
-      }
-      return newSet;
-    });
-  }, []);
-
-  const handleToggleSelectAll = useCallback(() => {
-    if (selectedItems.size === paginatedData.length) {
-      setSelectedItems(new Set());
-    } else {
-      setSelectedItems(new Set(paginatedData.map((p) => p.id)));
-    }
-  }, [selectedItems.size, paginatedData]);
-
-  const handleRowClick = useCallback(
-    (process: Process) => {
-      router.push(`/ko/master-data/process-management/${process.id}`);
-    },
-    [router]
-  );
+  // ===== 핸들러 =====
+  const handleRowClick = useCallback((process: Process) => {
+    router.push(`/ko/master-data/process-management/${process.id}`);
+  }, [router]);
 
   const handleCreate = useCallback(() => {
     router.push('/ko/master-data/process-management/new');
   }, [router]);
 
-  const handleEdit = useCallback(
-    (e: React.MouseEvent, processId: string) => {
-      e.stopPropagation();
-      router.push(`/ko/master-data/process-management/${processId}/edit`);
-    },
-    [router]
-  );
+  const handleEdit = useCallback((process: Process) => {
+    router.push(`/ko/master-data/process-management/${process.id}/edit`);
+  }, [router]);
 
-  const handleDeleteClick = useCallback((e: React.MouseEvent, processId: string) => {
-    e.stopPropagation();
+  const handleDeleteClick = useCallback((processId: string) => {
     setDeleteTargetId(processId);
     setDeleteDialogOpen(true);
   }, []);
@@ -190,18 +113,14 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
       const result = await deleteProcess(deleteTargetId);
       if (result.success) {
         toast.success('공정이 삭제되었습니다.');
-        setProcesses((prev) => prev.filter((p) => p.id !== deleteTargetId));
+        const deletedProcess = allProcesses.find((p) => p.id === deleteTargetId);
+        setAllProcesses((prev) => prev.filter((p) => p.id !== deleteTargetId));
         setStats((prev) => ({
           ...prev,
           total: prev.total - 1,
-          active: prev.active - (processes.find((p) => p.id === deleteTargetId)?.status === '사용중' ? 1 : 0),
-          inactive: prev.inactive - (processes.find((p) => p.id === deleteTargetId)?.status === '미사용' ? 1 : 0),
+          active: prev.active - (deletedProcess?.status === '사용중' ? 1 : 0),
+          inactive: prev.inactive - (deletedProcess?.status === '미사용' ? 1 : 0),
         }));
-        setSelectedItems((prev) => {
-          const newSet = new Set(prev);
-          newSet.delete(deleteTargetId);
-          return newSet;
-        });
       } else {
         toast.error(result.error || '삭제에 실패했습니다.');
       }
@@ -212,22 +131,20 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
       setDeleteDialogOpen(false);
       setDeleteTargetId(null);
     }
-  }, [deleteTargetId, processes]);
+  }, [deleteTargetId, allProcesses]);
 
-  const handleBulkDelete = useCallback(async () => {
-    if (selectedItems.size === 0) {
+  const handleBulkDelete = useCallback(async (selectedIds: string[]) => {
+    if (selectedIds.length === 0) {
       toast.warning('삭제할 항목을 선택해주세요.');
       return;
     }
 
     setIsLoading(true);
     try {
-      const ids = Array.from(selectedItems);
-      const result = await deleteProcesses(ids);
+      const result = await deleteProcesses(selectedIds);
       if (result.success) {
         toast.success(`${result.deletedCount}개 항목이 삭제되었습니다.`);
         await loadData();
-        setSelectedItems(new Set());
       } else {
         toast.error(result.error || '일괄 삭제에 실패했습니다.');
       }
@@ -236,179 +153,341 @@ export default function ProcessListClient({ initialData = [], initialStats }: Pr
     } finally {
       setIsLoading(false);
     }
-  }, [selectedItems, loadData]);
+  }, [loadData]);
 
-  const handleToggleStatus = useCallback(
-    async (e: React.MouseEvent, processId: string) => {
-      e.stopPropagation();
-      setIsLoading(true);
-      try {
-        const result = await toggleProcessActive(processId);
-        if (result.success && result.data) {
-          toast.success('상태가 변경되었습니다.');
-          setProcesses((prev) => prev.map((p) => (p.id === processId ? result.data! : p)));
-          // 통계 업데이트
-          const oldProcess = processes.find((p) => p.id === processId);
-          if (oldProcess) {
-            const wasActive = oldProcess.status === '사용중';
-            setStats((prev) => ({
-              ...prev,
-              active: wasActive ? prev.active - 1 : prev.active + 1,
-              inactive: wasActive ? prev.inactive + 1 : prev.inactive - 1,
-            }));
-          }
-        } else {
-          toast.error(result.error || '상태 변경에 실패했습니다.');
+  const handleToggleStatus = useCallback(async (processId: string) => {
+    setIsLoading(true);
+    try {
+      const result = await toggleProcessActive(processId);
+      if (result.success && result.data) {
+        toast.success('상태가 변경되었습니다.');
+        setAllProcesses((prev) => prev.map((p) => (p.id === processId ? result.data! : p)));
+        const oldProcess = allProcesses.find((p) => p.id === processId);
+        if (oldProcess) {
+          const wasActive = oldProcess.status === '사용중';
+          setStats((prev) => ({
+            ...prev,
+            active: wasActive ? prev.active - 1 : prev.active + 1,
+            inactive: wasActive ? prev.inactive + 1 : prev.inactive - 1,
+          }));
         }
-      } catch {
-        toast.error('상태 변경 중 오류가 발생했습니다.');
-      } finally {
-        setIsLoading(false);
+      } else {
+        toast.error(result.error || '상태 변경에 실패했습니다.');
       }
-    },
-    [processes]
-  );
+    } catch {
+      toast.error('상태 변경 중 오류가 발생했습니다.');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [allProcesses]);
 
-  // 테이블 행 렌더링
-  const renderTableRow = useCallback(
-    (process: Process, index: number, globalIndex: number) => {
-      const isSelected = selectedItems.has(process.id);
+  // ===== 탭 옵션 =====
+  const tabs: TabOption[] = useMemo(() => [
+    { value: 'all', label: '전체', count: stats.total },
+    { value: '사용중', label: '사용중', count: stats.active },
+    { value: '미사용', label: '미사용', count: stats.inactive },
+  ], [stats]);
 
-      return (
-        <TableRow key={process.id} className="cursor-pointer hover:bg-muted/50" onClick={() => handleRowClick(process)}>
-          <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
-            <Checkbox checked={isSelected} onCheckedChange={() => handleToggleSelection(process.id)} />
-          </TableCell>
-          <TableCell className="text-center text-muted-foreground">{globalIndex}</TableCell>
-          <TableCell className="font-medium">{process.processCode}</TableCell>
-          <TableCell>
-            <div>
-              <div className="font-medium">{process.processName}</div>
-              {process.description && <div className="text-sm text-muted-foreground">{process.description}</div>}
-            </div>
-          </TableCell>
-          <TableCell className="text-center">
-            <Badge variant="secondary">{process.processType}</Badge>
-          </TableCell>
-          <TableCell>{process.department}</TableCell>
-          <TableCell className="text-center">
-            {process.classificationRules.length > 0 ? (
-              <Badge variant="outline">{process.classificationRules.length}</Badge>
-            ) : (
-              <span className="text-muted-foreground">-</span>
-            )}
-          </TableCell>
-          <TableCell className="text-center">{process.requiredWorkers}명</TableCell>
-          <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
-            <Badge
-              variant={process.status === '사용중' ? 'default' : 'secondary'}
-              className="cursor-pointer"
-              onClick={(e) => handleToggleStatus(e, process.id)}
-            >
-              {process.status}
-            </Badge>
-          </TableCell>
-          <TableCell className="text-center">
-            {isSelected && (
-              <div className="flex items-center justify-center gap-2">
-                <Button variant="ghost" size="icon" className="h-8 w-8" onClick={(e) => handleEdit(e, process.id)}>
-                  <Pencil className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8 text-destructive hover:text-destructive"
-                  onClick={(e) => handleDeleteClick(e, process.id)}
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
+  // ===== UniversalListPage Config =====
+  const config: UniversalListConfig<Process> = useMemo(
+    () => ({
+      // 페이지 기본 정보
+      title: '공정 목록',
+      icon: Wrench,
+      basePath: '/master-data/process-management',
+
+      // ID 추출
+      idField: 'id',
+
+      // API 액션
+      actions: {
+        getList: async (params?: ListParams) => {
+          try {
+            const [listResult, statsResult] = await Promise.all([
+              getProcessList({ size: 1000 }),
+              getProcessStats(),
+            ]);
+
+            if (listResult.success && listResult.data) {
+              setAllProcesses(listResult.data.items);
+
+              if (statsResult.success && statsResult.data) {
+                setStats({
+                  total: statsResult.data.total,
+                  active: statsResult.data.active,
+                  inactive: statsResult.data.inactive,
+                });
+              }
+
+              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 deleteProcess(id);
+          return { success: result.success, error: result.error };
+        },
+        deleteBulk: async (ids: string[]) => {
+          const result = await deleteProcesses(ids);
+          return { success: result.success, error: result.error };
+        },
+      },
+
+      // 테이블 컬럼
+      columns: [
+        { key: 'no', label: '번호', className: 'w-[60px] text-center' },
+        { key: 'processCode', label: '공정코드', className: 'w-[100px]' },
+        { key: 'processName', label: '공정명', className: 'min-w-[250px]' },
+        { key: 'processType', label: '구분', className: 'w-[80px] text-center' },
+        { key: 'department', label: '담당부서', className: 'w-[120px]' },
+        { key: 'classificationRules', label: '분류규칙', className: 'w-[80px] text-center' },
+        { key: 'requiredWorkers', label: '인원', className: 'w-[60px] text-center' },
+        { key: 'status', label: '상태', className: 'w-[80px] text-center' },
+        { key: 'actions', label: '작업', className: 'w-[100px] text-center' },
+      ],
+
+      // 클라이언트 사이드 필터링
+      clientSideFiltering: true,
+      itemsPerPage: 20,
+
+      // 탭 필터 함수
+      tabFilter: (item: Process, activeTab: string) => {
+        if (activeTab === 'all') return true;
+        return item.status === activeTab;
+      },
+
+      // 검색 필터 함수
+      searchFilter: (item: Process, searchValue: string) => {
+        const search = searchValue.toLowerCase();
+        return (
+          item.processCode.toLowerCase().includes(search) ||
+          item.processName.toLowerCase().includes(search) ||
+          item.department.toLowerCase().includes(search)
+        );
+      },
+
+      // 탭 설정
+      tabs,
+      defaultTab: 'all',
+
+      // 검색
+      searchPlaceholder: '공정코드, 공정명, 담당부서 검색',
+
+      // 헤더 액션
+      headerActions: () => (
+        <Button onClick={handleCreate} className="gap-2">
+          <Plus className="h-4 w-4" />
+          공정 등록
+        </Button>
+      ),
+
+      // 일괄 삭제 핸들러
+      onBulkDelete: handleBulkDelete,
+
+      // 테이블 행 렌더링
+      renderTableRow: (
+        process: Process,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<Process>
+      ) => {
+        return (
+          <TableRow
+            key={process.id}
+            className={`cursor-pointer hover:bg-muted/50 ${handlers.isSelected ? 'bg-blue-50' : ''}`}
+            onClick={() => handleRowClick(process)}
+          >
+            <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">{process.processCode}</TableCell>
+            <TableCell>
+              <div>
+                <div className="font-medium">{process.processName}</div>
+                {process.description && (
+                  <div className="text-sm text-muted-foreground">{process.description}</div>
+                )}
               </div>
-            )}
-          </TableCell>
-        </TableRow>
-      );
-    },
-    [selectedItems, handleToggleSelection, handleRowClick, handleEdit, handleDeleteClick, handleToggleStatus]
-  );
+            </TableCell>
+            <TableCell className="text-center">
+              <Badge variant="secondary">{process.processType}</Badge>
+            </TableCell>
+            <TableCell>{process.department}</TableCell>
+            <TableCell className="text-center">
+              {process.classificationRules.length > 0 ? (
+                <Badge variant="outline">{process.classificationRules.length}</Badge>
+              ) : (
+                <span className="text-muted-foreground">-</span>
+              )}
+            </TableCell>
+            <TableCell className="text-center">{process.requiredWorkers}명</TableCell>
+            <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+              <Badge
+                variant={process.status === '사용중' ? 'default' : 'secondary'}
+                className="cursor-pointer"
+                onClick={() => handleToggleStatus(process.id)}
+              >
+                {process.status}
+              </Badge>
+            </TableCell>
+            <TableCell className="text-center">
+              {handlers.isSelected && (
+                <div className="flex items-center justify-center gap-2">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleEdit(process);
+                    }}
+                  >
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-destructive hover:text-destructive"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDeleteClick(process.id);
+                    }}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              )}
+            </TableCell>
+          </TableRow>
+        );
+      },
 
-  // 모바일 카드 렌더링
-  const renderMobileCard = useCallback(
-    (process: Process, index: number, globalIndex: number, isSelected: boolean, onToggle: () => void) => {
-      return (
-        <MobileCard
-          title={process.processName}
-          subtitle={process.processCode}
-          description={process.description}
-          badge={process.status}
-          badgeVariant={process.status === '사용중' ? 'default' : 'secondary'}
-          isSelected={isSelected}
-          onToggle={onToggle}
-          onClick={() => handleRowClick(process)}
-          details={[
-            { label: '구분', value: process.processType },
-            { label: '담당부서', value: process.department },
-            { label: '인원', value: `${process.requiredWorkers}명` },
-          ]}
-        />
-      );
-    },
-    [handleRowClick]
+      // 모바일 카드 렌더링
+      renderMobileCard: (
+        process: Process,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<Process>
+      ) => {
+        return (
+          <ListMobileCard
+            key={process.id}
+            id={process.id}
+            isSelected={handlers.isSelected}
+            onToggleSelection={handlers.onToggle}
+            onClick={() => handleRowClick(process)}
+            headerBadges={
+              <>
+                <Badge variant="outline" className="text-xs">#{globalIndex}</Badge>
+                <Badge variant="outline" className="text-xs font-mono">{process.processCode}</Badge>
+              </>
+            }
+            title={process.processName}
+            statusBadge={
+              <Badge
+                variant={process.status === '사용중' ? 'default' : 'secondary'}
+                className="cursor-pointer"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleToggleStatus(process.id);
+                }}
+              >
+                {process.status}
+              </Badge>
+            }
+            infoGrid={
+              <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+                <InfoField label="구분" value={process.processType} />
+                <InfoField label="담당부서" value={process.department} />
+                <InfoField label="인원" value={`${process.requiredWorkers}명`} />
+                <InfoField
+                  label="분류규칙"
+                  value={process.classificationRules.length > 0 ? `${process.classificationRules.length}개` : '-'}
+                />
+                {process.description && (
+                  <div className="col-span-2">
+                    <InfoField label="설명" value={process.description} />
+                  </div>
+                )}
+              </div>
+            }
+            actions={
+              handlers.isSelected ? (
+                <div className="flex gap-2">
+                  <Button
+                    variant="default"
+                    size="default"
+                    className="flex-1 h-11"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleEdit(process);
+                    }}
+                  >
+                    <Pencil className="h-4 w-4 mr-2" />
+                    수정
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="default"
+                    className="flex-1 h-11 border-red-200 text-red-600 hover:border-red-300 bg-transparent"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDeleteClick(process.id);
+                    }}
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    삭제
+                  </Button>
+                </div>
+              ) : undefined
+            }
+          />
+        );
+      },
+    }),
+    [tabs, handleCreate, handleRowClick, handleEdit, handleDeleteClick, handleToggleStatus, handleBulkDelete]
   );
 
   return (
     <>
-      <IntegratedListTemplateV2
-        title="공정 목록"
-        icon={Wrench}
-        headerActions={
-          <div className="flex justify-end w-full gap-2">
-            {selectedItems.size > 0 && (
-              <Button variant="destructive" onClick={handleBulkDelete} disabled={isLoading}>
-                {isLoading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <Trash2 className="h-4 w-4 mr-2" />}
-                선택 삭제 ({selectedItems.size})
-              </Button>
-            )}
-            <Button onClick={handleCreate} className="gap-2">
-              <Plus className="h-4 w-4" />
-              공정 등록
-            </Button>
-          </div>
-        }
-        searchValue={searchValue}
-        onSearchChange={handleSearchChange}
-        searchPlaceholder="공정코드, 공정명, 담당부서 검색"
-        tabs={tabOptions}
-        activeTab={activeTab}
-        onTabChange={handleTabChange}
-        tableColumns={tableColumns}
-        data={paginatedData}
-        allData={filteredProcesses}
-        selectedItems={selectedItems}
-        onToggleSelection={handleToggleSelection}
-        onToggleSelectAll={handleToggleSelectAll}
-        getItemId={(item) => item.id}
-        renderTableRow={renderTableRow}
-        renderMobileCard={renderMobileCard}
-        pagination={{
-          currentPage,
-          totalPages,
-          totalItems: filteredProcesses.length,
-          itemsPerPage,
-          onPageChange: setCurrentPage,
-        }}
-      />
+      <UniversalListPage config={config} initialData={allProcesses} />
 
       {/* 삭제 확인 다이얼로그 */}
       <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>공정 삭제</AlertDialogTitle>
-            <AlertDialogDescription>선택한 공정을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
+            <AlertDialogDescription>
+              선택한 공정을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
+            </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDeleteConfirm} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-              삭제
+            <AlertDialogCancel disabled={isLoading}>취소</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteConfirm}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                  삭제 중...
+                </>
+              ) : (
+                '삭제'
+              )}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>