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" - /> -
-
+