From 765d0e01c6abb4d3b2288f1302464174b83d3698 Mon Sep 17 00:00:00 2001 From: HYOJIN Date: Mon, 13 Apr 2026 09:27:31 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20Request=20Logs=20=EC=A1=B0=ED=9A=8C=20?= =?UTF-8?q?=EA=B8=B0=EA=B0=84=20=ED=94=84=EB=A6=AC=EC=85=8B=20+=20?= =?UTF-8?q?=ED=95=84=ED=84=B0=20UI=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 날짜 프리셋 버튼 추가 (오늘/어제/최근7일/이번달/지난달/직접선택) - 필터 영역 한 줄로 통합 (서비스/상태/Method/검색/초기화) - IP 입력 필드 제거 --- .../src/pages/monitoring/RequestLogsPage.tsx | 77 +++++++++++-------- 1 file changed, 43 insertions(+), 34 deletions(-) diff --git a/frontend/src/pages/monitoring/RequestLogsPage.tsx b/frontend/src/pages/monitoring/RequestLogsPage.tsx index 3e0e6c3..0e889dd 100644 --- a/frontend/src/pages/monitoring/RequestLogsPage.tsx +++ b/frontend/src/pages/monitoring/RequestLogsPage.tsx @@ -26,14 +26,13 @@ const REQUEST_STATUSES = ['SUCCESS', 'FAIL', 'DENIED', 'EXPIRED', 'INVALID_KEY', const HTTP_METHODS = ['GET', 'POST', 'PUT', 'DELETE']; const DEFAULT_PAGE_SIZE = 20; -const getTodayString = (): string => { - const d = new Date(); - const year = d.getFullYear(); - const month = String(d.getMonth() + 1).padStart(2, '0'); - const day = String(d.getDate()).padStart(2, '0'); - return `${year}-${month}-${day}`; +const formatDate = (d: Date): string => { + return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; }; +const getToday = (): string => formatDate(new Date()); +const getTodayString = getToday; + const formatDateTime = (dateStr: string): string => { const d = new Date(dateStr); const year = d.getFullYear(); @@ -50,10 +49,10 @@ const RequestLogsPage = () => { const [startDate, setStartDate] = useState(getTodayString()); const [endDate, setEndDate] = useState(getTodayString()); + const [datePreset, setDatePreset] = useState('오늘'); const [serviceId, setServiceId] = useState(''); const [requestStatus, setRequestStatus] = useState(''); const [requestMethod, setRequestMethod] = useState(''); - const [requestIp, setRequestIp] = useState(''); const [services, setServices] = useState([]); const [result, setResult] = useState | null>(null); @@ -84,7 +83,6 @@ const RequestLogsPage = () => { serviceId: serviceId ? Number(serviceId) : undefined, requestStatus: requestStatus || undefined, requestMethod: requestMethod || undefined, - requestIp: requestIp || undefined, page, size: DEFAULT_PAGE_SIZE, }; @@ -104,10 +102,10 @@ const RequestLogsPage = () => { const handleReset = () => { setStartDate(getTodayString()); setEndDate(getTodayString()); + setDatePreset('오늘'); setServiceId(''); setRequestStatus(''); setRequestMethod(''); - setRequestIp(''); setCurrentPage(0); }; @@ -169,45 +167,68 @@ const RequestLogsPage = () => { {/* Search Form */}
-
+
+
+ {([ + { label: '오늘', fn: () => { const t = getToday(); setStartDate(t); setEndDate(t); setDatePreset('오늘'); } }, + { label: '어제', fn: () => { const d = new Date(); d.setDate(d.getDate() - 1); const y = formatDate(d); setStartDate(y); setEndDate(y); setDatePreset('어제'); } }, + { label: '최근 7일', fn: () => { const d = new Date(); d.setDate(d.getDate() - 6); setStartDate(formatDate(d)); setEndDate(getToday()); setDatePreset('최근 7일'); } }, + { label: '이번 달', fn: () => { const d = new Date(); setStartDate(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-01`); setEndDate(getToday()); setDatePreset('이번 달'); } }, + { label: '지난 달', fn: () => { const d = new Date(); d.setMonth(d.getMonth() - 1); const s = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-01`; const e = new Date(d.getFullYear(), d.getMonth() + 1, 0); setStartDate(s); setEndDate(formatDate(e)); setDatePreset('지난 달'); } }, + { label: '직접 선택', fn: () => { setDatePreset('직접 선택'); } }, + ]).map((btn) => ( + + ))} +
setStartDate(e.target.value)} + onChange={(e) => { setStartDate(e.target.value); setDatePreset('직접 선택'); }} 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" /> ~ setEndDate(e.target.value)} + onChange={(e) => { setEndDate(e.target.value); setDatePreset('직접 선택'); }} 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" />
+
+
- +
- +
-
-
- +
-
- - setRequestIp(e.target.value)} - placeholder="IP 주소" - 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 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" - /> -
-
+