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/PopupManagement/PopupList.tsx

@@ -1,42 +1,30 @@
 'use client';
 
 /**
- * 팝업관리 리스트 컴포넌트
+ * 팝업관리 리스트 - UniversalListPage 마이그레이션
  *
- * 디자인 스펙:
- * - 페이지 타이틀: 팝업관리
- * - 페이지 설명: 팝업 목록을 관리합니다.
- * - 테이블 컬럼: 체크박스, No, 대상, 제목, 상태, 작성자, 등록일, 기간, 작업
+ * 기존 IntegratedListTemplateV2 → UniversalListPage config 기반으로 변환
+ * - 클라이언트 사이드 필터링 (검색)
+ * - headerActions (팝업 등록 버튼)
+ * - 선택 시 수정/삭제 버튼
  */
 
-import { useState, useMemo, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
-import { Megaphone, Plus, Pencil, Trash2 } from 'lucide-react';
+import { Megaphone, Pencil, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { TableCell, TableRow } from '@/components/ui/table';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent } from '@/components/ui/card';
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import {
-  IntegratedListTemplateV2,
-  type TableColumn,
-  type PaginationConfig,
-} from '@/components/templates/IntegratedListTemplateV2';
+  UniversalListPage,
+  type UniversalListConfig,
+  type SelectionHandlers,
+  type RowClickHandlers,
+} from '@/components/templates/UniversalListPage';
 import { type Popup } from './types';
