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/hr/CardManagement/index.tsx

@@ -18,10 +18,10 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import {
-  IntegratedListTemplateV2,
+  UniversalListPage,
+  type UniversalListConfig,
   type TabOption,
-  type TableColumn,
-} from '@/components/templates/IntegratedListTemplateV2';
+} from '@/components/templates/UniversalListPage';
 import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
 import { toast } from 'sonner';
 import type { Card } from './types';
@@ -121,7 +121,7 @@ export function CardManagement({ initialData }: CardManagementProps) {
   ], [cards.length, stats]);
 
   // 테이블 컬럼 정의
-  const tableColumns: TableColumn[] = useMemo(() => [
+  const tableColumns = useMemo(() => [
     { key: 'rowNumber', label: '번호', className: 'w-[60px] text-center' },
     { key: 'cardCompany', label: '카드사', className: 'min-w-[100px]' },
     { key: 'cardNumber', label: '카드번호', className: 'min-w-[160px]' },
@@ -201,174 +201,184 @@ export function CardManagement({ initialData }: CardManagementProps) {
     setDeleteDialogOpen(true);
   }, []);
 
-  // 테이블 행 렌더링
-  const renderTableRow = useCallback((item: Card, index: number, globalIndex: number) => {
-    const isSelected = selectedItems.has(item.id);
+  // ===== UniversalListPage 설정 =====
+  const cardManagementConfig: UniversalListConfig<Card> = useMemo(() => ({
+    title: '카드관리',
+    description: '카드 목록을 관리합니다',
+    icon: CreditCard,
+    basePath: '/hr/card-management',
 
-    return (
-      <TableRow
-        key={item.id}
-        className="hover:bg-muted/50 cursor-pointer"
-        onClick={() => handleRowClick(item)}
-      >
-        <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
-          <Checkbox
-            checked={isSelected}
-            onCheckedChange={() => toggleSelection(item.id)}
-          />
-        </TableCell>
-        <TableCell className="text-muted-foreground text-center">
-          {globalIndex}
-        </TableCell>
-        <TableCell>{getCardCompanyLabel(item.cardCompany)}</TableCell>
-        <TableCell className="font-mono">{maskCardNumber(item.cardNumber)}</TableCell>
-        <TableCell>{item.cardName}</TableCell>
-        <TableCell>
-          <Badge className={CARD_STATUS_COLORS[item.status]}>
-            {CARD_STATUS_LABELS[item.status]}
-          </Badge>
-        </TableCell>
-        <TableCell>{item.user?.departmentName || '-'}</TableCell>
-        <TableCell>{item.user?.employeeName || '-'}</TableCell>
-        <TableCell>{item.user?.positionName || '-'}</TableCell>
-        <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
-          {isSelected && (
-            <div className="flex items-center justify-end gap-1">
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => handleEdit(item.id)}
-                title="수정"
-              >
-                <Edit className="w-4 h-4" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => openDeleteDialog(item)}
-                title="삭제"
-              >
-                <Trash2 className="w-4 h-4 text-red-500" />
-              </Button>
-            </div>
-          )}
-        </TableCell>
-      </TableRow>
-    );
-  }, [selectedItems, toggleSelection, handleRowClick, handleEdit, openDeleteDialog]);
+    idField: 'id',
 
-  // 모바일 카드 렌더링
-  const renderMobileCard = useCallback((
-    item: Card,
-    index: number,
-    globalIndex: number,
-    isSelected: boolean,
-    onToggle: () => void
-  ) => {
-    return (
-      <ListMobileCard
-        id={item.id}
-        title={item.cardName}
-        headerBadges={
-          <div className="flex items-center gap-2 flex-wrap">
-            <Badge variant="outline" className="text-xs">
-              #{globalIndex}
+    actions: {
+      getList: async () => ({
+        success: true,
+        data: cards,
+        totalCount: cards.length,
+      }),
+      deleteBulk: async (ids) => {
+        const result = await deleteCards(ids);
+        if (result.success) {
+          setCards(prev => prev.filter(card => !ids.includes(card.id)));
+          setSelectedItems(new Set());
+          toast.success('선택한 카드가 삭제되었습니다.');
+        } else {
+          toast.error(result.error || '삭제에 실패했습니다.');
+        }
+        return result;
+      },
+    },
+
+    columns: tableColumns,
+
+    tabs: tabs,
+    defaultTab: activeTab,
+
+    createButton: {
+      label: '카드 등록',
+      icon: Plus,
+      onClick: handleAddCard,
+    },
+
+    searchPlaceholder: '카드명, 카드번호, 카드사, 사용자 검색...',
+
+    itemsPerPage: itemsPerPage,
+
+    clientSideFiltering: true,
+
+    searchFilter: (item, searchValue) => {
+      const search = searchValue.toLowerCase();
+      return (
+        item.cardName.toLowerCase().includes(search) ||
+        item.cardNumber.includes(search) ||
+        getCardCompanyLabel(item.cardCompany).toLowerCase().includes(search) ||
+        (item.user?.employeeName?.toLowerCase().includes(search) ?? false)
+      );
+    },
+
+    tabFilter: (item, activeTab) => {
+      if (activeTab === 'all') return true;
+      return item.status === activeTab;
+    },
+
+    renderTableRow: (item, index, globalIndex, handlers) => {
+      const { isSelected, onToggle, onRowClick } = handlers;
+
+      return (
+        <TableRow
+          key={item.id}
+          className="hover:bg-muted/50 cursor-pointer"
+          onClick={() => handleRowClick(item)}
+        >
+          <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+            <Checkbox
+              checked={isSelected}
+              onCheckedChange={onToggle}
+            />
+          </TableCell>
+          <TableCell className="text-muted-foreground text-center">
+            {globalIndex}
+          </TableCell>
+          <TableCell>{getCardCompanyLabel(item.cardCompany)}</TableCell>
+          <TableCell className="font-mono">{maskCardNumber(item.cardNumber)}</TableCell>
+          <TableCell>{item.cardName}</TableCell>
+          <TableCell>
+            <Badge className={CARD_STATUS_COLORS[item.status]}>
+              {CARD_STATUS_LABELS[item.status]}
             </Badge>
-            <span className="text-xs text-muted-foreground">
-              {getCardCompanyLabel(item.cardCompany)}
-            </span>
-          </div>
-        }
-        statusBadge={
-          <Badge className={CARD_STATUS_COLORS[item.status]}>
-            {CARD_STATUS_LABELS[item.status]}
-          </Badge>
-        }
-        isSelected={isSelected}
-        onToggleSelection={onToggle}
-        onCardClick={() => handleRowClick(item)}
-        infoGrid={
-          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
-            <InfoField label="카드번호" value={maskCardNumber(item.cardNumber)} />
-            <InfoField label="유효기간" value={`${item.expiryDate.slice(0, 2)}/${item.expiryDate.slice(2)}`} />
-            <InfoField label="부서" value={item.user?.departmentName || '-'} />
-            <InfoField label="사용자" value={item.user?.employeeName || '-'} />
-            <InfoField label="직책" value={item.user?.positionName || '-'} />
-          </div>
-        }
-        actions={
-          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(); handleEdit(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-transparent"
-                onClick={(e) => { e.stopPropagation(); openDeleteDialog(item); }}
-              >
-                <Trash2 className="h-4 w-4 mr-2" />
-                삭제
-              </Button>
+          </TableCell>
+          <TableCell>{item.user?.departmentName || '-'}</TableCell>
+          <TableCell>{item.user?.employeeName || '-'}</TableCell>
+          <TableCell>{item.user?.positionName || '-'}</TableCell>
+          <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
+            {isSelected && (
+              <div className="flex items-center justify-end gap-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleEdit(item.id)}
+                  title="수정"
+                >
+                  <Edit className="w-4 h-4" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => openDeleteDialog(item)}
+                  title="삭제"
+                >
+                  <Trash2 className="w-4 h-4 text-red-500" />
+                </Button>
+              </div>
+            )}
+          </TableCell>
+        </TableRow>
+      );
+    },
+
+    renderMobileCard: (item, index, globalIndex, handlers) => {
+      const { isSelected, onToggle } = handlers;
+
+      return (
+        <ListMobileCard
+          id={item.id}
+          title={item.cardName}
+          headerBadges={
+            <div className="flex items-center gap-2 flex-wrap">
+              <Badge variant="outline" className="text-xs">
+                #{globalIndex}
+              </Badge>
+              <span className="text-xs text-muted-foreground">
+                {getCardCompanyLabel(item.cardCompany)}
+              </span>
             </div>
-          ) : undefined
-        }
-      />
-    );
-  }, [handleRowClick, handleEdit, openDeleteDialog]);
+          }
+          statusBadge={
+            <Badge className={CARD_STATUS_COLORS[item.status]}>
+              {CARD_STATUS_LABELS[item.status]}
+            </Badge>
+          }
+          isSelected={isSelected}
+          onToggleSelection={onToggle}
+          onCardClick={() => handleRowClick(item)}
+          infoGrid={
+            <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+              <InfoField label="카드번호" value={maskCardNumber(item.cardNumber)} />
+              <InfoField label="유효기간" value={`${item.expiryDate.slice(0, 2)}/${item.expiryDate.slice(2)}`} />
+              <InfoField label="부서" value={item.user?.departmentName || '-'} />
+              <InfoField label="사용자" value={item.user?.employeeName || '-'} />
+              <InfoField label="직책" value={item.user?.positionName || '-'} />
+            </div>
+          }
+          actions={
+            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(); handleEdit(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-transparent"
+                  onClick={(e) => { e.stopPropagation(); openDeleteDialog(item); }}
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  삭제
+                </Button>
+              </div>
+            ) : undefined
+          }
+        />
+      );
+    },
 
-  // 헤더 액션
-  const headerActions = (
-    <Button className="ml-auto" onClick={handleAddCard}>
-      <Plus className="w-4 h-4 mr-2" />
-      카드 등록
-    </Button>
-  );
-
-  // 페이지네이션 설정
-  const totalPages = Math.ceil(filteredCards.length / itemsPerPage);
-
-  return (
-    <>
-      <IntegratedListTemplateV2<Card>
-        title="카드관리"
-        description="카드 목록을 관리합니다"
-        icon={CreditCard}
-        headerActions={headerActions}
-        searchValue={searchValue}
-        onSearchChange={setSearchValue}
-        searchPlaceholder="카드명, 카드번호, 카드사, 사용자 검색..."
-        tabs={tabs}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-        tableColumns={tableColumns}
-        data={paginatedData}
-        totalCount={filteredCards.length}
-        allData={filteredCards}
-        selectedItems={selectedItems}
-        onToggleSelection={toggleSelection}
-        onToggleSelectAll={toggleSelectAll}
-        onBulkDelete={handleBulkDelete}
-        getItemId={(item) => item.id}
-        renderTableRow={renderTableRow}
-        renderMobileCard={renderMobileCard}
-        pagination={{
-          currentPage,
-          totalPages,
-          totalItems: filteredCards.length,
-          itemsPerPage,
-          onPageChange: setCurrentPage,
-        }}
-      />
-
-      {/* 삭제 확인 다이얼로그 */}
+    renderDialogs: () => (
       <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
@@ -392,6 +402,26 @@ export function CardManagement({ initialData }: CardManagementProps) {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </>
+    ),
+  }), [
+    cards,
+    tableColumns,
+    tabs,
+    activeTab,
+    handleAddCard,
+    handleRowClick,
+    handleEdit,
+    openDeleteDialog,
+    deleteDialogOpen,
+    cardToDelete,
+    handleDeleteCard,
+  ]);
+
+  return (
+    <UniversalListPage<Card>
+      config={cardManagementConfig}
+      initialData={cards}
+      initialTotalCount={cards.length}
+    />
   );
 }