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/quality/InspectionManagement/InspectionList.tsx

@@ -1,27 +1,31 @@
 'use client';
 
 /**
- * 검사 목록 페이지
- * IntegratedListTemplateV2 패턴 적용
- * API 연동 완료 (2025-12-26)
+ * 검사 목록 - UniversalListPage 마이그레이션
+ *
+ * 기존 IntegratedListTemplateV2 → UniversalListPage config 기반으로 변환
+ * - 서버 사이드 페이지네이션 (getInspections API)
+ * - 통계 카드 (getInspectionStats API)
+ * - 상태별 탭 필터 (전체/대기/진행중/완료)
  */
 
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { Plus, ClipboardCheck, Clock, PlayCircle, CheckCircle2, AlertTriangle } from 'lucide-react';
-import { ContentLoadingSpinner } from '@/components/ui/loading-spinner';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { TableCell, TableRow } from '@/components/ui/table';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
-  IntegratedListTemplateV2,
-  TabOption,
-  TableColumn,
-  StatCard,
-} from '@/components/templates/IntegratedListTemplateV2';
+  UniversalListPage,
+  type UniversalListConfig,
+  type SelectionHandlers,
+  type RowClickHandlers,
+  type TabOption,
+  type StatCard,
+  type ListParams,
+} from '@/components/templates/UniversalListPage';
 import { ListMobileCard, InfoField } from '@/components/organisms/ListMobileCard';
-import { toast } from 'sonner';
 import { getInspections, getInspectionStats } from './actions';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import { statusColorMap, inspectionTypeLabels } from './mockData';
@@ -36,273 +40,247 @@ const ITEMS_PER_PAGE = 20;
 export function InspectionList() {
   const router = useRouter();
 
-  // ===== 상태 관리 =====
-  const [searchTerm, setSearchTerm] = useState('');
-  const [activeTab, setActiveTab] = useState<TabFilter>('전체');
-  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
-  const [currentPage, setCurrentPage] = useState(1);
-  const [inspections, setInspections] = useState<Inspection[]>([]);
-  const [totalItems, setTotalItems] = useState(0);
-  const [totalPages, setTotalPages] = useState(1);
+  // ===== 통계 데이터 (외부 관리) =====
   const [statsData, setStatsData] = useState<InspectionStats>({
     waitingCount: 0,
     inProgressCount: 0,
     completedCount: 0,
     defectRate: 0,
   });
-  const [isLoading, setIsLoading] = useState(true);
-
-  // ===== 데이터 로드 =====
-  const loadData = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      // 병렬로 목록 + 통계 조회
-      const [listResult, statsResult] = await Promise.all([
-        getInspections({
-          page: currentPage,
-          size: ITEMS_PER_PAGE,
-          q: searchTerm || undefined,
-          status: activeTab !== '전체' ? activeTab : undefined,
-        }),
-        getInspectionStats(),
-      ]);
-
-      if (listResult.success) {
-        setInspections(listResult.data);
-        setTotalItems(listResult.pagination.total);
-        setTotalPages(listResult.pagination.lastPage);
-      } else {
-        toast.error(listResult.error || '검사 목록 조회에 실패했습니다.');
-      }
-
-      if (statsResult.success && statsResult.data) {
-        setStatsData(statsResult.data);
-      }
-    } catch (error) {
-      if (isNextRedirectError(error)) throw error;
-      console.error('[InspectionList] loadData error:', error);
-      toast.error('데이터 로드 중 오류가 발생했습니다.');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [currentPage, searchTerm, activeTab]);
+  const [totalItems, setTotalItems] = useState(0);
 