-import { deletePopup, deletePopups } from './actions';
-import { isNextRedirectError } from '@/lib/utils/redirect-error';
-
-const ITEMS_PER_PAGE = 10;
+import { deletePopup } from './actions';
 
 interface PopupListProps {
   initialData: Popup[];
@@ -45,65 +33,13 @@ interface PopupListProps {
 export function PopupList({ initialData }: PopupListProps) {
   const router = useRouter();
 
-  // ===== 상태 관리 =====
-  const [popups, setPopups] = useState<Popup[]>(initialData);
-  const [searchValue, setSearchValue] = useState('');
-  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
-  const [currentPage, setCurrentPage] = useState(1);
-
-  // 삭제 확인 다이얼로그
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
-
-  // ===== 필터링된 데이터 =====
-  const filteredData = useMemo(() => {
-    let result = [...popups];
-
-    // 검색 필터
-    if (searchValue) {
-      const searchLower = searchValue.toLowerCase();
-      result = result.filter(
-        (item) =>
-          item.title.toLowerCase().includes(searchLower) ||
-          item.author.toLowerCase().includes(searchLower)
-      );
-    }
-
-    return result;
-  }, [popups, searchValue]);
-
-  // ===== 페이지네이션 =====
-  const paginatedData = useMemo(() => {
-    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
-    return filteredData.slice(startIndex, startIndex + ITEMS_PER_PAGE);
-  }, [filteredData, currentPage]);
-
-  const totalPages = Math.ceil(filteredData.length / ITEMS_PER_PAGE);
-
   // ===== 핸들러 =====
-  const handleToggleSelection = useCallback((id: string) => {
-    setSelectedItems((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(id)) {
-        newSet.delete(id);
-      } else {
-        newSet.add(id);
-      }
-      return newSet;
-    });
-  }, []);
-
-  const handleToggleSelectAll = useCallback(() => {
-    if (selectedItems.size === paginatedData.length) {
-      setSelectedItems(new Set());
-    } else {
-      setSelectedItems(new Set(paginatedData.map((item) => item.id)));
-    }
-  }, [selectedItems.size, paginatedData]);
-
-  const handleRowClick = useCallback((item: Popup) => {
-    router.push(`/ko/settings/popup-management/${item.id}`);
-  }, [router]);
+  const handleRowClick = useCallback(
+    (item: Popup) => {
+      router.push(`/ko/settings/popup-management/${item.id}`);
+    },
+    [router]
+  );
 
   const handleEdit = useCallback(
     (id: string) => {
@@ -112,243 +48,197 @@ export function PopupList({ initialData }: PopupListProps) {
     [router]
   );
 
-  const handleDelete = useCallback((id: string) => {
-    setDeleteTargetId(id);
-    setShowDeleteDialog(true);
-  }, []);
-
-  const handleConfirmDelete = useCallback(async () => {
-    try {
-      if (deleteTargetId) {
-        const result = await deletePopup(deleteTargetId);
-        if (result.success) {
-          setPopups((prev) => prev.filter((p) => p.id !== deleteTargetId));
-        } else {
-          console.error('[PopupList] Delete failed:', result.error);
-        }
-      }
-      setShowDeleteDialog(false);
-      setDeleteTargetId(null);
-    } catch (error) {
-      if (isNextRedirectError(error)) throw error;
-      console.error('[PopupList] handleConfirmDelete error:', error);
-    }
-  }, [deleteTargetId]);
-
-  const handleBulkDelete = useCallback(async () => {
-    try {
-      const ids = Array.from(selectedItems);
-      const result = await deletePopups(ids);
-      if (result.success) {
-        setPopups((prev) => prev.filter((p) => !selectedItems.has(p.id)));
-      } else {
-        console.error('[PopupList] Bulk delete failed:', result.error);
-      }
-      setSelectedItems(new Set());
-    } catch (error) {
-      if (isNextRedirectError(error)) throw error;
-      console.error('[PopupList] handleBulkDelete error:', error);
-    }
-  }, [selectedItems]);
-
   const handleCreate = useCallback(() => {
     router.push('/ko/settings/popup-management/new');
   }, [router]);
 
-  // ===== 테이블 컬럼 =====
-  const tableColumns: TableColumn[] = [
-    { key: 'no', label: '번호', className: 'w-[60px] text-center' },
-    { key: 'target', label: '대상', className: 'w-[80px] text-center' },
-    { key: 'title', label: '제목', className: 'min-w-[150px]' },
-    { key: 'status', label: '상태', className: 'w-[80px] text-center' },
-    { key: 'author', label: '작성자', className: 'w-[100px] text-center' },
-    { key: 'createdAt', label: '등록일', className: 'w-[110px] text-center' },
-    { key: 'period', label: '기간', className: 'w-[180px] text-center' },
-    { key: 'actions', label: '작업', className: 'w-[180px] text-center' },
-  ];
+  // ===== UniversalListPage Config =====
+  const config: UniversalListConfig<Popup> = useMemo(
+    () => ({
+      // 페이지 기본 정보
+      title: '팝업관리',
+      description: '팝업 목록을 관리합니다.',
+      icon: Megaphone,
+      basePath: '/settings/popup-management',
 
-  // ===== 테이블 행 렌더링 =====
-  const renderTableRow = useCallback(
-    (item: Popup, index: number, globalIndex: number) => {
-      const isSelected = selectedItems.has(item.id);
+      // ID 추출
+      idField: '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={() => handleToggleSelection(item.id)}
-            />
-          </TableCell>
-          <TableCell className="text-center">{globalIndex}</TableCell>
-          <TableCell className="text-center">
-            {item.target === 'all' ? '전사' : item.targetName || '부서별'}
-          </TableCell>
-          <TableCell>{item.title}</TableCell>
-          <TableCell className="text-center">
-            <Badge variant={item.status === 'active' ? 'default' : 'secondary'}>
-              {item.status === 'active' ? '사용함' : '사용안함'}
-            </Badge>
-          </TableCell>
-          <TableCell className="text-center">{item.author}</TableCell>
-          <TableCell className="text-center">{item.createdAt}</TableCell>
-          <TableCell className="text-center">
-            {item.startDate}~{item.endDate}
-          </TableCell>
-          <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
-            {isSelected && (
-              <div className="flex items-center justify-center gap-1">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => handleEdit(item.id)}
-                  title="수정"
-                >
-                  <Pencil className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => handleDelete(item.id)}
-                  title="삭제"
-                  className="text-destructive hover:text-destructive"
-                >
-                  <Trash2 className="h-4 w-4" />
-                </Button>
-              </div>
-            )}
-          </TableCell>
-        </TableRow>
-      );
-    },
-    [
-      selectedItems,
-      handleRowClick,
-      handleToggleSelection,
-      handleEdit,
-      handleDelete,
-    ]
-  );
+      // API 액션 (initialData 사용)
+      actions: {
+        getList: async () => {
+          // initialData를 사용하므로 빈 배열 반환 (실제로는 호출되지 않음)
+          return { success: true, data: [], totalCount: 0 };
+        },
+        deleteItem: async (id: string) => {
+          const result = await deletePopup(id);
+          return { success: result.success, error: result.error };
+        },
+      },
 
-  // ===== 모바일 카드 렌더링 =====
-  const renderMobileCard = useCallback(
-    (
-      item: Popup,
-      index: number,
-      globalIndex: number,
-      isSelected: boolean,
-      onToggle: () => void
-    ) => {
-      return (
-        <Card
-          className="cursor-pointer hover:bg-muted/50"
-          onClick={() => handleRowClick(item)}
-        >
-          <CardContent className="p-4">
-            <div className="flex items-start gap-3">
-              <div onClick={(e) => e.stopPropagation()}>
-                <Checkbox checked={isSelected} onCheckedChange={onToggle} />
-              </div>
-              <div className="flex-1 space-y-2">
-                <div className="flex items-center justify-between">
-                  <span className="text-sm text-muted-foreground">#{globalIndex}</span>
-                  <Badge variant={item.status === 'active' ? 'default' : 'secondary'}>
-                    {item.status === 'active' ? '사용함' : '사용안함'}
-                  </Badge>
+      // 테이블 컬럼
+      columns: [
+        { key: 'no', label: '번호', className: 'w-[60px] text-center' },
+        { key: 'target', label: '대상', className: 'w-[80px] text-center' },
+        { key: 'title', label: '제목', className: 'min-w-[150px]' },
+        { key: 'status', label: '상태', className: 'w-[80px] text-center' },
+        { key: 'author', label: '작성자', className: 'w-[100px] text-center' },
+        { key: 'createdAt', label: '등록일', className: 'w-[110px] text-center' },
+        { key: 'period', label: '기간', className: 'w-[180px] text-center' },
+        { key: 'actions', label: '작업', className: 'w-[180px] text-center' },
+      ],
+
+      // 클라이언트 사이드 필터링
+      clientSideFiltering: true,
+      itemsPerPage: 10,
+
+      // 검색 필터
+      searchPlaceholder: '제목, 작성자로 검색...',
+      searchFilter: (item, searchValue) => {
+        const searchLower = searchValue.toLowerCase();
+        return (
+          item.title.toLowerCase().includes(searchLower) ||
+          item.author.toLowerCase().includes(searchLower)
+        );
+      },
+
+      // 공통 헤더 옵션: 등록 버튼 (오른쪽 끝)
+      createButton: {
+        label: '팝업 등록',
+        onClick: handleCreate,
+      },
+
+      // 삭제 확인 메시지
+      deleteConfirmMessage: {
+        title: '팝업 삭제',
+        description: '선택한 팝업을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.',
+      },
+
+      // 테이블 행 렌더링
+      renderTableRow: (
+        item: Popup,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<Popup>
+      ) => {
+        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-center">{globalIndex}</TableCell>
+            <TableCell className="text-center">
+              {item.target === 'all' ? '전사' : item.targetName || '부서별'}
+            </TableCell>
+            <TableCell>{item.title}</TableCell>
+            <TableCell className="text-center">
+              <Badge variant={item.status === 'active' ? 'default' : 'secondary'}>
+                {item.status === 'active' ? '사용함' : '사용안함'}
+              </Badge>
+            </TableCell>
+            <TableCell className="text-center">{item.author}</TableCell>
+            <TableCell className="text-center">{item.createdAt}</TableCell>
+            <TableCell className="text-center">
+              {item.startDate}~{item.endDate}
+            </TableCell>
+            <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+              {handlers.isSelected && (
+                <div className="flex items-center justify-center gap-1">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleEdit(item.id)}
+                    title="수정"
+                  >
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handlers.onDelete?.(item)}
+                    title="삭제"
+                    className="text-destructive hover:text-destructive"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
                 </div>
-                <h3 className="font-medium">{item.title}</h3>
-                <div className="flex flex-wrap gap-2 text-sm text-muted-foreground">
-                  <span>{item.target === 'all' ? '전사' : item.targetName || '부서별'}</span>
-                  <span>|</span>
-                  <span>{item.author}</span>
-                  <span>|</span>
-                  <span>{item.createdAt}</span>
+              )}
+            </TableCell>
+          </TableRow>
+        );
+      },
+
+      // 모바일 카드 렌더링
+      renderMobileCard: (
+        item: Popup,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<Popup>
+      ) => {
+        return (
+          <Card
+            className="cursor-pointer hover:bg-muted/50"
+            onClick={() => handleRowClick(item)}
+          >
+            <CardContent className="p-4">
+              <div className="flex items-start gap-3">
+                <div onClick={(e) => e.stopPropagation()}>
+                  <Checkbox
+                    checked={handlers.isSelected}
+                    onCheckedChange={handlers.onToggle}
+                  />
                 </div>
-                <div className="text-sm text-muted-foreground">
-                  기간: {item.startDate} ~ {item.endDate}
-                </div>
-                {isSelected && (
-                  <div className="flex gap-2 pt-2" onClick={(e) => e.stopPropagation()}>
-                    <Button variant="outline" size="sm" onClick={() => handleEdit(item.id)}>
-                      수정
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="text-destructive"
-                      onClick={() => handleDelete(item.id)}
-                    >
-                      삭제
-                    </Button>
+                <div className="flex-1 space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">#{globalIndex}</span>
+                    <Badge variant={item.status === 'active' ? 'default' : 'secondary'}>
+                      {item.status === 'active' ? '사용함' : '사용안함'}
+                    </Badge>
                   </div>
-                )}
+                  <h3 className="font-medium">{item.title}</h3>
+                  <div className="flex flex-wrap gap-2 text-sm text-muted-foreground">
+                    <span>{item.target === 'all' ? '전사' : item.targetName || '부서별'}</span>
+                    <span>|</span>
+                    <span>{item.author}</span>
+                    <span>|</span>
+                    <span>{item.createdAt}</span>
+                  </div>
+                  <div className="text-sm text-muted-foreground">
+                    기간: {item.startDate} ~ {item.endDate}
+                  </div>
+                  {handlers.isSelected && (
+                    <div className="flex gap-2 pt-2" onClick={(e) => e.stopPropagation()}>
+                      <Button variant="outline" size="sm" onClick={() => handleEdit(item.id)}>
+                        수정
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="text-destructive"
+                        onClick={() => handlers.onDelete?.(item)}
+                      >
+                        삭제
+                      </Button>
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
-          </CardContent>
-        </Card>
-      );
-    },
-    [handleRowClick, handleEdit, handleDelete]
+            </CardContent>
+          </Card>
+        );
+      },
+    }),
+    [handleRowClick, handleEdit, handleCreate]
   );
 
-  // ===== 페이지네이션 설정 =====
-  const pagination: PaginationConfig = {
-    currentPage,
-    totalPages,
-    totalItems: filteredData.length,
-    itemsPerPage: ITEMS_PER_PAGE,
-    onPageChange: setCurrentPage,
-  };
-
-  return (
-    <>
-      <IntegratedListTemplateV2
-        title="팝업관리"
-        description="팝업 목록을 관리합니다."
-        icon={Megaphone}
-        headerActions={
-          <Button className="ml-auto" onClick={handleCreate}>
-            <Plus className="h-4 w-4 mr-2" />
-            팝업 등록
-          </Button>
-        }
-        searchValue={searchValue}
-        onSearchChange={setSearchValue}
-        searchPlaceholder="제목, 작성자로 검색..."
-        tableColumns={tableColumns}
-        data={paginatedData}
-        allData={filteredData}
-        selectedItems={selectedItems}
-        onToggleSelection={handleToggleSelection}
-        onToggleSelectAll={handleToggleSelectAll}
-        getItemId={(item) => item.id}
-        onBulkDelete={handleBulkDelete}
-        renderTableRow={renderTableRow}
-        renderMobileCard={renderMobileCard}
-        pagination={pagination}
-      />
-
-      {/* 삭제 확인 다이얼로그 */}
-      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>팝업 삭제</AlertDialogTitle>
-            <AlertDialogDescription>
-              선택한 팝업을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction onClick={handleConfirmDelete}>삭제</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
+  return <UniversalListPage config={config} initialData={initialData} />;
 }
 
 export default PopupList;