From 34f0015cff6c11f05823d7ce42b1d398a354278e Mon Sep 17 00:00:00 2001
From: HYOJIN <hjkim4@gcsc.co.kr>
Date: Fri, 10 Apr 2026 11:03:55 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat(ui):=20=EC=84=9C=EB=B9=84=EC=8A=A4=20A?=
 =?UTF-8?q?PI=20=EB=B6=84=EB=A5=98=20+=20API=20Key=20=EA=B4=80=EB=A6=AC=20?=
 =?UTF-8?q?UI=20=EC=A0=84=EB=A9=B4=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

서비스 API:
- snp_service_api에 apiDomain/apiSection 컬럼 추가
- API 신청 시 서비스 > 도메인 계층형 아코디언+테이블 선택
- 검토 모달 API 권한 편집 가능 (체크박스 토글, API 추가 모달)

API Key 관리:
- KPI 카드 4개 (대기/활성/만료임박/폐기)
- 필터 칩 (상태별) + 검색 + 15건 페이징
- 신청 관리: 사용자 아이콘, 필드 라벨 한글화, 목적 제거
- 키 관리: 소유자(userName) 필드 추가, 필드 순서 변경, maskedKey/생성일 제거
- 검토 모달: 탭(신청정보/API권한), EditableDateCard, 승인확인 변경테이블
- 상세 모달: 검토 모달 readOnly 재사용, 상태별 아이콘 헤더
- 키 상세: 상태별 색상, InfoRow, API Key 보기/숨기기+복사

Closes #31

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/schema/create_tables.sql                 |    2 +
 frontend/src/pages/admin/ServicesPage.tsx     |   28 +
 frontend/src/pages/apikeys/KeyAdminPage.tsx   | 1681 +++++++++++++----
 frontend/src/pages/apikeys/KeyRequestPage.tsx |  354 +++-
 frontend/src/types/apikey.ts                  |    1 +
 frontend/src/types/service.ts                 |    4 +
 .../connection/apikey/dto/ApiKeyResponse.java |    3 +
 .../monitoring/entity/SnpApiRequestLog.java   |   10 +-
 .../service/dto/CreateServiceApiRequest.java  |    2 +
 .../service/dto/ServiceApiResponse.java       |    4 +
 .../service/entity/SnpServiceApi.java         |   15 +-
 .../service/ServiceManagementService.java     |    2 +
 12 files changed, 1672 insertions(+), 434 deletions(-)