+  // 초기 통계 로드
   useEffect(() => {
-    loadData();
-  }, [loadData]);
-
-  // 탭 옵션 (통계 기반)
-  const tabs: TabOption[] = [
-    { value: '전체', label: '전체', count: totalItems },
-    { value: '대기', label: '대기', count: statsData.waitingCount, color: 'gray' },
-    { value: '진행중', label: '진행중', count: statsData.inProgressCount, color: 'blue' },
-    { value: '완료', label: '완료', count: statsData.completedCount, color: 'green' },
-  ];
-
-  // 통계 카드
-  const stats: StatCard[] = [
-    {
-      label: '금일 대기 건수',
-      value: `${statsData.waitingCount}건`,
-      icon: Clock,
-      iconColor: 'text-gray-600',
-    },
-    {
-      label: '진행 중 검사',
-      value: `${statsData.inProgressCount}건`,
-      icon: PlayCircle,
-      iconColor: 'text-blue-600',
-    },
-    {
-      label: '금일 완료 건수',
-      value: `${statsData.completedCount}건`,
-      icon: CheckCircle2,
-      iconColor: 'text-green-600',
-    },
-    {
-      label: '불량 발생률',
-      value: `${statsData.defectRate.toFixed(1)}%`,
-      icon: AlertTriangle,
-      iconColor: statsData.defectRate > 0 ? 'text-red-600' : 'text-gray-400',
-    },
-  ];
-
-  // 테이블 컬럼
-  const tableColumns: TableColumn[] = [
-    { key: 'no', label: '번호', className: 'w-[60px] text-center' },
-    { key: 'inspectionType', label: '검사유형', className: 'w-[80px]' },
-    { key: 'requestDate', label: '요청일', className: 'w-[100px]' },
-    { key: 'itemName', label: '품목명', className: 'min-w-[150px]' },
-    { key: 'lotNo', label: 'LOT NO', className: 'min-w-[130px]' },
-    { key: 'status', label: '상태', className: 'w-[80px]' },
-    { key: 'inspector', label: '담당자', className: 'w-[80px]' },
-  ];
-
-  // 페이지네이션 설정 (API 기반)
-  const pagination = {
-    currentPage,
-    totalPages,
-    totalItems,
-    itemsPerPage: ITEMS_PER_PAGE,
-    onPageChange: setCurrentPage,
-  };
-
-  // 선택 핸들러
-  const handleToggleSelection = useCallback((id: string) => {
-    setSelectedItems((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(id)) {
-        newSet.delete(id);
-      } else {
-        newSet.add(id);
+    const loadStats = async () => {
+      try {
+        const result = await getInspectionStats();
+        if (result.success && result.data) {
+          setStatsData(result.data);
+        }
+      } catch (error) {
+        if (isNextRedirectError(error)) throw error;
+        console.error('[InspectionList] loadStats error:', error);
       }
-      return newSet;
-    });
+    };
+    loadStats();
   }, []);
 
-  const handleToggleSelectAll = useCallback(() => {
-    if (selectedItems.size === inspections.length) {
-      setSelectedItems(new Set());
-    } else {
-      setSelectedItems(new Set(inspections.map((i) => i.id)));
-    }
-  }, [inspections, selectedItems.size]);
+  // ===== 행 클릭 핸들러 =====
+  const handleRowClick = useCallback(
+    (item: Inspection) => {
+      router.push(`/quality/inspections/${item.id}`);
+    },
+    [router]
+  );
 
