paginate app operations and refine runtime settings layout

2026-07-07 15:32:56 +09:00
parent 1de085790d
commit 9cb82249d7
14 changed files with 805 additions and 214 deletions
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type FormEvent, type ReactNode } from 'react';
+import { useEffect, useRef, useState, type FormEvent, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import {
  Activity,
@@ -17,6 +17,7 @@ import { formatDateTime as formatDateTimeValue } from './lib/date-format';
 import { apiBaseUrl, apiRequest, authExpiredEventName, clearAdminSession } from './lib/api';
 import { filterAppsByCurrentAdmin } from './lib/admin-app-permissions';
 import { cn } from './lib/utils';
+import { openPageAgent } from './lib/page-agent';
 import { AppManagementPage as AppManagementApiPage } from './pages/applications/AppManagementPage';
 import { BuildManagementPage } from './pages/applications/BuildManagementPage';
 import { DeploymentManagementPage } from './pages/applications/DeploymentManagementPage';
@@ -446,6 +447,19 @@ function filterNavGroupsByRole(groups: typeof navGroups, role?: string | null) {
    .filter((group) => group.items.length > 0);
 }

+function pageAgentAccessAttrs(allowed: boolean) {
+  return allowed
+    ? {}
+    : {
+      'data-page-agent-ignore': 'true',
+      'data-page-agent-not-interactive': 'true'
+    };
+}
+
+function isTrustedClick(event: ReactMouseEvent<HTMLElement>) {
+  return event.nativeEvent.isTrusted;
+}
+
 function Sidebar({
  activeView,
  menuSearch,
@@ -491,8 +505,11 @@ function Sidebar({
      </div>

      <nav className="scrollbar-stable min-h-0 flex-1 space-y-5 overflow-y-auto pr-2">
-        {visibleGroups.map((group) => (
-          <div key={group.label}>
+        {visibleGroups.map((group) => {
+          const isPageAgentAllowedGroup = group.label === '플랫폼';
+
+          return (
+          <div key={group.label} {...pageAgentAccessAttrs(isPageAgentAllowedGroup)}>
            <p className="mb-2 px-2 text-xs font-medium text-muted-foreground">{group.label}</p>
            <div className="space-y-1">
              {group.items.map((item) => {
@@ -504,12 +521,14 @@ function Sidebar({

                return (
                  <div key={item.label}>
-                    <button
-                      type="button"
-                      onClick={() => {
-                        if (hasChildren) {
-                          setOpenMenus((prev) => ({ ...prev, [item.label]: !prev[item.label] }));
-                          return;
+	                    <button
+	                      type="button"
+	                      {...pageAgentAccessAttrs(isPageAgentAllowedGroup)}
+	                      onClick={(event) => {
+	                        if (!isPageAgentAllowedGroup && !isTrustedClick(event)) return;
+	                        if (hasChildren) {
+	                          setOpenMenus((prev) => ({ ...prev, [item.label]: !prev[item.label] }));
+	                          return;
                        }
                        const view = resolveNavView(item);
                        if (view) onViewChange(view);
@@ -535,13 +554,15 @@ function Sidebar({
                          const isChildActive = activeView === resolveNavView(child);

                          return (
-                            <button
-                              type="button"
-                              key={child.label}
-                              onClick={() => {
-                                const view = resolveNavView(child);
-                                if (view) onViewChange(view);
-                              }}
+	                            <button
+	                              type="button"
+	                              key={child.label}
+	                              {...pageAgentAccessAttrs(isPageAgentAllowedGroup)}
+	                              onClick={(event) => {
+	                                if (!isPageAgentAllowedGroup && !isTrustedClick(event)) return;
+	                                const view = resolveNavView(child);
+	                                if (view) onViewChange(view);
+	                              }}
                              className={cn(
                                'flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-[12.5px] font-medium text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-white',
                                isChildActive && 'font-semibold text-white'
@@ -559,7 +580,8 @@ function Sidebar({
              })}
            </div>
          </div>
-        ))}
+          );
+        })}
        {visibleGroups.length === 0 ? (
          <div className="px-2 py-6 text-center text-xs text-muted-foreground">검색된 메뉴가 없습니다.</div>
        ) : null}
@@ -633,7 +655,7 @@ function Topbar({
        </div>
      </div>
      <div className="flex items-center gap-2">
-        <Button variant="ghost" className="size-9 px-0">
+        <Button variant="ghost" className="size-9 px-0" title="AI 도움말" aria-label="AI 도움말" onClick={openPageAgent}>
          <CircleHelp className="size-4" />
        </Button>
        <div ref={profileRef} className="relative">
@@ -1028,16 +1050,20 @@ function SessionsPanel({ sessions, loading, onMore }: { sessions: UserSessionRow
    <Card>
      <CardHeader
        title="사용자/세션"
-        description="실시간 접근 상태와 세션 제어 항목입니다."
-        action={
-          <button
-            type="button"
-            className="flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-            onClick={onMore}
-            title="사용자/세션으로 이동"
-            aria-label="사용자/세션으로 이동"
-          >
-            <ChevronRight className="size-4" />
+	        description="실시간 접근 상태와 세션 제어 항목입니다."
+	        action={
+	          <button
+	            type="button"
+	            {...pageAgentAccessAttrs(false)}
+	            className="flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+	            onClick={(event) => {
+	              if (!isTrustedClick(event)) return;
+	              onMore();
+	            }}
+	            title="사용자/세션으로 이동"
+	            aria-label="사용자/세션으로 이동"
+	          >
+	            <ChevronRight className="size-4" />
          </button>
        }
      />
@@ -1077,13 +1103,17 @@ function SessionsPanel({ sessions, loading, onMore }: { sessions: UserSessionRow
  );
 }

-function DashboardLinkButton({ onClick, label }: { onClick: () => void; label: string }) {
+function DashboardLinkButton({ onClick, label, pageAgentAllowed = true }: { onClick: () => void; label: string; pageAgentAllowed?: boolean }) {
  return (
    <button
-      type="button"
-      className="flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-      onClick={onClick}
-      title={label}
+	      type="button"
+	      {...pageAgentAccessAttrs(pageAgentAllowed)}
+	      className="flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+	      onClick={(event) => {
+	        if (!pageAgentAllowed && !isTrustedClick(event)) return;
+	        onClick();
+	      }}
+	      title={label}
      aria-label={label}
    >
      <ChevronRight className="size-4" />
@@ -1270,7 +1300,7 @@ function NoticePanel({ notices: dashboardNotices, loading, onOpen }: { notices:
      <CardHeader
        title="공지사항"
        description="런처 공지와 앱별 공지사항을 관리합니다."
-        action={<DashboardLinkButton onClick={onOpen} label="공지사항으로 이동" />}
+        action={<DashboardLinkButton onClick={onOpen} label="공지사항으로 이동" pageAgentAllowed={false} />}
      />
      <div className="max-h-[520px] divide-y divide-border overflow-y-auto">
        {loading ? (
@@ -0,0 +1,42 @@
+import { PageAgent } from 'page-agent';
+import adminGuide from '../../docs/page-agent-admin-guide.md?raw';
+import { apiBaseUrl } from './api';
+
+function createPageAgent() {
+  return new PageAgent({
+  model: 'gpt-4.1-mini',
+  baseURL: `${apiBaseUrl}/page-agent/llm`,
+  apiKey: '',
+  language: 'en-US',
+  instructions: {
+    system: `항상 한국어로 답변하고, 이 어드민 콘솔의 운영 흐름에 맞춰 간결하게 안내하세요.
+사용자가 별도로 허용하지 않는 한 플랫폼 그룹 하위 메뉴에서만 이동하고 작업하세요.
+삭제, 제거, 폐기, 정리, unlink, revoke, delete, remove, decommission 등 데이터를 없애거나 연결을 끊는 작업은 절대 실행하지 말고 사람이 직접 해야 한다고 안내하세요.
+
+아래 문서를 이 어드민 콘솔의 업무 가이드로 사용하세요.
+
+${adminGuide}`
+  },
+  customFetch: (input, init) => {
+    const token = localStorage.getItem('studio-admin-token');
+    return fetch(input, {
+      ...init,
+      headers: {
+        ...(init?.headers ?? {}),
+        ...(token ? { Authorization: `Bearer ${token}` } : {})
+      }
+    });
+  }
+});
+}
+
+let pageAgent = createPageAgent();
+
+export function openPageAgent() {
+  if (!document.body.contains(pageAgent.panel.wrapper)) {
+    pageAgent = createPageAgent();
+  }
+  pageAgent.panel.show();
+}
+
+export { pageAgent };
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type MouseEvent } from 'react';
 import { Database, Pencil, Play, Plus, RotateCcw, Settings2, Square, Trash2 } from 'lucide-react';
 import { Badge, Button, Card, CardHeader } from '../../components/ui';
 import { useToast } from '../../components/toast';
@@ -53,6 +53,17 @@ function useMinimumLoading(loading: boolean, minimumMs = 500) {
  return visible;
 }

+function isPageAgentClick(event: MouseEvent<HTMLElement>) {
+  return !event.nativeEvent.isTrusted;
+}
+
+function blockPageAgentDestructiveClick(event: MouseEvent<HTMLElement>) {
+  if (!isPageAgentClick(event)) return false;
+  event.preventDefault();
+  event.stopPropagation();
+  return true;
+}
+
 function getTone(status: string) {
  if (['활성', '완료', '게시됨', '실행 중', '배포됨', 'ACTIVE', 'READY'].includes(status)) return 'green';
  if (['주의', '예약됨', '대기', '준비중', '카나리'].includes(status)) return 'amber';
@@ -304,6 +315,14 @@ export function AppManagementPage() {
  const [buildEnvVariables, setBuildEnvVariables] = useState<BuildEnvVariableForm[]>([emptyBuildEnvVariable()]);
  const [buildEnvStatus, setBuildEnvStatus] = useState<'idle' | 'loading' | 'saving' | 'error'>('idle');
  const [deletingApp, setDeletingApp] = useState<ApiApp | null>(null);
+  const [appDeleteStatus, setAppDeleteStatus] = useState<'idle' | 'deleting' | 'error'>('idle');
+  const [appDeleteOptions, setAppDeleteOptions] = useState({
+    unlinkSources: true,
+    deleteRuntimeSettings: true,
+    scaleDownWorkloads: true,
+    deleteKubernetesResources: false,
+    deletePersistentVolumes: false
+  });
  const [deletingComponent, setDeletingComponent] = useState<ApiAppComponent | null>(null);
  const [runtimeResources, setRuntimeResources] = useState<RuntimeResource[]>([]);
  const [workloadActionKey, setWorkloadActionKey] = useState('');
@@ -806,7 +825,15 @@ export function AppManagementPage() {
  const deleteApp = () => {
    if (!deletingApp) return;

-    apiFetch(`${apiBaseUrl}/apps/${deletingApp.id}`, { method: 'DELETE', headers: authHeaders() })
+    setAppDeleteStatus('deleting');
+    apiFetch(`${apiBaseUrl}/apps/${deletingApp.id}/decommission`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...authHeaders()
+      },
+      body: JSON.stringify(appDeleteOptions)
+    })
      .then((response) => {
        if (!response.ok) throw new Error('App delete failed');
        return response.json().catch(() => null);
@@ -815,6 +842,7 @@ export function AppManagementPage() {
      .then((apps) => {
        setApiApps(apps);
        setDeletingApp(null);
+        setAppDeleteStatus('idle');
        setSelectedAppId((current) => {
          if (current !== deletingApp.id) return current;
          const nextAppId = apps[0]?.id ?? '';
@@ -824,10 +852,19 @@ export function AppManagementPage() {
        toast({ type: 'success', title: '앱 삭제', message: '앱 그룹이 삭제되었습니다.' });
      })
      .catch(() => {
+        setAppDeleteStatus('error');
        toast({ type: 'error', title: '앱 삭제 실패', message: '참조 이력 또는 백엔드 API 상태를 확인하세요.' });
      });
  };

+  const updateAppDeleteOption = (key: keyof typeof appDeleteOptions, value: boolean) => {
+    setAppDeleteOptions((current) => ({
+      ...current,
+      [key]: value,
+      ...(key === 'deleteKubernetesResources' && !value ? { deletePersistentVolumes: false } : {})
+    }));
+  };
+
  return (
    <>
      <PageTitle
@@ -883,10 +920,19 @@ export function AppManagementPage() {
                            className="size-8 border-rose-500/50 px-0 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                            title="삭제"
                            aria-label="삭제"
-                            onClick={(event) => {
-                              event.stopPropagation();
-                              setDeletingApp(app);
-                            }}
+	                            onClick={(event) => {
+	                              if (blockPageAgentDestructiveClick(event)) return;
+	                              event.stopPropagation();
+	                              setAppDeleteStatus('idle');
+	                              setAppDeleteOptions({
+	                                unlinkSources: true,
+	                                deleteRuntimeSettings: true,
+	                                scaleDownWorkloads: true,
+	                                deleteKubernetesResources: false,
+	                                deletePersistentVolumes: false
+	                              });
+	                              setDeletingApp(app);
+	                            }}
                          >
                            <Trash2 className="size-4" />
                          </Button>
@@ -994,7 +1040,10 @@ export function AppManagementPage() {
                                  className="size-8 border-rose-500/50 px-0 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                                  title="삭제"
                                  aria-label="삭제"
-                                  onClick={() => setDeletingComponent(component)}
+	                                  onClick={(event) => {
+	                                    if (blockPageAgentDestructiveClick(event)) return;
+	                                    setDeletingComponent(component);
+	                                  }}
                                >
                                  <Trash2 className="size-4" />
                                </Button>
@@ -1084,7 +1133,10 @@ export function AppManagementPage() {
                                title="삭제"
                                aria-label={`${resource.name} 삭제`}
                                disabled={pending}
-                                onClick={() => requestDeleteWorkload(resource)}
+	                                onClick={(event) => {
+	                                  if (blockPageAgentDestructiveClick(event)) return;
+	                                  requestDeleteWorkload(resource);
+	                                }}
                              >
                                <Trash2 className="size-4" />
                              </Button>
@@ -1095,7 +1147,10 @@ export function AppManagementPage() {
                                  title={stopped ? '데이터 볼륨 삭제' : '중지 후 데이터 볼륨 삭제 가능'}
                                  aria-label={`${resource.name} 데이터 볼륨 삭제`}
                                  disabled={pending || !stopped}
-                                  onClick={() => requestDeleteVolume(resource)}
+	                                  onClick={(event) => {
+	                                    if (blockPageAgentDestructiveClick(event)) return;
+	                                    requestDeleteVolume(resource);
+	                                  }}
                                >
                                  <Database className="size-4" />
                                </Button>
@@ -1330,7 +1385,10 @@ export function AppManagementPage() {
                        variant="ghost"
                        className="size-9 justify-self-end px-0 text-rose-300"
                        disabled={componentPorts.length === 1}
-                        onClick={() => setComponentPorts((prev) => prev.filter((_, portIndex) => portIndex !== index))}
+	                        onClick={(event) => {
+	                          if (blockPageAgentDestructiveClick(event)) return;
+	                          setComponentPorts((prev) => prev.filter((_, portIndex) => portIndex !== index));
+	                        }}
                        title="포트 삭제"
                        aria-label="포트 삭제"
                      >
@@ -1472,7 +1530,10 @@ export function AppManagementPage() {
                        variant="ghost"
                        className="size-9 justify-self-end px-0 text-rose-300"
                        disabled={buildEnvVariables.length === 1}
-                        onClick={() => setBuildEnvVariables((prev) => prev.filter((_, itemIndex) => itemIndex !== index))}
+	                        onClick={(event) => {
+	                          if (blockPageAgentDestructiveClick(event)) return;
+	                          setBuildEnvVariables((prev) => prev.filter((_, itemIndex) => itemIndex !== index));
+	                        }}
                        title="환경변수 삭제"
                        aria-label="환경변수 삭제"
                      >
@@ -1514,7 +1575,15 @@ export function AppManagementPage() {
            </div>
            <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
              <Button variant="ghost" onClick={() => setDeletingComponent(null)}>취소</Button>
-              <Button variant="secondary" onClick={deleteComponent}>삭제</Button>
+              <Button
+                variant="secondary"
+                onClick={(event) => {
+                  if (blockPageAgentDestructiveClick(event)) return;
+                  deleteComponent();
+                }}
+              >
+                삭제
+              </Button>
            </div>
          </div>
        </div>
@@ -1522,27 +1591,59 @@ export function AppManagementPage() {

      {deletingApp ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/55 px-4 backdrop-blur-[2px]">
-          <div className="w-full max-w-md rounded-lg border border-border bg-card shadow-xl">
+          <div className="w-full max-w-xl rounded-lg border border-border bg-card shadow-xl">
            <div className="flex items-center gap-2 border-b border-border px-5 py-3">
              <Trash2 className="size-4 text-rose-300" />
-              <h2 className="text-sm font-semibold">앱 삭제</h2>
+              <h2 className="text-sm font-semibold">앱 폐기</h2>
            </div>
            <div className="space-y-4 px-5 py-6 text-sm">
              <p className="text-muted-foreground">
-                <span className="font-semibold text-foreground">{deletingApp.name}</span> 앱 그룹을 삭제합니다.
+                <span className="font-semibold text-foreground">{deletingApp.name}</span> 앱을 목록에서 삭제하고 선택한 운영 리소스를 정리합니다.
              </p>
-              <div className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs leading-5 text-amber-200">
-                앱 관리 데이터만 삭제합니다. 네임스페이스, 워크로드, 볼륨은 자동 삭제하지 않습니다.
+              <div className="space-y-2 rounded-md border border-border bg-muted/20 p-3">
+                {[
+                  ['unlinkSources', '저장소 연결 정보 삭제'],
+                  ['deleteRuntimeSettings', '실행 설정 삭제'],
+                  ['scaleDownWorkloads', 'Kubernetes 워크로드 중지'],
+                  ['deleteKubernetesResources', 'Kubernetes 리소스 삭제'],
+                  ['deletePersistentVolumes', 'PVC/데이터 볼륨 삭제']
+                ].map(([key, label]) => {
+                  const optionKey = key as keyof typeof appDeleteOptions;
+                  const disabled = optionKey === 'deletePersistentVolumes' && !appDeleteOptions.deleteKubernetesResources;
+
+                  return (
+                    <label key={key} className={cn('flex items-center gap-2 text-sm', disabled && 'opacity-50')}>
+                      <input
+                        type="checkbox"
+                        checked={appDeleteOptions[optionKey]}
+                        disabled={disabled}
+                        onChange={(event) => updateAppDeleteOption(optionKey, event.target.checked)}
+                        className="size-4 accent-primary"
+                      />
+                      {label}
+                    </label>
+                  );
+                })}
              </div>
+              <div className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs leading-5 text-amber-200">
+                PVC/데이터 볼륨 삭제는 되돌릴 수 없습니다. DB 데이터 백업을 확인한 경우에만 선택하세요.
+              </div>
+              {appDeleteStatus === 'error' ? (
+                <p className="text-xs text-rose-300">앱 폐기에 실패했습니다. 백엔드 로그와 Kubernetes 권한을 확인하세요.</p>
+              ) : null}
            </div>
            <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
-              <Button variant="ghost" onClick={() => setDeletingApp(null)}>취소</Button>
+              <Button variant="ghost" onClick={() => setDeletingApp(null)} disabled={appDeleteStatus === 'deleting'}>취소</Button>
              <Button
                variant="outline"
                className="border-rose-500/50 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
-                onClick={deleteApp}
+                onClick={(event) => {
+                  if (blockPageAgentDestructiveClick(event)) return;
+                  deleteApp();
+                }}
+                disabled={appDeleteStatus === 'deleting'}
              >
-                삭제
+                {appDeleteStatus === 'deleting' ? '폐기 중' : '폐기'}
              </Button>
            </div>
          </div>
@@ -1598,7 +1699,10 @@ export function AppManagementPage() {
                variant="outline"
                className="border-rose-500/50 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                disabled={workloadActionKey === `delete-${deletingWorkload.kind}-${deletingWorkload.name}`}
-                onClick={confirmDeleteWorkload}
+                onClick={(event) => {
+                  if (blockPageAgentDestructiveClick(event)) return;
+                  confirmDeleteWorkload();
+                }}
              >
                삭제
              </Button>
@@ -1713,7 +1817,10 @@ export function AppManagementPage() {
                variant="outline"
                className="border-rose-500/50 text-rose-300 hover:border-rose-400 hover:bg-rose-500/10 hover:text-rose-200"
                disabled={!canDeleteVolume}
-                onClick={confirmDeleteVolume}
+	                onClick={(event) => {
+	                  if (blockPageAgentDestructiveClick(event)) return;
+	                  confirmDeleteVolume();
+	                }}
              >
                {volumeDeleteStatus === 'deleting' ? '삭제 중' : '삭제'}
              </Button>
@@ -1,12 +1,19 @@
-import { useEffect, useMemo, useState } from 'react';
-import { ChevronLeft, ChevronRight, MoreHorizontal, Play, RotateCcw, Search, Square, Trash2 } from 'lucide-react';
+import { useEffect, useMemo, useState, type MouseEvent } from 'react';
+import { ChevronLeft, ChevronRight, MoreHorizontal, Play, RotateCcw, Square, Trash2 } from 'lucide-react';
 import { Button, Card, CardHeader, Modal } from '../../components/ui';
 import { useToast } from '../../components/toast';
 import { PageTitle } from '../../layout/AppLayout';
 import type { BuildJob, SourceComponent } from '../../types/application';
 import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
 import { AppSelector, StatusBadge, formatDate, isBuildDone, useApps } from './ApplicationControls';
-import { cancelBuildJob, createBuildJob, deleteBuildJob, listBuildJobs, listSources } from './application-api';
+import { cancelBuildJob, createBuildJob, deleteBuildJob, listBuildJobsPage, listSources } from './application-api';
+
+function blockPageAgentDestructiveClick(event: MouseEvent<HTMLElement>) {
+  if (event.nativeEvent.isTrusted) return false;
+  event.preventDefault();
+  event.stopPropagation();
+  return true;
+}

 function buildTargetForType(type?: string | null) {
  return {
@@ -61,6 +68,20 @@ function jobTime(job: BuildJob) {
 }

 const buildJobPageSize = 3;
+type BuildRange = 'week' | 'month' | 'all';
+
+const buildRangeLabels: Record<BuildRange, string> = {
+  week: '일주일',
+  month: '한달',
+  all: '전체'
+};
+
+function buildRangeSince(range: BuildRange) {
+  if (range === 'all') return undefined;
+  const date = new Date();
+  date.setDate(date.getDate() - (range === 'week' ? 7 : 30));
+  return date.toISOString();
+}

 export function BuildManagementPage() {
  const { apps, selectedApp, selectedAppId, selectApp, loading: appsLoading } = useApps();
@@ -72,9 +93,9 @@ export function BuildManagementPage() {
  const [commitSha, setCommitSha] = useState('');
  const [selectedJob, setSelectedJob] = useState<BuildJob | null>(null);
  const [loading, setLoading] = useState(false);
-  const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState('');
  const [page, setPage] = useState(1);
+  const [range, setRange] = useState<BuildRange>('week');
+  const [totalJobs, setTotalJobs] = useState(0);
  const loadingVisible = useMinimumLoading(appsLoading || loading);

  const componentOptions = useMemo(
@@ -88,13 +109,36 @@ export function BuildManagementPage() {
  const selectedTarget = selectedComponent?.buildTarget || buildTargetForType(selectedComponent?.type);
  const predicted = predictedArtifact(selectedComponent, branch, commitSha);
  const hasActiveJob = jobs.some((job) => job.status === 'PENDING' || job.status === 'RUNNING');
+  const totalPages = Math.max(1, Math.ceil(totalJobs / buildJobPageSize));
+  const currentPage = page;
+  const pagedJobs = jobs;
+
+  const loadJobs = async (nextPage = page, nextRange = range, appKey = selectedApp?.key) => {
+    const result = await listBuildJobsPage({
+      appKey,
+      page: nextPage,
+      limit: buildJobPageSize,
+      since: buildRangeSince(nextRange)
+    });
+    setJobs(result.jobs);
+    setTotalJobs(result.total);
+  };

  const refresh = async () => {
    setLoading(true);
    try {
-      const [nextSources, nextJobs] = await Promise.all([listSources(), listBuildJobs(selectedApp?.key)]);
+      const [nextSources, nextJobs] = await Promise.all([
+        listSources(),
+        listBuildJobsPage({
+          appKey: selectedApp?.key,
+          page,
+          limit: buildJobPageSize,
+          since: buildRangeSince(range)
+        })
+      ]);
      setSources(nextSources);
-      setJobs(nextJobs);
+      setJobs(nextJobs.jobs);
+      setTotalJobs(nextJobs.total);
      const filteredSources = (selectedAppId ? nextSources.filter((source) => source.appId === selectedAppId) : nextSources)
        .filter((source) => (source.imageSource ?? 'SOURCE') === 'SOURCE');
      setSelectedComponentId((prev) => {
@@ -110,19 +154,27 @@ export function BuildManagementPage() {

  useEffect(() => {
    void refresh();
-  }, [selectedAppId, selectedApp?.key]);
+  }, [selectedAppId, selectedApp?.key, page, range]);

  useEffect(() => {
    if (!hasActiveJob) return;
    const timer = window.setInterval(() => {
-      listBuildJobs(selectedApp?.key)
-        .then((nextJobs) => setJobs(nextJobs))
+      listBuildJobsPage({
+        appKey: selectedApp?.key,
+        page,
+        limit: buildJobPageSize,
+        since: buildRangeSince(range)
+      })
+        .then((nextJobs) => {
+          setJobs(nextJobs.jobs);
+          setTotalJobs(nextJobs.total);
+        })
        .catch((error: Error) => {
          toast({ type: 'error', message: `빌드 작업 갱신 실패: ${error.message}` });
        });
    }, 2000);
    return () => window.clearInterval(timer);
-  }, [hasActiveJob, selectedApp?.key, toast]);
+  }, [hasActiveJob, selectedApp?.key, toast, page, range]);

  useEffect(() => {
    if (!selectedJob) return;
@@ -140,26 +192,9 @@ export function BuildManagementPage() {
    }
  }, [componentOptions, selectedComponentId]);

-  const filteredJobs = useMemo(() => {
-    const normalizedSearch = search.trim().toLowerCase();
-    return jobs
-      .filter((job) => {
-        const text = `${job.component.app.name} ${job.component.name} ${job.component.repository ?? ''} ${job.branch} ${job.commitSha ?? ''} ${resultArtifact(job)} ${job.status}`.toLowerCase();
-        const matchesSearch = normalizedSearch ? text.includes(normalizedSearch) : true;
-        const matchesStatus = statusFilter ? job.status === statusFilter : true;
-        return matchesSearch && matchesStatus;
-      })
-      .sort((a, b) => jobTime(b) - jobTime(a));
-  }, [jobs, search, statusFilter]);
-
-  const totalPages = Math.max(1, Math.ceil(filteredJobs.length / buildJobPageSize));
-  const currentPage = Math.min(page, totalPages);
-  const pageStart = (currentPage - 1) * buildJobPageSize;
-  const pagedJobs = filteredJobs.slice(pageStart, pageStart + buildJobPageSize);
-
  useEffect(() => {
    setPage(1);
-  }, [search, statusFilter, selectedAppId]);
+  }, [selectedAppId, range]);

  const startBuild = async () => {
    if (!selectedComponent) return;
@@ -274,32 +309,26 @@ export function BuildManagementPage() {
      </Card>

      <Card className="min-w-0 overflow-hidden">
-        <div className="flex flex-col gap-3 border-b border-border px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
-          <h2 className="text-sm font-semibold text-foreground">빌드 작업 목록</h2>
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-            <div className="relative w-full sm:w-80">
-              <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-              <input
-                className="h-9 w-full rounded-md border border-input bg-background pl-9 pr-3 text-sm outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
-                placeholder="앱, 구성요소, 저장소 검색"
-                value={search}
-                onChange={(event) => setSearch(event.target.value)}
-              />
-            </div>
-            <select
-              className="h-9 rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground outline-none focus:ring-2 focus:ring-ring"
-              value={statusFilter}
-              onChange={(event) => setStatusFilter(event.target.value)}
-            >
-              <option value="">전체 상태</option>
-              {[...new Set(jobs.map((job) => job.status))].map((status) => (
-                <option key={status} value={status}>{statusLabel(status)}</option>
+        <CardHeader
+          title="빌드 작업 목록"
+          description="선택한 기간의 빌드 작업을 최신순으로 표시합니다."
+          action={
+            <div className="flex items-center gap-2">
+              {(Object.keys(buildRangeLabels) as BuildRange[]).map((item) => (
+                <Button
+                  key={item}
+                  variant={range === item ? 'default' : 'outline'}
+                  className="h-8 px-3 text-[13px]"
+                  onClick={() => setRange(item)}
+                >
+                  {buildRangeLabels[item]}
+                </Button>
              ))}
-            </select>
-          </div>
-        </div>
-        <div className="space-y-3 p-4">
-          {!loading && filteredJobs.length === 0 ? (
+            </div>
+          }
+        />
+        <div className="min-h-[410px] space-y-3 p-4">
+          {!loading && jobs.length === 0 ? (
            <div className="flex min-h-44 items-center justify-center text-center text-sm text-muted-foreground">
              빌드 작업이 없습니다.
            </div>
@@ -309,7 +338,7 @@ export function BuildManagementPage() {
              <div className="flex items-start justify-between gap-4">
                <div className="min-w-0">
                  <div className="flex flex-wrap items-center gap-2">
-                    <span className="text-xs font-medium text-muted-foreground">No. {filteredJobs.length - pageStart - index}</span>
+                    <span className="text-xs font-medium text-muted-foreground">No. {totalJobs - ((currentPage - 1) * buildJobPageSize + index)}</span>
                    <StatusBadge status={statusLabel(job.status)} />
                    <span className="font-medium">{job.component.app.name}</span>
                    <span className="text-muted-foreground">/</span>
@@ -336,7 +365,16 @@ export function BuildManagementPage() {
                    </Button>
                  )}
                  {isBuildDone(job.status) ? (
-                    <Button variant="outline" className="size-8 px-0" title="삭제" aria-label="삭제" onClick={() => removeJob(job.id)}>
+                    <Button
+                      variant="outline"
+                      className="size-8 px-0"
+                      title="삭제"
+                      aria-label="삭제"
+                      onClick={(event) => {
+                        if (blockPageAgentDestructiveClick(event)) return;
+                        removeJob(job.id);
+                      }}
+                    >
                      <Trash2 className="size-4" />
                    </Button>
                  ) : null}
@@ -361,7 +399,7 @@ export function BuildManagementPage() {
        </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 ? '불러오는 중' : `총 ${filteredJobs.length}건 · ${currentPage} / ${totalPages}`}
+            {loading ? '불러오는 중' : `총 ${totalJobs}건 · ${currentPage} / ${totalPages}`}
          </span>
          <div className="flex gap-2">
            <Button
@@ -6,7 +6,7 @@ import { PageTitle } from '../../layout/AppLayout';
 import type { AppRelease, DeploymentJob } from '../../types/application';
 import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
 import { AppSelector, formatDate, useApps } from './ApplicationControls';
-import { createDeployment, listDeployments, listReleases } from './application-api';
+import { createDeployment, listDeploymentsPage, listReleases } from './application-api';

 function statusLabel(status: string) {
  return {
@@ -53,11 +53,25 @@ function deploymentTime(deployment: DeploymentJob) {
  return Number.isNaN(value) ? 0 : value;
 }

-const deploymentPageSize = 5;
+const deploymentPageSize = 3;
+type DeploymentRange = 'week' | 'month' | 'all';
+
+const deploymentRangeLabels: Record<DeploymentRange, string> = {
+  week: '일주일',
+  month: '한달',
+  all: '전체'
+};
+
+function deploymentRangeSince(range: DeploymentRange) {
+  if (range === 'all') return undefined;
+  const date = new Date();
+  date.setDate(date.getDate() - (range === 'week' ? 7 : 30));
+  return date.toISOString();
+}

 export function DeploymentManagementPage() {
  const { toast } = useToast();
-  const { apps, selectedAppId, loading: appsLoading, selectApp } = useApps();
+  const { apps, selectedApp, selectedAppId, loading: appsLoading, selectApp } = useApps();
  const [deployments, setDeployments] = useState<DeploymentJob[]>([]);
  const [releases, setReleases] = useState<AppRelease[]>([]);
  const [releaseId, setReleaseId] = useState('');
@@ -67,6 +81,9 @@ export function DeploymentManagementPage() {
  const [selectedDeployment, setSelectedDeployment] = useState<DeploymentJob | null>(null);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
+  const [range, setRange] = useState<DeploymentRange>('week');
+  const [totalDeployments, setTotalDeployments] = useState(0);
+  const [deployedReleaseIdValues, setDeployedReleaseIdValues] = useState<string[]>([]);
  const loadingVisible = useMinimumLoading(loading);

  const selectedRelease = releases.find((release) => release.id === releaseId);
@@ -75,32 +92,37 @@ export function DeploymentManagementPage() {
    [releases, selectedAppId]
  );
  const deployedReleaseIds = useMemo(
-    () => new Set(deployments
-      .filter((deployment) => deployment.status === 'SUCCEEDED' && deployment.releaseId)
-      .map((deployment) => deployment.releaseId!)),
-    [deployments]
+    () => new Set(deployedReleaseIdValues),
+    [deployedReleaseIdValues]
  );
  const deployableReleases = useMemo(
    () => filteredReleases.filter((release) => !deployedReleaseIds.has(release.id)),
    [filteredReleases, deployedReleaseIds]
  );
  const filteredDeployments = useMemo(
-    () => deployments
-      .filter((deployment) => !selectedAppId || deployment.appId === selectedAppId)
-      .sort((a, b) => deploymentTime(b) - deploymentTime(a)),
-    [deployments, selectedAppId]
+    () => deployments,
+    [deployments]
  );
-  const totalPages = Math.max(1, Math.ceil(filteredDeployments.length / deploymentPageSize));
-  const currentPage = Math.min(page, totalPages);
-  const pageStart = (currentPage - 1) * deploymentPageSize;
-  const pagedDeployments = filteredDeployments.slice(pageStart, pageStart + deploymentPageSize);
+  const totalPages = Math.max(1, Math.ceil(totalDeployments / deploymentPageSize));
+  const currentPage = page;
+  const pagedDeployments = filteredDeployments;

  const refresh = async () => {
    setLoading(true);
    try {
-      const [nextDeployments, nextReleases] = await Promise.all([listDeployments(), listReleases()]);
+      const [nextDeployments, nextReleases] = await Promise.all([
+        listDeploymentsPage({
+          appKey: selectedApp?.key,
+          page,
+          limit: deploymentPageSize,
+          since: deploymentRangeSince(range)
+        }),
+        listReleases(selectedApp?.key)
+      ]);
      const deployableReleases = nextReleases.filter((release) => release.status === 'SUCCEEDED');
-      setDeployments(nextDeployments);
+      setDeployments(nextDeployments.deployments);
+      setTotalDeployments(nextDeployments.total);
+      setDeployedReleaseIdValues(nextDeployments.deployedReleaseIds ?? []);
      setReleases(deployableReleases);
    } finally {
      setLoading(false);
@@ -109,11 +131,11 @@ export function DeploymentManagementPage() {

  useEffect(() => {
    void refresh();
-  }, []);
+  }, [selectedApp?.key, selectedAppId, page, range]);

  useEffect(() => {
    setPage(1);
-  }, [selectedAppId]);
+  }, [selectedAppId, range]);

  useEffect(() => {
    if (selectedRelease?.app?.namespace) setNamespace((prev) => prev || selectedRelease.app.namespace || '');
@@ -166,9 +188,26 @@ export function DeploymentManagementPage() {

      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]">
        <Card className="min-w-0 overflow-hidden">
-          <CardHeader title="배포 작업" description="릴리즈별 배포 실행 결과와 rollout 로그를 확인합니다." />
+          <CardHeader
+            title="배포 작업"
+            description="선택한 기간의 배포 실행 결과와 rollout 로그를 최신순으로 표시합니다."
+            action={
+              <div className="flex items-center gap-2">
+                {(Object.keys(deploymentRangeLabels) as DeploymentRange[]).map((item) => (
+                  <Button
+                    key={item}
+                    variant={range === item ? 'default' : 'outline'}
+                    className="h-8 px-3 text-[13px]"
+                    onClick={() => setRange(item)}
+                  >
+                    {deploymentRangeLabels[item]}
+                  </Button>
+                ))}
+              </div>
+            }
+          />
          <div className="space-y-3 p-4">
-            {filteredDeployments.length === 0 ? (
+            {!loading && filteredDeployments.length === 0 ? (
              <div className="flex min-h-44 items-center justify-center text-center text-sm text-muted-foreground">
                배포 작업이 없습니다.
              </div>
@@ -180,7 +219,7 @@ export function DeploymentManagementPage() {
                  <div className="flex items-start justify-between gap-4">
                    <div className="min-w-0">
                      <div className="flex flex-wrap items-center gap-2">
-                        <span className="text-xs font-medium text-muted-foreground">No. {filteredDeployments.length - pageStart - index}</span>
+                        <span className="text-xs font-medium text-muted-foreground">No. {totalDeployments - ((currentPage - 1) * deploymentPageSize + index)}</span>
                        <Badge tone={statusTone(deployment.status)}>{statusLabel(deployment.status)}</Badge>
                        <span className="text-base font-medium">{deployment.app.name}</span>
                        <span className="text-base font-medium">{deployment.release?.version || '-'}</span>
@@ -220,7 +259,7 @@ export function DeploymentManagementPage() {
          </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 ? '불러오는 중' : `총 ${filteredDeployments.length}건 · ${currentPage} / ${totalPages}`}
+              {loading ? '불러오는 중' : `총 ${totalDeployments}건 · ${currentPage} / ${totalPages}`}
            </span>
            <div className="flex gap-2">
              <Button
@@ -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
@@ -6,7 +6,7 @@ import { PageTitle } from '../../layout/AppLayout';
 import type { AppRelease, BuildJob } from '../../types/application';
 import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
 import { AppSelector, formatDate, useApps } from './ApplicationControls';
-import { createRelease, listBuildJobs, listReleases } from './application-api';
+import { createRelease, listBuildJobsPage, listReleasesPage } from './application-api';

 function statusLabel(status: string) {
  return {
@@ -140,7 +140,21 @@ function releaseTime(release: AppRelease) {
  return Number.isNaN(value) ? 0 : value;
 }

-const releasePageSize = 5;
+const releasePageSize = 3;
+type ReleaseRange = 'week' | 'month' | 'all';
+
+const releaseRangeLabels: Record<ReleaseRange, string> = {
+  week: '일주일',
+  month: '한달',
+  all: '전체'
+};
+
+function releaseRangeSince(range: ReleaseRange) {
+  if (range === 'all') return undefined;
+  const date = new Date();
+  date.setDate(date.getDate() - (range === 'week' ? 7 : 30));
+  return date.toISOString();
+}

 export function ReleaseManagementPage() {
  const { toast } = useToast();
@@ -153,9 +167,13 @@ export function ReleaseManagementPage() {
  const [openLogReleaseId, setOpenLogReleaseId] = useState('');
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
+  const [range, setRange] = useState<ReleaseRange>('week');
+  const [totalReleases, setTotalReleases] = useState(0);
+  const [usedBuildIdValues, setUsedBuildIdValues] = useState<string[]>([]);
+  const [usedReleaseValueValues, setUsedReleaseValueValues] = useState<string[]>([]);
  const loadingVisible = useMinimumLoading(loading);
-  const usedValues = useMemo(() => usedReleaseValues(releases), [releases]);
-  const usedBuildIds = useMemo(() => usedReleaseBuildIds(releases), [releases]);
+  const usedValues = useMemo(() => new Set(usedReleaseValueValues), [usedReleaseValueValues]);
+  const usedBuildIds = useMemo(() => new Set(usedBuildIdValues), [usedBuildIdValues]);
  const candidateBuilds = useMemo(
    () => builds.filter((build) => {
      const value = buildValue(build);
@@ -168,12 +186,7 @@ export function ReleaseManagementPage() {
    () => groupCandidateBuilds(candidateBuilds).filter((group) => !selectedAppId || group.appId === selectedAppId),
    [candidateBuilds, selectedAppId]
  );
-  const filteredReleases = useMemo(
-    () => releases
-      .filter((release) => !selectedAppId || release.appId === selectedAppId)
-      .sort((a, b) => releaseTime(b) - releaseTime(a)),
-    [releases, selectedAppId]
-  );
+  const filteredReleases = releases;
  const modalBuilds = useMemo(
    () => candidateBuilds
      .filter((build) => !selectedAppId || build.component.app.id === selectedAppId)
@@ -184,10 +197,26 @@ export function ReleaseManagementPage() {
  const refresh = async () => {
    setLoading(true);
    try {
-      const [nextReleases, nextBuilds] = await Promise.all([listReleases(), listBuildJobs()]);
-      const succeededBuilds = nextBuilds.filter((job) => job.status === 'SUCCEEDED');
-      setReleases(nextReleases);
-      setBuilds(succeededBuilds);
+      const [nextReleases, nextBuilds] = await Promise.all([
+        listReleasesPage({
+          appKey: apps.find((app) => app.id === selectedAppId)?.key,
+          page,
+          limit: releasePageSize,
+          since: releaseRangeSince(range)
+        }),
+        listBuildJobsPage({
+          appKey: apps.find((app) => app.id === selectedAppId)?.key,
+          page: 1,
+          limit: 100,
+          since: releaseRangeSince(range),
+          status: 'SUCCEEDED'
+        })
+      ]);
+      setReleases(nextReleases.releases);
+      setTotalReleases(nextReleases.total);
+      setUsedBuildIdValues(nextReleases.usedBuildIds ?? []);
+      setUsedReleaseValueValues(nextReleases.usedValues ?? []);
+      setBuilds(nextBuilds.jobs);
    } finally {
      setLoading(false);
    }
@@ -195,16 +224,15 @@ export function ReleaseManagementPage() {

  useEffect(() => {
    void refresh();
-  }, []);
+  }, [selectedAppId, page, range, apps]);

  useEffect(() => {
    setPage(1);
-  }, [selectedAppId]);
+  }, [selectedAppId, range]);

-  const totalPages = Math.max(1, Math.ceil(filteredReleases.length / releasePageSize));
-  const currentPage = Math.min(page, totalPages);
-  const pageStart = (currentPage - 1) * releasePageSize;
-  const pagedReleases = filteredReleases.slice(pageStart, pageStart + releasePageSize);
+  const totalPages = Math.max(1, Math.ceil(totalReleases / releasePageSize));
+  const currentPage = page;
+  const pagedReleases = filteredReleases;

  const openReleaseModal = (appId?: string) => {
    const nextAppId = appId || selectedAppId || candidateGroups[0]?.appId || '';
@@ -252,7 +280,24 @@ export function ReleaseManagementPage() {

      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_320px]">
        <Card className="min-w-0 overflow-hidden">
-          <CardHeader title="릴리즈 목록" description="release 브랜치에서 빌드된 산출물 기준의 배포 후보입니다." />
+          <CardHeader
+            title="릴리즈 목록"
+            description="release 브랜치에서 빌드된 산출물 기준의 배포 후보입니다."
+            action={
+              <div className="flex items-center gap-2">
+                {(Object.keys(releaseRangeLabels) as ReleaseRange[]).map((item) => (
+                  <Button
+                    key={item}
+                    variant={range === item ? 'default' : 'outline'}
+                    className="h-8 px-3 text-[13px]"
+                    onClick={() => setRange(item)}
+                  >
+                    {releaseRangeLabels[item]}
+                  </Button>
+                ))}
+              </div>
+            }
+          />
          <div className="space-y-3 p-4">
            {filteredReleases.length === 0 ? (
              <div className="flex min-h-44 items-center justify-center text-center text-sm text-muted-foreground">
@@ -306,7 +351,7 @@ export function ReleaseManagementPage() {
          </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 ? '불러오는 중' : `총 ${filteredReleases.length}건 · ${currentPage} / ${totalPages}`}
+              {loading ? '불러오는 중' : `총 ${totalReleases}건 · ${currentPage} / ${totalPages}`}
            </span>
            <div className="flex gap-2">
              <Button
@@ -244,6 +244,15 @@ export function RepositoryManagementPage() {
    [giteaRepos, selectedAppRepoKeys]
  );

+  const handleRepoNameChange = (value: string) => {
+    const normalized = value
+      .trimStart()
+      .replace(new RegExp(`^${giteaAppOrg.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}/`, 'i'), '')
+      .replace(/^\/+/, '')
+      .replace(/\.git$/i, '');
+    setRepoName(normalized);
+  };
+
  return (
    <>
      <PageTitle
@@ -373,11 +382,17 @@ export function RepositoryManagementPage() {
            <div className="space-y-4 px-5 py-5">
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">저장소명</span>
-                <input
-                  value={repoName}
-                  onChange={(event) => setRepoName(event.target.value)}
-                  className="mt-2 h-9 w-full rounded-md border border-border bg-background px-3 text-sm outline-none focus:border-primary"
-                />
+                <div className="mt-2 flex h-9 overflow-hidden rounded-md border border-border bg-background focus-within:border-primary">
+                  <span className="flex h-full shrink-0 items-center border-r border-border bg-muted px-3 text-xs font-semibold text-muted-foreground">
+                    {giteaAppOrg}/
+                  </span>
+                  <input
+                    value={repoName}
+                    onChange={(event) => handleRepoNameChange(event.target.value)}
+                    placeholder="lms-fe"
+                    className="h-full min-w-0 flex-1 bg-transparent px-3 text-sm outline-none placeholder:text-muted-foreground"
+                  />
+                </div>
              </label>
              <label className="block">
                <span className="text-xs font-medium text-muted-foreground">설명</span>
@@ -150,6 +150,17 @@ export function listBuildJobs(appKey?: string) {
  return apiRequest<BuildJob[]>(`/apps/builds${query}`);
 }

+export function listBuildJobsPage(options: { appKey?: string; page: number; limit: number; since?: string; status?: string }) {
+  const params = new URLSearchParams({
+    page: String(options.page),
+    limit: String(options.limit)
+  });
+  if (options.appKey) params.set('appKey', options.appKey);
+  if (options.since) params.set('since', options.since);
+  if (options.status) params.set('status', options.status);
+  return apiRequest<{ jobs: BuildJob[]; total: number; page: number; limit: number }>(`/apps/builds?${params.toString()}`);
+}
+
 export function createBuildJob(input: { componentId: string; branch?: string; commitSha?: string }) {
  return apiRequest<{ buildJob: BuildJob }>('/apps/builds', {
    method: 'POST',
@@ -170,6 +181,16 @@ export function listReleases(appKey?: string) {
  return apiRequest<AppRelease[]>(`/apps/releases${query}`);
 }

+export function listReleasesPage(options: { appKey?: string; page: number; limit: number; since?: string }) {
+  const params = new URLSearchParams({
+    page: String(options.page),
+    limit: String(options.limit)
+  });
+  if (options.appKey) params.set('appKey', options.appKey);
+  if (options.since) params.set('since', options.since);
+  return apiRequest<{ releases: AppRelease[]; total: number; page: number; limit: number; usedBuildIds?: string[]; usedValues?: string[] }>(`/apps/releases?${params.toString()}`);
+}
+
 export function createRelease(input: { appId: string; version: string; branch?: string; buildJobIds: string[] }) {
  return apiRequest<{ release: AppRelease }>('/apps/releases', {
    method: 'POST',
@@ -182,6 +203,16 @@ export function listDeployments(appKey?: string) {
  return apiRequest<DeploymentJob[]>(`/apps/deployments${query}`);
 }

+export function listDeploymentsPage(options: { appKey?: string; page: number; limit: number; since?: string }) {
+  const params = new URLSearchParams({
+    page: String(options.page),
+    limit: String(options.limit)
+  });
+  if (options.appKey) params.set('appKey', options.appKey);
+  if (options.since) params.set('since', options.since);
+  return apiRequest<{ deployments: DeploymentJob[]; total: number; page: number; limit: number; deployedReleaseIds?: string[] }>(`/apps/deployments?${params.toString()}`);
+}
+
 export function createDeployment(input: { releaseId: string; environment: string; namespace: string; updateLauncherAppVersion?: boolean }) {
  return apiRequest<{ deploymentJob: DeploymentJob }>('/apps/deployments', {
    method: 'POST',
@@ -193,6 +224,16 @@ export function listMigrations() {
  return apiRequest<RuntimeControlJob[]>('/apps/migrations');
 }

+export function listMigrationsPage(options: { appId?: string; page: number; limit: number; since?: string }) {
+  const params = new URLSearchParams({
+    page: String(options.page),
+    limit: String(options.limit)
+  });
+  if (options.appId) params.set('appId', options.appId);
+  if (options.since) params.set('since', options.since);
+  return apiRequest<{ jobs: RuntimeControlJob[]; total: number; page: number; limit: number }>(`/apps/migrations?${params.toString()}`);
+}
+
 export function createMigration(input: {
  releaseId: string;
  migrationComponentId: string;
@@ -242,7 +242,6 @@ export function NoticesPage() {
        )
      },
      { key: 'appKey', header: '대상 앱', cell: (row) => <StatusBadge status={row.appName} tone={isLauncherNoticeKey(row.appKey) ? 'violet' : 'blue'} /> },
-      { key: 'status', header: '상태', cell: (row) => <StatusBadge status={row.status ?? (row.isActive ? '게시중' : '비활성')} /> },
      { key: 'exposure', header: '노출 일시', className: 'w-48 px-5 py-3 font-medium', cell: exposureCell },
      { key: 'createdAt', header: '생성일시', cell: (row) => <span className="text-muted-foreground">{formatNoticeDateTime(row.createdAt)}</span> },
      {
@@ -273,8 +272,7 @@ export function NoticesPage() {

  const filters = useMemo<Array<DataTableFilter<(typeof rows)[number]>>>(
    () => [
-      { key: 'appKey', label: '대상 앱', options: [...new Set(rows.map((row) => row.appKey))].map((appKey) => ({ label: appLabel(appKey), value: appKey })), getValue: (row) => row.appKey },
-      { key: 'status', label: '상태', options: [...new Set(rows.map((row) => row.status ?? (row.isActive ? '게시중' : '비활성')))].map((status) => ({ label: status, value: status })), getValue: (row) => row.status ?? (row.isActive ? '게시중' : '비활성') }
+      { key: 'appKey', label: '대상 앱', options: [...new Set(rows.map((row) => row.appKey))].map((appKey) => ({ label: appLabel(appKey), value: appKey })), getValue: (row) => row.appKey }
    ],
    [rows]
  );
@@ -306,7 +304,7 @@ export function NoticesPage() {
        getSearchText={(row) => `${row.title} ${row.body} ${row.appKey} ${row.appName} ${row.linkUrl ?? ''} ${row.status ?? ''}`}
        getRowKey={(row) => row.id}
        pageSize={6}
-        minWidth={1180}
+        minWidth={1040}
        loading={loading}
        emptyMessage="등록된 공지사항이 없습니다."
      />
@@ -462,8 +462,15 @@ export function RuntimeConfigPage() {
              </div>
              <span className="text-xs text-muted-foreground">총 {variables.length}개</span>
            </div>
-            <div className="max-h-[480px] overflow-x-auto overflow-y-auto">
-              <table className="w-full min-w-[920px] text-left text-sm">
+            <div className="max-h-[480px] overflow-y-auto">
+              <table className="w-full table-fixed text-left text-sm">
+                <colgroup>
+                  <col className="w-[22%]" />
+                  <col className="w-[29%]" />
+                  <col className="w-[19%]" />
+                  <col className="w-[24%]" />
+                  <col className="w-20" />
+                </colgroup>
                <thead className="sticky top-0 z-10 border-b border-border bg-card text-xs text-muted-foreground">
                  <tr>
                    <th className="px-5 py-3 font-medium">구성요소</th>
@@ -479,16 +486,16 @@ export function RuntimeConfigPage() {
                  ) : null}
                  {variables.map((variable) => (
                    <tr key={variable.id} className="hover:bg-muted/20">
-                      <td className="px-5 py-3">
+                      <td className="px-4 py-3">
                        <span className="inline-flex items-center gap-2">
                          <span className={variable.isSecret ? 'block size-2.5 rounded-full bg-amber-400' : 'block size-2.5 rounded-full bg-emerald-400'} />
-                          <span>{variable.component?.name ?? '-'}</span>
+                          <span className="truncate">{variable.component?.name ?? '-'}</span>
                        </span>
                      </td>
-                      <td className="px-5 py-3 font-mono text-xs font-medium text-foreground">{variable.key}</td>
-                      <td className="px-5 py-3 font-mono text-xs text-muted-foreground">{variable.isSecret ? '********' : variable.value}</td>
-                      <td className="px-5 py-3 text-xs text-muted-foreground">{formatDate(variable.createdAt)}</td>
-                      <td className="px-5 py-3 text-right">
+                      <td className="break-all px-4 py-3 font-mono text-xs font-medium text-foreground">{variable.key}</td>
+                      <td className="break-all px-4 py-3 font-mono text-xs text-muted-foreground">{variable.isSecret ? '********' : variable.value}</td>
+                      <td className="px-4 py-3 text-xs text-muted-foreground">{formatDate(variable.createdAt)}</td>
+                      <td className="px-3 py-3 text-right">
                        <Button variant="ghost" className="h-8 w-8 p-0 text-rose-300 hover:text-rose-200" title="삭제" aria-label={`${variable.key} 삭제`} onClick={() => removeVariable(variable.id)} disabled={Boolean(actionKey)}>
                          <Trash2 className="size-4" />
                        </Button>
@@ -552,8 +559,16 @@ export function RuntimeConfigPage() {
              </div>
              <span className="text-xs text-muted-foreground">총 {ingressRules.length}개</span>
            </div>
-            <div className="max-h-[320px] overflow-x-auto overflow-y-auto">
-              <table className="w-full min-w-[940px] text-left text-sm">
+            <div className="max-h-[320px] overflow-y-auto">
+              <table className="w-full table-fixed text-left text-sm">
+                <colgroup>
+                  <col className="w-[24%]" />
+                  <col className="w-[32%]" />
+                  <col className="w-[16%]" />
+                  <col className="w-[10%]" />
+                  <col className="w-[10%]" />
+                  <col className="w-14" />
+                </colgroup>
                <thead className="sticky top-0 z-10 border-b border-border bg-card text-xs text-muted-foreground">
                  <tr>
                    <th className="px-5 py-3 font-medium">구성요소</th>
@@ -570,17 +585,17 @@ export function RuntimeConfigPage() {
                  ) : null}
                  {ingressRules.map((rule) => (
                    <tr key={rule.id} className="hover:bg-muted/20">
-                      <td className="px-5 py-3">
+                      <td className="px-4 py-3">
                        <span className="inline-flex items-center gap-2">
                          <span className="block size-2.5 rounded-full bg-sky-400" />
-                          <span>{rule.component?.name ?? '-'}</span>
+                          <span className="truncate">{rule.component?.name ?? '-'}</span>
                        </span>
                      </td>
-                      <td className="px-5 py-3 text-foreground">{rule.host}</td>
-                      <td className="px-5 py-3 text-muted-foreground">{rule.path}</td>
-                      <td className="px-5 py-3 text-muted-foreground">{rule.servicePort}</td>
-                      <td className="px-5 py-3 text-muted-foreground">{rule.stripPrefix ? '제거' : '유지'}</td>
-                      <td className="px-5 py-3 text-right">
+                      <td className="break-all px-4 py-3 text-foreground">{rule.host}</td>
+                      <td className="break-all px-4 py-3 text-muted-foreground">{rule.path}</td>
+                      <td className="px-4 py-3 text-muted-foreground">{rule.servicePort}</td>
+                      <td className="px-4 py-3 text-muted-foreground">{rule.stripPrefix ? '제거' : '유지'}</td>
+                      <td className="px-3 py-3 text-right">
                        <Button variant="ghost" className="h-8 w-8 p-0 text-rose-300 hover:text-rose-200" title="삭제" aria-label={`${rule.host} 삭제`} onClick={() => removeIngressRule(rule.id)} disabled={Boolean(actionKey)}>
                          <Trash2 className="size-4" />
                        </Button>