From eb8ed221394aa0dfb54c067beb107393c6a5648b Mon Sep 17 00:00:00 2001
From: hyojin kim <hjkim4@gcsc.co.kr>
Date: Fri, 27 Feb 2026 10:57:33 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=9E=AC=EC=88=98=EC=A7=91=20?=
 =?UTF-8?q?=EC=8B=A4=ED=8C=A8=20=EA=B1=B4=20=EC=88=98=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |  3 +++
 frontend/src/api/batchApi.ts                  |  1 +
 frontend/src/pages/Recollects.tsx             | 22 +++++++++++++++++++
 .../global/controller/BatchController.java    | 10 +++++++++
 .../BatchFailedRecordRepository.java          |  8 +++++++
 .../service/RecollectionHistoryService.java   | 15 +++++++++++++
 6 files changed, 59 insertions(+)

diff --git a/.gitignore b/.gitignore
index 3b66953..6993c75 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,6 +34,9 @@ dependency-reduced-pom.xml
 buildNumber.properties
 .mvn/timing.properties
 .mvn/wrapper/maven-wrapper.jar
+.mvn/wrapper/maven-wrapper.properties
+mvnw
+mvnw.cmd
 
 # Gradle
 .gradle/
diff --git a/frontend/src/api/batchApi.ts b/frontend/src/api/batchApi.ts
index 18a186b..846b51f 100644
--- a/frontend/src/api/batchApi.ts
+++ b/frontend/src/api/batchApi.ts
@@ -287,6 +287,7 @@ export interface RecollectionSearchResponse {
   number: number;
   size: number;
   totalPages: number;
+  failedRecordCounts: Record<number, number>;
 }
 
 export interface RecollectionStatsResponse {
diff --git a/frontend/src/pages/Recollects.tsx b/frontend/src/pages/Recollects.tsx
index 6b2b898..e6bbc09 100644
--- a/frontend/src/pages/Recollects.tsx
+++ b/frontend/src/pages/Recollects.tsx
@@ -94,6 +94,9 @@ export default function Recollects() {
     const [totalCount, setTotalCount] = useState(0);
     const [useSearch, setUseSearch] = useState(false);
 
+    // 실패건 수 (jobExecutionId → count)
+    const [failedRecordCounts, setFailedRecordCounts] = useState<Record<number, number>>({});
+
     // 실패 로그 모달
     const [failLogTarget, setFailLogTarget] = useState<RecollectionHistoryDto | null>(null);
 
@@ -256,6 +259,7 @@ export default function Recollects() {
             setHistories(data.content);
             setTotalPages(data.totalPages);
             setTotalCount(data.totalElements);
+            setFailedRecordCounts(data.failedRecordCounts ?? {});
             if (!useSearch) setPage(data.number);
         } catch {
             setHistories([]);
@@ -684,6 +688,7 @@ export default function Recollects() {
                                     <th className="px-4 py-3 font-medium">재수집 시작일시</th>
                                     <th className="px-4 py-3 font-medium">재수집 종료일시</th>
                                     <th className="px-4 py-3 font-medium">소요시간</th>
+                                    <th className="px-4 py-3 font-medium text-center">실패건</th>
                                     <th className="px-4 py-3 font-medium text-right">액션</th>
                                 </tr>
                             </thead>
@@ -727,6 +732,23 @@ export default function Recollects() {
                                         <td className="px-4 py-4 text-wing-muted whitespace-nowrap">
                                             {formatDuration(hist.durationMs)}
                                         </td>
+                                        <td className="px-4 py-4 text-center">
+                                            {(() => {
+                                                const count = hist.jobExecutionId
+                                                    ? (failedRecordCounts[hist.jobExecutionId] ?? 0)
+                                                    : 0;
+                                                if (hist.executionStatus === 'STARTED') {
+                                                    return <span className="text-xs text-wing-muted">-</span>;
+                                                }
+                                                return count > 0 ? (
+                                                    <span className="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full bg-red-100 text-red-700">
+                                                        {count}건
+                                                    </span>
+                                                ) : (
+                                                    <span className="text-xs text-wing-muted">0</span>
+                                                );
+                                            })()}
+                                        </td>
                                         <td className="px-4 py-4 text-right">
                                             <button
                                                 onClick={() => navigate(`/recollects/${hist.historyId}`)}
diff --git a/src/main/java/com/snp/batch/global/controller/BatchController.java b/src/main/java/com/snp/batch/global/controller/BatchController.java
index 64396e7..e07ca26 100644
--- a/src/main/java/com/snp/batch/global/controller/BatchController.java
+++ b/src/main/java/com/snp/batch/global/controller/BatchController.java
@@ -28,6 +28,7 @@ import java.time.format.DateTimeFormatter;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
+import java.util.Objects;
 
 @Slf4j
 @RestController
@@ -497,12 +498,21 @@ public class BatchController {
         Page<BatchRecollectionHistory> histories = recollectionHistoryService
                 .getHistories(apiKey, jobName, status, from, to, PageRequest.of(page, size));
 
+        // 목록의 jobExecutionId들로 실패건수 한번에 조회
+        List<Long> jobExecutionIds = histories.getContent().stream()
+                .map(BatchRecollectionHistory::getJobExecutionId)
+                .filter(Objects::nonNull)
+                .toList();
+        Map<Long, Long> failedRecordCounts = recollectionHistoryService
+                .getFailedRecordCounts(jobExecutionIds);
+
         Map<String, Object> response = new HashMap<>();
         response.put("content", histories.getContent());
         response.put("totalElements", histories.getTotalElements());
         response.put("totalPages", histories.getTotalPages());
         response.put("number", histories.getNumber());
         response.put("size", histories.getSize());
+        response.put("failedRecordCounts", failedRecordCounts);
         return ResponseEntity.ok(response);
     }
 
diff --git a/src/main/java/com/snp/batch/global/repository/BatchFailedRecordRepository.java b/src/main/java/com/snp/batch/global/repository/BatchFailedRecordRepository.java
index cde392c..55e9de8 100644
--- a/src/main/java/com/snp/batch/global/repository/BatchFailedRecordRepository.java
+++ b/src/main/java/com/snp/batch/global/repository/BatchFailedRecordRepository.java
@@ -33,6 +33,14 @@ public interface BatchFailedRecordRepository extends JpaRepository<BatchFailedRe
      */
     long countByJobExecutionId(Long jobExecutionId);
 
+    /**
+     * 여러 jobExecutionId에 대해 FAILED 상태 건수를 한번에 조회 (N+1 방지)
+     */
+    @Query("SELECT r.jobExecutionId, COUNT(r) FROM BatchFailedRecord r " +
+           "WHERE r.jobExecutionId IN :jobExecutionIds AND r.status = 'FAILED' " +
+           "GROUP BY r.jobExecutionId")
+    List<Object[]> countFailedByJobExecutionIds(@Param("jobExecutionIds") List<Long> jobExecutionIds);
+
     /**
      * 특정 Step 실행의 실패 레코드를 RESOLVED로 벌크 업데이트
      */
diff --git a/src/main/java/com/snp/batch/service/RecollectionHistoryService.java b/src/main/java/com/snp/batch/service/RecollectionHistoryService.java
index 2736c2f..0dbabc4 100644
--- a/src/main/java/com/snp/batch/service/RecollectionHistoryService.java
+++ b/src/main/java/com/snp/batch/service/RecollectionHistoryService.java
@@ -330,6 +330,21 @@ public class RecollectionHistoryService {
                 .build();
     }
 
+    /**
+     * 재수집 이력 목록의 jobExecutionId별 FAILED 상태 실패건수 조회
+     */
+    @Transactional(readOnly = true)
+    public Map<Long, Long> getFailedRecordCounts(List<Long> jobExecutionIds) {
+        if (jobExecutionIds.isEmpty()) {
+            return Collections.emptyMap();
+        }
+        return failedRecordRepository.countFailedByJobExecutionIds(jobExecutionIds).stream()
+                .collect(Collectors.toMap(
+                        row -> ((Number) row[0]).longValue(),
+                        row -> ((Number) row[1]).longValue()
+                ));
+    }
+
     /**
      * 대시보드용 최근 10건
      */
-- 
2.45.2


From f559b3959bfcdea71b12b5b3490e1a25b62d5d33 Mon Sep 17 00:00:00 2001
From: hyojin kim <hjkim4@gcsc.co.kr>
Date: Fri, 27 Feb 2026 11:07:27 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EA=B0=9C=EB=B3=84=20=ED=98=B8?=
 =?UTF-8?q?=EC=B6=9C=20=EB=A1=9C=EA=B7=B8=20=ED=8E=98=EC=9D=B4=EC=A7=95=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=83=81=EC=84=B8=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Pagination.tsx | 145 +++++++++++++++++++++++++
 frontend/src/pages/ExecutionDetail.tsx |  41 ++-----
 frontend/src/pages/RecollectDetail.tsx |  41 ++-----
 3 files changed, 167 insertions(+), 60 deletions(-)
 create mode 100644 frontend/src/components/Pagination.tsx

diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
new file mode 100644
index 0000000..b735e4f
--- /dev/null
+++ b/frontend/src/components/Pagination.tsx
@@ -0,0 +1,145 @@
+interface PaginationProps {
+    page: number;
+    totalPages: number;
+    totalElements: number;
+    pageSize: number;
+    onPageChange: (page: number) => void;
+}
+
+/**
+ * 표시할 페이지 번호 목록 생성 (Truncated Page Number)
+ * - 총 7슬롯 이하면 전부 표시
+ * - 7슬롯 초과면 현재 페이지 기준 양쪽 1개 + 처음/끝 + ellipsis
+ */
+function getPageNumbers(current: number, total: number): (number | 'ellipsis')[] {
+    if (total <= 7) {
+        return Array.from({ length: total }, (_, i) => i);
+    }
+
+    const pages: (number | 'ellipsis')[] = [];
+    const SIBLING = 1;
+
+    const leftSibling = Math.max(current - SIBLING, 0);
+    const rightSibling = Math.min(current + SIBLING, total - 1);
+
+    const showLeftEllipsis = leftSibling > 1;
+    const showRightEllipsis = rightSibling < total - 2;
+
+    pages.push(0);
+
+    if (showLeftEllipsis) {
+        pages.push('ellipsis');
+    } else {
+        for (let i = 1; i < leftSibling; i++) {
+            pages.push(i);
+        }
+    }
+
+    for (let i = leftSibling; i <= rightSibling; i++) {
+        if (i !== 0 && i !== total - 1) {
+            pages.push(i);
+        }
+    }
+
+    if (showRightEllipsis) {
+        pages.push('ellipsis');
+    } else {
+        for (let i = rightSibling + 1; i < total - 1; i++) {
+            pages.push(i);
+        }
+    }
+
+    if (total > 1) {
+        pages.push(total - 1);
+    }
+
+    return pages;
+}
+
+export default function Pagination({
+    page,
+    totalPages,
+    totalElements,
+    pageSize,
+    onPageChange,
+}: PaginationProps) {
+    if (totalPages <= 1) return null;
+
+    const start = page * pageSize + 1;
+    const end = Math.min((page + 1) * pageSize, totalElements);
+    const pages = getPageNumbers(page, totalPages);
+
+    const btnBase =
+        'inline-flex items-center justify-center w-7 h-7 text-xs rounded transition-colors';
+    const btnEnabled = 'hover:bg-wing-hover text-wing-muted';
+    const btnDisabled = 'opacity-30 cursor-not-allowed text-wing-muted';
+
+    return (
+        <div className="flex items-center justify-between mt-2 text-xs text-wing-muted">
+            <span>
+                {totalElements.toLocaleString()}건 중 {start.toLocaleString()}~
+                {end.toLocaleString()}
+            </span>
+            <div className="flex items-center gap-0.5">
+                {/* First */}
+                <button
+                    onClick={() => onPageChange(0)}
+                    disabled={page === 0}
+                    className={`${btnBase} ${page === 0 ? btnDisabled : btnEnabled}`}
+                    title="처음"
+                >
+                    &laquo;
+                </button>
+                {/* Prev */}
+                <button
+                    onClick={() => onPageChange(page - 1)}
+                    disabled={page === 0}
+                    className={`${btnBase} ${page === 0 ? btnDisabled : btnEnabled}`}
+                    title="이전"
+                >
+                    &lsaquo;
+                </button>
+
+                {/* Page Numbers */}
+                {pages.map((p, idx) =>
+                    p === 'ellipsis' ? (
+                        <span key={`e-${idx}`} className="w-7 h-7 inline-flex items-center justify-center text-wing-muted">
+                            &hellip;
+                        </span>
+                    ) : (
+                        <button
+                            key={p}
+                            onClick={() => onPageChange(p)}
+                            className={`${btnBase} ${
+                                p === page
+                                    ? 'bg-wing-accent text-white font-semibold'
+                                    : btnEnabled
+                            }`}
+                        >
+                            {p + 1}
+                        </button>
+                    ),
+                )}
+
+                {/* Next */}
+                <button
+                    onClick={() => onPageChange(page + 1)}
+                    disabled={page >= totalPages - 1}
+                    className={`${btnBase} ${page >= totalPages - 1 ? btnDisabled : btnEnabled}`}
+                    title="다음"
+                >
+                    &rsaquo;
+                </button>
+                {/* Last */}
+                <button
+                    onClick={() => onPageChange(totalPages - 1)}
+                    disabled={page >= totalPages - 1}
+                    className={`${btnBase} ${page >= totalPages - 1 ? btnDisabled : btnEnabled}`}
+                    title="마지막"
+                >
+                    &raquo;
+                </button>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/pages/ExecutionDetail.tsx b/frontend/src/pages/ExecutionDetail.tsx
index 34fd036..5a9a92a 100644
--- a/frontend/src/pages/ExecutionDetail.tsx
+++ b/frontend/src/pages/ExecutionDetail.tsx
@@ -6,6 +6,7 @@ import { usePoller } from '../hooks/usePoller';
 import StatusBadge from '../components/StatusBadge';
 import EmptyState from '../components/EmptyState';
 import LoadingSpinner from '../components/LoadingSpinner';
+import Pagination from '../components/Pagination';
 
 const POLLING_INTERVAL_MS = 5000;
 
@@ -92,7 +93,7 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
     const fetchLogs = useCallback(async (p: number, s: ApiLogStatus) => {
         setLoading(true);
         try {
-            const data = await batchApi.getStepApiLogs(stepExecutionId, { page: p, size: 50, status: s });
+            const data = await batchApi.getStepApiLogs(stepExecutionId, { page: p, size: 10, status: s });
             setLogData(data);
         } catch {
             setLogData(null);
@@ -163,7 +164,7 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
                         </div>
                     ) : logData && logData.content.length > 0 ? (
                         <>
-                            <div className="overflow-x-auto max-h-80 overflow-y-auto">
+                            <div className="overflow-x-auto">
                                 <table className="w-full text-xs text-left">
                                     <thead className="bg-blue-100 text-blue-700 sticky top-0">
                                         <tr>
@@ -185,7 +186,7 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
                                                     key={log.logId}
                                                     className={isError ? 'bg-red-50' : 'bg-white hover:bg-blue-50'}
                                                 >
-                                                    <td className="px-2 py-1.5 text-blue-500">{page * 50 + idx + 1}</td>
+                                                    <td className="px-2 py-1.5 text-blue-500">{page * 10 + idx + 1}</td>
                                                     <td className="px-2 py-1.5 max-w-[200px]">
                                                         <div className="flex items-center gap-0.5">
                                                             <span className="font-mono text-blue-900 truncate" title={log.requestUri}>
@@ -225,33 +226,13 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
                             </div>
 
                             {/* 페이지네이션 */}
-                            {logData.totalPages > 1 && (
-                                <div className="flex items-center justify-between mt-2 text-xs text-wing-muted">
-                                    <span>
-                                        {logData.totalElements.toLocaleString()}건 중{' '}
-                                        {(page * 50 + 1).toLocaleString()}~{Math.min((page + 1) * 50, logData.totalElements).toLocaleString()}
-                                    </span>
-                                    <div className="flex items-center gap-1">
-                                        <button
-                                            onClick={() => setPage((p) => Math.max(0, p - 1))}
-                                            disabled={page === 0}
-                                            className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 disabled:opacity-40 disabled:cursor-not-allowed"
-                                        >
-                                            이전
-                                        </button>
-                                        <span className="px-2">
-                                            {page + 1} / {logData.totalPages}
-                                        </span>
-                                        <button
-                                            onClick={() => setPage((p) => Math.min(logData.totalPages - 1, p + 1))}
-                                            disabled={page >= logData.totalPages - 1}
-                                            className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 disabled:opacity-40 disabled:cursor-not-allowed"
-                                        >
-                                            다음
-                                        </button>
-                                    </div>
-                                </div>
-                            )}
+                            <Pagination
+                                page={page}
+                                totalPages={logData.totalPages}
+                                totalElements={logData.totalElements}
+                                pageSize={10}
+                                onPageChange={setPage}
+                            />
                         </>
                     ) : (
                         <p className="text-xs text-wing-muted py-3 text-center">조회된 로그가 없습니다.</p>
diff --git a/frontend/src/pages/RecollectDetail.tsx b/frontend/src/pages/RecollectDetail.tsx
index 0524c19..3686f07 100644
--- a/frontend/src/pages/RecollectDetail.tsx
+++ b/frontend/src/pages/RecollectDetail.tsx
@@ -13,6 +13,7 @@ import { usePoller } from '../hooks/usePoller';
 import StatusBadge from '../components/StatusBadge';
 import EmptyState from '../components/EmptyState';
 import LoadingSpinner from '../components/LoadingSpinner';
+import Pagination from '../components/Pagination';
 
 const POLLING_INTERVAL_MS = 10_000;
 
@@ -97,7 +98,7 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
     const fetchLogs = useCallback(async (p: number, s: ApiLogStatus) => {
         setLoading(true);
         try {
-            const data = await batchApi.getStepApiLogs(stepExecutionId, { page: p, size: 50, status: s });
+            const data = await batchApi.getStepApiLogs(stepExecutionId, { page: p, size: 10, status: s });
             setLogData(data);
         } catch {
             setLogData(null);
@@ -168,7 +169,7 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
                         </div>
                     ) : logData && logData.content.length > 0 ? (
                         <>
-                            <div className="overflow-x-auto max-h-80 overflow-y-auto">
+                            <div className="overflow-x-auto">
                                 <table className="w-full text-xs text-left">
                                     <thead className="bg-blue-100 text-blue-700 sticky top-0">
                                         <tr>
@@ -190,7 +191,7 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
                                                     key={log.logId}
                                                     className={isError ? 'bg-red-50' : 'bg-white hover:bg-blue-50'}
                                                 >
-                                                    <td className="px-2 py-1.5 text-blue-500">{page * 50 + idx + 1}</td>
+                                                    <td className="px-2 py-1.5 text-blue-500">{page * 10 + idx + 1}</td>
                                                     <td className="px-2 py-1.5 max-w-[200px]">
                                                         <div className="flex items-center gap-0.5">
                                                             <span className="font-mono text-blue-900 truncate" title={log.requestUri}>
@@ -230,33 +231,13 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
                             </div>
 
                             {/* 페이지네이션 */}
-                            {logData.totalPages > 1 && (
-                                <div className="flex items-center justify-between mt-2 text-xs text-wing-muted">
-                                    <span>
-                                        {logData.totalElements.toLocaleString()}건 중{' '}
-                                        {(page * 50 + 1).toLocaleString()}~{Math.min((page + 1) * 50, logData.totalElements).toLocaleString()}
-                                    </span>
-                                    <div className="flex items-center gap-1">
-                                        <button
-                                            onClick={() => setPage((p) => Math.max(0, p - 1))}
-                                            disabled={page === 0}
-                                            className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 disabled:opacity-40 disabled:cursor-not-allowed"
-                                        >
-                                            이전
-                                        </button>
-                                        <span className="px-2">
-                                            {page + 1} / {logData.totalPages}
-                                        </span>
-                                        <button
-                                            onClick={() => setPage((p) => Math.min(logData.totalPages - 1, p + 1))}
-                                            disabled={page >= logData.totalPages - 1}
-                                            className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 disabled:opacity-40 disabled:cursor-not-allowed"
-                                        >
-                                            다음
-                                        </button>
-                                    </div>
-                                </div>
-                            )}
+                            <Pagination
+                                page={page}
+                                totalPages={logData.totalPages}
+                                totalElements={logData.totalElements}
+                                pageSize={10}
+                                onPageChange={setPage}
+                            />
                         </>
                     ) : (
                         <p className="text-xs text-wing-muted py-3 text-center">조회된 로그가 없습니다.</p>
-- 
2.45.2


From 1192a1117fed98475dd2177418e1e1d57e3bb76f Mon Sep 17 00:00:00 2001
From: hyojin kim <hjkim4@gcsc.co.kr>
Date: Fri, 27 Feb 2026 11:15:07 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EC=88=98=EC=A7=91=20=EC=8B=A4?=
 =?UTF-8?q?=ED=8C=A8=EA=B1=B4=20=EB=A1=9C=EA=B7=B8=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=95=20=EA=B8=B0=EB=8A=A5=20=EC=83=81=EC=84=B8=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ExecutionDetail.tsx | 88 +++++++++++++++-----------
 frontend/src/pages/RecollectDetail.tsx | 88 +++++++++++++++-----------
 2 files changed, 102 insertions(+), 74 deletions(-)

diff --git a/frontend/src/pages/ExecutionDetail.tsx b/frontend/src/pages/ExecutionDetail.tsx
index 5a9a92a..f5f5482 100644
--- a/frontend/src/pages/ExecutionDetail.tsx
+++ b/frontend/src/pages/ExecutionDetail.tsx
@@ -575,13 +575,18 @@ export default function ExecutionDetail() {
     );
 }
 
+const FAILED_PAGE_SIZE = 10;
+
 function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: FailedRecordDto[]; jobName: string; stepExecutionId: number }) {
     const [open, setOpen] = useState(false);
     const [showConfirm, setShowConfirm] = useState(false);
     const [retrying, setRetrying] = useState(false);
+    const [page, setPage] = useState(0);
     const navigate = useNavigate();
 
     const failedRecords = records.filter((r) => r.status === 'FAILED');
+    const totalPages = Math.ceil(records.length / FAILED_PAGE_SIZE);
+    const pagedRecords = records.slice(page * FAILED_PAGE_SIZE, (page + 1) * FAILED_PAGE_SIZE);
 
     const statusColor = (status: string) => {
         switch (status) {
@@ -637,44 +642,53 @@ function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: F
             </div>
 
             {open && (
-                <div className="mt-2 overflow-x-auto max-h-80 overflow-y-auto">
-                    <table className="w-full text-xs text-left">
-                        <thead className="bg-red-100 text-red-700 sticky top-0">
-                            <tr>
-                                <th className="px-2 py-1.5 font-medium">Record Key</th>
-                                <th className="px-2 py-1.5 font-medium">에러 메시지</th>
-                                <th className="px-2 py-1.5 font-medium text-center">재시도</th>
-                                <th className="px-2 py-1.5 font-medium text-center">상태</th>
-                                <th className="px-2 py-1.5 font-medium">생성 시간</th>
-                            </tr>
-                        </thead>
-                        <tbody className="divide-y divide-red-100">
-                            {records.map((record) => (
-                                <tr
-                                    key={record.id}
-                                    className="bg-white hover:bg-red-50"
-                                >
-                                    <td className="px-2 py-1.5 font-mono text-red-900">
-                                        {record.recordKey}
-                                    </td>
-                                    <td className="px-2 py-1.5 text-red-600 max-w-[200px] truncate" title={record.errorMessage || ''}>
-                                        {record.errorMessage || '-'}
-                                    </td>
-                                    <td className="px-2 py-1.5 text-center text-red-900">
-                                        {record.retryCount}
-                                    </td>
-                                    <td className="px-2 py-1.5 text-center">
-                                        <span className={`inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded-full ${statusColor(record.status)}`}>
-                                            {record.status}
-                                        </span>
-                                    </td>
-                                    <td className="px-2 py-1.5 text-red-500 whitespace-nowrap">
-                                        {formatDateTime(record.createdAt)}
-                                    </td>
+                <div className="mt-2">
+                    <div className="overflow-x-auto">
+                        <table className="w-full text-xs text-left">
+                            <thead className="bg-red-100 text-red-700">
+                                <tr>
+                                    <th className="px-2 py-1.5 font-medium">Record Key</th>
+                                    <th className="px-2 py-1.5 font-medium">에러 메시지</th>
+                                    <th className="px-2 py-1.5 font-medium text-center">재시도</th>
+                                    <th className="px-2 py-1.5 font-medium text-center">상태</th>
+                                    <th className="px-2 py-1.5 font-medium">생성 시간</th>
                                 </tr>
-                            ))}
-                        </tbody>
-                    </table>
+                            </thead>
+                            <tbody className="divide-y divide-red-100">
+                                {pagedRecords.map((record) => (
+                                    <tr
+                                        key={record.id}
+                                        className="bg-white hover:bg-red-50"
+                                    >
+                                        <td className="px-2 py-1.5 font-mono text-red-900">
+                                            {record.recordKey}
+                                        </td>
+                                        <td className="px-2 py-1.5 text-red-600 max-w-[200px] truncate" title={record.errorMessage || ''}>
+                                            {record.errorMessage || '-'}
+                                        </td>
+                                        <td className="px-2 py-1.5 text-center text-red-900">
+                                            {record.retryCount}
+                                        </td>
+                                        <td className="px-2 py-1.5 text-center">
+                                            <span className={`inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded-full ${statusColor(record.status)}`}>
+                                                {record.status}
+                                            </span>
+                                        </td>
+                                        <td className="px-2 py-1.5 text-red-500 whitespace-nowrap">
+                                            {formatDateTime(record.createdAt)}
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                    <Pagination
+                        page={page}
+                        totalPages={totalPages}
+                        totalElements={records.length}
+                        pageSize={FAILED_PAGE_SIZE}
+                        onPageChange={setPage}
+                    />
                 </div>
             )}
 
diff --git a/frontend/src/pages/RecollectDetail.tsx b/frontend/src/pages/RecollectDetail.tsx
index 3686f07..eb6235a 100644
--- a/frontend/src/pages/RecollectDetail.tsx
+++ b/frontend/src/pages/RecollectDetail.tsx
@@ -626,13 +626,18 @@ export default function RecollectDetail() {
     );
 }
 
+const FAILED_PAGE_SIZE = 10;
+
 function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: FailedRecordDto[]; jobName: string; stepExecutionId: number }) {
     const [open, setOpen] = useState(false);
     const [showConfirm, setShowConfirm] = useState(false);
     const [retrying, setRetrying] = useState(false);
+    const [page, setPage] = useState(0);
     const navigate = useNavigate();
 
     const failedRecords = records.filter((r) => r.status === 'FAILED');
+    const totalPages = Math.ceil(records.length / FAILED_PAGE_SIZE);
+    const pagedRecords = records.slice(page * FAILED_PAGE_SIZE, (page + 1) * FAILED_PAGE_SIZE);
 
     const statusColor = (status: string) => {
         switch (status) {
@@ -688,44 +693,53 @@ function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: F
             </div>
 
             {open && (
-                <div className="mt-2 overflow-x-auto max-h-80 overflow-y-auto">
-                    <table className="w-full text-xs text-left">
-                        <thead className="bg-red-100 text-red-700 sticky top-0">
-                            <tr>
-                                <th className="px-2 py-1.5 font-medium">Record Key</th>
-                                <th className="px-2 py-1.5 font-medium">에러 메시지</th>
-                                <th className="px-2 py-1.5 font-medium text-center">재시도</th>
-                                <th className="px-2 py-1.5 font-medium text-center">상태</th>
-                                <th className="px-2 py-1.5 font-medium">생성 시간</th>
-                            </tr>
-                        </thead>
-                        <tbody className="divide-y divide-red-100">
-                            {records.map((record) => (
-                                <tr
-                                    key={record.id}
-                                    className="bg-white hover:bg-red-50"
-                                >
-                                    <td className="px-2 py-1.5 font-mono text-red-900">
-                                        {record.recordKey}
-                                    </td>
-                                    <td className="px-2 py-1.5 text-red-600 max-w-[200px] truncate" title={record.errorMessage || ''}>
-                                        {record.errorMessage || '-'}
-                                    </td>
-                                    <td className="px-2 py-1.5 text-center text-red-900">
-                                        {record.retryCount}
-                                    </td>
-                                    <td className="px-2 py-1.5 text-center">
-                                        <span className={`inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded-full ${statusColor(record.status)}`}>
-                                            {record.status}
-                                        </span>
-                                    </td>
-                                    <td className="px-2 py-1.5 text-red-500 whitespace-nowrap">
-                                        {formatDateTime(record.createdAt)}
-                                    </td>
+                <div className="mt-2">
+                    <div className="overflow-x-auto">
+                        <table className="w-full text-xs text-left">
+                            <thead className="bg-red-100 text-red-700">
+                                <tr>
+                                    <th className="px-2 py-1.5 font-medium">Record Key</th>
+                                    <th className="px-2 py-1.5 font-medium">에러 메시지</th>
+                                    <th className="px-2 py-1.5 font-medium text-center">재시도</th>
+                                    <th className="px-2 py-1.5 font-medium text-center">상태</th>
+                                    <th className="px-2 py-1.5 font-medium">생성 시간</th>
                                 </tr>
-                            ))}
-                        </tbody>
-                    </table>
+                            </thead>
+                            <tbody className="divide-y divide-red-100">
+                                {pagedRecords.map((record) => (
+                                    <tr
+                                        key={record.id}
+                                        className="bg-white hover:bg-red-50"
+                                    >
+                                        <td className="px-2 py-1.5 font-mono text-red-900">
+                                            {record.recordKey}
+                                        </td>
+                                        <td className="px-2 py-1.5 text-red-600 max-w-[200px] truncate" title={record.errorMessage || ''}>
+                                            {record.errorMessage || '-'}
+                                        </td>
+                                        <td className="px-2 py-1.5 text-center text-red-900">
+                                            {record.retryCount}
+                                        </td>
+                                        <td className="px-2 py-1.5 text-center">
+                                            <span className={`inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded-full ${statusColor(record.status)}`}>
+                                                {record.status}
+                                            </span>
+                                        </td>
+                                        <td className="px-2 py-1.5 text-red-500 whitespace-nowrap">
+                                            {formatDateTime(record.createdAt)}
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                    <Pagination
+                        page={page}
+                        totalPages={totalPages}
+                        totalElements={records.length}
+                        pageSize={FAILED_PAGE_SIZE}
+                        onPageChange={setPage}
+                    />
                 </div>
             )}
 
-- 
2.45.2