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/board/BoardManagement/index.tsx

@@ -1,30 +1,18 @@
 'use client';
 
-import { useState, useMemo, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { ClipboardList, Edit, Trash2, Plus, Loader2 } from 'lucide-react';
-import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
-import { getBoards, deleteBoard, deleteBoardsBulk } from './actions';
+import { ClipboardList, Edit, Trash2, Plus } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { TableRow, TableCell } from '@/components/ui/table';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import {
-  IntegratedListTemplateV2,
-  type TabOption,
-  type TableColumn,
-} from '@/components/templates/IntegratedListTemplateV2';
 import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
+import {
+  UniversalListPage,
+  type UniversalListConfig,
+  type TabOption,
+} from '@/components/templates/UniversalListPage';
+import { getBoards, deleteBoard, deleteBoardsBulk } from './actions';
 import type { Board } from './types';
 import {
   BOARD_STATUS_LABELS,
@@ -41,92 +29,57 @@ const formatDate = (dateString: string): string => {
   return `${year}-${month}-${day}`;
 };
 
-export function BoardManagement() {
-  const router = useRouter();
+// 대상 표시 텍스트
+const getTargetDisplay = (board: Board) => {
+  if (board.target === 'all') {
+    return BOARD_TARGET_LABELS.all;
+  }
+  return board.targetName || BOARD_TARGET_LABELS.department;
+};
 
-  // 게시판 데이터 상태
-  const [boards, setBoards] = useState<Board[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+// 탭 옵션 계산
+const computeTabs = (data: Board[]): TabOption[] => {
+  const activeCount = data.filter((b) => b.status === 'active').length;
+  const inactiveCount = data.filter((b) => b.status === 'inactive').length;
 
-  // 검색 및 필터 상태
-  const [searchValue, setSearchValue] = useState('');
-  const [activeTab, setActiveTab] = useState<string>('all');
-  const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 20;
+  return [
+    { value: 'all', label: '전체', count: data.length, color: 'gray' },
+    { value: 'active', label: '사용', count: activeCount, color: 'green' },
+    { value: 'inactive', label: '미사용', count: inactiveCount, color: 'red' },
+  ];
+};
 
-  // 다이얼로그 상태
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [boardToDelete, setBoardToDelete] = useState<Board | null>(null);
-  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
-  const [isDeleting, setIsDeleting] = useState(false);
+// UniversalListPage 설정 생성 함수
+const createBoardManagementConfig = (router: ReturnType<typeof useRouter>): UniversalListConfig<Board> => ({
+  // 페이지 기본 정보
+  title: '게시판관리',
+  description: '게시판 목록을 관리합니다',
+  icon: ClipboardList,
+  basePath: '/board/board-management',
 
-  // 게시판 목록 조회
-  const fetchBoards = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
+  // ID 추출
+  idField: 'id',
 
-    const result = await getBoards();
+  // API 액션
+  actions: {
+    getList: async () => {
+      const result = await getBoards();
+      return {
+        success: result.success,
+        data: result.data,
+        error: result.error,
+      };
+    },
+    deleteItem: async (id: string) => {
+      return await deleteBoard(id);
+    },
+    deleteBulk: async (ids: string[]) => {
+      return await deleteBoardsBulk(ids);
+    },
+  },
 
-    if (result.success && result.data) {
-      setBoards(result.data);
-    } else {
-      setError(result.error || '게시판 목록을 불러오는데 실패했습니다.');
-    }
-
-    setIsLoading(false);
-  }, []);
-
-  // 초기 데이터 로드
-  useEffect(() => {
-    fetchBoards();
-  }, [fetchBoards]);
-
-  // 필터링된 데이터
-  const filteredBoards = useMemo(() => {
-    let filtered = boards;
-
-    // 탭 필터 (상태)
-    if (activeTab !== 'all') {
-      filtered = filtered.filter(b => b.status === activeTab);
-    }
-
-    // 검색 필터
-    if (searchValue) {
-      const search = searchValue.toLowerCase();
-      filtered = filtered.filter(b =>
-        b.boardName.toLowerCase().includes(search) ||
-        b.authorName.toLowerCase().includes(search) ||
-        (b.targetName && b.targetName.toLowerCase().includes(search)) ||
-        BOARD_TARGET_LABELS[b.target].toLowerCase().includes(search)
-      );
-    }
-
-    return filtered;
-  }, [boards, activeTab, searchValue]);
-
-  // 페이지네이션된 데이터
-  const paginatedData = useMemo(() => {
-    const startIndex = (currentPage - 1) * itemsPerPage;
-    return filteredBoards.slice(startIndex, startIndex + itemsPerPage);
-  }, [filteredBoards, currentPage, itemsPerPage]);
-
-  // 통계 계산
-  const stats = useMemo(() => {
-    const activeCount = boards.filter(b => b.status === 'active').length;
-    const inactiveCount = boards.filter(b => b.status === 'inactive').length;
-    return { activeCount, inactiveCount };
-  }, [boards]);
-
-  // 탭 옵션
-  const tabs: TabOption[] = useMemo(() => [
-    { value: 'all', label: '전체', count: boards.length, color: 'gray' },
-    { value: 'active', label: '사용', count: stats.activeCount, color: 'green' },
-    { value: 'inactive', label: '미사용', count: stats.inactiveCount, color: 'red' },
-  ], [boards.length, stats]);
-
-  // 테이블 컬럼 정의
-  const tableColumns: TableColumn[] = useMemo(() => [
+  // 테이블 컬럼
+  columns: [
     { key: 'rowNumber', label: 'No.', className: 'w-[60px] text-center' },
     { key: 'target', label: '대상', className: 'min-w-[100px]' },
     { key: 'boardName', label: '게시판명', className: 'min-w-[150px]' },
@@ -134,105 +87,64 @@ export function BoardManagement() {
     { key: 'authorName', label: '작성자', className: 'min-w-[100px]' },
     { key: 'createdAt', label: '등록일시', className: 'min-w-[120px]' },
     { key: 'actions', label: '작업', className: 'w-[100px] text-right' },
-  ], []);
+  ],
 
-  // 체크박스 토글
-  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;
-    });
-  }, []);
+  // 탭 설정 (클라이언트 사이드 계산)
+  tabs: [
+    { value: 'all', label: '전체', count: 0, color: 'gray' },
+    { value: 'active', label: '사용', count: 0, color: 'green' },
+    { value: 'inactive', label: '미사용', count: 0, color: 'red' },
+  ],
+  defaultTab: 'all',
 
-  // 전체 선택/해제
-  const toggleSelectAll = useCallback(() => {
-    if (selectedItems.size === paginatedData.length && paginatedData.length > 0) {
-      setSelectedItems(new Set());
-    } else {
-      const allIds = new Set(paginatedData.map((item) => item.id));
-      setSelectedItems(allIds);
-    }
-  }, [selectedItems.size, paginatedData]);
+  // 클라이언트 사이드 필터링
+  clientSideFiltering: true,
 
-  // 일괄 삭제 핸들러
-  const handleBulkDelete = useCallback(async () => {
-    const ids = Array.from(selectedItems);
-    if (ids.length === 0) return;
+  // 탭 필터
+  tabFilter: (item, activeTab) => {
+    if (activeTab === 'all') return true;
+    return item.status === activeTab;
+  },
 
-    setIsDeleting(true);
-    const result = await deleteBoardsBulk(ids);
+  // 검색 필터
+  searchFilter: (item, searchValue) => {
+    const search = searchValue.toLowerCase();
+    return (
+      item.boardName.toLowerCase().includes(search) ||
+      item.authorName.toLowerCase().includes(search) ||
+      (item.targetName && item.targetName.toLowerCase().includes(search)) ||
+      BOARD_TARGET_LABELS[item.target].toLowerCase().includes(search)
+    );
+  },
 
-    if (result.success) {
-      setBoards(prev => prev.filter(board => !ids.includes(board.id)));
-      setSelectedItems(new Set());
-    } else {
-      setError(result.error || '삭제에 실패했습니다.');
-    }
-    setIsDeleting(false);
-  }, [selectedItems]);
+  // 검색 플레이스홀더
+  searchPlaceholder: '게시판명, 작성자, 대상 검색...',
 
-  // 핸들러
-  const handleAddBoard = useCallback(() => {
-    router.push('/ko/board/board-management/new');
-  }, [router]);
+  // 등록 버튼
+  createButton: {
+    label: '게시판 등록',
+    icon: Plus,
+    onClick: () => router.push('/board/board-management/new'),
+  },
 
-  const handleDeleteBoard = useCallback(async () => {
-    if (!boardToDelete) return;
-
-    setIsDeleting(true);
-    const result = await deleteBoard(boardToDelete.id);
-
-    if (result.success) {
-      setBoards(prev => prev.filter(board => board.id !== boardToDelete.id));
-      setDeleteDialogOpen(false);
-      setBoardToDelete(null);
-    } else {
-      setError(result.error || '삭제에 실패했습니다.');
-    }
-    setIsDeleting(false);
-  }, [boardToDelete]);
-
-  const handleRowClick = useCallback((row: Board) => {
-    router.push(`/ko/board/board-management/${row.id}`);
-  }, [router]);
-
-  const handleEdit = useCallback((id: string) => {
-    router.push(`/ko/board/board-management/${id}/edit`);
-  }, [router]);
-
-  const openDeleteDialog = useCallback((board: Board) => {
-    setBoardToDelete(board);
-    setDeleteDialogOpen(true);
-  }, []);
-
-  // 대상 표시 텍스트
-  const getTargetDisplay = (board: Board) => {
-    if (board.target === 'all') {
-      return BOARD_TARGET_LABELS.all;
-    }
-    return board.targetName || BOARD_TARGET_LABELS.department;
-  };
+  // 삭제 확인 메시지
+  deleteConfirmMessage: {
+    title: '게시판 삭제',
+    description: '선택한 게시판을 삭제하시겠습니까? 삭제된 게시판 정보는 복구할 수 없습니다.',
+  },
 
   // 테이블 행 렌더링
-  const renderTableRow = useCallback((item: Board, index: number, globalIndex: number) => {
-    const isSelected = selectedItems.has(item.id);
+  renderTableRow: (item, index, globalIndex, handlers) => {
+    const { isSelected, onToggle, onRowClick, onEdit, onDelete } = handlers;
 
     return (
       <TableRow
         key={item.id}
         className="hover:bg-muted/50 cursor-pointer"
-        onClick={() => handleRowClick(item)}
+        onClick={onRowClick}
       >
         <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
-          <Checkbox
-            checked={isSelected}
-            onCheckedChange={() => toggleSelection(item.id)}
-          />
+          <Checkbox checked={isSelected} onCheckedChange={onToggle} />
         </TableCell>
         <TableCell className="text-muted-foreground text-center">
           {globalIndex}
@@ -249,20 +161,10 @@ export function BoardManagement() {
         <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="수정"
-              >
+              <Button variant="ghost" size="sm" onClick={onEdit} title="수정">
                 <Edit className="w-4 h-4" />
               </Button>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => openDeleteDialog(item)}
-                title="삭제"
-              >
+              <Button variant="ghost" size="sm" onClick={onDelete} title="삭제">
                 <Trash2 className="w-4 h-4 text-red-500" />
               </Button>
             </div>
@@ -270,16 +172,12 @@ export function BoardManagement() {
         </TableCell>
       </TableRow>
     );
-  }, [selectedItems, toggleSelection, handleRowClick, handleEdit, openDeleteDialog]);
+  },
 
   // 모바일 카드 렌더링
-  const renderMobileCard = useCallback((
-    item: Board,
-    index: number,
-    globalIndex: number,
-    isSelected: boolean,
-    onToggle: () => void
-  ) => {
+  renderMobileCard: (item, index, globalIndex, handlers) => {
+    const { isSelected, onToggle, onRowClick, onEdit, onDelete } = handlers;
+
     return (
       <ListMobileCard
         id={item.id}
@@ -301,7 +199,7 @@ export function BoardManagement() {
         }
         isSelected={isSelected}
         onToggleSelection={onToggle}
-        onCardClick={() => handleRowClick(item)}
+        onCardClick={onRowClick}
         infoGrid={
           <div className="grid grid-cols-2 gap-x-4 gap-y-3">
             <InfoField label="대상" value={getTargetDisplay(item)} />
@@ -316,7 +214,10 @@ export function BoardManagement() {
                 variant="default"
                 size="default"
                 className="flex-1 min-w-[100px] h-11"
-                onClick={(e) => { e.stopPropagation(); handleEdit(item.id); }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onEdit();
+                }}
               >
                 <Edit className="h-4 w-4 mr-2" />
                 수정
@@ -325,7 +226,10 @@ export function BoardManagement() {
                 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); }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete();
+                }}
               >
                 <Trash2 className="h-4 w-4 mr-2" />
                 삭제
@@ -335,101 +239,12 @@ export function BoardManagement() {
         }
       />
     );
-  }, [handleRowClick, handleEdit, openDeleteDialog]);
+  },
+});
 