-  // 상세 페이지 이동
-  const handleView = useCallback((id: string) => {
-    router.push(`/quality/inspections/${id}`);
+  // ===== 등록 핸들러 =====
+  const handleCreate = useCallback(() => {
+    router.push('/quality/inspections/new');
   }, [router]);
 
-  // 등록 페이지 이동
-  const handleCreate = () => {
-    router.push('/quality/inspections/new');
-  };
+  // ===== 탭 옵션 (통계 기반) =====
+  const tabs: TabOption[] = useMemo(
+    () => [
+      { value: '전체', label: '전체', count: totalItems },
+      { value: '대기', label: '대기', count: statsData.waitingCount, color: 'gray' },
+      { value: '진행중', label: '진행중', count: statsData.inProgressCount, color: 'blue' },
+      { value: '완료', label: '완료', count: statsData.completedCount, color: 'green' },
+    ],
+    [totalItems, statsData]
+  );
 
-  // 탭 변경 시 페이지 리셋
-  const handleTabChange = (value: string) => {
-    setActiveTab(value as TabFilter);
-    setCurrentPage(1);
-    setSelectedItems(new Set());
-  };
+  // ===== 통계 카드 =====
+  const stats: StatCard[] = useMemo(
+    () => [
+      {
+        label: '금일 대기 건수',
+        value: `${statsData.waitingCount}건`,
+        icon: Clock,
+        iconColor: 'text-gray-600',
+      },
+      {
+        label: '진행 중 검사',
+        value: `${statsData.inProgressCount}건`,
+        icon: PlayCircle,
+        iconColor: 'text-blue-600',
+      },
+      {
+        label: '금일 완료 건수',
+        value: `${statsData.completedCount}건`,
+        icon: CheckCircle2,
+        iconColor: 'text-green-600',
+      },
+      {
+        label: '불량 발생률',
+        value: `${statsData.defectRate.toFixed(1)}%`,
+        icon: AlertTriangle,
+        iconColor: statsData.defectRate > 0 ? 'text-red-600' : 'text-gray-400',
+      },
+    ],
+    [statsData]
+  );
 
-  // 검색 변경 시 페이지 리셋
-  const handleSearchChange = (value: string) => {
-    setSearchTerm(value);
-    setCurrentPage(1);
-  };
+  // ===== UniversalListPage Config =====
+  const config: UniversalListConfig<Inspection> = useMemo(
+    () => ({
+      // 페이지 기본 정보
+      title: '검사 목록',
+      description: '품질검사 관리',
+      icon: ClipboardCheck,
+      basePath: '/quality/inspections',
 
-  // 테이블 행 렌더링
-  const renderTableRow = (inspection: Inspection, index: number, globalIndex: number) => {
-    const isSelected = selectedItems.has(inspection.id);
+      // ID 추출
+      idField: 'id',
 
-    return (
-      <TableRow
-        key={inspection.id}
-        className={`cursor-pointer hover:bg-muted/50 ${isSelected ? 'bg-blue-50' : ''}`}
-        onClick={() => handleView(inspection.id)}
-      >
-        <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
-          <Checkbox
-            checked={isSelected}
-            onCheckedChange={() => handleToggleSelection(inspection.id)}
+      // API 액션 (서버 사이드 페이지네이션)
+      actions: {
+        getList: async (params?: ListParams) => {
+          try {
+            const result = await getInspections({
+              page: params?.page || 1,
+              size: params?.pageSize || ITEMS_PER_PAGE,
+              q: params?.search || undefined,
+              status: params?.tab !== '전체' ? (params?.tab as InspectionStatus) : undefined,
+            });
+
+            if (result.success) {
+              // 통계 다시 로드
+              const statsResult = await getInspectionStats();
+              if (statsResult.success && statsResult.data) {
+                setStatsData(statsResult.data);
+              }
+
+              // totalItems 업데이트 (탭용)
+              setTotalItems(result.pagination.total);
+
+              return {
+                success: true,
+                data: result.data,
+                totalCount: result.pagination.total,
+                totalPages: result.pagination.lastPage,
+              };
+            }
+            return { success: false, error: result.error };
+          } catch (error) {
+            if (isNextRedirectError(error)) throw error;
+            return { success: false, error: '데이터 로드 중 오류가 발생했습니다.' };
+          }
+        },
+      },
+
+      // 테이블 컬럼
+      columns: [
+        { key: 'no', label: '번호', className: 'w-[60px] text-center' },
+        { key: 'inspectionType', label: '검사유형', className: 'w-[80px]' },
+        { key: 'requestDate', label: '요청일', className: 'w-[100px]' },
+        { key: 'itemName', label: '품목명', className: 'min-w-[150px]' },
+        { key: 'lotNo', label: 'LOT NO', className: 'min-w-[130px]' },
+        { key: 'status', label: '상태', className: 'w-[80px]' },
+        { key: 'inspector', label: '담당자', className: 'w-[80px]' },
+      ],
+
+      // 서버 사이드 페이지네이션
+      clientSideFiltering: false,
+      itemsPerPage: ITEMS_PER_PAGE,
+
+      // 검색
+      searchPlaceholder: 'LOT번호, 품목명, 공정명 검색...',
+
+      // 탭 설정
+      tabs,
+      defaultTab: '전체',
+
+      // 통계 카드
+      stats,
+
+      // 헤더 액션 (등록 버튼)
+      headerActions: () => (
+        <Button onClick={handleCreate}>
+          <Plus className="w-4 h-4 mr-1.5" />
+          검사 등록
+        </Button>
+      ),
+
+      // 테이블 행 렌더링
+      renderTableRow: (
+        item: Inspection,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<Inspection>
+      ) => {
+        return (
+          <TableRow
+            key={item.id}
+            className={`cursor-pointer hover:bg-muted/50 ${handlers.isSelected ? 'bg-blue-50' : ''}`}
+            onClick={() => handleRowClick(item)}
+          >
+            <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+              <Checkbox
+                checked={handlers.isSelected}
+                onCheckedChange={handlers.onToggle}
+              />
+            </TableCell>
+            <TableCell className="text-center text-muted-foreground">{globalIndex}</TableCell>
+            <TableCell>
+              <Badge variant="outline" className="text-xs">
+                {item.inspectionType}
+              </Badge>
+            </TableCell>
+            <TableCell>{item.requestDate}</TableCell>
+            <TableCell className="font-medium">{item.itemName}</TableCell>
+            <TableCell>{item.lotNo}</TableCell>
+            <TableCell>
+              <Badge className={`${statusColorMap[item.status]} border-0`}>
+                {item.status}
+              </Badge>
+            </TableCell>
+            <TableCell>{item.inspector || '-'}</TableCell>
+          </TableRow>
+        );
+      },
+
+      // 모바일 카드 렌더링
+      renderMobileCard: (
+        item: Inspection,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<Inspection>
+      ) => {
+        return (
+          <ListMobileCard
+            key={item.id}
+            id={item.id}
+            isSelected={handlers.isSelected}
+            onToggleSelection={handlers.onToggle}
+            onClick={() => handleRowClick(item)}
+            headerBadges={
+              <>
+                <Badge variant="outline" className="text-xs">#{globalIndex}</Badge>
+                <Badge variant="outline" className="text-xs">{item.inspectionType}</Badge>
+              </>
+            }
+            title={item.itemName}
+            statusBadge={
+              <Badge className={`${statusColorMap[item.status]} border-0`}>
+                {item.status}
+              </Badge>
+            }
+            infoGrid={
+              <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+                <InfoField label="검사유형" value={inspectionTypeLabels[item.inspectionType]} />
+                <InfoField label="LOT NO" value={item.lotNo} />
+                <InfoField label="요청일" value={item.requestDate} />
+                <InfoField label="담당자" value={item.inspector || '-'} />
+                <InfoField label="공정명" value={item.processName} />
+                <InfoField label="수량" value={`${item.quantity} ${item.unit}`} />
+              </div>
+            }
           />
-        </TableCell>
-        <TableCell className="text-center text-muted-foreground">{globalIndex}</TableCell>
-        <TableCell>
-          <Badge variant="outline" className="text-xs">
-            {inspection.inspectionType}
-          </Badge>
-        </TableCell>
-        <TableCell>{inspection.requestDate}</TableCell>
-        <TableCell className="font-medium">{inspection.itemName}</TableCell>
-        <TableCell>{inspection.lotNo}</TableCell>
-        <TableCell>
-          <Badge className={`${statusColorMap[inspection.status]} border-0`}>
-            {inspection.status}
-          </Badge>
-        </TableCell>
-        <TableCell>{inspection.inspector || '-'}</TableCell>
-      </TableRow>
-    );
-  };
-
-  // 모바일 카드 렌더링
-  const renderMobileCard = (
-    inspection: Inspection,
-    index: number,
-    globalIndex: number,
-    isSelected: boolean,
-    onToggle: () => void
-  ) => {
-    return (
-      <ListMobileCard
-        id={inspection.id}
-        isSelected={isSelected}
-        onToggleSelection={onToggle}
-        onClick={() => handleView(inspection.id)}
-        headerBadges={
-          <>
-            <Badge variant="outline" className="text-xs">#{globalIndex}</Badge>
-            <Badge variant="outline" className="text-xs">{inspection.inspectionType}</Badge>
-          </>
-        }
-        title={inspection.itemName}
-        statusBadge={
-          <Badge className={`${statusColorMap[inspection.status]} border-0`}>
-            {inspection.status}
-          </Badge>
-        }
-        infoGrid={
-          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
-            <InfoField label="검사유형" value={inspectionTypeLabels[inspection.inspectionType]} />
-            <InfoField label="LOT NO" value={inspection.lotNo} />
-            <InfoField label="요청일" value={inspection.requestDate} />
-            <InfoField label="담당자" value={inspection.inspector || '-'} />
-            <InfoField label="공정명" value={inspection.processName} />
-            <InfoField label="수량" value={`${inspection.quantity} ${inspection.unit}`} />
-          </div>
-        }
-      />
-    );
-  };
-
-  // 헤더 액션
-  const headerActions = (
-    <Button className="ml-auto" onClick={handleCreate}>
-      <Plus className="w-4 h-4 mr-1.5" />
-      검사 등록
-    </Button>
+        );
+      },
+    }),
+    [tabs, stats, handleRowClick, handleCreate]
   );
 
-  // 로딩 상태
-  if (isLoading && inspections.length === 0) {
-    return <ContentLoadingSpinner text="검사 목록을 불러오는 중..." />;
-  }
-
-  return (
-    <IntegratedListTemplateV2<Inspection>
-      title="검사 목록"
-      description="품질검사 관리"
-      icon={ClipboardCheck}
-      headerActions={headerActions}
-      stats={stats}
-      searchValue={searchTerm}
-      onSearchChange={handleSearchChange}
-      searchPlaceholder="LOT번호, 품목명, 공정명 검색..."
-      tabs={tabs}
-      activeTab={activeTab}
-      onTabChange={handleTabChange}
-      tableColumns={tableColumns}
-      data={inspections}
-      totalCount={totalItems}
-      allData={inspections}
-      selectedItems={selectedItems}
-      onToggleSelection={handleToggleSelection}
-      onToggleSelectAll={handleToggleSelectAll}
-      getItemId={(inspection) => inspection.id}
-      renderTableRow={renderTableRow}
-      renderMobileCard={renderMobileCard}
-      pagination={pagination}
-    />
-  );
-}
+  return <UniversalListPage config={config} />;
+}