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
{open && (
-
-
-
-
- | Record Key |
- 에러 메시지 |
- 재시도 |
- 상태 |
- 생성 시간 |
-
-
-
- {records.map((record) => (
-
- |
- {record.recordKey}
- |
-
- {record.errorMessage || '-'}
- |
-
- {record.retryCount}
- |
-
-
- {record.status}
-
- |
-
- {formatDateTime(record.createdAt)}
- |
+
+
+
+
+
+ | Record Key |
+ 에러 메시지 |
+ 재시도 |
+ 상태 |
+ 생성 시간 |
- ))}
-
-
+
+
+ {pagedRecords.map((record) => (
+
+ |
+ {record.recordKey}
+ |
+
+ {record.errorMessage || '-'}
+ |
+
+ {record.retryCount}
+ |
+
+
+ {record.status}
+
+ |
+
+ {formatDateTime(record.createdAt)}
+ |
+
+ ))}
+
+
+
+
)}
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
{open && (
-
-
-
-
- | Record Key |
- 에러 메시지 |
- 재시도 |
- 상태 |
- 생성 시간 |
-
-
-
- {records.map((record) => (
-
- |
- {record.recordKey}
- |
-
- {record.errorMessage || '-'}
- |
-
- {record.retryCount}
- |
-
-
- {record.status}
-
- |
-
- {formatDateTime(record.createdAt)}
- |
+
+
+
+
+
+ | Record Key |
+ 에러 메시지 |
+ 재시도 |
+ 상태 |
+ 생성 시간 |
- ))}
-
-
+
+
+ {pagedRecords.map((record) => (
+
+ |
+ {record.recordKey}
+ |
+
+ {record.errorMessage || '-'}
+ |
+
+ {record.retryCount}
+ |
+
+
+ {record.status}
+
+ |
+
+ {formatDateTime(record.createdAt)}
+ |
+
+ ))}
+
+
+
+
)}