diff --git a/docs/schema/create_tables.sql b/docs/schema/create_tables.sql
index df0af70..ae5d74a 100644
--- a/docs/schema/create_tables.sql
+++ b/docs/schema/create_tables.sql
@@ -91,6 +91,8 @@ CREATE TABLE IF NOT EXISTS snp_service_api (
     api_path        VARCHAR(500)    NOT NULL,
     api_method      VARCHAR(10)     NOT NULL,
     api_name        VARCHAR(200)    NOT NULL,
+    api_domain      VARCHAR(100),
+    api_section     VARCHAR(100),
     description     TEXT,
     is_active       BOOLEAN         NOT NULL DEFAULT TRUE,
     created_at      TIMESTAMP       NOT NULL DEFAULT NOW(),
diff --git a/frontend/src/pages/admin/ServicesPage.tsx b/frontend/src/pages/admin/ServicesPage.tsx
index 2f2f1bd..d1a21bc 100644
--- a/frontend/src/pages/admin/ServicesPage.tsx
+++ b/frontend/src/pages/admin/ServicesPage.tsx
@@ -61,6 +61,8 @@ const ServicesPage = () => {
   const [apiMethod, setApiMethod] = useState('GET');
   const [apiPath, setApiPath] = useState('');
   const [apiName, setApiName] = useState('');
+  const [apiDomain, setApiDomain] = useState('');
+  const [apiSection, setApiSection] = useState('');
   const [apiDescription, setApiDescription] = useState('');
 
   const fetchServices = async () => {
@@ -174,6 +176,8 @@ const ServicesPage = () => {
     setApiMethod('GET');
     setApiPath('');
     setApiName('');
+    setApiDomain('');
+    setApiSection('');
     setApiDescription('');
     setIsApiModalOpen(true);
   };
@@ -193,6 +197,8 @@ const ServicesPage = () => {
         apiMethod,
         apiPath,
         apiName,
+        apiDomain: apiDomain || undefined,
+        apiSection: apiSection || undefined,
         description: apiDescription || undefined,
       };
       const res = await createServiceApi(selectedService.serviceId, req);
@@ -537,6 +543,28 @@ const ServicesPage = () => {
                     className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   />
                 </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">도메인</label>
+                    <input
+                      type="text"
+                      value={apiDomain}
+                      onChange={(e) => setApiDomain(e.target.value)}
+                      placeholder="예: Compliance"
+                      className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">섹션</label>
+                    <input
+                      type="text"
+                      value={apiSection}
+                      onChange={(e) => setApiSection(e.target.value)}
+                      placeholder="예: 선박 규정"
+                      className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                    />
+                  </div>
+                </div>
                 <div>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     Description
diff --git a/frontend/src/pages/apikeys/KeyAdminPage.tsx b/frontend/src/pages/apikeys/KeyAdminPage.tsx
index 6cfc197..14d9d85 100644
--- a/frontend/src/pages/apikeys/KeyAdminPage.tsx
+++ b/frontend/src/pages/apikeys/KeyAdminPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import type { ApiKey, ApiKeyDetail, ApiKeyRequest } from '../../types/apikey';
 import type { ServiceInfo, ServiceApi } from '../../types/service';
 import {
@@ -20,11 +20,18 @@ const STATUS_BADGE: Record<string, string> = {
   REJECTED: 'bg-red-100 text-red-800',
 };
 
-const METHOD_COLOR: Record<string, string> = {
-  GET: 'bg-green-100 text-green-800',
-  POST: 'bg-blue-100 text-blue-800',
-  PUT: 'bg-orange-100 text-orange-800',
-  DELETE: 'bg-red-100 text-red-800',
+const METHOD_BADGE_STYLE: Record<string, string> = {
+  GET: 'bg-emerald-900/80 text-emerald-300 border border-emerald-700/50',
+  POST: 'bg-amber-900/80 text-amber-300 border border-amber-700/50',
+  PUT: 'bg-blue-900/80 text-blue-300 border border-blue-700/50',
+  DELETE: 'bg-red-900/80 text-red-300 border border-red-700/50',
+};
+
+const KEY_STATUS_CONFIG: Record<string, { label: string; dotClass: string; bgClass: string; borderClass: string; textClass: string; iconBgClass: string; iconBorderClass: string }> = {
+  ACTIVE: { label: '활성', dotClass: 'bg-green-500', bgClass: 'bg-green-500/10', borderClass: 'border-green-500/30', textClass: 'text-green-400', iconBgClass: 'bg-green-500/15', iconBorderClass: 'border-green-500/30' },
+  PENDING: { label: '대기중', dotClass: 'bg-yellow-500', bgClass: 'bg-yellow-500/10', borderClass: 'border-yellow-500/30', textClass: 'text-yellow-400', iconBgClass: 'bg-yellow-500/15', iconBorderClass: 'border-yellow-500/30' },
+  REVOKED: { label: '폐기됨', dotClass: 'bg-red-500', bgClass: 'bg-red-500/10', borderClass: 'border-red-500/30', textClass: 'text-red-400', iconBgClass: 'bg-red-500/15', iconBorderClass: 'border-red-500/30' },
+  EXPIRED: { label: '만료됨', dotClass: 'bg-gray-500', bgClass: 'bg-gray-500/10', borderClass: 'border-gray-500/30', textClass: 'text-gray-400', iconBgClass: 'bg-gray-500/15', iconBorderClass: 'border-gray-500/30' },
 };
 
 const formatDateTime = (dateStr: string | null): string => {
@@ -38,8 +45,22 @@ interface AllApisMap {
   apiById: Record<number, ServiceApi & { serviceName: string }>;
 }
 
+const IndeterminateCheckbox = ({ checked, indeterminate, onChange, className }: { checked: boolean; indeterminate: boolean; onChange: () => void; className?: string }) => {
+  const ref = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return <input ref={ref} type="checkbox" checked={checked} onChange={onChange} className={className || 'rounded'} />;
+};
+
 const KeyAdminPage = () => {
   const [activeTab, setActiveTab] = useState<'requests' | 'keys'>('requests');
+  const [requestFilter, setRequestFilter] = useState('ALL');
+  const [keyFilter, setKeyFilter] = useState('ALL');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [requestPage, setRequestPage] = useState(0);
+  const [keyPage, setKeyPage] = useState(0);
+  const PAGE_SIZE = 15;
 
   // Shared state
   const [allApisMap, setAllApisMap] = useState<AllApisMap>({ services: [], apisByService: {}, apiById: {} });
@@ -54,6 +75,17 @@ const KeyAdminPage = () => {
   const [reviewComment, setReviewComment] = useState('');
   const [adjustedFromDate, setAdjustedFromDate] = useState('');
   const [adjustedToDate, setAdjustedToDate] = useState('');
+  const [activeReviewTab, setActiveReviewTab] = useState<'info' | 'apis'>('info');
+  const [showRejectConfirm, setShowRejectConfirm] = useState(false);
+  const [showApproveConfirm, setShowApproveConfirm] = useState(false);
+  const [rejectReason, setRejectReason] = useState('');
+  const [expandedReviewServices, setExpandedReviewServices] = useState<Set<number>>(new Set());
+  const [showAddApiModal, setShowAddApiModal] = useState(false);
+  const [addApiSearch, setAddApiSearch] = useState('');
+  const [addApiSelected, setAddApiSelected] = useState<Set<number>>(new Set());
+
+  // Read-only mode for processed requests
+  const [isReviewReadOnly, setIsReviewReadOnly] = useState(false);
 
   // Keys tab state
   const [allKeys, setAllKeys] = useState<ApiKey[]>([]);
@@ -61,6 +93,7 @@ const KeyAdminPage = () => {
   const [isDetailModalOpen, setIsDetailModalOpen] = useState(false);
   const [selectedKeyDetail, setSelectedKeyDetail] = useState<ApiKeyDetail | null>(null);
   const [detailCopied, setDetailCopied] = useState(false);
+  const [keyVisible, setKeyVisible] = useState(false);
 
   // Raw key modal (after approve)
   const [rawKeyModal, setRawKeyModal] = useState<{ keyName: string; rawKey: string } | null>(null);
@@ -129,12 +162,35 @@ const KeyAdminPage = () => {
 
   // --- Requests tab handlers ---
 
+  const handleOpenDetail = (req: ApiKeyRequest) => {
+    // 검토 모달을 읽기 전용으로 열기
+    setSelectedRequest(req);
+    setAdjustedApiIds(new Set(req.requestedApiIds));
+    setReviewComment(req.reviewComment || '');
+    setAdjustedFromDate(req.usageFromDate ? req.usageFromDate.split('T')[0] : '');
+    setAdjustedToDate(req.usageToDate ? req.usageToDate.split('T')[0] : '');
+    setActiveReviewTab('info');
+    setShowRejectConfirm(false);
+    setShowApproveConfirm(false);
+    setRejectReason('');
+    setExpandedReviewServices(new Set());
+    setIsReviewReadOnly(true);
+    setIsReviewModalOpen(true);
+    setError(null);
+  };
+
   const handleOpenReview = (req: ApiKeyRequest) => {
     setSelectedRequest(req);
     setAdjustedApiIds(new Set(req.requestedApiIds));
     setReviewComment('');
     setAdjustedFromDate(req.usageFromDate ? req.usageFromDate.split('T')[0] : '');
     setAdjustedToDate(req.usageToDate ? req.usageToDate.split('T')[0] : '');
+    setActiveReviewTab('info');
+    setShowRejectConfirm(false);
+    setShowApproveConfirm(false);
+    setRejectReason('');
+    setExpandedReviewServices(new Set());
+    setIsReviewReadOnly(false);
     setError(null);
     setIsReviewModalOpen(true);
   };
@@ -142,29 +198,22 @@ const KeyAdminPage = () => {
   const handleCloseReview = () => {
     setIsReviewModalOpen(false);
     setSelectedRequest(null);
+    setShowRejectConfirm(false);
+    setShowApproveConfirm(false);
+    setRejectReason('');
     setError(null);
   };
 
-  const handleToggleReviewApi = (apiId: number) => {
-    setAdjustedApiIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(apiId)) {
-        next.delete(apiId);
-      } else {
-        next.add(apiId);
-      }
-      return next;
-    });
-  };
-
   const handleReviewSubmit = async (status: 'APPROVED' | 'REJECTED') => {
     if (!selectedRequest) return;
     setError(null);
 
+    const comment = status === 'REJECTED' ? rejectReason : reviewComment;
+
     try {
       const res = await reviewRequest(selectedRequest.requestId, {
         status,
-        reviewComment: reviewComment || undefined,
+        reviewComment: comment || undefined,
         adjustedApiIds: status === 'APPROVED' ? Array.from(adjustedApiIds) : undefined,
         adjustedFromDate: status === 'APPROVED' && adjustedFromDate ? adjustedFromDate : undefined,
         adjustedToDate: status === 'APPROVED' && adjustedToDate ? adjustedToDate : undefined,
@@ -233,399 +282,1299 @@ const KeyAdminPage = () => {
     setTimeout(() => setRawKeyCopied(false), 2000);
   };
 
-  // --- Render helpers ---
+  // --- Computed KPI values ---
+  const pendingCount = requests.filter((r) => r.status === 'PENDING').length;
+  const activeKeyCount = allKeys.filter((k) => k.status === 'ACTIVE').length;
+  const now = Date.now();
+  const fourteenDaysMs = 14 * 24 * 60 * 60 * 1000;
+  const expiringCount = allKeys.filter((k) => k.status === 'ACTIVE' && k.expiresAt && (new Date(k.expiresAt).getTime() - now) > 0 && (new Date(k.expiresAt).getTime() - now) <= fourteenDaysMs).length;
+  const revokedCount = allKeys.filter((k) => k.status === 'REVOKED').length;
 
-  const renderApiCheckboxes = (
-    selectedIds: Set<number>,
-    onToggle: (apiId: number) => void,
-  ) => {
-    return allApisMap.services.map((service) => {
-      const apis = allApisMap.apisByService[service.serviceId] || [];
-      if (apis.length === 0) return null;
+  // --- Filter logic ---
+  const filteredRequests = requests.filter((r) => {
+    if (requestFilter !== 'ALL' && r.status !== requestFilter) return false;
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      if (!r.keyName.toLowerCase().includes(q) && !r.userName.toLowerCase().includes(q)) return false;
+    }
+    return true;
+  });
 
-      return (
-        <div key={service.serviceId} className="mb-3">
-          <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{service.serviceName}</h4>
-          <div className="space-y-1 pl-4">
-            {apis.map((api) => (
-              <label
-                key={api.apiId}
-                className="flex items-center gap-2 py-0.5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded px-1"
-              >
-                <input
-                  type="checkbox"
-                  checked={selectedIds.has(api.apiId)}
-                  onChange={() => onToggle(api.apiId)}
-                  className="rounded"
-                />
-                <span
-                  className={`inline-block px-1.5 py-0.5 rounded text-xs font-bold ${
-                    METHOD_COLOR[api.apiMethod] || 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
-                  }`}
-                >
-                  {api.apiMethod}
-                </span>
-                <span className="font-mono text-sm text-gray-700 dark:text-gray-300">{api.apiPath}</span>
-                <span className="text-sm text-gray-500 dark:text-gray-400">- {api.apiName}</span>
-              </label>
-            ))}
-          </div>
-        </div>
-      );
-    });
+  const filteredKeys = allKeys.filter((k) => {
+    if (keyFilter !== 'ALL' && k.status !== keyFilter) return false;
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      if (!k.keyName.toLowerCase().includes(q) && !k.maskedKey.toLowerCase().includes(q)) return false;
+    }
+    return true;
+  });
+
+  const pagedRequests = filteredRequests.slice(requestPage * PAGE_SIZE, (requestPage + 1) * PAGE_SIZE);
+  const requestTotalPages = Math.ceil(filteredRequests.length / PAGE_SIZE);
+  const pagedKeys = filteredKeys.slice(keyPage * PAGE_SIZE, (keyPage + 1) * PAGE_SIZE);
+  const keyTotalPages = Math.ceil(filteredKeys.length / PAGE_SIZE);
+
+  const getDaysUntilExpiry = (expiresAt: string | null): number | null => {
+    if (!expiresAt) return null;
+    const diff = new Date(expiresAt).getTime() - now;
+    if (diff <= 0) return 0;
+    return Math.ceil(diff / (1000 * 60 * 60 * 24));
   };
 
+  const handleTabSwitch = (tab: 'requests' | 'keys') => {
+    setActiveTab(tab);
+    setSearchQuery('');
+  };
+
+  // --- Filter chip counts ---
+  const requestStatusCounts: Record<string, number> = { ALL: requests.length, PENDING: 0, APPROVED: 0, REJECTED: 0 };
+  requests.forEach((r) => { requestStatusCounts[r.status] = (requestStatusCounts[r.status] || 0) + 1; });
+
+  const keyStatusCounts: Record<string, number> = { ALL: allKeys.length, ACTIVE: 0, EXPIRED: 0, REVOKED: 0 };
+  allKeys.forEach((k) => { if (k.status in keyStatusCounts) keyStatusCounts[k.status] = (keyStatusCounts[k.status] || 0) + 1; });
+
   return (
     <div className="max-w-7xl mx-auto">
-      <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">API Key 관리</h1>
-
-      {error && !isReviewModalOpen && !isDetailModalOpen && (
-        <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>
-      )}
-
-      {/* Tabs */}
-      <div className="flex border-b border-gray-200 dark:border-gray-700 mb-6">
-        <button
-          onClick={() => setActiveTab('requests')}
-          className={`px-4 py-2 text-sm font-medium -mb-px ${
-            activeTab === 'requests'
-              ? 'border-b-2 border-blue-600 text-blue-600'
-              : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
-          }`}
-        >
-          신청 관리
-        </button>
-        <button
-          onClick={() => setActiveTab('keys')}
-          className={`px-4 py-2 text-sm font-medium -mb-px ${
-            activeTab === 'keys'
-              ? 'border-b-2 border-blue-600 text-blue-600'
-              : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
-          }`}
-        >
-          키 관리
-        </button>
+      {/* Page Header */}
+      <div className="mb-6">
+        <div className="flex items-center gap-3 mb-1">
+          <div className="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center">
+            <svg className="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">API Key 관리</h1>
+            <p className="text-sm text-gray-500 dark:text-gray-400">API Key 신청 검토 및 발급된 키의 수명주기를 관리합니다</p>
+          </div>
+        </div>
       </div>
 
-      {/* Tab: 신청 관리 */}
-      {activeTab === 'requests' && (
-        <div>
-          {requestsLoading ? (
-            <div className="text-center py-10 text-gray-500 dark:text-gray-400">로딩 중...</div>
-          ) : (
-            <div className="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow">
-              <table className="w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
-                <thead className="bg-gray-50 dark:bg-gray-700">
-                  <tr>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Requester</th>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Key Name</th>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Purpose</th>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Status</th>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">APIs</th>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Created At</th>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Actions</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
-                  {requests.map((req) => (
-                    <tr key={req.requestId} className="hover:bg-gray-50 dark:hover:bg-gray-700">
-                      <td className="px-4 py-3 text-gray-900 dark:text-gray-100">{req.userName}</td>
-                      <td className="px-4 py-3 text-gray-900 dark:text-gray-100">{req.keyName}</td>
-                      <td className="px-4 py-3 text-gray-500 dark:text-gray-400 max-w-[200px] truncate">
-                        {req.purpose || '-'}
-                      </td>
-                      <td className="px-4 py-3">
-                        <span
-                          className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${
-                            STATUS_BADGE[req.status] || 'bg-gray-100 text-gray-800'
-                          }`}
-                        >
-                          {req.status}
-                        </span>
-                      </td>
-                      <td className="px-4 py-3 text-gray-500 dark:text-gray-400">{req.requestedApiIds.length}개</td>
-                      <td className="px-4 py-3 text-gray-500 dark:text-gray-400">{formatDateTime(req.createdAt)}</td>
-                      <td className="px-4 py-3">
-                        {req.status === 'PENDING' && (
-                          <button
-                            onClick={() => handleOpenReview(req)}
-                            className="bg-blue-100 hover:bg-blue-200 text-blue-700 dark:bg-blue-900/30 dark:hover:bg-blue-800/40 dark:text-blue-400 px-3 py-1 rounded-lg text-sm font-medium"
-                          >
-                            검토
-                          </button>
-                        )}
-                      </td>
-                    </tr>
-                  ))}
-                  {requests.length === 0 && (
-                    <tr>
-                      <td colSpan={7} className="px-4 py-8 text-center text-gray-400 dark:text-gray-500">
-                        신청 내역이 없습니다.
-                      </td>
-                    </tr>
-                  )}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
+      {error && !isReviewModalOpen && !isDetailModalOpen && (
+        <div className="mb-4 p-3 bg-red-50 dark:bg-red-900/10 text-red-700 dark:text-red-400 rounded-lg text-sm border border-red-200 dark:border-red-800/30">{error}</div>
       )}
 
-      {/* Tab: 키 관리 */}
-      {activeTab === 'keys' && (
-        <div>
-          {keysLoading ? (
-            <div className="text-center py-10 text-gray-500 dark:text-gray-400">로딩 중...</div>
+      {/* KPI Cards */}
+      <div className="flex flex-wrap gap-4 mb-6">
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-5 flex items-center gap-4 flex-1 min-w-[200px]">
+          <div className="w-11 h-11 rounded-xl flex items-center justify-center bg-amber-50 dark:bg-amber-900/20">
+            <svg className="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+          </div>
+          <div>
+            <div className="text-3xl font-bold text-gray-900 dark:text-gray-100">{pendingCount}</div>
+            <div className="text-sm text-gray-500 dark:text-gray-400">대기 중 신청</div>
+          </div>
+        </div>
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-5 flex items-center gap-4 flex-1 min-w-[200px]">
+          <div className="w-11 h-11 rounded-xl flex items-center justify-center bg-green-50 dark:bg-green-900/20">
+            <svg className="w-5 h-5 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>
+          </div>
+          <div>
+            <div className="text-3xl font-bold text-gray-900 dark:text-gray-100">{activeKeyCount}</div>
+            <div className="text-sm text-gray-500 dark:text-gray-400">활성 키</div>
+          </div>
+        </div>
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-5 flex items-center gap-4 flex-1 min-w-[200px]">
+          <div className="w-11 h-11 rounded-xl flex items-center justify-center bg-amber-50 dark:bg-amber-900/20">
+            <svg className="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+          </div>
+          <div>
+            <div className="text-3xl font-bold text-gray-900 dark:text-gray-100">{expiringCount}</div>
+            <div className="text-sm text-gray-500 dark:text-gray-400">만료 임박 (14일)</div>
+          </div>
+        </div>
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-5 flex items-center gap-4 flex-1 min-w-[200px]">
+          <div className="w-11 h-11 rounded-xl flex items-center justify-center bg-red-50 dark:bg-red-900/20">
+            <svg className="w-5 h-5 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg>
+          </div>
+          <div>
+            <div className="text-3xl font-bold text-gray-900 dark:text-gray-100">{revokedCount}</div>
+            <div className="text-sm text-gray-500 dark:text-gray-400">폐기된 키</div>
+          </div>
+        </div>
+      </div>
+
+      {/* Unified Card Container */}
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden">
+        {/* Tab Header */}
+        <div className="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 px-4">
+          <div className="flex">
+            <button
+              onClick={() => handleTabSwitch('requests')}
+              className={`flex items-center gap-2 px-4 py-3.5 text-sm -mb-px border-b-2 transition-colors ${
+                activeTab === 'requests'
+                  ? 'border-blue-600 text-blue-600 dark:text-blue-400 font-semibold'
+                  : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+              }`}
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+              신청 관리
+              {pendingCount > 0 && (
+                <span className="bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-xs font-semibold px-2 py-0.5 rounded-full">{pendingCount}</span>
+              )}
+            </button>
+            <button
+              onClick={() => handleTabSwitch('keys')}
+              className={`flex items-center gap-2 px-4 py-3.5 text-sm -mb-px border-b-2 transition-colors ${
+                activeTab === 'keys'
+                  ? 'border-blue-600 text-blue-600 dark:text-blue-400 font-semibold'
+                  : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+              }`}
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>
+              키 관리
+              {activeKeyCount > 0 && (
+                <span className="bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs font-semibold px-2 py-0.5 rounded-full">{activeKeyCount}</span>
+              )}
+            </button>
+          </div>
+          <div className="relative">
+            <svg className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="검색..."
+              className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg pl-9 pr-3 py-2 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 w-56 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+            />
+          </div>
+        </div>
+
+        {/* Filter Chips */}
+        <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-700/50 flex items-center gap-2">
+          {activeTab === 'requests' ? (
+            <>
+              {([['ALL', '전체'], ['PENDING', '대기'], ['APPROVED', '승인'], ['REJECTED', '반려']] as const).map(([value, label]) => (
+                <button
+                  key={value}
+                  onClick={() => { setRequestFilter(value); setRequestPage(0); }}
+                  className={`px-3.5 py-1.5 rounded-full text-sm font-medium border cursor-pointer transition-colors ${
+                    requestFilter === value
+                      ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-300 dark:border-blue-700 text-blue-600 dark:text-blue-400'
+                      : 'border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700/50'
+                  }`}
+                >
+                  {label}
+                  <span className="ml-1.5 text-xs opacity-70">{requestStatusCounts[value] ?? 0}</span>
+                </button>
+              ))}
+            </>
           ) : (
-            <div className="overflow-x-auto bg-white dark:bg-gray-800 rounded-lg shadow">
-              <table className="w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
-                <thead className="bg-gray-50 dark:bg-gray-700">
-                  <tr>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Key Name</th>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Prefix</th>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">User</th>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Status</th>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Last Used</th>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">만료일</th>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Created</th>
-                    <th className="px-4 py-3 text-left font-medium text-gray-500 dark:text-gray-400">Actions</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
-                  {allKeys.map((key) => (
-                    <tr key={key.apiKeyId} className="hover:bg-gray-50 dark:hover:bg-gray-700">
-                      <td className="px-4 py-3 text-gray-900 dark:text-gray-100">{key.keyName}</td>
-                      <td className="px-4 py-3 font-mono text-gray-600 dark:text-gray-400">{key.apiKeyPrefix}</td>
-                      <td className="px-4 py-3 text-gray-500 dark:text-gray-400">{key.maskedKey}</td>
-                      <td className="px-4 py-3">
-                        <span
-                          className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${
-                            STATUS_BADGE[key.status] || 'bg-gray-100 text-gray-800'
-                          }`}
-                        >
-                          {key.status}
-                        </span>
-                      </td>
-                      <td className="px-4 py-3 text-gray-500 dark:text-gray-400">{formatDateTime(key.lastUsedAt)}</td>
-                      <td className="px-4 py-3 text-gray-500 dark:text-gray-400">
-                        {key.expiresAt ? formatDateTime(key.expiresAt) : '영구'}
-                      </td>
-                      <td className="px-4 py-3 text-gray-500 dark:text-gray-400">{formatDateTime(key.createdAt)}</td>
-                      <td className="px-4 py-3">
-                        <div className="flex gap-2">
-                          <button
-                            onClick={() => handleViewDetail(key)}
-                            className="bg-blue-100 hover:bg-blue-200 text-blue-700 dark:bg-blue-900/30 dark:hover:bg-blue-800/40 dark:text-blue-400 px-3 py-1 rounded-lg text-sm font-medium"
-                          >
-                            상세
-                          </button>
-                          {key.status === 'ACTIVE' && (
-                            <button
-                              onClick={() => handleRevokeKey(key)}
-                              className="bg-red-100 hover:bg-red-200 text-red-700 dark:bg-red-900/30 dark:hover:bg-red-800/40 dark:text-red-400 px-3 py-1 rounded-lg text-sm font-medium"
-                            >
-                              폐기
-                            </button>
-                          )}
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                  {allKeys.length === 0 && (
-                    <tr>
-                      <td colSpan={8} className="px-4 py-8 text-center text-gray-400 dark:text-gray-500">
-                        등록된 API Key가 없습니다.
-                      </td>
-                    </tr>
-                  )}
-                </tbody>
-              </table>
-            </div>
+            <>
+              {([['ALL', '전체'], ['ACTIVE', '활성'], ['EXPIRED', '만료'], ['REVOKED', '폐기']] as const).map(([value, label]) => (
+                <button
+                  key={value}
+                  onClick={() => { setKeyFilter(value); setKeyPage(0); }}
+                  className={`px-3.5 py-1.5 rounded-full text-sm font-medium border cursor-pointer transition-colors ${
+                    keyFilter === value
+                      ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-300 dark:border-blue-700 text-blue-600 dark:text-blue-400'
+                      : 'border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700/50'
+                  }`}
+                >
+                  {label}
+                  <span className="ml-1.5 text-xs opacity-70">{keyStatusCounts[value] ?? 0}</span>
+                </button>
+              ))}
+            </>
           )}
         </div>
-      )}
+
+        {/* Tab: 신청 관리 */}
+        {activeTab === 'requests' && (
+          <>
+            {requestsLoading ? (
+              <div className="text-center py-10 text-gray-500 dark:text-gray-400">로딩 중...</div>
+            ) : (
+              <>
+                <div className="overflow-x-auto">
+                  <table className="w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
+                    <thead className="bg-gray-50 dark:bg-gray-800/80">
+                      <tr>
+                        <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">신청자</th>
+                        <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">키 이름</th>
+                        <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">상태</th>
+                        <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">API 수</th>
+                        <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">신청일시</th>
+                        <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                      {pagedRequests.map((req) => (
+                        <tr key={req.requestId} className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
+                          <td className="px-4 py-3 text-gray-900 dark:text-gray-100">
+                            <span className="inline-flex items-center gap-1.5">
+                              <svg className="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
+                              {req.userName}
+                            </span>
+                          </td>
+                          <td className="px-4 py-3 text-gray-900 dark:text-gray-100 font-medium">{req.keyName}</td>
+                          <td className="px-4 py-3">
+                            <span className={`inline-block px-2.5 py-0.5 rounded-full text-xs font-medium ${STATUS_BADGE[req.status] || 'bg-gray-100 text-gray-800'}`}>
+                              {req.status === 'PENDING' ? '대기' : req.status === 'APPROVED' ? '승인' : '반려'}
+                            </span>
+                          </td>
+                          <td className="px-4 py-3">
+                            <span className="bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 px-2 py-0.5 rounded text-xs font-semibold">{req.requestedApiIds.length}개</span>
+                          </td>
+                          <td className="px-4 py-3 text-gray-500 dark:text-gray-400">{formatDateTime(req.createdAt)}</td>
+                          <td className="px-4 py-3">
+                            <div className="flex gap-2">
+                              {req.status === 'PENDING' && (
+                                <button
+                                  onClick={() => handleOpenReview(req)}
+                                  className="bg-blue-100 hover:bg-blue-200 text-blue-700 dark:bg-blue-900/30 dark:hover:bg-blue-800/40 dark:text-blue-400 px-3 py-1 rounded-lg text-sm font-medium"
+                                >
+                                  검토
+                                </button>
+                              )}
+                              {(req.status === 'APPROVED' || req.status === 'REJECTED') && (
+                                <button
+                                  onClick={() => handleOpenDetail(req)}
+                                  className="bg-gray-100 hover:bg-gray-200 text-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-300 px-3 py-1 rounded-lg text-sm font-medium"
+                                >
+                                  상세
+                                </button>
+                              )}
+                            </div>
+                          </td>
+                        </tr>
+                      ))}
+                      {filteredRequests.length === 0 && (
+                        <tr>
+                          <td colSpan={6} className="px-4 py-8 text-center text-gray-400 dark:text-gray-500">
+                            {searchQuery || requestFilter !== 'ALL' ? '조건에 맞는 신청이 없습니다.' : '신청 내역이 없습니다.'}
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+                {/* Table Footer */}
+                <div className="px-4 py-3 border-t border-gray-100 dark:border-gray-700/50 flex items-center justify-between">
+                  <span className="text-sm text-gray-500 dark:text-gray-400">총 {filteredRequests.length}건</span>
+                  {requestTotalPages > 1 && (
+                    <div className="flex items-center gap-1">
+                      <button onClick={() => setRequestPage(Math.max(0, requestPage - 1))} disabled={requestPage === 0}
+                        className="px-2.5 py-1 text-xs rounded border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 disabled:opacity-40">이전</button>
+                      <span className="text-xs text-gray-500 dark:text-gray-400 px-2">{requestPage + 1} / {requestTotalPages}</span>
+                      <button onClick={() => setRequestPage(Math.min(requestTotalPages - 1, requestPage + 1))} disabled={requestPage >= requestTotalPages - 1}
+                        className="px-2.5 py-1 text-xs rounded border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 disabled:opacity-40">다음</button>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </>
+        )}
+
+        {/* Tab: 키 관리 */}
+        {activeTab === 'keys' && (
+          <>
+            {keysLoading ? (
+              <div className="text-center py-10 text-gray-500 dark:text-gray-400">로딩 중...</div>
+            ) : (
+              <>
+                <div className="overflow-x-auto">
+                  <table className="w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
+                    <thead className="bg-gray-50 dark:bg-gray-800/80">
+                      <tr>
+                        <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">소유자</th>
+                        <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">키 이름</th>
+                        <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Prefix</th>
+                        <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">상태</th>
+                        <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">만료일시</th>
+                        <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">마지막 사용일시</th>
+                        <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                      {pagedKeys.map((key) => {
+                        const daysLeft = getDaysUntilExpiry(key.expiresAt);
+                        const isExpiringSoon = key.status === 'ACTIVE' && daysLeft !== null && daysLeft <= 14;
+                        return (
+                          <tr key={key.apiKeyId} className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
+                            <td className="px-4 py-3 text-gray-900 dark:text-gray-100">
+                              <span className="inline-flex items-center gap-1.5">
+                                <svg className="w-3.5 h-3.5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>
+                                {key.userName || '-'}
+                              </span>
+                            </td>
+                            <td className="px-4 py-3 text-gray-900 dark:text-gray-100 font-medium">{key.keyName}</td>
+                            <td className="px-4 py-3">
+                              <span className="bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 px-2 py-0.5 rounded text-xs font-mono font-semibold">{key.apiKeyPrefix}</span>
+                            </td>
+                            <td className="px-4 py-3">
+                              <span className={`inline-block px-2.5 py-0.5 rounded-full text-xs font-medium ${STATUS_BADGE[key.status] || 'bg-gray-100 text-gray-800'}`}>
+                                {KEY_STATUS_CONFIG[key.status]?.label || key.status}
+                              </span>
+                            </td>
+                            <td className="px-4 py-3">
+                              <div className="flex items-center gap-2">
+                                <span className="text-gray-500 dark:text-gray-400">{key.expiresAt ? formatDateTime(key.expiresAt) : '영구'}</span>
+                                {isExpiringSoon && (
+                                  <span className={`text-xs font-medium px-1.5 py-0.5 rounded ${daysLeft !== null && daysLeft <= 3 ? 'bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400' : 'bg-amber-100 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400'}`}>
+                                    &#x26A0; {daysLeft}일 남음
+                                  </span>
+                                )}
+                              </div>
+                            </td>
+                            <td className="px-4 py-3 text-gray-500 dark:text-gray-400">{formatDateTime(key.lastUsedAt)}</td>
+                            <td className="px-4 py-3">
+                              <div className="flex gap-2">
+                                <button
+                                  onClick={() => handleViewDetail(key)}
+                                  className="bg-blue-100 hover:bg-blue-200 text-blue-700 dark:bg-blue-900/30 dark:hover:bg-blue-800/40 dark:text-blue-400 px-3 py-1 rounded-lg text-sm font-medium"
+                                >
+                                  상세
+                                </button>
+                                {key.status === 'ACTIVE' && (
+                                  <button
+                                    onClick={() => handleRevokeKey(key)}
+                                    className="bg-red-100 hover:bg-red-200 text-red-700 dark:bg-red-900/30 dark:hover:bg-red-800/40 dark:text-red-400 px-3 py-1 rounded-lg text-sm font-medium"
+                                  >
+                                    폐기
+                                  </button>
+                                )}
+                              </div>
+                            </td>
+                          </tr>
+                        );
+                      })}
+                      {filteredKeys.length === 0 && (
+                        <tr>
+                          <td colSpan={7} className="px-4 py-8 text-center text-gray-400 dark:text-gray-500">
+                            {searchQuery || keyFilter !== 'ALL' ? '조건에 맞는 키가 없습니다.' : '등록된 API Key가 없습니다.'}
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+                {/* Table Footer */}
+                <div className="px-4 py-3 border-t border-gray-100 dark:border-gray-700/50 flex items-center justify-between">
+                  <span className="text-sm text-gray-500 dark:text-gray-400">총 {filteredKeys.length}건</span>
+                  {keyTotalPages > 1 && (
+                    <div className="flex items-center gap-1">
+                      <button onClick={() => setKeyPage(Math.max(0, keyPage - 1))} disabled={keyPage === 0}
+                        className="px-2.5 py-1 text-xs rounded border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 disabled:opacity-40">이전</button>
+                      <span className="text-xs text-gray-500 dark:text-gray-400 px-2">{keyPage + 1} / {keyTotalPages}</span>
+                      <button onClick={() => setKeyPage(Math.min(keyTotalPages - 1, keyPage + 1))} disabled={keyPage >= keyTotalPages - 1}
+                        className="px-2.5 py-1 text-xs rounded border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 disabled:opacity-40">다음</button>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </>
+        )}
+      </div>
 
       {/* Review Modal */}
-      {isReviewModalOpen && selectedRequest && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col">
-            <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-              <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">신청 검토</h2>
+      {isReviewModalOpen && selectedRequest && (() => {
+        const requestedApis = selectedRequest.requestedApiIds
+          .map((id) => allApisMap.apiById[id])
+          .filter(Boolean);
+        const apiCountByService: Record<string, number> = {};
+        requestedApis.forEach((api) => {
+          apiCountByService[api.serviceName] = (apiCountByService[api.serviceName] || 0) + 1;
+        });
+        const totalApiCount = selectedRequest.requestedApiIds.length;
+
+        const usageDays = adjustedFromDate && adjustedToDate
+          ? Math.ceil((new Date(adjustedToDate).getTime() - new Date(adjustedFromDate).getTime()) / (1000 * 60 * 60 * 24))
+          : null;
+
+        const riskWarnings: string[] = [];
+        if (selectedRequest.dailyRequestEstimate != null && selectedRequest.dailyRequestEstimate > 1000) {
+          riskWarnings.push(`일 ${Number(selectedRequest.dailyRequestEstimate).toLocaleString()}건 요청`);
+        }
+        if (totalApiCount > 15) {
+          riskWarnings.push(`${totalApiCount}개 API 요청`);
+        }
+        if (usageDays !== null && usageDays > 180) {
+          riskWarnings.push(`${usageDays}일 사용 기간`);
+        }
+
+        // Computed: original API IDs and change tracking
+        const originalApiIds = new Set(selectedRequest.requestedApiIds);
+        const allRelevantIds = new Set([...originalApiIds, ...adjustedApiIds]);
+        const allRelevantApis = Array.from(allRelevantIds)
+          .map((id) => allApisMap.apiById[id])
+          .filter(Boolean);
+
+        // Group by service > domain for the editable tree
+        const reviewTreeByService: Record<number, { serviceName: string; domains: Record<string, { apiDomain: string; apis: (typeof allRelevantApis) }> }> = {};
+        allRelevantApis.forEach((api) => {
+          const sId = api.serviceId;
+          if (!reviewTreeByService[sId]) {
+            reviewTreeByService[sId] = { serviceName: api.serviceName, domains: {} };
+          }
+          const domain = api.apiDomain || '미분류';
+          if (!reviewTreeByService[sId].domains[domain]) {
+            reviewTreeByService[sId].domains[domain] = { apiDomain: domain, apis: [] };
+          }
+          reviewTreeByService[sId].domains[domain].apis.push(api);
+        });
+
+        const changes = {
+          added: Array.from(adjustedApiIds).filter((id) => !originalApiIds.has(id)).length,
+          removed: Array.from(originalApiIds).filter((id) => !adjustedApiIds.has(id)).length,
+        };
+
+        // Count APIs per service for summary (only adjusted/enabled ones)
+        const adjustedApiCountByService: Record<string, number> = {};
+        adjustedApiIds.forEach((id) => {
+          const api = allApisMap.apiById[id];
+          if (api) {
+            adjustedApiCountByService[api.serviceName] = (adjustedApiCountByService[api.serviceName] || 0) + 1;
+          }
+        });
+
+        const toggleReviewService = (serviceId: number) => {
+          setExpandedReviewServices((prev) => {
+            const next = new Set(prev);
+            if (next.has(serviceId)) next.delete(serviceId);
+            else next.add(serviceId);
+            return next;
+          });
+        };
+
+        const handleToggleReviewApi = (apiId: number) => {
+          if (isReviewReadOnly) return;
+          setAdjustedApiIds((prev) => {
+            const next = new Set(prev);
+            next.has(apiId) ? next.delete(apiId) : next.add(apiId);
+            return next;
+          });
+        };
+
+        const handleToggleReviewDomain = (apiIds: number[]) => {
+          if (isReviewReadOnly) return;
+          const allSelected = apiIds.every((id) => adjustedApiIds.has(id));
+          setAdjustedApiIds((prev) => {
+            const next = new Set(prev);
+            apiIds.forEach((id) => allSelected ? next.delete(id) : next.add(id));
+            return next;
+          });
+        };
+
+        const handleToggleReviewService = (apiIds: number[]) => {
+          if (isReviewReadOnly) return;
+          const allSelected = apiIds.every((id) => adjustedApiIds.has(id));
+          setAdjustedApiIds((prev) => {
+            const next = new Set(prev);
+            apiIds.forEach((id) => allSelected ? next.delete(id) : next.add(id));
+            return next;
+          });
+        };
+
+        const handleResetReviewApis = () => {
+          if (isReviewReadOnly) return;
+          if (selectedRequest) {
+            setAdjustedApiIds(new Set(selectedRequest.requestedApiIds));
+          }
+        };
+
+        const dateChanged = (
+          adjustedFromDate !== (selectedRequest.usageFromDate?.split('T')[0] || '') ||
+          adjustedToDate !== (selectedRequest.usageToDate?.split('T')[0] || '')
+        );
+
+        const handleResetDates = () => {
+          setAdjustedFromDate(selectedRequest.usageFromDate ? selectedRequest.usageFromDate.split('T')[0] : '');
+          setAdjustedToDate(selectedRequest.usageToDate ? selectedRequest.usageToDate.split('T')[0] : '');
+        };
+
+        const apiChanged = adjustedApiIds.size !== originalApiIds.size || Array.from(adjustedApiIds).some((id) => !originalApiIds.has(id));
+        const hasChanges = apiChanged || dateChanged;
+
+        return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+          <div className="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-2xl w-full max-w-3xl max-h-[90vh] flex flex-col">
+            {/* Header */}
+            <div className="bg-gray-50 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-700 rounded-t-2xl px-6 py-4">
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-3">
+                  <div className="w-9 h-9 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/30 flex items-center justify-center">
+                    <svg className="w-5 h-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>
+                  </div>
+                  <div>
+                    <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{isReviewReadOnly ? '신청 상세' : 'API Key 신청 검토'}</h2>
+                    <p className="text-xs text-gray-500 dark:text-gray-500">{formatDateTime(selectedRequest.createdAt)}</p>
+                  </div>
+                  <span className={`inline-block px-2.5 py-0.5 rounded-full text-xs font-medium ${STATUS_BADGE[selectedRequest.status] || 'bg-gray-100 text-gray-800'}`}>
+                    {selectedRequest.status === 'PENDING' ? '대기중' : selectedRequest.status === 'APPROVED' ? '승인' : '반려'}
+                  </span>
+                </div>
+                <button onClick={handleCloseReview} className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 p-1 rounded-lg hover:bg-gray-200/50 dark:hover:bg-gray-700/50">
+                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+                </button>
+              </div>
+              {/* Tab switcher */}
+              <div className="flex gap-1">
+                <button
+                  onClick={() => setActiveReviewTab('info')}
+                  className={`px-4 py-1.5 text-sm font-medium rounded-t-lg transition-colors ${
+                    activeReviewTab === 'info'
+                      ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 border-b-2 border-blue-500'
+                      : 'text-gray-500 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
+                  }`}
+                >
+                  신청 정보
+                </button>
+                <button
+                  onClick={() => setActiveReviewTab('apis')}
+                  className={`px-4 py-1.5 text-sm font-medium rounded-t-lg transition-colors ${
+                    activeReviewTab === 'apis'
+                      ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 border-b-2 border-blue-500'
+                      : 'text-gray-500 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
+                  }`}
+                >
+                  API 권한 ({adjustedApiIds.size})
+                </button>
+              </div>
             </div>
-            <div className="px-6 py-4 space-y-4 overflow-y-auto flex-1">
+
+            {/* Body */}
+            <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
               {error && (
-                <div className="p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>
+                <div className="p-3 bg-red-50 dark:bg-red-900/10 text-red-700 dark:text-red-400 rounded-lg text-sm border border-red-200 dark:border-red-800/30">{error}</div>
               )}
 
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-500 dark:text-gray-400">신청자</label>
-                  <p className="text-gray-900 dark:text-gray-100">{selectedRequest.userName}</p>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-500 dark:text-gray-400">Key Name</label>
-                  <p className="text-gray-900 dark:text-gray-100">{selectedRequest.keyName}</p>
-                </div>
-              </div>
-              {selectedRequest.purpose && (
-                <div>
-                  <label className="block text-sm font-medium text-gray-500 dark:text-gray-400">목적</label>
-                  <p className="text-gray-900 dark:text-gray-100">{selectedRequest.purpose}</p>
-                </div>
+              {/* Tab: 신청 정보 */}
+              {activeReviewTab === 'info' && (
+                <>
+                  {/* 2-column: 신청자 + Key Name */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700 p-3">
+                      <div className="flex items-center gap-2 mb-1.5">
+                        <div className="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/30 flex items-center justify-center text-blue-500">
+                          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
+                        </div>
+                        <span className="text-xs text-gray-500 dark:text-gray-500">신청자</span>
+                      </div>
+                      <p className="text-sm font-semibold text-gray-900 dark:text-gray-100 pl-10">{selectedRequest.userName}</p>
+                    </div>
+                    <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700 p-3">
+                      <div className="flex items-center gap-2 mb-1.5">
+                        <div className="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/30 flex items-center justify-center text-blue-500">
+                          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>
+                        </div>
+                        <span className="text-xs text-gray-500 dark:text-gray-500">Key Name</span>
+                      </div>
+                      <p className="text-sm font-semibold text-gray-900 dark:text-gray-100 pl-10">{selectedRequest.keyName}</p>
+                    </div>
+                  </div>
+
+                  {/* 목적 */}
+                  <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700 p-3">
+                    <div className="flex items-center gap-2 mb-1.5">
+                      <div className="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/30 flex items-center justify-center text-blue-500">
+                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+                      </div>
+                      <span className="text-xs text-gray-500 dark:text-gray-500">목적</span>
+                    </div>
+                    <p className="text-sm text-gray-900 dark:text-gray-100 pl-10">{selectedRequest.purpose || '-'}</p>
+                  </div>
+
+                  {/* 2-column: 서비스 IP, 예상 요청량 */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700 p-3">
+                      <div className="flex items-center gap-2 mb-1.5">
+                        <div className="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/30 flex items-center justify-center text-blue-500">
+                          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9" /></svg>
+                        </div>
+                        <span className="text-xs text-gray-500 dark:text-gray-500">서비스 IP</span>
+                      </div>
+                      <p className="text-sm font-semibold text-gray-900 dark:text-gray-100 pl-10 font-mono">{selectedRequest.serviceIp || '-'}</p>
+                      {selectedRequest.servicePurpose && (
+                        <p className="text-xs text-gray-500 dark:text-gray-500 pl-10 mt-0.5">{selectedRequest.servicePurpose}</p>
+                      )}
+                    </div>
+                    <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700 p-3">
+                      <div className="flex items-center gap-2 mb-1.5">
+                        <div className="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/30 flex items-center justify-center text-blue-500">
+                          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
+                        </div>
+                        <span className="text-xs text-gray-500 dark:text-gray-500">예상 요청량</span>
+                      </div>
+                      <p className="text-sm font-semibold text-gray-900 dark:text-gray-100 pl-10">
+                        {selectedRequest.dailyRequestEstimate != null
+                          ? `${Number(selectedRequest.dailyRequestEstimate).toLocaleString()}건/일`
+                          : '-'}
+                      </p>
+                      <p className="text-xs text-gray-500 dark:text-gray-500 pl-10 mt-0.5">{totalApiCount}개 API</p>
+                    </div>
+                  </div>
+
+                  {/* Editable date section */}
+                  <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-4">
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-2">
+                        <div className="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/30 flex items-center justify-center text-blue-500">
+                          <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor">
+                            <rect x="2" y="3" width="12" height="11" rx="2" strokeWidth="1.5"/>
+                            <path d="M2 7h12M5 1v4M11 1v4" strokeWidth="1.5" strokeLinecap="round"/>
+                          </svg>
+                        </div>
+                        <span className="text-xs text-gray-500 dark:text-gray-500">사용 기간</span>
+                        {dateChanged && (
+                          <span className="text-[10px] font-semibold px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 border border-amber-200 dark:border-amber-700/30">
+                            수정됨
+                          </span>
+                        )}
+                      </div>
+                      {dateChanged && (
+                        <button type="button" onClick={handleResetDates} className="text-xs text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300">
+                          원래대로
+                        </button>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <input type="date" value={adjustedFromDate} onChange={(e) => setAdjustedFromDate(e.target.value)}
+                        disabled={isReviewReadOnly}
+                        className={`flex-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none ${isReviewReadOnly ? 'opacity-60 cursor-not-allowed' : ''}`} />
+                      <span className="text-gray-400 dark:text-gray-500">~</span>
+                      <input type="date" value={adjustedToDate} onChange={(e) => setAdjustedToDate(e.target.value)}
+                        disabled={isReviewReadOnly}
+                        className={`flex-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none ${isReviewReadOnly ? 'opacity-60 cursor-not-allowed' : ''}`} />
+                    </div>
+                    {usageDays !== null && (
+                      <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">{usageDays}일</div>
+                    )}
+                  </div>
+
+                  {/* API summary */}
+                  <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center gap-2">
+                        <div className="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/30 flex items-center justify-center text-blue-500">
+                          <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor">
+                            <path d="M8 1.5L2.5 4v4c0 3.5 2.5 5.5 5.5 6.5 3-1 5.5-3 5.5-6.5V4L8 1.5z" strokeWidth="1.5" strokeLinejoin="round"/>
+                          </svg>
+                        </div>
+                        <span className="text-xs text-gray-500 dark:text-gray-500">요청 API 요약</span>
+                        {(changes.added > 0 || changes.removed > 0) && (
+                          <span className="text-[10px] font-semibold px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 border border-amber-200 dark:border-amber-700/30">
+                            수정됨
+                          </span>
+                        )}
+                      </div>
+                      <button
+                        onClick={() => setActiveReviewTab('apis')}
+                        className="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                      >
+                        상세 보기 →
+                      </button>
+                    </div>
+                    <div className="flex flex-wrap gap-1.5">
+                      {allApisMap.services.map((svc) => {
+                        const svcApis = allApisMap.apisByService[svc.serviceId] || [];
+                        const svcApiIds = svcApis.map((a) => a.apiId);
+                        const enabledCount = svcApiIds.filter((id) => adjustedApiIds.has(id)).length;
+                        if (enabledCount === 0) return null;
+                        return (
+                          <span key={svc.serviceId} className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs bg-gray-100 dark:bg-gray-700/80 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300">
+                            {svc.serviceName}
+                            <span className="font-bold text-blue-600 dark:text-blue-400">{enabledCount}</span>
+                            <span className="text-gray-400 dark:text-gray-500">/{svcApiIds.length}</span>
+                          </span>
+                        );
+                      })}
+                      {adjustedApiIds.size === 0 && (
+                        <span className="text-xs text-gray-400 dark:text-gray-500">선택된 API 없음</span>
+                      )}
+                      {(changes.added > 0 || changes.removed > 0) && (
+                        <span className="inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] font-medium bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-700/30 text-amber-600 dark:text-amber-400">
+                          {changes.added > 0 && <span className="text-green-600 dark:text-green-400">+{changes.added}</span>}
+                          {changes.added > 0 && changes.removed > 0 && <span className="text-gray-400">/</span>}
+                          {changes.removed > 0 && <span className="text-red-600 dark:text-red-400">-{changes.removed}</span>}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </>
               )}
 
-              <div className="grid grid-cols-2 gap-4">
-                {selectedRequest.serviceIp && (
-                  <div>
-                    <label className="block text-sm font-medium text-gray-500 dark:text-gray-400">서비스 IP</label>
-                    <p className="font-mono text-gray-900 dark:text-gray-100">{selectedRequest.serviceIp}</p>
+              {/* Tab: API 권한 (editable) */}
+              {activeReviewTab === 'apis' && (
+                <div className="space-y-3">
+                  {/* Header bar */}
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="text-blue-500 dark:text-blue-400">
+                        <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor">
+                          <path d="M8 1.5L2.5 4v4c0 3.5 2.5 5.5 5.5 6.5 3-1 5.5-3 5.5-6.5V4L8 1.5z" strokeWidth="1.5" strokeLinejoin="round"/>
+                        </svg>
+                      </span>
+                      <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">API 권한 관리</span>
+                      <span className="text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-2 py-0.5 rounded-full">{adjustedApiIds.size}개 허용</span>
+                    </div>
+                    {!isReviewReadOnly && (
+                      <div className="flex items-center gap-2">
+                        {(changes.added > 0 || changes.removed > 0) && (
+                          <button onClick={handleResetReviewApis} className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 flex items-center gap-1">
+                            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                            원래대로
+                          </button>
+                        )}
+                        <button
+                          onClick={() => { setAddApiSearch(''); setAddApiSelected(new Set()); setShowAddApiModal(true); }}
+                          className="text-xs font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 border border-blue-200 dark:border-blue-800/30 px-2.5 py-1 rounded-lg flex items-center gap-1 transition-colors"
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 14 14" stroke="currentColor"><path d="M7 3v8M3 7h8" strokeWidth="1.5" strokeLinecap="round"/></svg>
+                          API 추가
+                        </button>
+                      </div>
+                    )}
                   </div>
-                )}
-                {selectedRequest.servicePurpose && (
-                  <div>
-                    <label className="block text-sm font-medium text-gray-500 dark:text-gray-400">서비스 용도</label>
-                    <p className="text-gray-900 dark:text-gray-100">{selectedRequest.servicePurpose}</p>
-                  </div>
-                )}
-                {selectedRequest.dailyRequestEstimate != null && (
-                  <div>
-                    <label className="block text-sm font-medium text-gray-500 dark:text-gray-400">하루 예상 요청량</label>
-                    <p className="text-gray-900 dark:text-gray-100">{Number(selectedRequest.dailyRequestEstimate).toLocaleString()}건</p>
-                  </div>
-                )}
-              </div>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">사용 기간 (조정 가능)</label>
-                <div className="flex items-center gap-2">
-                  <input type="date" value={adjustedFromDate}
-                    onChange={(e) => setAdjustedFromDate(e.target.value)}
-                    className="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
-                  <span className="text-gray-500">~</span>
-                  <input type="date" value={adjustedToDate}
-                    onChange={(e) => setAdjustedToDate(e.target.value)}
-                    className="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />
+                  {/* Change summary banner */}
+                  {(changes.added > 0 || changes.removed > 0) && (
+                    <div className="bg-amber-50 dark:bg-amber-900/5 border border-amber-200 dark:border-amber-700/30 rounded-lg p-3 flex items-center gap-2">
+                      <svg className="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0" fill="none" viewBox="0 0 16 16" stroke="currentColor">
+                        <path d="M8 1.5L1 13.5h14L8 1.5z" strokeWidth="1.3" strokeLinejoin="round"/>
+                        <path d="M8 6v3M8 11.5v.5" strokeWidth="1.5" strokeLinecap="round"/>
+                      </svg>
+                      <p className="text-xs text-gray-600 dark:text-gray-400">
+                        신청 원본 대비 변경:
+                        {changes.added > 0 && <span className="font-semibold text-green-600 dark:text-green-400 ml-1">+{changes.added} 추가</span>}
+                        {changes.added > 0 && changes.removed > 0 && <span className="text-gray-400 mx-1">/</span>}
+                        {changes.removed > 0 && <span className="font-semibold text-red-600 dark:text-red-400">-{changes.removed} 제외</span>}
+                      </p>
+                    </div>
+                  )}
+
+                  {/* Service groups */}
+                  {Object.entries(reviewTreeByService).map(([sIdStr, svc]) => {
+                    const sId = Number(sIdStr);
+                    const isExpanded = expandedReviewServices.has(sId);
+                    const allSvcApiIds = Object.values(svc.domains).flatMap((d) => d.apis.map((a) => a.apiId));
+                    const selectedSvcCount = allSvcApiIds.filter((id) => adjustedApiIds.has(id)).length;
+                    const allSvcSelected = allSvcApiIds.length > 0 && selectedSvcCount === allSvcApiIds.length;
+                    const someSvcSelected = selectedSvcCount > 0 && !allSvcSelected;
+                    const hasSvcSelections = selectedSvcCount > 0;
+
+                    return (
+                      <div key={sId} className={`rounded-lg border overflow-hidden ${hasSvcSelections ? 'border-blue-200 dark:border-blue-700/50' : 'border-gray-200 dark:border-gray-700'}`}>
+                        {/* Service header */}
+                        <div className="bg-gray-50 dark:bg-gray-700/50 px-3 py-2.5 flex items-center gap-2">
+                          <button onClick={() => toggleReviewService(sId)} className="p-0.5">
+                            <svg className={`w-4 h-4 text-gray-400 transition-transform ${isExpanded ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
+                          </button>
+                          <label className="flex items-center cursor-pointer" onClick={(e) => e.stopPropagation()}>
+                            <IndeterminateCheckbox
+                              checked={allSvcSelected}
+                              indeterminate={someSvcSelected}
+                              onChange={() => handleToggleReviewService(allSvcApiIds)}
+                              className="rounded"
+                            />
+                          </label>
+                          <span className="text-sm font-medium text-gray-900 dark:text-gray-100 flex-1">{svc.serviceName}</span>
+                          <span className="text-xs px-1.5 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400">{selectedSvcCount}/{allSvcApiIds.length}</span>
+                        </div>
+
+                        {/* Domains */}
+                        {isExpanded && (
+                          <div className="py-1">
+                            {Object.values(svc.domains).map((domainGroup) => {
+                              const domainApiIds = domainGroup.apis.map((a) => a.apiId);
+                              const selectedDomainCount = domainApiIds.filter((id) => adjustedApiIds.has(id)).length;
+                              const allDomainSelected = domainApiIds.length > 0 && selectedDomainCount === domainApiIds.length;
+                              const someDomainSelected = selectedDomainCount > 0 && !allDomainSelected;
+
+                              return (
+                                <div key={domainGroup.apiDomain} className="mb-1 last:mb-0">
+                                  {/* Domain row */}
+                                  <div className="px-3 py-1.5 flex items-center gap-2">
+                                    <div className="w-4" />
+                                    <label className="flex items-center cursor-pointer" onClick={(e) => e.stopPropagation()}>
+                                      <IndeterminateCheckbox
+                                        checked={allDomainSelected}
+                                        indeterminate={someDomainSelected}
+                                        onChange={() => handleToggleReviewDomain(domainApiIds)}
+                                        className="rounded"
+                                      />
+                                    </label>
+                                    <span className="text-xs font-medium text-gray-600 dark:text-gray-400">{domainGroup.apiDomain}</span>
+                                    <span className="text-[10px] text-gray-400 dark:text-gray-500">{selectedDomainCount}/{domainApiIds.length}</span>
+                                  </div>
+
+                                  {/* API rows */}
+                                  <div className="ml-6">
+                                    {domainGroup.apis.map((api) => {
+                                      const isSelected = adjustedApiIds.has(api.apiId);
+                                      const isAdded = isSelected && !originalApiIds.has(api.apiId);
+                                      const isRemoved = !isSelected && originalApiIds.has(api.apiId);
+
+                                      return (
+                                        <div
+                                          key={api.apiId}
+                                          onClick={() => handleToggleReviewApi(api.apiId)}
+                                          className={`flex items-center gap-2.5 px-3 py-2 border-b border-gray-100 dark:border-gray-700/30 last:border-b-0 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors ${isAdded ? 'bg-green-50/50 dark:bg-green-900/5' : ''} ${isRemoved ? 'opacity-50' : ''}`}
+                                        >
+                                          <input
+                                            type="checkbox"
+                                            checked={isSelected}
+                                            onChange={() => handleToggleReviewApi(api.apiId)}
+                                            onClick={(e) => e.stopPropagation()}
+                                            className="rounded"
+                                          />
+                                          <span className={`inline-block px-2 py-0.5 rounded text-xs font-bold ${METHOD_BADGE_STYLE[api.apiMethod] || 'bg-gray-700 text-gray-300 border border-gray-600'}`}>
+                                            {api.apiMethod}
+                                          </span>
+                                          <span className={`font-mono text-sm text-gray-700 dark:text-gray-300 ${isRemoved ? 'line-through' : ''}`}>{api.apiPath}</span>
+                                          <span className="text-xs text-gray-500 dark:text-gray-400">{api.apiName}</span>
+                                          {isAdded && (
+                                            <span className="bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-400 text-[9px] font-bold px-1.5 py-0.5 rounded">추가</span>
+                                          )}
+                                          {isRemoved && (
+                                            <span className="bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-400 text-[9px] font-bold px-1.5 py-0.5 rounded">제외</span>
+                                          )}
+                                        </div>
+                                      );
+                                    })}
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                  {Object.keys(reviewTreeByService).length === 0 && (
+                    <div className="text-center py-8 text-gray-400 dark:text-gray-500 text-sm">요청된 API가 없습니다.</div>
+                  )}
+
+                  {/* Add API Modal (overlay inside the tab) */}
+                  {showAddApiModal && (
+                    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50">
+                      <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 shadow-2xl w-full max-w-xl mx-4 max-h-[80vh] flex flex-col">
+                        <div className="px-5 py-3.5 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <svg className="w-4 h-4 text-blue-500" fill="none" viewBox="0 0 14 14" stroke="currentColor"><path d="M7 3v8M3 7h8" strokeWidth="1.5" strokeLinecap="round"/></svg>
+                            <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">API 추가</span>
+                            {addApiSelected.size > 0 && (
+                              <span className="text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-2 py-0.5 rounded-full">{addApiSelected.size}개 선택</span>
+                            )}
+                          </div>
+                          <input
+                            type="text"
+                            value={addApiSearch}
+                            onChange={(e) => setAddApiSearch(e.target.value)}
+                            placeholder="API 검색..."
+                            className="bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg px-3 py-1.5 text-xs text-gray-900 dark:text-gray-100 placeholder-gray-400 w-44 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                          />
+                        </div>
+                        <div className="flex-1 overflow-y-auto p-3 space-y-1">
+                          {(() => {
+                            const query = addApiSearch.toLowerCase();
+                            const availableApis = allApisMap.services.flatMap((svc) => {
+                              const apis = allApisMap.apisByService[svc.serviceId] || [];
+                              return apis
+                                .filter((a) => !adjustedApiIds.has(a.apiId))
+                                .filter((a) => !query || a.apiName.toLowerCase().includes(query) || a.apiPath.toLowerCase().includes(query) || svc.serviceName.toLowerCase().includes(query))
+                                .map((a) => ({ ...a, serviceName: svc.serviceName }));
+                            });
+
+                            if (availableApis.length === 0) {
+                              return <div className="text-center py-8 text-gray-400 dark:text-gray-500 text-sm">{addApiSearch ? '검색 결과가 없습니다' : '추가 가능한 API가 없습니다'}</div>;
+                            }
+
+                            return availableApis.map((api) => (
+                              <div
+                                key={api.apiId}
+                                onClick={() => setAddApiSelected((prev) => { const next = new Set(prev); next.has(api.apiId) ? next.delete(api.apiId) : next.add(api.apiId); return next; })}
+                                className={`flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-colors ${addApiSelected.has(api.apiId) ? 'bg-blue-50 dark:bg-blue-900/10' : 'hover:bg-gray-50 dark:hover:bg-gray-700/30'}`}
+                              >
+                                <input type="checkbox" checked={addApiSelected.has(api.apiId)} readOnly className="rounded" />
+                                <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold ${METHOD_BADGE_STYLE[api.apiMethod] || 'bg-gray-700 text-gray-300'}`}>{api.apiMethod}</span>
+                                <div className="flex-1 min-w-0">
+                                  <div className="font-mono text-xs text-gray-600 dark:text-gray-400 truncate">{api.apiPath}</div>
+                                  <div className="text-[11px] text-gray-400 dark:text-gray-500">{api.serviceName} · {api.apiName}</div>
+                                </div>
+                              </div>
+                            ));
+                          })()}
+                        </div>
+                        <div className="px-5 py-3 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-2">
+                          <button onClick={() => setShowAddApiModal(false)} className="px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">취소</button>
+                          <button
+                            disabled={addApiSelected.size === 0}
+                            onClick={() => {
+                              setAdjustedApiIds((prev) => { const next = new Set(prev); addApiSelected.forEach((id) => next.add(id)); return next; });
+                              setShowAddApiModal(false);
+                            }}
+                            className="px-4 py-1.5 text-sm font-medium rounded-lg bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50 disabled:cursor-not-allowed"
+                          >
+                            {addApiSelected.size > 0 ? `${addApiSelected.size}개 API 추가` : 'API 추가'}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  )}
                 </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  API 권한 ({adjustedApiIds.size}개 선택)
-                </label>
-                <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-3 max-h-60 overflow-y-auto">
-                  {renderApiCheckboxes(adjustedApiIds, handleToggleReviewApi)}
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">검토 의견</label>
-                <textarea
-                  value={reviewComment}
-                  onChange={(e) => setReviewComment(e.target.value)}
-                  rows={3}
-                  placeholder="검토 의견을 입력하세요"
-                  className="w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
-                />
-              </div>
+              )}
             </div>
-            <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-2">
-              <button
-                type="button"
-                onClick={handleCloseReview}
-                className="bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg text-sm font-medium"
-              >
-                취소
-              </button>
-              <button
-                onClick={() => handleReviewSubmit('REJECTED')}
-                className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium"
-              >
-                반려
-              </button>
-              <button
-                onClick={() => handleReviewSubmit('APPROVED')}
-                className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium"
-              >
-                승인
-              </button>
+
+            {/* Footer */}
+            <div className="border-t border-gray-200 dark:border-gray-700 px-6 py-4 space-y-3 rounded-b-2xl">
+              {/* Reject confirmation panel */}
+              {showRejectConfirm && (
+                <div className="bg-red-50 dark:bg-red-900/5 border border-red-200 dark:border-red-800/30 rounded-xl p-4 space-y-3">
+                  <div className="flex items-center gap-2 text-red-600 dark:text-red-400">
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor">
+                      <path d="M8 1.5L1 13.5h14L8 1.5z" strokeWidth="1.3" strokeLinejoin="round"/>
+                      <path d="M8 6v3M8 11.5v.5" strokeWidth="1.5" strokeLinecap="round"/>
+                    </svg>
+                    <span className="text-sm font-semibold">반려 확인</span>
+                  </div>
+                  <div>
+                    <label className="text-xs text-red-600 dark:text-red-400 mb-1 block">반려 사유 (필수)</label>
+                    <textarea
+                      value={rejectReason}
+                      onChange={(e) => setRejectReason(e.target.value)}
+                      rows={2}
+                      placeholder="반려 사유를 입력하세요"
+                      className="w-full border border-red-300 dark:border-red-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:outline-none"
+                    />
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <button
+                      onClick={() => setShowRejectConfirm(false)}
+                      className="px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
+                    >
+                      취소
+                    </button>
+                    <button
+                      onClick={() => {
+                        if (!rejectReason.trim()) return;
+                        handleReviewSubmit('REJECTED');
+                      }}
+                      disabled={!rejectReason.trim()}
+                      className="px-4 py-1.5 text-sm font-medium rounded-lg bg-red-600 hover:bg-red-700 text-white disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      반려 확정
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* Approve confirmation panel */}
+              {showApproveConfirm && (
+                <div className="bg-green-50 dark:bg-green-900/5 border border-green-200 dark:border-green-800/30 rounded-xl p-4 space-y-3">
+                  <div className="flex items-center gap-2 text-green-600 dark:text-green-400">
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor">
+                      <circle cx="8" cy="8" r="6.5" strokeWidth="1.5"/>
+                      <path d="M5.5 8l2 2 3.5-4" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                    <span className="text-sm font-semibold">승인 확인</span>
+                  </div>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    <span className="font-semibold text-gray-900 dark:text-gray-100">{selectedRequest.userName}</span>에게
+                    <span className="font-semibold text-blue-600 dark:text-blue-400"> {adjustedApiIds.size}개 API</span> 접근 권한이 포함된 API Key를 발급합니다.
+                  </p>
+
+                  {hasChanges ? (
+                    <div>
+                      <div className="flex items-center gap-1.5 mb-2">
+                        <svg className="w-3.5 h-3.5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg>
+                        <span className="text-xs font-semibold text-amber-600 dark:text-amber-400">관리자 수정 내역</span>
+                      </div>
+                      <div className="border border-amber-200 dark:border-amber-700/30 rounded-lg overflow-hidden mb-3">
+                        <table className="w-full">
+                          <thead>
+                            <tr className="bg-amber-50/50 dark:bg-amber-900/10">
+                              <th className="text-[11px] font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400 px-3 py-2 text-left">항목</th>
+                              <th className="text-[11px] font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400 px-3 py-2 text-left">신청 원본</th>
+                              <th className="text-[11px] font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400 px-3 py-2 text-center w-8"></th>
+                              <th className="text-[11px] font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400 px-3 py-2 text-left">승인 내용</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {apiChanged && (
+                              <tr className="bg-amber-50/30 dark:bg-amber-900/5">
+                                <td className="px-3 py-2 text-sm text-gray-700 dark:text-gray-300">API 권한</td>
+                                <td className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">{originalApiIds.size}개 API</td>
+                                <td className="text-center text-gray-400 w-8">&rarr;</td>
+                                <td className="px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-medium">
+                                  {adjustedApiIds.size}개 API
+                                  {changes.added > 0 && <span className="ml-1.5 bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-400 text-[10px] font-semibold px-1.5 rounded">+{changes.added}</span>}
+                                  {changes.removed > 0 && <span className="ml-1 bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-400 text-[10px] font-semibold px-1.5 rounded">-{changes.removed}</span>}
+                                </td>
+                              </tr>
+                            )}
+                            {dateChanged && (
+                              <tr className="bg-amber-50/30 dark:bg-amber-900/5">
+                                <td className="px-3 py-2 text-sm text-gray-700 dark:text-gray-300">사용 기간</td>
+                                <td className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400 line-through">
+                                  {selectedRequest.usageFromDate?.split('T')[0] || '-'} ~ {selectedRequest.usageToDate?.split('T')[0] || '-'}
+                                </td>
+                                <td className="text-center text-gray-400 w-8">&rarr;</td>
+                                <td className="px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-medium">
+                                  {adjustedFromDate || '-'} ~ {adjustedToDate || '-'}
+                                </td>
+                              </tr>
+                            )}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="bg-green-50 dark:bg-green-900/5 border border-green-200 dark:border-green-700/30 rounded-lg px-3 py-2">
+                      <p className="text-xs text-green-700 dark:text-green-400 font-medium">신청 원본 그대로 승인합니다.</p>
+                    </div>
+                  )}
+
+                  <div className="flex justify-end gap-2">
+                    <button
+                      onClick={() => setShowApproveConfirm(false)}
+                      className="px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
+                    >
+                      돌아가기
+                    </button>
+                    <button
+                      onClick={() => handleReviewSubmit('APPROVED')}
+                      className="px-4 py-1.5 text-sm font-medium rounded-lg bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white"
+                    >
+                      승인 확정
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* Read-only mode: show review result + close button */}
+              {isReviewReadOnly && (
+                <>
+                  {(selectedRequest.reviewerName || selectedRequest.reviewComment) && (
+                    <div className={`rounded-lg border p-3 mb-3 ${selectedRequest.status === 'APPROVED' ? 'bg-green-50 dark:bg-green-900/5 border-green-200 dark:border-green-700/30' : 'bg-red-50 dark:bg-red-900/5 border-red-200 dark:border-red-700/30'}`}>
+                      <div className={`flex items-center gap-2 text-xs font-semibold mb-1 ${selectedRequest.status === 'APPROVED' ? 'text-green-700 dark:text-green-400' : 'text-red-700 dark:text-red-400'}`}>
+                        {selectedRequest.status === 'APPROVED' ? (
+                          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 16 16" stroke="currentColor"><circle cx="8" cy="8" r="6.5" strokeWidth="1.5"/><path d="M5.5 8l2 2 3.5-4" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                        ) : (
+                          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 16 16" stroke="currentColor"><path d="M8 1.5L1 13.5h14L8 1.5z" strokeWidth="1.3" strokeLinejoin="round"/><path d="M8 6v3M8 11.5v.5" strokeWidth="1.5" strokeLinecap="round"/></svg>
+                        )}
+                        {selectedRequest.status === 'APPROVED' ? '승인' : '반려'} - {selectedRequest.reviewerName || '관리자'}
+                      </div>
+                      {selectedRequest.reviewedAt && (
+                        <div className="text-xs text-gray-500 dark:text-gray-500 mb-1">{formatDateTime(selectedRequest.reviewedAt)}</div>
+                      )}
+                      {selectedRequest.reviewComment && (
+                        <div className="text-sm text-gray-700 dark:text-gray-300">{selectedRequest.reviewComment}</div>
+                      )}
+                    </div>
+                  )}
+                  <div className="flex justify-end">
+                    <button
+                      onClick={handleCloseReview}
+                      className="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg text-sm font-medium"
+                    >
+                      닫기
+                    </button>
+                  </div>
+                </>
+              )}
+
+              {/* Edit mode: action buttons only */}
+              {!isReviewReadOnly && !showRejectConfirm && !showApproveConfirm && (
+                <>
+                  <div className="flex justify-end gap-2">
+                    <button
+                      type="button"
+                      onClick={handleCloseReview}
+                      className="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg text-sm font-medium"
+                    >
+                      취소
+                    </button>
+                    <button
+                      onClick={() => setShowRejectConfirm(true)}
+                      className="border border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900/10 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/20 px-4 py-2 rounded-lg text-sm font-medium"
+                    >
+                      반려
+                    </button>
+                    <button
+                      onClick={() => setShowApproveConfirm(true)}
+                      className="bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white px-4 py-2 rounded-lg text-sm font-medium"
+                    >
+                      승인
+                    </button>
+                  </div>
+                </>
+              )}
             </div>
           </div>
         </div>
-      )}
+        );
+      })()}
 
       {/* Detail Modal */}
-      {isDetailModalOpen && selectedKeyDetail && (
+      {isDetailModalOpen && selectedKeyDetail && (() => {
+        const statusConf = KEY_STATUS_CONFIG[selectedKeyDetail.status] || KEY_STATUS_CONFIG.EXPIRED;
+        const isDisabled = selectedKeyDetail.status === 'REVOKED' || selectedKeyDetail.status === 'EXPIRED';
+        return (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-lg mx-4">
-            <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-              <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">키 상세 정보</h2>
-            </div>
-            <div className="px-6 py-4 space-y-3">
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="block text-sm font-medium text-gray-500 dark:text-gray-400">Key Name</label>
-                  <p className="text-gray-900 dark:text-gray-100">{selectedKeyDetail.keyName}</p>
+          <div className="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-2xl w-full max-w-lg mx-4">
+            {/* Header */}
+            <div className="bg-gray-50 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-700 px-6 py-5 rounded-t-2xl flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className={`w-10 h-10 rounded-xl border ${statusConf.iconBorderClass} ${statusConf.iconBgClass} flex items-center justify-center`}>
+                  <svg className={`w-5 h-5 ${statusConf.textClass}`} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" />
+                  </svg>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-500 dark:text-gray-400">User</label>
-                  <p className="text-gray-900 dark:text-gray-100">{selectedKeyDetail.userName}</p>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-500 dark:text-gray-400">Prefix</label>
-                  <p className="font-mono text-gray-900 dark:text-gray-100">{selectedKeyDetail.apiKeyPrefix}</p>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-500 dark:text-gray-400">Status</label>
-                  <span
-                    className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${
-                      STATUS_BADGE[selectedKeyDetail.status] || 'bg-gray-100 text-gray-800'
-                    }`}
-                  >
-                    {selectedKeyDetail.status}
-                  </span>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-500 dark:text-gray-400">Expires At</label>
-                  <p className="text-gray-900 dark:text-gray-100">{formatDateTime(selectedKeyDetail.expiresAt)}</p>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-500 dark:text-gray-400">Last Used</label>
-                  <p className="text-gray-900 dark:text-gray-100">{formatDateTime(selectedKeyDetail.lastUsedAt)}</p>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-500 dark:text-gray-400">Created At</label>
-                  <p className="text-gray-900 dark:text-gray-100">{formatDateTime(selectedKeyDetail.createdAt)}</p>
+                  <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">키 상세 정보</h2>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">API Key 발급 정보 및 상태</p>
                 </div>
               </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Decrypted Key</label>
-                <div className="flex items-center gap-2">
-                  <code className="flex-1 bg-gray-100 dark:bg-gray-700 px-3 py-2 rounded-lg text-sm font-mono break-all text-gray-900 dark:text-gray-100">
-                    {selectedKeyDetail.decryptedKey}
-                  </code>
-                  <button
-                    onClick={handleCopyDecryptedKey}
-                    className="shrink-0 bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-lg text-sm font-medium"
-                  >
-                    {detailCopied ? '복사됨!' : '복사'}
-                  </button>
+              <button
+                onClick={() => { setIsDetailModalOpen(false); setSelectedKeyDetail(null); setKeyVisible(false); }}
+                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+              >
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            {/* Status Banner */}
+            <div className="px-6 pt-5">
+              <div className={`bg-gray-50 dark:bg-gray-800/60 border ${statusConf.borderClass} rounded-lg px-4 py-3 flex items-center justify-between`}>
+                <span className="font-mono font-bold text-sm text-gray-900 dark:text-gray-100">{selectedKeyDetail.keyName}</span>
+                <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold border ${statusConf.bgClass} ${statusConf.borderClass} ${statusConf.textClass}`}>
+                  <span className={`w-1.5 h-1.5 rounded-full ${statusConf.dotClass}`} />
+                  {statusConf.label}
+                </span>
+              </div>
+            </div>
+
+            {/* Body - Info Rows */}
+            <div className="px-6 pt-4 pb-2">
+              {/* USER */}
+              <div className="flex items-center gap-3 py-3 border-b border-gray-100 dark:border-gray-700/30">
+                <div className="w-7 h-7 rounded-md bg-blue-50 dark:bg-blue-900/15 flex items-center justify-center text-blue-500 shrink-0">
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                  </svg>
+                </div>
+                <div className="min-w-0">
+                  <div className="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500">USER</div>
+                  <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{selectedKeyDetail.userName}</div>
+                </div>
+              </div>
+              {/* PREFIX */}
+              <div className="flex items-center gap-3 py-3 border-b border-gray-100 dark:border-gray-700/30">
+                <div className="w-7 h-7 rounded-md bg-blue-50 dark:bg-blue-900/15 flex items-center justify-center text-blue-500 shrink-0">
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 6h.008v.008H6V6Z" />
+                  </svg>
+                </div>
+                <div className="min-w-0">
+                  <div className="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500">PREFIX</div>
+                  <div className="text-sm font-medium font-mono text-gray-900 dark:text-gray-100">{selectedKeyDetail.apiKeyPrefix}</div>
+                </div>
+              </div>
+              {/* EXPIRES AT */}
+              <div className="flex items-center gap-3 py-3 border-b border-gray-100 dark:border-gray-700/30">
+                <div className="w-7 h-7 rounded-md bg-blue-50 dark:bg-blue-900/15 flex items-center justify-center text-blue-500 shrink-0">
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
+                  </svg>
+                </div>
+                <div className="min-w-0">
+                  <div className="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500">EXPIRES AT</div>
+                  <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{selectedKeyDetail.expiresAt ? formatDateTime(selectedKeyDetail.expiresAt) : '영구'}</div>
+                </div>
+              </div>
+              {/* LAST USED */}
+              <div className="flex items-center gap-3 py-3 border-b border-gray-100 dark:border-gray-700/30">
+                <div className="w-7 h-7 rounded-md bg-blue-50 dark:bg-blue-900/15 flex items-center justify-center text-blue-500 shrink-0">
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                  </svg>
+                </div>
+                <div className="min-w-0">
+                  <div className="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500">LAST USED</div>
+                  <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{selectedKeyDetail.lastUsedAt ? formatDateTime(selectedKeyDetail.lastUsedAt) : '-'}</div>
+                </div>
+              </div>
+              {/* CREATED AT */}
+              <div className="flex items-center gap-3 py-3 border-b border-gray-100 dark:border-gray-700/30">
+                <div className="w-7 h-7 rounded-md bg-blue-50 dark:bg-blue-900/15 flex items-center justify-center text-blue-500 shrink-0">
+                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
+                  </svg>
+                </div>
+                <div className="min-w-0">
+                  <div className="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500">CREATED AT</div>
+                  <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatDateTime(selectedKeyDetail.createdAt)}</div>
                 </div>
               </div>
             </div>
+
+            {/* Body - API Key Section */}
+            <div className="px-6 pt-3 pb-4">
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-[10px] uppercase tracking-wider text-gray-400 dark:text-gray-500 font-semibold">API KEY</span>
+                <button
+                  onClick={() => setKeyVisible((v) => !v)}
+                  className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors p-1"
+                  title={keyVisible ? '숨기기' : '보기'}
+                >
+                  {keyVisible ? (
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
+                    </svg>
+                  ) : (
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                    </svg>
+                  )}
+                </button>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="flex-1 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2.5 font-mono text-sm break-all text-gray-900 dark:text-gray-100 select-all">
+                  {keyVisible ? selectedKeyDetail.decryptedKey : `${selectedKeyDetail.apiKeyPrefix}${'••••••••••••••••••••'}`}
+                </div>
+                <button
+                  onClick={handleCopyDecryptedKey}
+                  className={`shrink-0 px-3 py-1.5 rounded-md text-xs font-semibold transition-colors ${
+                    detailCopied
+                      ? 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400'
+                      : 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/30'
+                  }`}
+                >
+                  {detailCopied ? (
+                    <span className="flex items-center gap-1">
+                      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                      </svg>
+                      완료
+                    </span>
+                  ) : '복사'}
+                </button>
+              </div>
+              {isDisabled && (
+                <div className={`mt-3 rounded-md px-3 py-2 text-xs border ${statusConf.bgClass} ${statusConf.borderClass} ${statusConf.textClass}`}>
+                  이 키는 {selectedKeyDetail.status === 'REVOKED' ? '폐기' : '만료'}되어 더 이상 사용할 수 없습니다.
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
             <div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end">
               <button
-                onClick={() => {
-                  setIsDetailModalOpen(false);
-                  setSelectedKeyDetail(null);
-                }}
-                className="bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg text-sm font-medium"
+                onClick={() => { setIsDetailModalOpen(false); setSelectedKeyDetail(null); setKeyVisible(false); }}
+                className="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
               >
                 닫기
               </button>
             </div>
           </div>
         </div>
-      )}
+        );
+      })()}
 
       {/* Raw Key Modal (after approve) */}
       {rawKeyModal && (
diff --git a/frontend/src/pages/apikeys/KeyRequestPage.tsx b/frontend/src/pages/apikeys/KeyRequestPage.tsx
index 50f1574..0f8cad2 100644
--- a/frontend/src/pages/apikeys/KeyRequestPage.tsx
+++ b/frontend/src/pages/apikeys/KeyRequestPage.tsx
@@ -1,14 +1,47 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import type { ServiceInfo, ServiceApi } from '../../types/service';
 import { getServices, getServiceApis } from '../../services/serviceService';
 import { createKeyRequest } from '../../services/apiKeyService';
 
-const METHOD_COLOR: Record<string, string> = {
-  GET: 'bg-green-100 text-green-800',
-  POST: 'bg-blue-100 text-blue-800',
-  PUT: 'bg-orange-100 text-orange-800',
-  DELETE: 'bg-red-100 text-red-800',
+const METHOD_BADGE_STYLE: Record<string, string> = {
+  GET: 'bg-emerald-900/80 text-emerald-300 border border-emerald-700/50',
+  POST: 'bg-amber-900/80 text-amber-300 border border-amber-700/50',
+  PUT: 'bg-blue-900/80 text-blue-300 border border-blue-700/50',
+  DELETE: 'bg-red-900/80 text-red-300 border border-red-700/50',
+  PATCH: 'bg-purple-900/80 text-purple-300 border border-purple-700/50',
+};
+
+const IndeterminateCheckbox = ({ checked, indeterminate, onChange, className }: { checked: boolean; indeterminate: boolean; onChange: () => void; className?: string }) => {
+  const ref = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return <input ref={ref} type="checkbox" checked={checked} onChange={onChange} className={className || 'rounded'} />;
+};
+
+interface DomainGroup {
+  domain: string;
+  apis: ServiceApi[];
+}
+
+const groupApisByDomain = (apis: ServiceApi[]): DomainGroup[] => {
+  const domainMap = new Map<string, ServiceApi[]>();
+
+  apis.forEach((api) => {
+    const domain = api.apiDomain || '미분류';
+    if (!domainMap.has(domain)) {
+      domainMap.set(domain, []);
+    }
+    domainMap.get(domain)!.push(api);
+  });
+
+  const result: DomainGroup[] = [];
+  domainMap.forEach((domainApis, domain) => {
+    result.push({ domain, apis: domainApis });
+  });
+
+  return result;
 };
 
 const KeyRequestPage = () => {
@@ -17,6 +50,7 @@ const KeyRequestPage = () => {
   const [services, setServices] = useState<ServiceInfo[]>([]);
   const [serviceApisMap, setServiceApisMap] = useState<Record<number, ServiceApi[]>>({});
   const [expandedServices, setExpandedServices] = useState<Set<number>>(new Set());
+  const [expandedDomains, setExpandedDomains] = useState<Set<string>>(new Set());
   const [selectedApiIds, setSelectedApiIds] = useState<Set<number>>(new Set());
   const [keyName, setKeyName] = useState('');
   const [purpose, setPurpose] = useState('');
@@ -27,6 +61,7 @@ const KeyRequestPage = () => {
   const [isPermanent, setIsPermanent] = useState(false);
   const [usageFromDate, setUsageFromDate] = useState('');
   const [usageToDate, setUsageToDate] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
   const [isLoading, setIsLoading] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -64,6 +99,14 @@ const KeyRequestPage = () => {
     fetchData();
   }, []);
 
+  const groupedApisMap = useMemo(() => {
+    const result: Record<number, DomainGroup[]> = {};
+    Object.entries(serviceApisMap).forEach(([serviceId, apis]) => {
+      result[Number(serviceId)] = groupApisByDomain(apis);
+    });
+    return result;
+  }, [serviceApisMap]);
+
   const handleToggleService = (serviceId: number) => {
     setExpandedServices((prev) => {
       const next = new Set(prev);
@@ -76,6 +119,18 @@ const KeyRequestPage = () => {
     });
   };
 
+  const handleToggleDomain = (key: string) => {
+    setExpandedDomains((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+
   const handleToggleApi = (apiId: number) => {
     setSelectedApiIds((prev) => {
       const next = new Set(prev);
@@ -105,6 +160,70 @@ const KeyRequestPage = () => {
     });
   };
 
+  const handleToggleAllDomainApis = (serviceId: number, domain: string) => {
+    const domainGroups = groupedApisMap[serviceId] || [];
+    const domainGroup = domainGroups.find((d) => d.domain === domain);
+    if (!domainGroup) return;
+
+    const domainApis = domainGroup.apis;
+    const allSelected = domainApis.every((a) => selectedApiIds.has(a.apiId));
+
+    setSelectedApiIds((prev) => {
+      const next = new Set(prev);
+      domainApis.forEach((a) => {
+        if (allSelected) {
+          next.delete(a.apiId);
+        } else {
+          next.add(a.apiId);
+        }
+      });
+      return next;
+    });
+  };
+
+
+
+  const allApis = useMemo(() => {
+    return Object.values(serviceApisMap).flat();
+  }, [serviceApisMap]);
+
+  const allApisSelected = allApis.length > 0 && allApis.every((a) => selectedApiIds.has(a.apiId));
+  const someApisSelected = allApis.some((a) => selectedApiIds.has(a.apiId));
+
+  const handleToggleAll = () => {
+    if (allApisSelected) {
+      setSelectedApiIds(new Set());
+    } else {
+      setSelectedApiIds(new Set(allApis.map((a) => a.apiId)));
+    }
+  };
+
+  const handleClearSelection = () => {
+    setSelectedApiIds(new Set());
+  };
+
+  const filteredGroupedApisMap = useMemo(() => {
+    if (!searchQuery.trim()) return groupedApisMap;
+    const query = searchQuery.toLowerCase();
+    const result: Record<number, DomainGroup[]> = {};
+    Object.entries(groupedApisMap).forEach(([serviceId, domainGroups]) => {
+      const filtered = domainGroups
+        .map((dg) => ({
+          domain: dg.domain,
+          apis: dg.apis.filter(
+            (a) =>
+              a.apiName.toLowerCase().includes(query) ||
+              a.apiPath.toLowerCase().includes(query),
+          ),
+        }))
+        .filter((dg) => dg.apis.length > 0);
+      if (filtered.length > 0) {
+        result[Number(serviceId)] = filtered;
+      }
+    });
+    return result;
+  }, [groupedApisMap, searchQuery]);
+
   const handlePresetPeriod = (months: number) => {
     const from = new Date();
     const to = new Date();
@@ -321,78 +440,173 @@ const KeyRequestPage = () => {
           </div>
         </div>
 
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow mb-6">
-          <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
-              API 선택 <span className="text-sm font-normal text-gray-500 dark:text-gray-400 dark:text-gray-400">({selectedApiIds.size}개 선택됨)</span>
-            </h2>
+        {/* API Selection Section */}
+        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 shadow mb-6 overflow-hidden">
+          {/* Header bar */}
+          <div className="flex items-center justify-between gap-4 px-5 py-3.5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
+            <div className="flex items-center gap-3">
+              <label className="flex items-center gap-2 cursor-pointer" onClick={(e) => e.stopPropagation()}>
+                <IndeterminateCheckbox
+                  checked={allApisSelected}
+                  indeterminate={!allApisSelected && someApisSelected}
+                  onChange={handleToggleAll}
+                  className="rounded"
+                />
+              </label>
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">API 선택</h2>
+              {selectedApiIds.size > 0 && (
+                <span className="text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-2.5 py-0.5 rounded-full">
+                  {selectedApiIds.size}개 선택
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="API 검색..."
+                className="bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg px-3 py-1.5 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:outline-none w-56"
+              />
+              {selectedApiIds.size > 0 && (
+                <button
+                  type="button"
+                  onClick={handleClearSelection}
+                  className="text-xs text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 px-2 py-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                >
+                  선택 해제
+                </button>
+              )}
+            </div>
           </div>
-          <div className="divide-y divide-gray-200 dark:divide-gray-700">
+
+          {/* Service cards */}
+          <div className="p-4 space-y-3">
             {services.map((service) => {
               const apis = serviceApisMap[service.serviceId] || [];
-              const isExpanded = expandedServices.has(service.serviceId);
+              const domainGroups = filteredGroupedApisMap[service.serviceId] || [];
+              const isServiceExpanded = expandedServices.has(service.serviceId);
               const selectedCount = apis.filter((a) => selectedApiIds.has(a.apiId)).length;
-              const allSelected = apis.length > 0 && apis.every((a) => selectedApiIds.has(a.apiId));
+              const allServiceSelected = apis.length > 0 && apis.every((a) => selectedApiIds.has(a.apiId));
+              const someServiceSelected = !allServiceSelected && apis.some((a) => selectedApiIds.has(a.apiId));
+              const hasSelections = selectedCount > 0;
+
+              if (searchQuery.trim() && domainGroups.length === 0) return null;
 
               return (
-                <div key={service.serviceId}>
+                <div
+                  key={service.serviceId}
+                  className={`rounded-xl border overflow-hidden transition-colors ${hasSelections ? 'border-blue-300 dark:border-blue-700' : 'border-gray-200 dark:border-gray-700'}`}
+                >
+                  {/* Service header */}
                   <div
-                    className="px-6 py-3 flex items-center justify-between cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
+                    className={`flex items-center justify-between px-5 py-3.5 cursor-pointer ${hasSelections ? 'bg-blue-50/50 dark:bg-blue-900/20' : 'bg-gray-50 dark:bg-gray-800/80'}`}
                     onClick={() => handleToggleService(service.serviceId)}
                   >
                     <div className="flex items-center gap-3">
-                      <span className="text-gray-400 dark:text-gray-500 text-sm">{isExpanded ? '\u25BC' : '\u25B6'}</span>
-                      <span className="font-medium text-gray-900 dark:text-gray-100">{service.serviceName}</span>
+                      <svg className={`h-4 w-4 text-gray-400 transition-transform ${isServiceExpanded ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      </svg>
+                      <label className="flex items-center cursor-pointer" onClick={(e) => e.stopPropagation()}>
+                        <IndeterminateCheckbox
+                          checked={allServiceSelected}
+                          indeterminate={someServiceSelected}
+                          onChange={() => handleToggleAllServiceApis(service.serviceId)}
+                          className="rounded"
+                        />
+                      </label>
+                      <span className="font-semibold text-gray-900 dark:text-gray-100">{service.serviceName}</span>
                       {selectedCount > 0 && (
-                        <span className="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full">
-                          {selectedCount}/{apis.length}
+                        <span className="text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-2 py-0.5 rounded-full">
+                          {selectedCount} selected
                         </span>
                       )}
                     </div>
-                    <span className="text-sm text-gray-500 dark:text-gray-400">{apis.length}개 API</span>
+                    <span className="text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 px-2 py-0.5 rounded-full">
+                      {apis.length}개 API
+                    </span>
                   </div>
-                  {isExpanded && (
-                    <div className="px-6 pb-3">
-                      {apis.length > 0 && (
-                        <div className="mb-2 pl-6">
-                          <label className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
-                            <input
-                              type="checkbox"
-                              checked={allSelected}
-                              onChange={() => handleToggleAllServiceApis(service.serviceId)}
-                              className="rounded"
-                            />
-                            전체 선택
-                          </label>
-                        </div>
-                      )}
-                      <div className="space-y-1 pl-6">
-                        {apis.map((api) => (
-                          <label
-                            key={api.apiId}
-                            className="flex items-center gap-2 py-1 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded px-2"
-                          >
-                            <input
-                              type="checkbox"
-                              checked={selectedApiIds.has(api.apiId)}
-                              onChange={() => handleToggleApi(api.apiId)}
-                              className="rounded"
-                            />
-                            <span
-                              className={`inline-block px-2 py-0.5 rounded text-xs font-bold ${
-                                METHOD_COLOR[api.apiMethod] || 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
-                              }`}
+
+                  {/* Service body */}
+                  {isServiceExpanded && (
+                    <div className="px-4 py-3 space-y-2 bg-white dark:bg-gray-900">
+                      {domainGroups.map((domainGroup) => {
+                        const domainKey = `${service.serviceId}-${domainGroup.domain}`;
+                        const isDomainExpanded = expandedDomains.has(domainKey);
+                        const domainApis = domainGroup.apis;
+                        const allDomainSelected = domainApis.length > 0 && domainApis.every((a) => selectedApiIds.has(a.apiId));
+                        const someDomainSelected = !allDomainSelected && domainApis.some((a) => selectedApiIds.has(a.apiId));
+
+                        return (
+                          <div key={domainKey}>
+                            {/* Domain row */}
+                            <div
+                              className="ml-5 flex items-center gap-2.5 px-3 py-2 cursor-pointer rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50"
+                              onClick={() => handleToggleDomain(domainKey)}
                             >
-                              {api.apiMethod}
-                            </span>
-                            <span className="font-mono text-sm text-gray-700 dark:text-gray-300">{api.apiPath}</span>
-                            <span className="text-sm text-gray-500 dark:text-gray-400">- {api.apiName}</span>
-                          </label>
-                        ))}
-                        {apis.length === 0 && (
-                          <p className="text-sm text-gray-400 dark:text-gray-500 py-1">등록된 API가 없습니다.</p>
-                        )}
-                      </div>
+                              <svg className={`h-3.5 w-3.5 text-gray-400 transition-transform ${isDomainExpanded ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                              </svg>
+                              <label className="flex items-center cursor-pointer" onClick={(e) => e.stopPropagation()}>
+                                <IndeterminateCheckbox
+                                  checked={allDomainSelected}
+                                  indeterminate={someDomainSelected}
+                                  onChange={() => handleToggleAllDomainApis(service.serviceId, domainGroup.domain)}
+                                  className="rounded"
+                                />
+                              </label>
+                              <span className="text-sm font-semibold text-gray-800 dark:text-gray-200">{domainGroup.domain}</span>
+                              <span className="text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 px-2 py-0.5 rounded-full">
+                                {domainApis.length}개
+                              </span>
+                            </div>
+
+                            {/* API table */}
+                            {isDomainExpanded && (
+                              <div className="ml-3 mr-3 mb-3 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+                                {/* Table header */}
+                                <div className="grid grid-cols-[24px_56px_1fr_1fr] gap-3 items-center bg-gray-50 dark:bg-gray-800 px-4 py-1.5 text-xs font-semibold text-gray-500 dark:text-gray-500 uppercase tracking-wider">
+                                  <div></div>
+                                  <div>Method</div>
+                                  <div>Path</div>
+                                  <div>Name</div>
+                                </div>
+                                {/* Table rows */}
+                                {domainApis.map((api) => {
+                                  const isSelected = selectedApiIds.has(api.apiId);
+                                  return (
+                                    <div
+                                      key={api.apiId}
+                                      className={`grid grid-cols-[24px_56px_1fr_1fr] gap-3 items-center px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-gray-700/30 border-b border-gray-100 dark:border-gray-700/50 last:border-b-0 cursor-pointer ${isSelected ? 'bg-blue-50/50 dark:bg-blue-900/10' : ''}`}
+                                      onClick={() => handleToggleApi(api.apiId)}
+                                    >
+                                      <div className="flex items-center justify-center">
+                                        <input
+                                          type="checkbox"
+                                          checked={isSelected}
+                                          onChange={() => handleToggleApi(api.apiId)}
+                                          onClick={(e) => e.stopPropagation()}
+                                          className="rounded"
+                                        />
+                                      </div>
+                                      <div>
+                                        <span className={`inline-block px-2 py-0.5 rounded text-xs font-bold ${METHOD_BADGE_STYLE[api.apiMethod] || 'bg-gray-700 text-gray-300 border border-gray-600'}`}>
+                                          {api.apiMethod}
+                                        </span>
+                                      </div>
+                                      <div className="font-mono text-xs text-gray-700 dark:text-gray-300 truncate">{api.apiPath}</div>
+                                      <div className="text-sm text-gray-600 dark:text-gray-400 truncate">{api.apiName}</div>
+                                    </div>
+                                  );
+                                })}
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })}
+                      {apis.length === 0 && (
+                        <p className="text-sm text-gray-400 dark:text-gray-500 py-3 ml-5">등록된 API가 없습니다.</p>
+                      )}
                     </div>
                   )}
                 </div>
@@ -406,6 +620,22 @@ const KeyRequestPage = () => {
           </div>
         </div>
 
+        {/* Bottom sticky summary bar */}
+        {selectedApiIds.size > 0 && (
+          <div className="sticky bottom-4 z-10 mx-auto mb-4">
+            <div className="bg-blue-600 dark:bg-blue-700 text-white rounded-xl px-5 py-3 shadow-lg flex items-center justify-between">
+              <span className="text-sm font-medium">{selectedApiIds.size}개 API가 선택되었습니다</span>
+              <button
+                type="button"
+                onClick={handleClearSelection}
+                className="text-sm text-blue-200 hover:text-white transition-colors"
+              >
+                선택 해제
+              </button>
+            </div>
+          </div>
+        )}
+
         <div className="flex justify-end">
           <button
             type="submit"
diff --git a/frontend/src/types/apikey.ts b/frontend/src/types/apikey.ts
index 3650b1d..3e43d57 100644
--- a/frontend/src/types/apikey.ts
+++ b/frontend/src/types/apikey.ts
@@ -4,6 +4,7 @@ export interface ApiKey {
   apiKeyPrefix: string;
   maskedKey: string;
   status: 'PENDING' | 'ACTIVE' | 'INACTIVE' | 'EXPIRED' | 'REVOKED';
+  userName: string | null;
   expiresAt: string | null;
   lastUsedAt: string | null;
   createdAt: string;
diff --git a/frontend/src/types/service.ts b/frontend/src/types/service.ts
index 477df58..de209cb 100644
--- a/frontend/src/types/service.ts
+++ b/frontend/src/types/service.ts
@@ -19,6 +19,8 @@ export interface ServiceApi {
   apiPath: string;
   apiMethod: string;
   apiName: string;
+  apiDomain: string | null;
+  apiSection: string | null;
   description: string | null;
   isActive: boolean;
   createdAt: string;
@@ -46,6 +48,8 @@ export interface CreateServiceApiRequest {
   apiPath: string;
   apiMethod: string;
   apiName: string;
+  apiDomain?: string;
+  apiSection?: string;
   description?: string;
 }
 
diff --git a/src/main/java/com/gcsc/connection/apikey/dto/ApiKeyResponse.java b/src/main/java/com/gcsc/connection/apikey/dto/ApiKeyResponse.java
index 6aef1d0..7a7a978 100644
--- a/src/main/java/com/gcsc/connection/apikey/dto/ApiKeyResponse.java
+++ b/src/main/java/com/gcsc/connection/apikey/dto/ApiKeyResponse.java
@@ -10,6 +10,7 @@ public record ApiKeyResponse(
     String apiKeyPrefix,
     String maskedKey,
     String status,
+    String userName,
     LocalDateTime expiresAt,
     LocalDateTime lastUsedAt,
     LocalDateTime createdAt
@@ -17,12 +18,14 @@ public record ApiKeyResponse(
 
     public static ApiKeyResponse from(SnpApiKey key) {
         String masked = key.getApiKeyPrefix() + "****...****";
+        String ownerName = key.getUser() != null ? key.getUser().getUserName() : null;
         return new ApiKeyResponse(
             key.getApiKeyId(),
             key.getKeyName(),
             key.getApiKeyPrefix(),
             masked,
             key.getStatus().name(),
+            ownerName,
             key.getExpiresAt(),
             key.getLastUsedAt(),
             key.getCreatedAt()
diff --git a/src/main/java/com/gcsc/connection/monitoring/entity/SnpApiRequestLog.java b/src/main/java/com/gcsc/connection/monitoring/entity/SnpApiRequestLog.java
index b50218b..127822c 100644
--- a/src/main/java/com/gcsc/connection/monitoring/entity/SnpApiRequestLog.java
+++ b/src/main/java/com/gcsc/connection/monitoring/entity/SnpApiRequestLog.java
@@ -5,8 +5,10 @@ import com.gcsc.connection.service.entity.SnpService;
 import com.gcsc.connection.tenant.entity.SnpTenant;
 import com.gcsc.connection.user.entity.SnpUser;
 import jakarta.persistence.Column;
+import jakarta.persistence.ConstraintMode;
 import jakarta.persistence.Entity;
 import jakarta.persistence.FetchType;
+import jakarta.persistence.ForeignKey;
 import jakarta.persistence.GeneratedValue;
 import jakarta.persistence.GenerationType;
 import jakarta.persistence.Id;
@@ -49,15 +51,15 @@ public class SnpApiRequestLog {
     private String requestIp;
 
     @ManyToOne(fetch = FetchType.LAZY)
-    @JoinColumn(name = "service_id")
+    @JoinColumn(name = "service_id", foreignKey = @ForeignKey(ConstraintMode.NO_CONSTRAINT))
     private SnpService service;
 
     @ManyToOne(fetch = FetchType.LAZY)
-    @JoinColumn(name = "user_id")
+    @JoinColumn(name = "user_id", foreignKey = @ForeignKey(ConstraintMode.NO_CONSTRAINT))
     private SnpUser user;
 
     @ManyToOne(fetch = FetchType.LAZY)
-    @JoinColumn(name = "api_key_id")
+    @JoinColumn(name = "api_key_id", foreignKey = @ForeignKey(ConstraintMode.NO_CONSTRAINT))
     private SnpApiKey apiKey;
 
     @Column(name = "response_size")
@@ -76,7 +78,7 @@ public class SnpApiRequestLog {
     private LocalDateTime requestedAt;
 
     @ManyToOne(fetch = FetchType.LAZY)
-    @JoinColumn(name = "tenant_id")
+    @JoinColumn(name = "tenant_id", foreignKey = @ForeignKey(ConstraintMode.NO_CONSTRAINT))
     private SnpTenant tenant;
 
     @Builder
diff --git a/src/main/java/com/gcsc/connection/service/dto/CreateServiceApiRequest.java b/src/main/java/com/gcsc/connection/service/dto/CreateServiceApiRequest.java
index 38334a2..164c576 100644
--- a/src/main/java/com/gcsc/connection/service/dto/CreateServiceApiRequest.java
+++ b/src/main/java/com/gcsc/connection/service/dto/CreateServiceApiRequest.java
@@ -6,6 +6,8 @@ public record CreateServiceApiRequest(
     @NotBlank String apiPath,
     @NotBlank String apiMethod,
     @NotBlank String apiName,
+    String apiDomain,
+    String apiSection,
     String description
 ) {
 }
diff --git a/src/main/java/com/gcsc/connection/service/dto/ServiceApiResponse.java b/src/main/java/com/gcsc/connection/service/dto/ServiceApiResponse.java
index 4d697cf..365fbbd 100644
--- a/src/main/java/com/gcsc/connection/service/dto/ServiceApiResponse.java
+++ b/src/main/java/com/gcsc/connection/service/dto/ServiceApiResponse.java
@@ -10,6 +10,8 @@ public record ServiceApiResponse(
     String apiPath,
     String apiMethod,
     String apiName,
+    String apiDomain,
+    String apiSection,
     String description,
     Boolean isActive,
     LocalDateTime createdAt,
@@ -23,6 +25,8 @@ public record ServiceApiResponse(
             a.getApiPath(),
             a.getApiMethod(),
             a.getApiName(),
+            a.getApiDomain(),
+            a.getApiSection(),
             a.getDescription(),
             a.getIsActive(),
             a.getCreatedAt(),
diff --git a/src/main/java/com/gcsc/connection/service/entity/SnpServiceApi.java b/src/main/java/com/gcsc/connection/service/entity/SnpServiceApi.java
index 0e0e174..51a9013 100644
--- a/src/main/java/com/gcsc/connection/service/entity/SnpServiceApi.java
+++ b/src/main/java/com/gcsc/connection/service/entity/SnpServiceApi.java
@@ -40,6 +40,12 @@ public class SnpServiceApi extends BaseEntity {
     @Column(name = "api_name", length = 200, nullable = false)
     private String apiName;
 
+    @Column(name = "api_domain", length = 100)
+    private String apiDomain;
+
+    @Column(name = "api_section", length = 100)
+    private String apiSection;
+
     @Column(name = "description", columnDefinition = "TEXT")
     private String description;
 
@@ -48,19 +54,24 @@ public class SnpServiceApi extends BaseEntity {
 
     @Builder
     public SnpServiceApi(SnpService service, String apiPath, String apiMethod, String apiName,
-                         String description, Boolean isActive) {
+                         String apiDomain, String apiSection, String description, Boolean isActive) {
         this.service = service;
         this.apiPath = apiPath;
         this.apiMethod = apiMethod;
         this.apiName = apiName;
+        this.apiDomain = apiDomain;
+        this.apiSection = apiSection;
         this.description = description;
         this.isActive = isActive != null ? isActive : true;
     }
 
-    public void update(String apiPath, String apiMethod, String apiName, String description, Boolean isActive) {
+    public void update(String apiPath, String apiMethod, String apiName,
+                       String apiDomain, String apiSection, String description, Boolean isActive) {
         if (apiPath != null) this.apiPath = apiPath;
         if (apiMethod != null) this.apiMethod = apiMethod;
         if (apiName != null) this.apiName = apiName;
+        if (apiDomain != null) this.apiDomain = apiDomain;
+        if (apiSection != null) this.apiSection = apiSection;
         if (description != null) this.description = description;
         if (isActive != null) this.isActive = isActive;
     }
diff --git a/src/main/java/com/gcsc/connection/service/service/ServiceManagementService.java b/src/main/java/com/gcsc/connection/service/service/ServiceManagementService.java
index 817d145..1355cf8 100644
--- a/src/main/java/com/gcsc/connection/service/service/ServiceManagementService.java
+++ b/src/main/java/com/gcsc/connection/service/service/ServiceManagementService.java
@@ -102,6 +102,8 @@ public class ServiceManagementService {
             .apiPath(request.apiPath())
             .apiMethod(request.apiMethod())
             .apiName(request.apiName())
+            .apiDomain(request.apiDomain())
+            .apiSection(request.apiSection())
             .description(request.description())
             .build();
 
-- 
2.45.2


From 528edb1c89cbfe1cc93158f5fe1fa53ef5d7eaf7 Mon Sep 17 00:00:00 2001
From: HYOJIN <hjkim4@gcsc.co.kr>
Date: Fri, 10 Apr 2026 11:05:03 +0900
Subject: [PATCH 2/3] =?UTF-8?q?docs:=20=EB=A6=B4=EB=A6=AC=EC=A6=88=20?=
 =?UTF-8?q?=EB=85=B8=ED=8A=B8=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/RELEASE-NOTES.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/docs/RELEASE-NOTES.md b/docs/RELEASE-NOTES.md
index d90e197..42b7d31 100644
--- a/docs/RELEASE-NOTES.md
+++ b/docs/RELEASE-NOTES.md
@@ -6,6 +6,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/ko/1.0.0/).
 
 ## [Unreleased]
 
+### 추가
+
+- 서비스 API 도메인 분류 (apiDomain 컬럼) (#31)
+- API Key 신청: 아코디언+테이블 계층형 API 선택 + 검색 (#31)
+- API Key 검토: API 권한 편집 (체크박스 토글, API 추가 모달) (#31)
+- API Key 관리: KPI 카드, 필터 칩, 검색, 15건 페이징 (#31)
+- 키 상세: 상태별 색상 헤더, API Key 보기/숨기기+복사 (#31)
+
+### 변경
+
+- API Key 관리 UI 전면 개선 (레퍼런스 디자인 적용) (#31)
+- 검토 모달: 탭 분리, EditableDateCard, 승인확인 변경테이블 (#31)
+- 상세 모달: 검토 모달 readOnly 재사용 (#31)
+- 테이블 필드 한글화, 순서 변경, 소유자(userName) 추가 (#31)
+
 ## [2026-04-09]
 
 ### 추가
-- 
2.45.2


From e22f155563479dc099b1e1e77d532008ad73673b Mon Sep 17 00:00:00 2001
From: HYOJIN <hjkim4@gcsc.co.kr>
Date: Fri, 10 Apr 2026 11:07:24 +0900
Subject: [PATCH 3/3] =?UTF-8?q?docs:=20=EB=A6=B4=EB=A6=AC=EC=A6=88=20?=
 =?UTF-8?q?=EB=85=B8=ED=8A=B8=20=EC=A0=95=EB=A6=AC=20(2026-04-10)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/RELEASE-NOTES.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/RELEASE-NOTES.md b/docs/RELEASE-NOTES.md
index 42b7d31..da5d717 100644
--- a/docs/RELEASE-NOTES.md
+++ b/docs/RELEASE-NOTES.md
@@ -6,20 +6,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/ko/1.0.0/).
 
 ## [Unreleased]
 
+## [2026-04-10]
+
 ### 추가
 
-- 서비스 API 도메인 분류 (apiDomain 컬럼) (#31)
-- API Key 신청: 아코디언+테이블 계층형 API 선택 + 검색 (#31)
-- API Key 검토: API 권한 편집 (체크박스 토글, API 추가 모달) (#31)
-- API Key 관리: KPI 카드, 필터 칩, 검색, 15건 페이징 (#31)
-- 키 상세: 상태별 색상 헤더, API Key 보기/숨기기+복사 (#31)
+- 서비스 API 도메인 분류 + 계층형 API 선택 UI (#31)
+- API Key 검토: API 권한 편집 + API 추가 모달 (#31)
+- API Key 관리: KPI 카드, 필터 칩, 검색, 페이징 (#31)
+- 키 상세: 상태별 색상, 보기/숨기기+복사 (#31)
 
 ### 변경
 
 - API Key 관리 UI 전면 개선 (레퍼런스 디자인 적용) (#31)
-- 검토 모달: 탭 분리, EditableDateCard, 승인확인 변경테이블 (#31)
-- 상세 모달: 검토 모달 readOnly 재사용 (#31)
-- 테이블 필드 한글화, 순서 변경, 소유자(userName) 추가 (#31)
+- 검토 모달: 탭 분리, 변경테이블, readOnly 상세 (#31)
+- 테이블 필드 한글화/순서 변경/소유자 표시 (#31)
 
 ## [2026-04-09]
 
-- 
2.45.2