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/outbound/ShipmentManagement/ShipmentList.tsx

@@ -1,12 +1,16 @@
 'use client';
 
 /**
- * 출하 목록 페이지
- * IntegratedListTemplateV2 패턴 적용
- * API 연동 완료 (2025-12-26)
+ * 출하 목록 - UniversalListPage 마이그레이션
+ *
+ * 기존 IntegratedListTemplateV2 → UniversalListPage config 기반으로 변환
+ * - 서버 사이드 페이지네이션 (getShipments API)
+ * - 통계 카드 (getShipmentStats API)
+ * - 상태별 탭 필터 (getShipmentStatsByStatus API)
+ * - 경고 배너 (출고불가 건수)
  */
 
-import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import {
   Truck,
@@ -17,27 +21,26 @@ import {
   Plus,
   Check,
   X,
-  AlertCircle,
 } 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 { Alert, AlertDescription } from '@/components/ui/alert';
 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 { getShipments, getShipmentStats, getShipmentStatsByStatus } from './actions';
 import {
   SHIPMENT_STATUS_LABELS,
   SHIPMENT_STATUS_STYLES,
-  PRIORITY_LABELS,
-  PRIORITY_STYLES,
   DELIVERY_METHOD_LABELS,
 } from './types';
 import type { ShipmentItem, ShipmentStatus, ShipmentStats, ShipmentStatusStats } from './types';
@@ -48,352 +51,314 @@ const ITEMS_PER_PAGE = 20;
 
 export function ShipmentList() {
   const router = useRouter();
-  const [searchTerm, setSearchTerm] = useState('');
-  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
-  const [currentPage, setCurrentPage] = useState(1);
-  const [activeFilter, setActiveFilter] = useState<string>('all');
 
-  // API 데이터 상태
-  const [items, setItems] = useState<ShipmentItem[]>([]);
+  // ===== 통계 및 상태별 통계 (외부 관리) =====
   const [shipmentStats, setShipmentStats] = useState<ShipmentStats | null>(null);
   const [statusStats, setStatusStats] = useState<ShipmentStatusStats>({});
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [totalItems, setTotalItems] = useState(0);
-  const [lastPage, setLastPage] = useState(1);
+  const [cannotShipCount, setCannotShipCount] = useState(0);
 
-  // API 데이터 로드
-  const loadData = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const [listResult, statsResult, statusStatsResult] = await Promise.all([
-        getShipments({
-          page: currentPage,
-          perPage: ITEMS_PER_PAGE,
-          status: activeFilter !== 'all' ? (activeFilter as ShipmentStatus) : undefined,
-          search: searchTerm || undefined,
-        }),
-        getShipmentStats(),
-        getShipmentStatsByStatus(),
-      ]);
-
-      if (listResult.success) {
-        setItems(listResult.data);
-        setTotalItems(listResult.pagination.total);
-        setLastPage(listResult.pagination.lastPage);
-      } else {
-        setError(listResult.error || '출하 목록 조회에 실패했습니다.');
-      }
-
-      if (statsResult.success && statsResult.data) {
-        setShipmentStats(statsResult.data);
-      }
-
-      if (statusStatsResult.success && statusStatsResult.data) {
-        setStatusStats(statusStatsResult.data);
-      }
-    } catch (err) {
-      if (isNextRedirectError(err)) throw err;
-      console.error('[ShipmentList] loadData error:', err);
-      setError('데이터를 불러오는 중 오류가 발생했습니다.');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [currentPage, activeFilter, searchTerm]);
-
-  // 데이터 로드
+  // 초기 통계 로드
   useEffect(() => {
-    loadData();
-  }, [loadData]);
-
-  // 출고 불가 건수 계산
-  const cannotShipCount = useMemo(() => {
-    return items.filter(item => !item.canShip).length;
-  }, [items]);
-
-  // 통계 카드
-  const stats: StatCard[] = [
-    {
-      label: '당일 출하',
-      value: `${shipmentStats?.todayShipmentCount || 0}건`,
-      icon: Package,
-      iconColor: 'text-green-600',
-    },
-    {
-      label: '출고 대기',
-      value: `${shipmentStats?.scheduledCount || 0}건`,
-      icon: Clock,
-      iconColor: 'text-yellow-600',
-    },
-    {
-      label: '배송중',
-      value: `${shipmentStats?.shippingCount || 0}건`,
-      icon: Truck,
-      iconColor: 'text-blue-600',
-    },
-    {
-      label: '긴급 출하',
-      value: `${shipmentStats?.urgentCount || 0}건`,
-      icon: AlertTriangle,
-      iconColor: 'text-red-600',
-    },
-  ];
-
-  // 테이블 컬럼
-  const tableColumns: TableColumn[] = [
-    { key: 'no', label: '번호', className: 'w-[60px] text-center' },
-    { key: 'shipmentNo', label: '출고번호', className: 'min-w-[130px]' },
-    { key: 'lotNo', label: '로트번호', className: 'min-w-[150px]' },
-    { key: 'scheduledDate', label: '출고예정일', className: 'w-[120px] text-center' },
-    { key: 'status', label: '상태', className: 'w-[100px] text-center' },
-    { key: 'canShip', label: '출하가능', className: 'w-[80px] text-center' },
-    { key: 'deliveryMethod', label: '배송', className: 'w-[100px] text-center' },
-    { key: 'customerName', label: '발주처', className: 'min-w-[120px]' },
-    { key: 'siteName', label: '현장명', className: 'min-w-[120px]' },
-    { key: 'manager', label: '담당', className: 'w-[80px] text-center' },
-    { key: 'deliveryTime', label: '납기(수배시간)', className: 'w-[120px] text-center' },
-  ];
-
-  // 선택 핸들러
-  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 [statsResult, statusStatsResult] = await Promise.all([
+          getShipmentStats(),
+          getShipmentStatsByStatus(),
+        ]);
+        if (statsResult.success && statsResult.data) {
+          setShipmentStats(statsResult.data);
+        }
+        if (statusStatsResult.success && statusStatsResult.data) {
+          setStatusStats(statusStatsResult.data);
+        }
+      } catch (error) {
+        if (isNextRedirectError(error)) throw error;
+        console.error('[ShipmentList] loadStats error:', error);
       }
