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/accounting/ExpectedExpenseManagement/index.tsx

@@ -1,5 +1,16 @@
 'use client';
 
+/**
+ * 지출 예상 내역서 - UniversalListPage 마이그레이션
+ *
+ * 기존 IntegratedListTemplateV2 → UniversalListPage config 기반으로 변환
+ * - 월별 그룹핑 테이블 (헤더, 소계, 합계 행 포함)
+ * - 등록/수정 폼 다이얼로그
+ * - 예상 지급일 변경 다이얼로그
+ * - 일괄 삭제 다이얼로그
+ * - 외부 선택 상태 관리 (데이터 행만 선택 가능)
+ */
+
 import { useState, useMemo, useCallback, useTransition, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { format } from 'date-fns';
@@ -42,11 +53,12 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import {
-  IntegratedListTemplateV2,
-  type TableColumn,
+  UniversalListPage,
+  type UniversalListConfig,
+  type SelectionHandlers,
+  type RowClickHandlers,
   type StatCard,
-} from '@/components/templates/IntegratedListTemplateV2';
-import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
+} from '@/components/templates/UniversalListPage';
 import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
 import type {
   ExpectedExpenseRecord,
@@ -550,20 +562,8 @@ export function ExpectedExpenseManagement({
     return { label, totalAmount };
   }, [data, selectedItems]);
 
-  // ===== 통계 카드 =====
-  const statCards: StatCard[] = useMemo(() => {
-    const totalExpense = filteredRawData.reduce((sum, d) => sum + d.amount, 0);
-    const expectedBalance = 10000000;
-
-    return [
-      { label: '지출 합계', value: `${totalExpense.toLocaleString()}원`, icon: Receipt, iconColor: 'text-red-500' },
-      { label: '예상 잔액', value: `${expectedBalance.toLocaleString()}원`, icon: Receipt, iconColor: 'text-blue-500' },
-    ];
-  }, [filteredRawData]);
-
   // ===== 테이블 컬럼 =====
-  // 순서: 예상 지급일, 항목, 지출금액, 거래처, 계좌, 전자결재, 작업
-  const tableColumns: TableColumn[] = useMemo(() => [
+  const tableColumns = useMemo(() => [
     { key: 'no', label: '번호', className: 'w-[60px] text-center' },
     { key: 'expectedPaymentDate', label: '예상 지급일' },
     { key: 'accountSubject', label: '항목' },
@@ -591,7 +591,12 @@ export function ExpectedExpenseManagement({
 
   // ===== 테이블 행 렌더링 =====
   // 컬럼 순서: 체크박스 + 번호 + 예상 지급일 + 항목 + 지출금액 + 거래처 + 계좌 + 전자결재 + 작업
-  const renderTableRow = useCallback((item: TableRowData, index: number, globalIndex: number) => {
+  const renderTableRow = useCallback((
+    item: TableRowData,
+    index: number,
+    globalIndex: number,
+    handlers: SelectionHandlers & RowClickHandlers<TableRowData>
+  ) => {
     // 월 헤더 행 (9개 컬럼)
     if (item.rowType === 'monthHeader') {
       return (
@@ -728,9 +733,10 @@ export function ExpectedExpenseManagement({
     item: TableRowData,
     index: number,
     globalIndex: number,
-    isSelected: boolean,
-    onToggle: () => void
+    handlers: SelectionHandlers & RowClickHandlers<TableRowData>
   ) => {
+    const isSelected = selectedItems.has(item.id);
+    const onToggle = () => toggleSelection(item.id);
     // 헤더/소계/합계 행은 모바일에서 다르게 표시
     if (item.rowType !== 'data') {
       if (item.rowType === 'monthHeader') {
@@ -807,49 +813,6 @@ export function ExpectedExpenseManagement({
     );
   }, []);
 
-  // ===== 헤더 액션 (날짜 선택) =====
-  const headerActions = (
-    <DateRangeSelector
-      startDate={startDate}
-      endDate={endDate}
-      onStartDateChange={setStartDate}
-      onEndDateChange={setEndDate}
-    />
-  );
-
-  // ===== 테이블 헤더 액션 (거래처 필터/정렬 필터 - 탭 옆) =====
-  const tableHeaderActions = (
-    <div className="flex items-center gap-2">
-      {/* 거래처 필터 */}
-      <Select value={vendorFilter} onValueChange={setVendorFilter}>
-        <SelectTrigger className="w-[140px] h-8 text-sm">
-          <SelectValue placeholder="전체" />
-        </SelectTrigger>
-        <SelectContent>
-          {vendorFilterOptions.map((option) => (
-            <SelectItem key={option.value} value={option.value}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-
-      {/* 정렬 필터 (최신순/등록순) */}
-      <Select value={sortOption} onValueChange={(value) => setSortOption(value as SortOption)}>
-        <SelectTrigger className="w-[100px] h-8 text-sm">
-          <SelectValue placeholder="최신순" />
-        </SelectTrigger>
-        <SelectContent>
-          {SORT_OPTIONS.map((option) => (
-            <SelectItem key={option.value} value={option.value}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  );
-
   // ===== 선택된 항목 데이터 가져오기 =====
   const getSelectedItemsData = useCallback(() => {
     return data.filter(item => selectedItems.has(item.id));
@@ -863,84 +826,216 @@ export function ExpectedExpenseManagement({
     router.push(`/ko/approval/draft/new?type=expected-expense&items=${encodeURIComponent(selectedIds)}`);
   }, [getSelectedItemsData, router]);
 
-  // ===== 테이블 앞 컨텐츠 (액션 버튼) =====
-  const beforeTableContent = (
-    <div className="flex items-center gap-2 flex-wrap">
-      {/* 등록 버튼 */}
-      <Button
-        size="sm"
-        onClick={handleOpenCreateDialog}
-      >
-        <Plus className="h-4 w-4 mr-1" />
-        등록
-      </Button>
+  // ===== UniversalListPage Config =====
+  const config: UniversalListConfig<TableRowData> = useMemo(
+    () => ({
+      // 페이지 기본 정보
+      title: '지출 예상 내역서',
+      description: '지출 예상 내역을 등록하고 조회합니다',
+      icon: Receipt,
+      basePath: '/accounting/expected-expense',
 
-      {/* 예상 지급일 변경 버튼 - 1개 이상 선택 시 활성화 */}
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={handleOpenDateChangeDialog}
-        disabled={selectedItems.size === 0}
-      >
-        <CalendarIcon className="h-4 w-4 mr-1" />
-        예상 지급일 변경 {selectedItems.size > 0 && `(${selectedItems.size})`}
-      </Button>
+      // ID 추출
+      idField: 'id',
 
-      {/* 전자결재 버튼 - 1개 이상 선택 시 활성화 */}
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={handleElectronicApproval}
-        disabled={selectedItems.size === 0}
-      >
-        <FileText className="h-4 w-4 mr-1" />
-        전자결재 {selectedItems.size > 0 && `(${selectedItems.size})`}
-      </Button>
+      // API 액션
+      actions: {
+        getList: async () => {
+          return {
+            success: true,
+            data: tableData,
+            totalCount: initialPagination.total || filteredRawData.length,
+          };
+        },
+      },
 
-      {/* 일괄삭제 버튼 - 1개 이상 선택 시 활성화 */}
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={() => setShowBulkDeleteDialog(true)}
-        disabled={selectedItems.size === 0}
-        className="text-red-600 hover:text-red-700 hover:bg-red-50"
-      >
-        <Trash2 className="h-4 w-4 mr-1" />
-        일괄삭제 {selectedItems.size > 0 && `(${selectedItems.size})`}
-      </Button>
-    </div>
+      // 테이블 컬럼
+      columns: tableColumns,
+
+      // 클라이언트 사이드 필터링 (이미 tableData에서 필터링 완료)
+      clientSideFiltering: false,
+      itemsPerPage,
+
+      // 검색
+      searchPlaceholder: '거래처, 계정과목, 적요 검색...',
+      onSearchChange: setSearchQuery,
+
+      // 행 번호 숨기기 (커스텀 번호 사용)
+      showRowNumber: false,
+
+      // 날짜 범위 선택기
+      dateRangeSelector: {
+        enabled: true,
+        startDate,
+        endDate,
+        onStartDateChange: setStartDate,
+        onEndDateChange: setEndDate,
+      },
+
+      // 모바일 필터 설정
+      filterConfig: [
+        {
+          key: 'transactionType',
+          label: '거래유형',
+          type: 'single',
+          options: TRANSACTION_TYPE_FILTER_OPTIONS.filter(o => o.value !== 'all'),
+        },
+        {
+          key: 'paymentStatus',
+          label: '지급상태',
+          type: 'single',
+          options: PAYMENT_STATUS_FILTER_OPTIONS.filter(o => o.value !== 'all'),
+        },
+        {
+          key: 'sortBy',
+          label: '정렬',
+          type: 'single',
+          options: SORT_OPTIONS,
+        },
+      ],
+      initialFilters: {
+        transactionType: 'all',
+        paymentStatus: 'all',
+        sortBy: sortOption,
+      },
+      filterTitle: '예상비용 필터',
+
+      // 테이블 헤더 액션 (거래처/정렬 필터)
+      tableHeaderActions: () => (
+        <div className="flex items-center gap-2">
+          {/* 거래처 필터 */}
+          <Select value={vendorFilter} onValueChange={setVendorFilter}>
+            <SelectTrigger className="w-[140px] h-8 text-sm">
+              <SelectValue placeholder="전체" />
+            </SelectTrigger>
+            <SelectContent>
+              {vendorFilterOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          {/* 정렬 필터 (최신순/등록순) */}
+          <Select value={sortOption} onValueChange={(value) => setSortOption(value as SortOption)}>
+            <SelectTrigger className="w-[100px] h-8 text-sm">
+              <SelectValue placeholder="최신순" />
+            </SelectTrigger>
+            <SelectContent>
+              {SORT_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      ),
+
+      // 테이블 앞 컨텐츠 (액션 버튼)
+      beforeTableContent: (
+        <div className="flex items-center gap-2 flex-wrap">
+          {/* 등록 버튼 */}
+          <Button
+            size="sm"
+            onClick={handleOpenCreateDialog}
+          >
+            <Plus className="h-4 w-4 mr-1" />
+            등록
+          </Button>
+
+          {/* 예상 지급일 변경 버튼 - 1개 이상 선택 시 활성화 */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleOpenDateChangeDialog}
+            disabled={selectedItems.size === 0}
+          >
+            <CalendarIcon className="h-4 w-4 mr-1" />
+            예상 지급일 변경 {selectedItems.size > 0 && `(${selectedItems.size})`}
+          </Button>
+
+          {/* 전자결재 버튼 - 1개 이상 선택 시 활성화 */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleElectronicApproval}
+            disabled={selectedItems.size === 0}
+          >
+            <FileText className="h-4 w-4 mr-1" />
+            전자결재 {selectedItems.size > 0 && `(${selectedItems.size})`}
+          </Button>
+
+          {/* 일괄삭제 버튼 - 1개 이상 선택 시 활성화 */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setShowBulkDeleteDialog(true)}
+            disabled={selectedItems.size === 0}
+            className="text-red-600 hover:text-red-700 hover:bg-red-50"
+          >
+            <Trash2 className="h-4 w-4 mr-1" />
+            일괄삭제 {selectedItems.size > 0 && `(${selectedItems.size})`}
+          </Button>
+        </div>
+      ),
+
+      // Stats 카드
+      computeStats: (): StatCard[] => {
+        const totalExpense = filteredRawData.reduce((sum, d) => sum + d.amount, 0);
+        const expectedBalance = 10000000;
+
+        return [
+          { label: '지출 합계', value: `${totalExpense.toLocaleString()}원`, icon: Receipt, iconColor: 'text-red-500' },
+          { label: '예상 잔액', value: `${expectedBalance.toLocaleString()}원`, icon: Receipt, iconColor: 'text-blue-500' },
+        ];
+      },
+
+      // 테이블 행 렌더링
+      renderTableRow,
+
+      // 모바일 카드 렌더링
+      renderMobileCard,
+    }),
+    [
+      tableData,
+      tableColumns,
+      filteredRawData,
+      initialPagination,
+      itemsPerPage,
+      startDate,
+      endDate,
+      vendorFilter,
+      vendorFilterOptions,
+      sortOption,
+      selectedItems,
+      handleOpenCreateDialog,
+      handleOpenDateChangeDialog,
+      handleElectronicApproval,
+      renderTableRow,
+      renderMobileCard,
+    ]
   );
 
   return (
     <>
-      <IntegratedListTemplateV2
-        title="지출 예상 내역서"
-        description="지출 예상 내역을 등록하고 조회합니다"
-        icon={Receipt}
-        headerActions={headerActions}
-        stats={statCards}
-        searchValue={searchQuery}
-        onSearchChange={setSearchQuery}
-        searchPlaceholder="거래처, 계정과목, 적요 검색..."
-        tableHeaderActions={tableHeaderActions}
-        beforeTableContent={beforeTableContent}
-        tableColumns={tableColumns}
-        data={tableData}
-        totalCount={initialPagination.total || filteredRawData.length}
-        allData={tableData}
-        selectedItems={selectedItems}
-        onToggleSelection={toggleSelection}
-        onToggleSelectAll={toggleSelectAll}
-        getItemId={(item: TableRowData) => item.id}
-        renderTableRow={renderTableRow}
-        renderMobileCard={renderMobileCard}
-        pagination={{
+      <UniversalListPage
+        config={config}
+        initialData={tableData}
+        externalPagination={{
           currentPage,
           totalPages: totalPages || 1,
           totalItems: initialPagination.total || filteredRawData.length,
           itemsPerPage,
           onPageChange: setCurrentPage,
         }}
+        externalSelection={{
+          selectedItems,
+          onToggleSelection: toggleSelection,
+          onToggleSelectAll: toggleSelectAll,
+          getItemId: (item: TableRowData) => item.id,
+        }}
       />
 
       {/* 삭제 확인 다이얼로그 */}