-  // 헤더 액션
-  const headerActions = (
-    <Button className="ml-auto" onClick={handleAddBoard}>
-      <Plus className="w-4 h-4 mr-2" />
-      게시판 등록
-    </Button>
-  );
+export function BoardManagement() {
+  const router = useRouter();
+  const config = createBoardManagementConfig(router);
 
-  // 페이지네이션 설정
-  const totalPages = Math.ceil(filteredBoards.length / itemsPerPage);
-
-  // 로딩 상태
-  if (isLoading) {
-    return <ContentLoadingSpinner text="게시판 목록을 불러오는 중..." />;
-  }
-
-  // 에러 상태
-  if (error) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-[400px] gap-4">
-        <p className="text-destructive">{error}</p>
-        <Button onClick={fetchBoards} variant="outline">
-          다시 시도
-        </Button>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <IntegratedListTemplateV2<Board>
-        title="게시판관리"
-        description="게시판 목록을 관리합니다"
-        icon={ClipboardList}
-        headerActions={headerActions}
-        searchValue={searchValue}
-        onSearchChange={setSearchValue}
-        searchPlaceholder="게시판명, 작성자, 대상 검색..."
-        tabs={tabs}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-        tableColumns={tableColumns}
-        data={paginatedData}
-        totalCount={filteredBoards.length}
-        allData={filteredBoards}
-        selectedItems={selectedItems}
-        onToggleSelection={toggleSelection}
-        onToggleSelectAll={toggleSelectAll}
-        onBulkDelete={handleBulkDelete}
-        getItemId={(item) => item.id}
-        renderTableRow={renderTableRow}
-        renderMobileCard={renderMobileCard}
-        pagination={{
-          currentPage,
-          totalPages,
-          totalItems: filteredBoards.length,
-          itemsPerPage,
-          onPageChange: setCurrentPage,
-        }}
-      />
-
-      {/* 삭제 확인 다이얼로그 */}
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>게시판 삭제</AlertDialogTitle>
-            <AlertDialogDescription>
-              &quot;{boardToDelete?.boardName}&quot; 게시판을 삭제하시겠습니까?
-              <br />
-              <span className="text-destructive">
-                삭제된 게시판 정보는 복구할 수 없습니다.
-              </span>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleDeleteBoard}
-              disabled={isDeleting}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              {isDeleting ? (
-                <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  삭제 중...
-                </>
-              ) : (
-                '삭제'
-              )}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
+  return <UniversalListPage<Board> config={config} />;
 }