-      return newSet;
-    });
+    };
+    loadStats();
   }, []);
 
-  const handleToggleSelectAll = useCallback(() => {
-    if (selectedItems.size === items.length) {
-      setSelectedItems(new Set());
-    } else {
-      setSelectedItems(new Set(items.map((item) => item.id)));
-    }
-  }, [items, selectedItems.size]);
-
-  // 검색 변경 시 페이지 리셋
-  const handleSearchChange = useCallback((value: string) => {
-    setSearchTerm(value);
-    setCurrentPage(1);
-  }, []);
-
-  // 탭 변경 시 페이지 리셋
-  const handleTabChange = useCallback((value: string) => {
-    setActiveFilter(value);
-    setCurrentPage(1);
-    setSelectedItems(new Set());
-  }, []);
-
-  // 상세 보기
-  const handleView = useCallback(
-    (id: string) => {
-      router.push(`/ko/outbound/shipments/${id}`);
+  // ===== 행 클릭 핸들러 =====
+  const handleRowClick = useCallback(
+    (item: ShipmentItem) => {
+      router.push(`/ko/outbound/shipments/${item.id}`);
     },
     [router]
   );
 
-  // 등록 페이지로 이동
+  // ===== 등록 핸들러 =====
   const handleCreate = useCallback(() => {
     router.push('/ko/outbound/shipments/new');
   }, [router]);
 
-  // 테이블 행 렌더링
-  const renderTableRow = (item: ShipmentItem, index: number, globalIndex: number) => {
-    const isSelected = selectedItems.has(item.id);
+  // ===== 통계 카드 =====
+  const stats: StatCard[] = useMemo(
+    () => [
+      {
+        label: '당일 출하',
+        value: `${shipmentStats?.todayShipmentCount || 0}건`,
+        icon: Package,
+        iconColor: 'text-green-600',
+      },
+      {
+        label: '출고 대기',
+        value: `${shipmentStats?.scheduledCount || 0}건`,
+        icon: Clock,
+        iconColor: 'text-yellow-600',
+      },
+      {
+        label: '배송중',
+        value: `${shipmentStats?.shippingCount || 0}건`,
+        icon: Truck,
+        iconColor: 'text-blue-600',
+      },
+      {
+        label: '긴급 출하',
+        value: `${shipmentStats?.urgentCount || 0}건`,
+        icon: AlertTriangle,
+        iconColor: 'text-red-600',
+      },
+    ],
+    [shipmentStats]
+  );
 
-    return (
-      <TableRow
-        key={item.id}
-        className={`cursor-pointer hover:bg-muted/50 ${isSelected ? 'bg-blue-50' : ''}`}
-        onClick={() => handleView(item.id)}
-      >
-        <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
-          <Checkbox
-            checked={isSelected}
-            onCheckedChange={() => handleToggleSelection(item.id)}
-          />
-        </TableCell>
-        <TableCell className="text-center text-muted-foreground">{globalIndex}</TableCell>
-        <TableCell className="font-medium">{item.shipmentNo}</TableCell>
-        <TableCell>{item.lotNo}</TableCell>
-        <TableCell className="text-center">{item.scheduledDate}</TableCell>
-        <TableCell className="text-center">
-          <Badge className={`text-xs ${SHIPMENT_STATUS_STYLES[item.status]}`}>
-            {SHIPMENT_STATUS_LABELS[item.status]}
-          </Badge>
-        </TableCell>
-        <TableCell className="text-center">
-          {item.canShip ? (
-            <Check className="w-4 h-4 mx-auto text-green-600" />
-          ) : (
-            <X className="w-4 h-4 mx-auto text-red-600" />
-          )}
-        </TableCell>
-        <TableCell className="text-center">{DELIVERY_METHOD_LABELS[item.deliveryMethod]}</TableCell>
-        <TableCell>{item.customerName}</TableCell>
-        <TableCell className="max-w-[120px] truncate">{item.siteName}</TableCell>
-        <TableCell className="text-center">{item.manager || '-'}</TableCell>
-        <TableCell className="text-center">{item.deliveryTime || '-'}</TableCell>
-      </TableRow>
-    );
-  };
-
-  // 모바일 카드 렌더링
-  const renderMobileCard = (
-    item: ShipmentItem,
-    index: number,
-    globalIndex: number,
-    isSelected: boolean,
-    onToggle: () => void
-  ) => {
-    return (
-      <ListMobileCard
-        id={item.id}
-        isSelected={isSelected}
-        onToggleSelection={onToggle}
-        onClick={() => handleView(item.id)}
-        headerBadges={
-          <>
-            <Badge variant="outline" className="text-xs">
-              #{globalIndex}
-            </Badge>
-            <Badge variant="outline" className="text-xs">
-              {item.shipmentNo}
-            </Badge>
-          </>
-        }
-        title={item.siteName}
-        statusBadge={
-          <Badge className={`text-xs ${SHIPMENT_STATUS_STYLES[item.status]}`}>
-            {SHIPMENT_STATUS_LABELS[item.status]}
-          </Badge>
-        }
-        infoGrid={
-          <div className="grid grid-cols-2 gap-x-4 gap-y-3">
-            <InfoField label="로트번호" value={item.lotNo} />
-            <InfoField label="발주처" value={item.customerName} />
-            <InfoField label="출고예정일" value={item.scheduledDate} />
-            <InfoField label="배송방식" value={DELIVERY_METHOD_LABELS[item.deliveryMethod]} />
-            <InfoField label="출하가능" value={item.canShip ? '가능' : '불가'} />
-          </div>
-        }
-        actions={
-          isSelected && (
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                className="flex-1"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleView(item.id);
-                }}
-              >
-                <Eye className="w-4 h-4 mr-1" />
-                상세
-              </Button>
-            </div>
-          )
-        }
-      />
-    );
-  };
-
-  // 탭 옵션 (API statusStats 사용)
+  // ===== 탭 옵션 (기본 탭 + 상태별 통계) =====
   const tabs: TabOption[] = useMemo(() => {
-    const allTab: TabOption = {
-      value: 'all',
-      label: '전체',
-      count: shipmentStats?.totalCount || 0,
-    };
+    // 기본 탭 정의 (API 데이터 없어도 항상 표시)
+    const defaultTabs: { value: string; label: string }[] = [
+      { value: 'all', label: '전체' },
+      { value: 'scheduled', label: '출고예정' },
+      { value: 'ready', label: '출하대기' },
+      { value: 'shipping', label: '배송중' },
+      { value: 'delivered', label: '배송완료' },
+    ];
 
-    const statusTabs: TabOption[] = Object.entries(statusStats).map(([key, stat]) => {
-      // stat이 객체가 아니거나 label이 없는 경우 방어
-      const label = typeof stat?.label === 'string' ? stat.label : key;
+    return defaultTabs.map((tab) => {
+      if (tab.value === 'all') {
+        return { ...tab, count: shipmentStats?.totalCount || 0 };
+      }
+      const stat = statusStats[tab.value];
       const count = typeof stat?.count === 'number' ? stat.count : 0;
-      return {
-        value: key,
-        label,
-        count,
-      };
+      return { ...tab, count };
     });
-
-    return [allTab, ...statusTabs];
   }, [statusStats, shipmentStats?.totalCount]);
 
-  // 페이지네이션 설정 (API 서버 사이드 페이지네이션)
-  const pagination = {
-    currentPage,
-    totalPages: lastPage,
-    totalItems,
-    itemsPerPage: ITEMS_PER_PAGE,
-    onPageChange: setCurrentPage,
-  };
-
-  // 로딩 상태 표시 (모든 Hooks 선언 후)
-  if (isLoading && items.length === 0) {
-    return <ContentLoadingSpinner text="출하 목록을 불러오는 중..." />;
-  }
-
-  // 에러 상태 표시
-  if (error && items.length === 0) {
+  // ===== 경고 배너 =====
+  const alertBanner = useMemo(() => {
+    if (cannotShipCount <= 0) return undefined;
     return (
-      <div className="flex flex-col items-center justify-center min-h-[400px] gap-4">
-        <AlertCircle className="w-12 h-12 text-red-500" />
-        <p className="text-lg text-muted-foreground">{error}</p>
-        <Button onClick={loadData}>다시 시도</Button>
-      </div>
+      <Alert className="mb-4 bg-orange-50 border-orange-200">
+        <AlertTriangle className="h-4 w-4 text-orange-600" />
+        <AlertDescription className="text-orange-800">
+          출고불가 {cannotShipCount}건 - 입금확인 및 세금계산서 발행 완료 후 출고 진행이 가능합니다.
+        </AlertDescription>
+      </Alert>
     );
-  }
+  }, [cannotShipCount]);
 
-  // 헤더 액션
-  const headerActions = (
-    <Button className="ml-auto" onClick={handleCreate}>
-      <Plus className="w-4 h-4 mr-2" />
-      출하 등록
-    </Button>
+  // ===== UniversalListPage Config =====
+  const config: UniversalListConfig<ShipmentItem> = useMemo(
+    () => ({
+      // 페이지 기본 정보
+      title: '출하 목록',
+      description: '출하 관리',
+      icon: Truck,
+      basePath: '/outbound/shipments',
+
+      // ID 추출
+      idField: 'id',
+
+      // API 액션 (서버 사이드 페이지네이션)
+      actions: {
+        getList: async (params?: ListParams) => {
+          try {
+            const result = await getShipments({
+              page: params?.page || 1,
+              perPage: params?.pageSize || ITEMS_PER_PAGE,
+              status: params?.tab !== 'all' ? (params?.tab as ShipmentStatus) : undefined,
+              search: params?.search || undefined,
+            });
+
+            if (result.success) {
+              // 통계 및 상태별 통계 다시 로드
+              const [statsResult, statusStatsResult] = await Promise.all([
+                getShipmentStats(),
+                getShipmentStatsByStatus(),
+              ]);
+              if (statsResult.success && statsResult.data) {
+                setShipmentStats(statsResult.data);
+              }
+              if (statusStatsResult.success && statusStatsResult.data) {
+                setStatusStats(statusStatsResult.data);
+              }
+
+              // 출고불가 건수 계산
+              const cannotShip = result.data.filter((item) => !item.canShip).length;
+              setCannotShipCount(cannotShip);
+
+              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: 'shipmentNo', label: '출고번호', className: 'min-w-[130px]' },
+        { key: 'lotNo', label: '로트번호', className: 'min-w-[150px]' },
+        { key: 'scheduledDate', label: '출고예정일', className: 'w-[120px] text-center' },
+        { key: 'status', label: '상태', className: 'w-[100px] text-center' },
+        { key: 'canShip', label: '출하가능', className: 'w-[80px] text-center' },
+        { key: 'deliveryMethod', label: '배송', className: 'w-[100px] text-center' },
+        { key: 'customerName', label: '발주처', className: 'min-w-[120px]' },
+        { key: 'siteName', label: '현장명', className: 'min-w-[120px]' },
+        { key: 'manager', label: '담당', className: 'w-[80px] text-center' },
+        { key: 'deliveryTime', label: '납기(수배시간)', className: 'w-[120px] text-center' },
+      ],
+
+      // 서버 사이드 페이지네이션
+      clientSideFiltering: false,
+      itemsPerPage: ITEMS_PER_PAGE,
+
+      // 검색
+      searchPlaceholder: '출고번호, 로트번호, 발주처, 현장명 검색...',
+
+      // 탭 설정
+      tabs,
+      defaultTab: 'all',
+
+      // 통계 카드
+      stats,
+
+      // 경고 배너
+      alertBanner,
+
+      // 헤더 액션 (출하 등록)
+      headerActions: () => (
+        <Button onClick={handleCreate}>
+          <Plus className="w-4 h-4 mr-2" />
+          출하 등록
+        </Button>
+      ),
+
+      // 테이블 행 렌더링
+      renderTableRow: (
+        item: ShipmentItem,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<ShipmentItem>
+      ) => {
+        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 className="font-medium">{item.shipmentNo}</TableCell>
+            <TableCell>{item.lotNo}</TableCell>
+            <TableCell className="text-center">{item.scheduledDate}</TableCell>
+            <TableCell className="text-center">
+              <Badge className={`text-xs ${SHIPMENT_STATUS_STYLES[item.status]}`}>
+                {SHIPMENT_STATUS_LABELS[item.status]}
+              </Badge>
+            </TableCell>
+            <TableCell className="text-center">
+              {item.canShip ? (
+                <Check className="w-4 h-4 mx-auto text-green-600" />
+              ) : (
+                <X className="w-4 h-4 mx-auto text-red-600" />
+              )}
+            </TableCell>
+            <TableCell className="text-center">{DELIVERY_METHOD_LABELS[item.deliveryMethod]}</TableCell>
+            <TableCell>{item.customerName}</TableCell>
+            <TableCell className="max-w-[120px] truncate">{item.siteName}</TableCell>
+            <TableCell className="text-center">{item.manager || '-'}</TableCell>
+            <TableCell className="text-center">{item.deliveryTime || '-'}</TableCell>
+          </TableRow>
+        );
+      },
+
+      // 모바일 카드 렌더링
+      renderMobileCard: (
+        item: ShipmentItem,
+        index: number,
+        globalIndex: number,
+        handlers: SelectionHandlers & RowClickHandlers<ShipmentItem>
+      ) => {
+        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.shipmentNo}
+                </Badge>
+              </>
+            }
+            title={item.siteName}
+            statusBadge={
+              <Badge className={`text-xs ${SHIPMENT_STATUS_STYLES[item.status]}`}>
+                {SHIPMENT_STATUS_LABELS[item.status]}
+              </Badge>
+            }
+            infoGrid={
+              <div className="grid grid-cols-2 gap-x-4 gap-y-3">
+                <InfoField label="로트번호" value={item.lotNo} />
+                <InfoField label="발주처" value={item.customerName} />
+                <InfoField label="출고예정일" value={item.scheduledDate} />
+                <InfoField label="배송방식" value={DELIVERY_METHOD_LABELS[item.deliveryMethod]} />
+                <InfoField label="출하가능" value={item.canShip ? '가능' : '불가'} />
+              </div>
+            }
+            actions={
+              handlers.isSelected && (
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="flex-1"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleRowClick(item);
+                    }}
+                  >
+                    <Eye className="w-4 h-4 mr-1" />
+                    상세
+                  </Button>
+                </div>
+              )
+            }
+          />
+        );
+      },
+    }),
+    [tabs, stats, alertBanner, handleRowClick, handleCreate]
   );
 
