feat(WEB): UniversalListPage 전체 마이그레이션 및 코드 정리

- UniversalListPage/IntegratedListTemplateV2 컴포넌트 기능 개선
- 회계, HR, 건설, 고객센터, 결재, 설정 등 전체 리스트 컴포넌트 마이그레이션
- 테스트 페이지 및 미사용 API 라우트 정리 (board-test, order-management-test 등)
- 미들웨어 토큰 갱신 로직 개선
- AuthenticatedLayout 구조 개선
- claudedocs 문서 업데이트

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

src/components/items/ItemListClient.tsx

@@ -1,9 +1,9 @@
 /**
- * 품목 목록 Client Component
+ * 품목 목록 Client Component - UniversalListPage 마이그레이션
  *
  * 품목기준관리 API 연동
  * - 품목 목록: useItemList 훅으로 API 조회 (서버 사이드 검색/필터링)
- * - IntegratedListTemplateV2 기반 공통 UI 적용
+ * - UniversalListPage 기반 공통 UI 적용
  */
 
 'use client';
@@ -26,17 +26,19 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import { Search, Plus, Edit, Trash2, Package, Loader2 } from 'lucide-react';
+import { Search, Plus, Edit, Trash2, Package } from 'lucide-react';
 import { TableLoadingSpinner } from '@/components/ui/loading-spinner';
 import { useItemList } from '@/hooks/useItemList';
 import { handleApiError } from '@/lib/api/error-handler';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import {
-  IntegratedListTemplateV2,
+  UniversalListPage,
+  type UniversalListConfig,
+  type SelectionHandlers,
+  type RowClickHandlers,
   type TabOption,
-  type TableColumn,
   type StatCard,
-} from '@/components/templates/IntegratedListTemplateV2';
+} from '@/components/templates/UniversalListPage';
 import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
 
 // Debounce 훅
@@ -89,7 +91,6 @@ export default function ItemListClient() {
   const router = useRouter();
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedType, setSelectedType] = useState<string>('all');
-  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
 
   // 삭제 다이얼로그 상태
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -208,35 +209,13 @@ export default function ItemListClient() {
     }
   };
 
-  // 체크박스 전체 선택/해제
-  const toggleSelectAll = () => {
-    if (selectedItems.size === items.length && items.length > 0) {
-      setSelectedItems(new Set());
-    } else {
-      const allIds = new Set(items.map((item) => item.id));
-      setSelectedItems(allIds);
-    }
-  };
-
-  // 개별 체크박스 선택/해제
-  const toggleSelection = (itemId: string) => {
-    const newSelected = new Set(selectedItems);
-    if (newSelected.has(itemId)) {
-      newSelected.delete(itemId);
-    } else {
-      newSelected.add(itemId);
-    }
-    setSelectedItems(newSelected);
-  };
-
   // 일괄 삭제 핸들러
   // 2025-12-15: 백엔드 동적 테이블 라우팅으로 모든 품목에 item_type 필수
