paginate app operations and refine runtime settings layout

src/pages/applications/MigrationManagementPage.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useMemo, useState } from 'react';
 import { ChevronLeft, ChevronRight, MoreHorizontal, Play } from 'lucide-react';
-import { Button, Card, Modal } from '../../components/ui';
+import { Button, Card, CardHeader, Modal } from '../../components/ui';
 import { useToast } from '../../components/toast';
 import { PageTitle } from '../../layout/AppLayout';
 import type { AppRelease, RuntimeControlJob } from '../../types/application';
 import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
 import { StatusBadge, formatDate, useApps } from './ApplicationControls';
-import { createMigration, listMigrations, listReleases } from './application-api';
+import { createMigration, listMigrationsPage, listReleases } from './application-api';
 
 type ImageTags = {
   images?: Record<string, string>;
@@ -33,15 +33,6 @@ function requestText(job: RuntimeControlJob, key: string, fallback = '-') {
   return typeof value === 'string' && value.trim() ? value : fallback;
 }
 
-function jobNumber(index: number, total: number) {
-  return total - index;
-}
-
-function migrationTime(job: RuntimeControlJob) {
-  const value = new Date(job.createdAt || job.startedAt || job.finishedAt || 0).getTime();
-  return Number.isNaN(value) ? 0 : value;
-}
-
 function sanitizeK8sName(value: string) {
   return value
     .trim()
@@ -54,7 +45,21 @@ function uniqueValues(values: string[]) {
   return [...new Set(values.filter(Boolean))];
 }
 
-const migrationPageSize = 5;
+const migrationPageSize = 3;
+type MigrationRange = 'week' | 'month' | 'all';
+
+const migrationRangeLabels: Record<MigrationRange, string> = {
+  week: '일주일',
+  month: '한달',
+  all: '전체'
+};
+
+function migrationRangeSince(range: MigrationRange) {
+  if (range === 'all') return undefined;
+  const date = new Date();
+  date.setDate(date.getDate() - (range === 'week' ? 7 : 30));
+  return date.toISOString();
+}
 
 export function MigrationManagementPage() {
   const { apps, selectedApp, selectedAppId, selectApp, loading: appsLoading } = useApps();
@@ -71,6 +76,8 @@ export function MigrationManagementPage() {
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [page, setPage] = useState(1);
+  const [range, setRange] = useState<MigrationRange>('week');
+  const [totalJobs, setTotalJobs] = useState(0);
   const loadingVisible = useMinimumLoading(appsLoading || loading);
 
   const selectedRelease = releases.find((release) => release.id === releaseId);
@@ -89,18 +96,25 @@ export function MigrationManagementPage() {
     [envSecretName, images, selectedApp?.key]
   );
   const selectedImage = selectedImageTag(selectedRelease, imageComponentName);
-  const sortedJobs = [...jobs].sort((a, b) => migrationTime(b) - migrationTime(a));
-  const totalPages = Math.max(1, Math.ceil(sortedJobs.length / migrationPageSize));
-  const currentPage = Math.min(page, totalPages);
-  const pageStart = (currentPage - 1) * migrationPageSize;
-  const pagedJobs = sortedJobs.slice(pageStart, pageStart + migrationPageSize);
+  const totalPages = Math.max(1, Math.ceil(totalJobs / migrationPageSize));
+  const currentPage = page;
+  const pagedJobs = jobs;
 
   const refresh = async () => {
     setLoading(true);
     try {
-      const [nextJobs, nextReleases] = await Promise.all([listMigrations(), listReleases(selectedApp?.key)]);
+      const [nextJobs, nextReleases] = await Promise.all([
+        listMigrationsPage({
+          appId: selectedAppId,
+          page,
+          limit: migrationPageSize,
+          since: migrationRangeSince(range)
+        }),
+        listReleases(selectedApp?.key)
+      ]);
       const succeededReleases = nextReleases.filter((release) => release.status === 'SUCCEEDED');
-      setJobs(nextJobs);
+      setJobs(nextJobs.jobs);
+      setTotalJobs(nextJobs.total);
       setReleases(succeededReleases);
       setReleaseId((prev) => (succeededReleases.some((release) => release.id === prev) ? prev : succeededReleases[0]?.id || ''));
       setNamespace((prev) => prev || selectedApp?.namespace || '');
@@ -115,7 +129,7 @@ export function MigrationManagementPage() {
 
   useEffect(() => {
     void refresh();
-  }, [selectedApp?.key, selectedApp?.namespace]);
+  }, [selectedApp?.key, selectedApp?.namespace, selectedAppId, page, range]);
 
   useEffect(() => {
     const nextImages = imageEntries(selectedRelease?.imageTags);
@@ -133,6 +147,10 @@ export function MigrationManagementPage() {
     setPage(1);
   }, [selectedAppId]);
 
+  useEffect(() => {
+    setPage(1);
+  }, [range]);
+
   const runMigration = async () => {
     try {
       setConfirmOpen(false);
@@ -246,15 +264,27 @@ export function MigrationManagementPage() {
       </Card>
 
       <Card className="min-w-0 overflow-hidden">
-        <div className="border-b border-border px-5 py-4">
-          <div className="min-w-0">
-            <h2 className="text-sm font-semibold text-foreground">마이그레이션 작업</h2>
-            <p className="mt-1 text-xs leading-5 text-muted-foreground">마이그레이션 실행 이력과 로그입니다.</p>
-          </div>
-        </div>
+        <CardHeader
+          title="마이그레이션 작업"
+          description="선택한 기간의 마이그레이션 실행 이력과 로그를 최신순으로 표시합니다."
+          action={
+            <div className="flex items-center gap-2">
+              {(Object.keys(migrationRangeLabels) as MigrationRange[]).map((item) => (
+                <Button
+                  key={item}
+                  variant={range === item ? 'default' : 'outline'}
+                  className="h-8 px-3 text-[13px]"
+                  onClick={() => setRange(item)}
+                >
+                  {migrationRangeLabels[item]}
+                </Button>
+              ))}
+            </div>
+          }
+        />
 
-        <div className="space-y-3 p-5">
-          {jobs.length === 0 ? (
+        <div className="min-h-[410px] space-y-3 p-5">
+          {!loading && jobs.length === 0 ? (
             <div className="flex min-h-44 items-center justify-center text-center text-sm text-muted-foreground">
               등록된 마이그레이션 작업이 없습니다.
             </div>
@@ -268,7 +298,7 @@ export function MigrationManagementPage() {
                 <div className="flex items-start justify-between gap-4">
                   <div className="min-w-0 flex-1">
                     <div className="flex flex-wrap items-center gap-2">
-                      <span className="text-xs font-medium text-muted-foreground">No. {jobNumber(pageStart + index, sortedJobs.length)}</span>
+                      <span className="text-xs font-medium text-muted-foreground">No. {totalJobs - ((currentPage - 1) * migrationPageSize + index)}</span>
                       <StatusBadge status={job.status} />
                       <span className="truncate text-base font-medium text-foreground">
                         {selectedApp?.name ?? '앱'} {job.name}
@@ -295,7 +325,7 @@ export function MigrationManagementPage() {
         </div>
         <div className="flex items-center justify-between gap-4 border-t border-border px-5 py-3 text-sm">
           <span className="text-xs text-muted-foreground">
-            {loading ? '불러오는 중' : `총 ${sortedJobs.length}건 · ${currentPage} / ${totalPages}`}
+            {loading ? '불러오는 중' : `총 ${totalJobs}건 · ${currentPage} / ${totalPages}`}
           </span>
           <div className="flex gap-2">
             <Button