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/settings/AccountManagement/index.tsx

@@ -1,5 +1,13 @@
 'use client';
 
+/**
+ * 계좌관리 - UniversalListPage 마이그레이션
+ *
+ * 기존 IntegratedListTemplateV2 → UniversalListPage config 기반으로 변환
+ * - 클라이언트 사이드 필터링 (전체 데이터 로드 후 필터)
+ * - 삭제/일괄삭제 다이얼로그
+ */
+
 import { useState, useMemo, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import {
@@ -25,9 +33,12 @@ import {
 } from '@/components/ui/alert-dialog';
 import { TableRow, TableCell } from '@/components/ui/table';
 import {
-  IntegratedListTemplateV2,
-  type TableColumn,
-} from '@/components/templates/IntegratedListTemplateV2';
+  UniversalListPage,
+  type UniversalListConfig,
+  type SelectionHandlers,
+  type RowClickHandlers,
+  type ListParams,
+} from '@/components/templates/UniversalListPage';
 import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
 import type { Account } from './types';
 import {
@@ -58,83 +69,16 @@ export function AccountManagement() {
   const router = useRouter();
 
   // ===== 상태 관리 =====
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
-  const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 20;
 
   // 로딩 상태
-  const [isLoading, setIsLoading] = useState(true);
   const [isDeleting, setIsDeleting] = useState(false);
 
   // 삭제 다이얼로그
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
   const [showBulkDeleteDialog, setShowBulkDeleteDialog] = useState(false);
-
-  // API 데이터
-  const [data, setData] = useState<Account[]>([]);
-
-  // ===== 데이터 로드 =====
-  const loadData = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const result = await getBankAccounts();
-      if (result.success && result.data) {
-        setData(result.data);
-      } else {
-        toast.error(result.error || '계좌 목록을 불러오는데 실패했습니다.');
-      }
-    } catch {
-      toast.error('서버 오류가 발생했습니다.');
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  // 초기 로드
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
-
-  // ===== 체크박스 핸들러 =====
-  const toggleSelection = useCallback((id: string) => {
-    setSelectedItems(prev => {
-      const newSet = new Set(prev);
-      if (newSet.has(id)) newSet.delete(id);
-      else newSet.add(id);
-      return newSet;
-    });
-  }, []);
-
-  // ===== 필터링된 데이터 =====
-  const filteredData = useMemo(() => {
-    if (!searchQuery) return data;
-
-    const search = searchQuery.toLowerCase();
-    return data.filter(item =>
-      item.accountName.toLowerCase().includes(search) ||
-      item.accountNumber.includes(search) ||
-      item.accountHolder.toLowerCase().includes(search) ||
-      BANK_LABELS[item.bankCode]?.toLowerCase().includes(search)
-    );
-  }, [data, searchQuery]);
-
-  const paginatedData = useMemo(() => {
-    const startIndex = (currentPage - 1) * itemsPerPage;
-    return filteredData.slice(startIndex, startIndex + itemsPerPage);
-  }, [filteredData, currentPage, itemsPerPage]);
-
-  const totalPages = Math.ceil(filteredData.length / itemsPerPage);
-
-  // ===== 전체 선택 핸들러 =====
-  const toggleSelectAll = useCallback(() => {
-    if (selectedItems.size === filteredData.length && filteredData.length > 0) {
-      setSelectedItems(new Set());
-    } else {
-      setSelectedItems(new Set(filteredData.map(item => String(item.id))));
-    }
-  }, [selectedItems.size, filteredData]);
+  const [bulkDeleteIds, setBulkDeleteIds] = useState<string[]>([]);
 
   // ===== 액션 핸들러 =====
   const handleRowClick = useCallback((item: Account) => {
@@ -158,12 +102,8 @@ export function AccountManagement() {
       const result = await deleteBankAccount(Number(deleteTargetId));
       if (result.success) {
         toast.success('계좌가 삭제되었습니다.');
-        setData(prev => prev.filter(item => String(item.id) !== deleteTargetId));
-        setSelectedItems(prev => {
-          const newSet = new Set(prev);
-          newSet.delete(deleteTargetId);
-          return newSet;
-        });
+        // 페이지 새로고침으로 데이터 갱신
+        window.location.reload();
       } else {
         toast.error(result.error || '계좌 삭제에 실패했습니다.');
       }
@@ -176,14 +116,15 @@ export function AccountManagement() {
     }
   }, [deleteTargetId]);
 
-  const handleBulkDelete = useCallback(() => {
-    if (selectedItems.size > 0) {
+  const handleBulkDelete = useCallback((selectedIds: string[]) => {
+    if (selectedIds.length > 0) {
+      setBulkDeleteIds(selectedIds);
       setShowBulkDeleteDialog(true);
     }
-  }, [selectedItems.size]);
+  }, []);
 
   const handleConfirmBulkDelete = useCallback(async () => {
-    const ids = Array.from(selectedItems).map(id => Number(id));
+    const ids = bulkDeleteIds.map(id => Number(id));
     setIsDeleting(true);
     try {
       const result = await deleteBankAccounts(ids);
@@ -192,8 +133,8 @@ export function AccountManagement() {
         if (result.error) {
           toast.warning(result.error);
         }
-        setData(prev => prev.filter(item => !selectedItems.has(String(item.id))));
-        setSelectedItems(new Set());
+        // 페이지 새로고침으로 데이터 갱신
+        window.location.reload();
       } else {
         toast.error(result.error || '계좌 삭제에 실패했습니다.');
       }
@@ -202,174 +143,210 @@ export function AccountManagement() {
     } finally {
       setIsDeleting(false);
       setShowBulkDeleteDialog(false);
+      setBulkDeleteIds([]);
     }
-  }, [selectedItems]);
+  }, [bulkDeleteIds]);
 
   const handleCreate = useCallback(() => {
     router.push('/ko/settings/accounts/new');
   }, [router]);
 
-  // ===== 테이블 컬럼 =====
-  const tableColumns: TableColumn[] = useMemo(() => [
-    { key: 'no', label: '번호', className: 'text-center w-[60px]' },
-    { key: 'bank', label: '은행', className: 'min-w-[100px]' },
-    { key: 'accountNumber', label: '계좌번호', className: 'min-w-[160px]' },
-    { key: 'accountName', label: '계좌명', className: 'min-w-[120px]' },
-    { key: 'accountHolder', label: '예금주', className: 'min-w-[80px]' },
-    { key: 'status', label: '상태', className: 'min-w-[80px]' },
-    { key: 'actions', label: '작업', className: 'w-[100px] text-right' },
-  ], []);
+  // ===== UniversalListPage Config =====
+  const config: UniversalListConfig<Account> = useMemo(
+    () => ({
+      // 페이지 기본 정보
+      title: '계좌관리',
+      description: '계좌 목록을 관리합니다',
+      icon: Landmark,
+      basePath: '/settings/accounts',
 
-  // ===== 테이블 행 렌더링 =====
-  const renderTableRow = useCallback((item: Account, index: number, globalIndex: number) => {
-    const itemIdStr = String(item.id);
-    const isSelected = selectedItems.has(itemIdStr);
+      // ID 추출
+      idField: 'id',
+      getItemId: (item: Account) => String(item.id),
 
-    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(itemIdStr)} />
-        </TableCell>
-        <TableCell className="text-muted-foreground text-center">{globalIndex}</TableCell>
-        <TableCell>{BANK_LABELS[item.bankCode] || item.bankCode}</TableCell>
-        <TableCell className="font-mono">{maskAccountNumber(item.accountNumber)}</TableCell>
-        <TableCell>{item.accountName}</TableCell>
-        <TableCell>{item.accountHolder}</TableCell>
-        <TableCell>
-          <Badge className={ACCOUNT_STATUS_COLORS[item.status]}>
-            {ACCOUNT_STATUS_LABELS[item.status]}
-          </Badge>
-        </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)}
-                title="수정"
-              >
-                <Pencil className="w-4 h-4" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => handleDeleteClick(itemIdStr)}
-                title="삭제"
-              >
-                <Trash2 className="w-4 h-4 text-red-500" />
-              </Button>
-            </div>
-          )}
-        </TableCell>
-      </TableRow>
-    );
-  }, [selectedItems, toggleSelection, handleRowClick, handleEdit, handleDeleteClick]);
+      // API 액션
+      actions: {
+        getList: async (params?: ListParams) => {
+          try {
+            const result = await getBankAccounts();
+            if (result.success && result.data) {
+              // 클라이언트 사이드 검색 필터링
+              let filteredData = result.data;
+              if (params?.search) {
+                const search = params.search.toLowerCase();
+                filteredData = result.data.filter(item =>
+                  item.accountName.toLowerCase().includes(search) ||
+                  item.accountNumber.includes(search) ||
+                  item.accountHolder.toLowerCase().includes(search) ||
+                  BANK_LABELS[item.bankCode]?.toLowerCase().includes(search)
+                );
+              }
 
-  // ===== 모바일 카드 렌더링 =====
-  const renderMobileCard = useCallback((
-    item: Account,
-    index: number,
-    globalIndex: number,
-    isSelected: boolean,
-    onToggle: () => void
-  ) => {
-    return (
-      <ListMobileCard
-        id={String(item.id)}
-        title={item.accountName}
-        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">
-              {BANK_LABELS[item.bankCode] || item.bankCode}
-            </span>
-          </div>
-        }
-        statusBadge={
-          <Badge className={ACCOUNT_STATUS_COLORS[item.status]}>
-            {ACCOUNT_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={maskAccountNumber(item.accountNumber)} />
-            <InfoField label="예금주" value={item.accountHolder} />
-          </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); }}
-              >
-                <Pencil 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(); handleDeleteClick(String(item.id)); }}
-              >
-                <Trash2 className="h-4 w-4 mr-2" />
-                삭제
-              </Button>
-            </div>
-          ) : undefined
-        }
-      />
-    );
-  }, [handleRowClick, handleEdit, handleDeleteClick]);
+              return {
+                success: true,
+                data: filteredData,
+                totalCount: filteredData.length,
+                totalPages: Math.ceil(filteredData.length / itemsPerPage),
+              };
+            }
+            return { success: false, error: result.error || '계좌 목록을 불러오는데 실패했습니다.' };
+          } catch {
+            return { success: false, error: '서버 오류가 발생했습니다.' };
+          }
+        },
+      },
 