-  // 카드와 검색 영역 사이에 표시할 경고 알림
-  const alertBanner = cannotShipCount > 0 && (
-    <Alert className="mb-4 bg-orange-50 border-orange-200">
-      <AlertTriangle className="h-4 w-4 text-orange-600" />
-      <AlertDescription className="text-orange-800">
-        출고불가 {cannotShipCount}건 - 입금확인 및 세금계산서 발행 완료 후 출고 진행이 가능합니다.
-      </AlertDescription>
-    </Alert>
-  );
-
-  return (
-    <IntegratedListTemplateV2<ShipmentItem>
-      title="출하 목록"
-      icon={Truck}
-      stats={stats}
-      searchValue={searchTerm}
-      onSearchChange={handleSearchChange}
-      searchPlaceholder="출고번호, 로트번호, 발주처, 현장명 검색..."
-      tabs={tabs}
-      activeTab={activeFilter}
-      onTabChange={handleTabChange}
-      tableColumns={tableColumns}
-      data={items}
-      totalCount={totalItems}
-      allData={items}
-      selectedItems={selectedItems}
-      onToggleSelection={handleToggleSelection}
-      onToggleSelectAll={handleToggleSelectAll}
-      getItemId={(item) => item.id}
-      renderTableRow={renderTableRow}
-      renderMobileCard={renderMobileCard}
-      pagination={pagination}
-      headerActions={headerActions}
-      alertBanner={alertBanner}
-    />
-  );
+  return <UniversalListPage config={config} />;
 }