-  const handleBulkDelete = async () => {
-    const itemIds = Array.from(selectedItems);
+  const handleBulkDelete = async (selectedIds: string[]) => {
     let successCount = 0;
     let failCount = 0;
 
-    for (const id of itemIds) {
+    for (const id of selectedIds) {
       try {
         // 해당 품목의 itemType 찾기
         const item = items.find((i) => i.id === id);
@@ -267,7 +246,6 @@ export default function ItemListClient() {
 
     if (successCount > 0) {
       alert(`${successCount}개 품목이 삭제되었습니다.${failCount > 0 ? ` (${failCount}개 실패)` : ''}`);
-      setSelectedItems(new Set());
       refresh();
     } else {
       alert('품목 삭제에 실패했습니다.');
@@ -294,218 +272,228 @@ export default function ItemListClient() {
     { label: '소모품', value: totalStats.totalCS, icon: Package, iconColor: 'text-gray-600' },
   ];
 
-  // 테이블 컬럼 정의
-  const tableColumns: TableColumn[] = [
-    { key: 'rowNumber', label: '번호', className: 'w-[60px] text-center' },
-    { key: 'itemCode', label: '품목코드', className: 'min-w-[120px]' },
-    { key: 'itemType', label: '품목유형', className: 'min-w-[100px]' },
-    { key: 'itemName', label: '품목명', className: 'min-w-[150px]' },
-    { key: 'specification', label: '규격', className: 'min-w-[100px]' },
-    { key: 'unit', label: '단위', className: 'min-w-[60px]' },
-    { key: 'status', label: '품목상태', className: 'min-w-[80px]' },
-    { key: 'actions', label: '작업', className: 'w-[120px] text-right' },
-  ];
+  // UniversalListPage Config
+  const config: UniversalListConfig<ItemMaster> = {
+    // 페이지 기본 정보
+    title: '품목 관리',
+    description: '제품, 부품, 부자재, 원자재, 소모품 등록 및 관리',
+    icon: Package,
+    basePath: '/items',
 
-  // 테이블 행 렌더링
-  const renderTableRow = (item: ItemMaster, index: number, globalIndex: number) => {
-    const isSelected = selectedItems.has(item.id);
+    // ID 추출
+    idField: 'id',
 
-    return (
-      <TableRow key={item.id} className="hover:bg-muted/50">
-        <TableCell className="text-center">
-          <Checkbox
-            checked={isSelected}
-            onCheckedChange={() => toggleSelection(item.id)}
-          />
-        </TableCell>
-        <TableCell className="text-muted-foreground text-center">
-          {globalIndex}
-        </TableCell>
-        <TableCell>
-          <code className="text-xs bg-gray-100 px-2 py-1 rounded">
-            {item.itemCode || '-'}
-          </code>
-        </TableCell>
-        <TableCell>
-          <div className="flex items-center gap-1 flex-wrap">
-            {getItemTypeBadge(item.itemType)}
-            {item.itemType === 'PT' && item.partType && (
-              <Badge variant="outline" className="bg-purple-50 text-purple-700 text-xs">
-                {getPartTypeLabel(item.partType)}
-              </Badge>
-            )}
-          </div>
-        </TableCell>
-        <TableCell>
-          <span className="truncate max-w-[200px] block">
-            {item.itemName}
-          </span>
-        </TableCell>
-        <TableCell className="text-muted-foreground">
-          {item.specification || '-'}
-        </TableCell>
-        <TableCell>
-          <Badge variant="secondary">{item.unit || '-'}</Badge>
-        </TableCell>
-        <TableCell>
-          <Badge variant={item.isActive ? 'default' : 'secondary'}>
-            {item.isActive ? '활성' : '비활성'}
-          </Badge>
-        </TableCell>
-        <TableCell className="text-right">
-          <div className="flex items-center justify-end gap-1">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={(e) => { e.stopPropagation(); handleView(item.itemCode, item.itemType, item.id); }}
-              title="상세 보기"
-            >
-              <Search className="w-4 h-4" />
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={(e) => { e.stopPropagation(); handleEdit(item.itemCode, item.itemType, item.id); }}
-              title="수정"
-            >
-              <Edit className="w-4 h-4" />
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={(e) => { e.stopPropagation(); openDeleteDialog(item.id, item.itemCode, item.itemType); }}
-              title="삭제"
-            >
-              <Trash2 className="w-4 h-4 text-red-500" />
-            </Button>
-          </div>
-        </TableCell>
-      </TableRow>
-    );
-  };
+    // 테이블 컬럼
+    columns: [
+      { key: 'rowNumber', label: '번호', className: 'w-[60px] text-center' },
+      { key: 'itemCode', label: '품목코드', className: 'min-w-[120px]' },
+      { key: 'itemType', label: '품목유형', className: 'min-w-[100px]' },
+      { key: 'itemName', label: '품목명', className: 'min-w-[150px]' },
+      { key: 'specification', label: '규격', className: 'min-w-[100px]' },
+      { key: 'unit', label: '단위', className: 'min-w-[60px]' },
+      { key: 'status', label: '품목상태', className: 'min-w-[80px]' },
+      { key: 'actions', label: '작업', className: 'w-[120px] text-right' },
+    ],
 
-  // 모바일 카드 렌더링
-  const renderMobileCard = (
-    item: ItemMaster,
-    index: number,
-    globalIndex: number,
-    isSelected: boolean,
-    onToggle: () => void
-  ) => {
-    return (
-      <ListMobileCard
-        id={item.id}
-        title={item.itemName}
-        headerBadges={
-          <div className="flex items-center gap-2 flex-wrap">
+    // 클라이언트 사이드 필터링 (외부 useItemList 훅 사용)
+    clientSideFiltering: true,
+    itemsPerPage: pagination.perPage,
+
+    // 검색
+    searchPlaceholder: '품목코드, 품목명, 규격 검색...',
+
+    // 탭 설정
+    tabs,
+    defaultTab: 'all',
+
+    // 통계 카드
+    stats,
+
+    // 등록 버튼 (createButton 사용 - headerActions 대신)
+    createButton: {
+      label: '품목 등록',
+      onClick: () => router.push('/items/create'),
+      icon: Plus,
+    },
+
+    // API 액션 (일괄 삭제 포함)
+    actions: {
+      getList: async () => ({ success: true, data: items }),
+      deleteBulk: async (ids: string[]) => {
+        await handleBulkDelete(ids);
+        return { success: true };
+      },
+    },
+
+    // 테이블 행 렌더링
+    renderTableRow: (
+      item: ItemMaster,
+      index: number,
+      globalIndex: number,
+      handlers: SelectionHandlers & RowClickHandlers<ItemMaster>
+    ) => {
+      return (
+        <TableRow key={item.id} className="hover:bg-muted/50">
+          <TableCell className="text-center">
+            <Checkbox
+              checked={handlers.isSelected}
+              onCheckedChange={handlers.onToggle}
+            />
+          </TableCell>
+          <TableCell className="text-muted-foreground text-center">
+            {globalIndex}
+          </TableCell>
+          <TableCell>
             <code className="text-xs bg-gray-100 px-2 py-1 rounded">
-              {item.itemCode}
+              {item.itemCode || '-'}
             </code>
-            {getItemTypeBadge(item.itemType)}
-            {item.itemType === 'PT' && item.partType && (
-              <Badge variant="outline" className="bg-purple-50 text-purple-700 text-xs">
-                {getPartTypeLabel(item.partType)}
-              </Badge>
-            )}
-          </div>
-        }
-        statusBadge={
-          <Badge variant={item.isActive ? 'default' : 'secondary'}>
-            {item.isActive ? '활성' : '비활성'}
-          </Badge>
-        }
-        isSelected={isSelected}
-        onToggleSelection={onToggle}
-        onCardClick={() => handleView(item.itemCode, item.itemType, item.id)}
-        infoGrid={
-          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
-            {item.specification && (
-              <InfoField label="규격" value={item.specification} />
-            )}
-            {item.unit && (
-              <InfoField label="단위" value={item.unit} />
-            )}
-          </div>
-        }
-        actions={
-          isSelected ? (
-            <div className="flex gap-2 flex-wrap">
+          </TableCell>
+          <TableCell>
+            <div className="flex items-center gap-1 flex-wrap">
+              {getItemTypeBadge(item.itemType)}
+              {item.itemType === 'PT' && item.partType && (
+                <Badge variant="outline" className="bg-purple-50 text-purple-700 text-xs">
+                  {getPartTypeLabel(item.partType)}
+                </Badge>
+              )}
+            </div>
+          </TableCell>
+          <TableCell>
+            <span className="truncate max-w-[200px] block">
+              {item.itemName}
+            </span>
+          </TableCell>
+          <TableCell className="text-muted-foreground">
+            {item.specification || '-'}
+          </TableCell>
+          <TableCell>
+            <Badge variant="secondary">{item.unit || '-'}</Badge>
+          </TableCell>
+          <TableCell>
+            <Badge variant={item.isActive ? 'default' : 'secondary'}>
+              {item.isActive ? '활성' : '비활성'}
+            </Badge>
+          </TableCell>
+          <TableCell className="text-right">
+            <div className="flex items-center justify-end gap-1">
               <Button
-                variant="default"
-                size="default"
-                className="flex-1 min-w-[100px] h-11"
+                variant="ghost"
+                size="sm"
                 onClick={(e) => { e.stopPropagation(); handleView(item.itemCode, item.itemType, item.id); }}
+                title="상세 보기"
               >
-                <Search className="h-4 w-4 mr-2" />
-                상세
+                <Search className="w-4 h-4" />
               </Button>
               <Button
-                variant="default"
-                size="default"
-                className="flex-1 min-w-[100px] h-11"
+                variant="ghost"
+                size="sm"
                 onClick={(e) => { e.stopPropagation(); handleEdit(item.itemCode, item.itemType, item.id); }}
+                title="수정"
               >
-                <Edit className="h-4 w-4 mr-2" />
-                수정
+                <Edit className="w-4 h-4" />
               </Button>
               <Button
-                variant="outline"
-                size="default"
-                className="flex-1 min-w-[100px] h-11 border-red-200 text-red-600 hover:border-red-300 bg-[rgba(255,255,255,0)]"
+                variant="ghost"
+                size="sm"
                 onClick={(e) => { e.stopPropagation(); openDeleteDialog(item.id, item.itemCode, item.itemType); }}
+                title="삭제"
               >
-                <Trash2 className="h-4 w-4 mr-2" />
-                삭제
+                <Trash2 className="w-4 h-4 text-red-500" />
               </Button>
             </div>
-          ) : undefined
-        }
-      />
-    );
-  };
+          </TableCell>
+        </TableRow>
+      );
+    },
 
-  // 헤더 액션 (검색 중 로딩 + 품목 등록 버튼)
-  const headerActions = (
-    <div className="flex items-center gap-2 ml-auto">
-      {isSearching && (
-        <div className="flex items-center gap-2 text-muted-foreground">
-          <Loader2 className="h-4 w-4 animate-spin" />
-          <span className="text-sm hidden sm:inline">검색 중...</span>
-        </div>
-      )}
-      <Button onClick={() => router.push('/items/create')}>
-        <Plus className="w-4 h-4 mr-2" />
-        품목 등록
-      </Button>
-    </div>
-  );
+    // 모바일 카드 렌더링
+    renderMobileCard: (
+      item: ItemMaster,
+      index: number,
+      globalIndex: number,
+      handlers: SelectionHandlers & RowClickHandlers<ItemMaster>
+    ) => {
+      return (
+        <ListMobileCard
+          key={item.id}
+          id={item.id}
+          title={item.itemName}
+          headerBadges={
+            <div className="flex items-center gap-2 flex-wrap">
+              <code className="text-xs bg-gray-100 px-2 py-1 rounded">
+                {item.itemCode}
+              </code>
+              {getItemTypeBadge(item.itemType)}
+              {item.itemType === 'PT' && item.partType && (
+                <Badge variant="outline" className="bg-purple-50 text-purple-700 text-xs">
+                  {getPartTypeLabel(item.partType)}
+                </Badge>
+              )}
+            </div>
+          }
+          statusBadge={
+            <Badge variant={item.isActive ? 'default' : 'secondary'}>
+              {item.isActive ? '활성' : '비활성'}
+            </Badge>
+          }
+          isSelected={handlers.isSelected}
+          onToggleSelection={handlers.onToggle}
+          onClick={() => handleView(item.itemCode, item.itemType, item.id)}
+          infoGrid={
+            <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+              {item.specification && (
+                <InfoField label="규격" value={item.specification} />
+              )}
+              {item.unit && (
+                <InfoField label="단위" value={item.unit} />
+              )}
+            </div>
+          }
+          actions={
+            handlers.isSelected ? (
+              <div className="flex gap-2 flex-wrap">
+                <Button
+                  variant="default"
+                  size="default"
+                  className="flex-1 min-w-[100px] h-11"
+                  onClick={(e) => { e.stopPropagation(); handleView(item.itemCode, item.itemType, item.id); }}
+                >
+                  <Search className="h-4 w-4 mr-2" />
+                  상세
+                </Button>
+                <Button
+                  variant="default"
+                  size="default"
+                  className="flex-1 min-w-[100px] h-11"
+                  onClick={(e) => { e.stopPropagation(); handleEdit(item.itemCode, item.itemType, item.id); }}
+                >
+                  <Edit className="h-4 w-4 mr-2" />
+                  수정
+                </Button>
+                <Button
+                  variant="outline"
+                  size="default"
+                  className="flex-1 min-w-[100px] h-11 border-red-200 text-red-600 hover:border-red-300 bg-[rgba(255,255,255,0)]"
+                  onClick={(e) => { e.stopPropagation(); openDeleteDialog(item.id, item.itemCode, item.itemType); }}
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  삭제
+                </Button>
+              </div>
+            ) : undefined
+          }
+        />
+      );
+    },
+  };
 
   return (
     <>
-      <IntegratedListTemplateV2<ItemMaster>
-        title="품목 관리"
-        description="제품, 부품, 부자재, 원자재, 소모품 등록 및 관리"
-        icon={Package}
-        headerActions={headerActions}
-        stats={stats}
-        searchValue={searchTerm}
-        onSearchChange={setSearchTerm}
-        searchPlaceholder="품목코드, 품목명, 규격 검색..."
-        tabs={tabs}
-        activeTab={selectedType}
+      <UniversalListPage
+        config={config}
+        initialData={items}
         onTabChange={handleTypeChange}
-        tableColumns={tableColumns}
-        data={items}
-        totalCount={pagination.totalItems}
-        allData={items}
-        selectedItems={selectedItems}
-        onToggleSelection={toggleSelection}
-        onToggleSelectAll={toggleSelectAll}
-        onBulkDelete={handleBulkDelete}
-        getItemId={(item) => item.id}
-        renderTableRow={renderTableRow}
-        renderMobileCard={renderMobileCard}
-        pagination={{
+        externalPagination={{
           currentPage: pagination.currentPage,
           totalPages: pagination.totalPages,
           totalItems: pagination.totalItems,