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

@@ -28,14 +28,13 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import {
-  IntegratedListTemplateV2,
+  UniversalListPage,
+  type UniversalListConfig,
   type TabOption,
-  type TableColumn,
-} from '@/components/templates/IntegratedListTemplateV2';
-import { DateRangeSelector } from '@/components/molecules/DateRangeSelector';
+} from '@/components/templates/UniversalListPage';
 import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
 import { toast } from 'sonner';
-import type { Post, SortOption } from '../types';
+import type { Post } from '../types';
 import { getBoards } from '../BoardManagement/actions';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import { getPosts, getMyPosts, deletePost } from '../actions';
@@ -45,10 +44,7 @@ export function BoardList() {
   const router = useRouter();
 
   // ===== 상태 관리 =====
-  const [searchQuery, setSearchQuery] = useState('');
-  const [sortOption] = useState<SortOption>('latest'); // 기본 정렬: 최신순
-  const [activeTab, setActiveTab] = useState<string>(''); // 첫 번째 게시판 코드로 설정
-  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+  const [activeTab, setActiveTab] = useState<string>('');
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 20;
 
@@ -68,14 +64,14 @@ export function BoardList() {
   const [totalPages, setTotalPages] = useState(1);
   const [isLoading, setIsLoading] = useState(true);
   const [currentUserId, setCurrentUserId] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState('');
 
-  // ===== 게시판 목록 조회 =====
+  // ===== 게시판 목록 조회 (탭 생성용) =====
   useEffect(() => {
     async function fetchBoards() {
       const result = await getBoards();
       if (result.success && result.data) {
         setBoards(result.data);
-        // 첫 번째 게시판을 기본 탭으로 설정
         if (result.data.length > 0 && !activeTab) {
           setActiveTab(result.data[0].boardCode);
         }
@@ -94,14 +90,12 @@ export function BoardList() {
         let result;
 
         if (activeTab === 'my') {
-          // 나의 게시글 조회
           result = await getMyPosts({
             search: searchQuery || undefined,
             per_page: itemsPerPage,
             page: currentPage,
           });
         } else {
-          // 특정 게시판 게시글 조회
           result = await getPosts(activeTab, {
             search: searchQuery || undefined,
             per_page: itemsPerPage,
@@ -137,59 +131,19 @@ export function BoardList() {
 
   // ===== 현재 사용자 ID 가져오기 =====
   useEffect(() => {
-    // TODO: 실제 인증 컨텍스트에서 가져오기
-    // 임시로 localStorage에서 가져옴
-    const userId = localStorage.getItem('user_id') || '';
-    setCurrentUserId(userId);
-  }, []);
-
-  // ===== 체크박스 핸들러 =====
-  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 toggleSelectAll = useCallback(() => {
-    if (selectedItems.size === posts.length && posts.length > 0) {
-      setSelectedItems(new Set());
-    } else {
-      setSelectedItems(new Set(posts.map((item) => item.id)));
+    if (typeof window !== 'undefined') {
+      const userId = localStorage.getItem('user_id') || '';
+      setCurrentUserId(userId);
     }
-  }, [selectedItems.size, posts]);
-
-  // ===== 필터링된 데이터 (클라이언트 정렬만) =====
-  const sortedData = useMemo(() => {
-    const result = [...posts];
-
-    // 정렬 (상단 고정은 항상 최상위)
-    result.sort((a, b) => {
-      // 상단 고정 우선
-      if (a.isPinned !== b.isPinned) return a.isPinned ? -1 : 1;
-
-      // 정렬 옵션에 따라
-      switch (sortOption) {
-        case 'latest':
-          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-        case 'oldest':
-          return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
-        case 'viewCount':
-          return b.viewCount - a.viewCount;
-        default:
-          return 0;
-      }
-    });
-
-    return result;
-  }, [posts, sortOption]);
+  }, []);
 
   // ===== 액션 핸들러 =====
-  const handleRowClick = useCallback((item: Post) => {
-    router.push(`/ko/board/${item.boardCode}/${item.id}`);
-  }, [router]);
+  const handleRowClick = useCallback(
+    (item: Post) => {
+      router.push(`/ko/board/${item.boardCode}/${item.id}`);
+    },
+    [router]
+  );
 
   const handleNewPost = useCallback(() => {
     const boardCode = activeTab !== 'my' ? activeTab : boards[0]?.boardCode;
@@ -211,11 +165,6 @@ export function BoardList() {
       const result = await deletePost(deleteTargetBoardCode, deleteTargetId);
       if (result.success) {
         setPosts((prev) => prev.filter((item) => item.id !== deleteTargetId));
-        setSelectedItems((prev) => {
-          const newSet = new Set(prev);
-          newSet.delete(deleteTargetId);
-          return newSet;
-        });
         toast.success('게시글이 삭제되었습니다.');
       } else {
         toast.error(result.error || '게시글 삭제에 실패했습니다.');
@@ -226,19 +175,12 @@ export function BoardList() {
     setDeleteTargetBoardCode('');
   }, [deleteTargetId, deleteTargetBoardCode]);
 
-  // ===== 탭 변경 핸들러 =====
-  const handleTabChange = useCallback((tab: string) => {
-    setActiveTab(tab);
-    setCurrentPage(1);
-    setSelectedItems(new Set());
-  }, []);
-
   // ===== 탭 옵션 (게시판 목록 + 나의 게시글) =====
   const tabs: TabOption[] = useMemo(() => {
     const boardTabs = boards.map((board) => ({
       value: board.boardCode,
       label: board.boardName,
-      count: 0, // API에서 게시글 수를 가져오면 업데이트
+      count: 0,
     }));
 
     return [
@@ -251,219 +193,254 @@ export function BoardList() {
     ];
   }, [boards]);
 
-  // ===== 테이블 컬럼 (스크린샷 기준: No., 제목, 작성자, 등록일, 조회수) =====
-  const tableColumns: TableColumn[] = useMemo(() => [
-    { key: 'no', label: 'No.', className: 'w-[60px] text-center' },
-    { key: 'title', label: '제목', className: 'min-w-[300px]' },
-    { key: 'author', label: '작성자', className: 'w-[120px]' },
-    { key: 'createdAt', label: '등록일', className: 'w-[120px]' },
-    { key: 'viewCount', label: '조회수', className: 'w-[80px] text-center' },
-    { key: 'actions', label: '작업', className: 'w-[100px] text-center' },
-  ], []);
+  // ===== 정렬된 데이터 (상단 고정 우선) =====
+  const sortedData = useMemo(() => {
+    const result = [...posts];
+    result.sort((a, b) => {
+      if (a.isPinned !== b.isPinned) return a.isPinned ? -1 : 1;
+      return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+    });
+    return result;
+  }, [posts]);
 
-  // ===== 테이블 행 렌더링 =====
-  const renderTableRow = useCallback((item: Post, index: number, globalIndex: number) => {
-    const isSelected = selectedItems.has(item.id);
-    const isMyPost = item.authorId === currentUserId;
+  // ===== 탭 변경 핸들러 =====
+  const handleTabChange = useCallback((tab: string) => {
+    setActiveTab(tab);
+    setCurrentPage(1);
+  }, []);
 
-    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>
-        {/* No. */}
-        <TableCell className="text-center text-sm text-gray-500">
-          {item.isPinned ? (
-            <span className="inline-flex items-center justify-center w-6 h-6 bg-red-500 text-white rounded-full text-xs font-bold">
-              공지
-            </span>
-          ) : (
-            globalIndex
-          )}
-        </TableCell>
-        {/* 제목 */}
-        <TableCell className="font-medium">
-          <div className="flex items-center gap-2">
-            {item.isPinned && (
-              <span className="text-xs text-red-500 font-medium">[공지]</span>
-            )}
-            {item.isSecret && (
-              <span className="text-xs text-gray-500 font-medium">[비밀]</span>
-            )}
-            <span className="truncate">{item.title}</span>
-          </div>
-        </TableCell>
-        {/* 작성자 */}
-        <TableCell>{item.authorName}</TableCell>
-        {/* 등록일 */}
-        <TableCell>{format(new Date(item.createdAt), 'yyyy-MM-dd')}</TableCell>
-        {/* 조회수 */}
-        <TableCell className="text-center">{item.viewCount}</TableCell>
-        {/* 작업 */}
-        <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
-          {isSelected && isMyPost && (
-            <div className="flex items-center justify-center gap-1">
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8 text-gray-600 hover:text-gray-700 hover:bg-gray-50"
-                onClick={() => router.push(`/ko/board/${item.boardCode}/${item.id}/edit`)}
+  // ===== UniversalListPage 설정 =====
+  const boardListConfig: UniversalListConfig<Post> = useMemo(
+    () => ({
+      title: '게시판',
+      description: '게시판의 게시글을 등록하고 관리합니다.',
+      icon: FileText,
+      basePath: '/board',
+
+      idField: 'id',
+
+      actions: {
+        getList: async () => ({
+          success: true,
+          data: sortedData,
+          totalCount: totalItems,
+          totalPages: totalPages,
+        }),
+      },
+
+      columns: [
+        { key: 'no', label: 'No.', className: 'w-[60px] text-center' },
+        { key: 'title', label: '제목', className: 'min-w-[300px]' },
+        { key: 'author', label: '작성자', className: 'w-[120px]' },
+        { key: 'createdAt', label: '등록일', className: 'w-[120px]' },
+        { key: 'viewCount', label: '조회수', className: 'w-[80px] text-center' },
+        { key: 'actions', label: '작업', className: 'w-[100px] text-center' },
+      ],
+
+      tabs: tabs,
+      defaultTab: activeTab,
+
+      dateRangeSelector: {
+        enabled: true,
+        showPresets: false,
+        startDate,
+        endDate,
+        onStartDateChange: setStartDate,
+        onEndDateChange: setEndDate,
+      },
+
+      createButton: {
+        label: '게시글 등록',
+        icon: Plus,
+        onClick: handleNewPost,
+      },
+
+      searchPlaceholder: '제목, 작성자 검색...',
+
+      itemsPerPage: itemsPerPage,
+
+      renderTableRow: (item, index, globalIndex, handlers) => {
+        const { isSelected, onToggle, onRowClick } = handlers;
+        const isMyPost = item.authorId === currentUserId;
+
+        return (
+          <TableRow
+            key={item.id}
+            className="hover:bg-muted/50 cursor-pointer"
+            onClick={onRowClick}
+          >
+            <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+              <Checkbox checked={isSelected} onCheckedChange={onToggle} />
+            </TableCell>
+            <TableCell className="text-center text-sm text-gray-500">
+              {item.isPinned ? (
+                <span className="inline-flex items-center justify-center w-6 h-6 bg-red-500 text-white rounded-full text-xs font-bold">
+                  공지
+                </span>
+              ) : (
+                globalIndex
+              )}
+            </TableCell>
+            <TableCell className="font-medium">
+              <div className="flex items-center gap-2">
+                {item.isPinned && (
+                  <span className="text-xs text-red-500 font-medium">[공지]</span>
+                )}
+                {item.isSecret && (
+                  <span className="text-xs text-gray-500 font-medium">[비밀]</span>
+                )}
+                <span className="truncate">{item.title}</span>
+              </div>
+            </TableCell>
+            <TableCell>{item.authorName}</TableCell>
+            <TableCell>{format(new Date(item.createdAt), 'yyyy-MM-dd')}</TableCell>
+            <TableCell className="text-center">{item.viewCount}</TableCell>
+            <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+              {isSelected && isMyPost && (
+                <div className="flex items-center justify-center gap-1">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-gray-600 hover:text-gray-700 hover:bg-gray-50"
+                    onClick={() =>
+                      router.push(`/ko/board/${item.boardCode}/${item.id}/edit`)
+                    }
+                  >
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-red-500 hover:text-red-600 hover:bg-red-50"
+                    onClick={() => handleDeleteClick(item.id, item.boardCode)}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              )}
+            </TableCell>
+          </TableRow>
+        );
+      },
+
+      renderMobileCard: (item, index, globalIndex, handlers) => {
+        const { isSelected, onToggle, onRowClick } = handlers;
+        const isMyPost = item.authorId === currentUserId;
+
+        return (
+          <ListMobileCard
+            id={item.id}
+            title={
+              <div className="flex items-center gap-2">
+                {item.isPinned && (
+                  <span className="text-xs text-red-500 font-medium">[공지]</span>
+                )}
+                {item.isSecret && (
+                  <span className="text-xs text-gray-500 font-medium">[비밀]</span>
+                )}
+                <span>{item.title}</span>
+              </div>
+            }
+            isSelected={isSelected}
+            onToggleSelection={onToggle}
+            onCardClick={onRowClick}
+            infoGrid={
+              <div className="grid grid-cols-2 gap-3">
+                <InfoField label="작성자" value={item.authorName} />
+                <InfoField
+                  label="등록일"
+                  value={format(new Date(item.createdAt), 'yyyy-MM-dd')}
+                />
+                <InfoField label="조회수" value={String(item.viewCount)} />
+                <InfoField label="게시판" value={item.boardName} />
+              </div>
+            }
+            actions={
+              isSelected && isMyPost ? (
+                <div className="flex gap-2 w-full">
+                  <Button
+                    variant="outline"
+                    className="flex-1"
+                    onClick={() =>
+                      router.push(`/ko/board/${item.boardCode}/${item.id}/edit`)
+                    }
+                  >
+                    <Pencil className="w-4 h-4 mr-2" /> 수정
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="flex-1 text-red-500 border-red-200 hover:bg-red-50 hover:text-red-600"
+                    onClick={() => handleDeleteClick(item.id, item.boardCode)}
+                  >
+                    <Trash2 className="w-4 h-4 mr-2" /> 삭제
+                  </Button>
+                </div>
+              ) : undefined
+            }
+          />
+        );
+      },
+
+      renderDialogs: () => (
+        <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>게시글 삭제</AlertDialogTitle>
+              <AlertDialogDescription>정말 삭제하시겠습니까?</AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>취소</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={handleConfirmDelete}
+                className="bg-red-600 hover:bg-red-700"
               >
-                <Pencil className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8 text-red-500 hover:text-red-600 hover:bg-red-50"
-                onClick={() => handleDeleteClick(item.id, item.boardCode)}
-              >
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            </div>
-          )}
-        </TableCell>
-      </TableRow>
-    );
-  }, [selectedItems, currentUserId, toggleSelection, handleRowClick, handleDeleteClick, router]);
-
-  // ===== 모바일 카드 렌더링 =====
-  const renderMobileCard = useCallback((
-    item: Post,
-    index: number,
-    globalIndex: number,
-    isSelected: boolean,
-    onToggle: () => void
-  ) => {
-    const isMyPost = item.authorId === currentUserId;
-
-    return (
-      <ListMobileCard
-        id={item.id}
-        title={
-          <div className="flex items-center gap-2">
-            {item.isPinned && (
-              <span className="text-xs text-red-500 font-medium">[공지]</span>
-            )}
-            {item.isSecret && (
-              <span className="text-xs text-gray-500 font-medium">[비밀]</span>
-            )}
-            <span>{item.title}</span>
-          </div>
-        }
-        isSelected={isSelected}
-        onToggleSelection={onToggle}
-        infoGrid={
-          <div className="grid grid-cols-2 gap-3">
-            <InfoField label="작성자" value={item.authorName} />
-            <InfoField label="등록일" value={format(new Date(item.createdAt), 'yyyy-MM-dd')} />
-            <InfoField label="조회수" value={String(item.viewCount)} />
-            <InfoField label="게시판" value={item.boardName} />
-          </div>
-        }
-        actions={
-          isSelected && isMyPost ? (
-            <div className="flex gap-2 w-full">
-              <Button
-                variant="outline"
-                className="flex-1"
-                onClick={() => router.push(`/ko/board/${item.boardCode}/${item.id}/edit`)}
-              >
-                <Pencil className="w-4 h-4 mr-2" /> 수정
-              </Button>
-              <Button
-                variant="outline"
-                className="flex-1 text-red-500 border-red-200 hover:bg-red-50 hover:text-red-600"
-                onClick={() => handleDeleteClick(item.id, item.boardCode)}
-              >
-                <Trash2 className="w-4 h-4 mr-2" /> 삭제
-              </Button>
-            </div>
-          ) : undefined
-        }
-        onClick={() => handleRowClick(item)}
-      />
-    );
-  }, [currentUserId, handleRowClick, handleDeleteClick, router]);
-
-  // ===== 헤더 액션 =====
-  const headerActions = (
-    <>
-      <DateRangeSelector
-        startDate={startDate}
-        endDate={endDate}
-        onStartDateChange={setStartDate}
-        onEndDateChange={setEndDate}
-      />
-      <Button className="ml-auto" onClick={handleNewPost}>
-        <Plus className="h-4 w-4 mr-2" />
-        게시글 등록
-      </Button>
-    </>
+                삭제
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      ),
+    }),
+    [
+      sortedData,
+      totalItems,
+      totalPages,
+      tabs,
+      activeTab,
+      startDate,
+      endDate,
+      handleNewPost,
+      currentUserId,
+      router,
+      handleDeleteClick,
+      showDeleteDialog,
+      handleConfirmDelete,
+    ]
   );
 
   // ===== 로딩 상태 =====
-  if (isLoading && posts.length === 0) {
+  if (isLoading && posts.length === 0 && boards.length === 0) {
     return <ContentLoadingSpinner text="게시글을 불러오는 중..." />;
   }
 
   return (
-    <>
-      <IntegratedListTemplateV2<Post>
-        title="게시판"
-        description="게시판의 게시글을 등록하고 관리합니다."
-        icon={FileText}
-        headerActions={headerActions}
-        searchValue={searchQuery}
-        onSearchChange={setSearchQuery}
-        searchPlaceholder="제목, 작성자 검색..."
-        tabs={tabs}
-        activeTab={activeTab}
-        onTabChange={handleTabChange}
-        tableColumns={tableColumns}
-        data={sortedData}
-        totalCount={totalItems}
-        allData={sortedData}
-        selectedItems={selectedItems}
-        onToggleSelection={toggleSelection}
-        onToggleSelectAll={toggleSelectAll}
-        getItemId={(item) => item.id}
-        renderTableRow={renderTableRow}
-        renderMobileCard={renderMobileCard}
-        pagination={{
-          currentPage,
-          totalPages,
-          totalItems,
-          itemsPerPage,
-          onPageChange: setCurrentPage,
-        }}
-      />
-
-      {/* 삭제 확인 다이얼로그 */}
-      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>게시글 삭제</AlertDialogTitle>
-            <AlertDialogDescription>
-              정말 삭제하시겠습니까?
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmDelete}
-              className="bg-red-600 hover:bg-red-700"
-            >
-              삭제
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
+    <UniversalListPage<Post>
+      config={boardListConfig}
+      initialData={sortedData}
+      initialTotalCount={totalItems}
+      externalPagination={{
+        currentPage,
+        totalPages,
+        totalItems,
+        itemsPerPage,
+        onPageChange: (page) => {
+          setCurrentPage(page);
+        },
+      }}
+      onTabChange={handleTabChange}
+      onSearchChange={setSearchQuery}
+    />
   );
 }
 
-export default BoardList;
+export default BoardList;

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} />;
 }