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] =?UTF-8?q?feat:=20=EC=88=98=EC=A7=91=20=EC=8B=A4=ED=8C=A8?=
 =?UTF-8?q?=EA=B1=B4=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/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>
             )}