-  // ===== 헤더 액션 (카드관리와 동일한 패턴) =====
-  const headerActions = (
-    <Button className="ml-auto" onClick={handleCreate}>
-      <Plus className="w-4 h-4 mr-2" />
-      계좌 등록
-    </Button>
+      // 테이블 컬럼
+      columns: [
+        { key: 'no', label: '번호', className: 'text-center w-[60px]' },
+        { key: 'bank', label: '은행', className: 'min-w-[100px]' },
+        { key: 'accountNumber', label: '계좌번호', className: 'min-w-[160px]' },
+        { key: 'accountName', label: '계좌명', className: 'min-w-[120px]' },
+        { key: 'accountHolder', label: '예금주', className: 'min-w-[80px]' },
+        { key: 'status', label: '상태', className: 'min-w-[80px]' },
+        { key: 'actions', label: '작업', className: 'w-[100px] text-right' },
+      ],
+
+      // 클라이언트 사이드 필터링
+      clientSideFiltering: true,
+      itemsPerPage,
+
+      // 검색
+      searchPlaceholder: '은행명, 계좌번호, 계좌명, 예금주 검색...',
+
+      // 헤더 액션
+      headerActions: () => (
+        <Button className="ml-auto" onClick={handleCreate}>
+          <Plus className="w-4 h-4 mr-2" />
+          계좌 등록
+        </Button>
+      ),
+
+      // 일괄 삭제 핸들러
+      onBulkDelete: handleBulkDelete,
+
+      // 테이블 행 렌더링
+      renderTableRow: (
+        item: Account,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<Account>
+      ) => {
+        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={handlers.isSelected} onCheckedChange={handlers.onToggle} />
+            </TableCell>
+            <TableCell className="text-muted-foreground text-center">{globalIndex}</TableCell>
+            <TableCell>{BANK_LABELS[item.bankCode] || item.bankCode}</TableCell>
+            <TableCell className="font-mono">{maskAccountNumber(item.accountNumber)}</TableCell>
+            <TableCell>{item.accountName}</TableCell>
+            <TableCell>{item.accountHolder}</TableCell>
+            <TableCell>
+              <Badge className={ACCOUNT_STATUS_COLORS[item.status]}>
+                {ACCOUNT_STATUS_LABELS[item.status]}
+              </Badge>
+            </TableCell>
+            <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
+              {handlers.isSelected && (
+                <div className="flex items-center justify-end gap-1">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleEdit(item)}
+                    title="수정"
+                  >
+                    <Pencil className="w-4 h-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleDeleteClick(String(item.id))}
+                    title="삭제"
+                  >
+                    <Trash2 className="w-4 h-4 text-red-500" />
+                  </Button>
+                </div>
+              )}
+            </TableCell>
+          </TableRow>
+        );
+      },
+
+      // 모바일 카드 렌더링
+      renderMobileCard: (
+        item: Account,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<Account>
+      ) => {
+        return (
+          <ListMobileCard
+            key={item.id}
+            id={String(item.id)}
+            title={item.accountName}
+            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">
+                  {BANK_LABELS[item.bankCode] || item.bankCode}
+                </span>
+              </div>
+            }
+            statusBadge={
+              <Badge className={ACCOUNT_STATUS_COLORS[item.status]}>
+                {ACCOUNT_STATUS_LABELS[item.status]}
+              </Badge>
+            }
+            isSelected={handlers.isSelected}
+            onToggleSelection={handlers.onToggle}
+            onClick={() => handleRowClick(item)}
+            infoGrid={
+              <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+                <InfoField label="계좌번호" value={maskAccountNumber(item.accountNumber)} />
+                <InfoField label="예금주" value={item.accountHolder} />
+              </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(); handleEdit(item); }}
+                  >
+                    <Pencil 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(); handleDeleteClick(String(item.id)); }}
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    삭제
+                  </Button>
+                </div>
+              ) : undefined
+            }
+          />
+        );
+      },
+    }),
+    [handleCreate, handleRowClick, handleEdit, handleDeleteClick, handleBulkDelete]
   );
 
   return (
     <>
-      <IntegratedListTemplateV2
-        title="계좌관리"
-        description="계좌 목록을 관리합니다"
-        icon={Landmark}
-        headerActions={headerActions}
-        searchValue={searchQuery}
-        onSearchChange={setSearchQuery}
-        searchPlaceholder="은행명, 계좌번호, 계좌명, 예금주 검색..."
-        tableColumns={tableColumns}
-        data={paginatedData}
-        totalCount={filteredData.length}
-        allData={filteredData}
-        selectedItems={selectedItems}
-        onToggleSelection={toggleSelection}
-        onToggleSelectAll={toggleSelectAll}
-        getItemId={(item: Account) => String(item.id)}
-        renderTableRow={renderTableRow}
-        renderMobileCard={renderMobileCard}
-        pagination={{
-          currentPage,
-          totalPages,
-          totalItems: filteredData.length,
-          itemsPerPage,
-          onPageChange: setCurrentPage,
-        }}
-      />
+      <UniversalListPage config={config} />
 
       {/* 단일 삭제 확인 다이얼로그 */}
       <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
@@ -408,7 +385,7 @@ export function AccountManagement() {
           <AlertDialogHeader>
             <AlertDialogTitle>계좌 삭제</AlertDialogTitle>
             <AlertDialogDescription>
-              선택하신 {selectedItems.size}개의 계좌를 정말 삭제하시겠습니까?
+              선택하신 {bulkDeleteIds.length}개의 계좌를 정말 삭제하시겠습니까?
               <br />
               <span className="text-muted-foreground text-sm">
                 삭제된 계좌의 과거 사용 내역은 보존됩니다.
@@ -434,4 +411,4 @@ export function AccountManagement() {
       </AlertDialog>
     </>
   );
-}
+}