최근 요청 로그
diff --git a/frontend/src/pages/statistics/ApiStatsPage.tsx b/frontend/src/pages/statistics/ApiStatsPage.tsx
new file mode 100644
index 0000000..bf9f0a7
--- /dev/null
+++ b/frontend/src/pages/statistics/ApiStatsPage.tsx
@@ -0,0 +1,268 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import {
+ BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
+ PieChart, Pie, Cell,
+} from 'recharts';
+import type { ApiStatsResponse } from '../../types/statistics';
+import { getApiStats } from '../../services/statisticsService';
+import DateRangeFilter from '../../components/DateRangeFilter';
+
+const PIE_COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4'];
+
+const SERVICE_TAG_STYLES = [
+ 'bg-blue-100 text-blue-700',
+ 'bg-emerald-100 text-emerald-700',
+ 'bg-amber-100 text-amber-700',
+ 'bg-red-100 text-red-700',
+ 'bg-violet-100 text-violet-700',
+ 'bg-cyan-100 text-cyan-700',
+];
+
+const METHOD_BADGE: Record
= {
+ GET: 'bg-blue-100 text-blue-800',
+ POST: 'bg-green-100 text-green-800',
+ PUT: 'bg-amber-100 text-amber-800',
+ DELETE: 'bg-red-100 text-red-800',
+ PATCH: 'bg-purple-100 text-purple-800',
+};
+
+const getToday = () => new Date().toISOString().slice(0, 10);
+
+const ApiStatsPage = () => {
+ const [startDate, setStartDate] = useState(getToday());
+ const [endDate, setEndDate] = useState(getToday());
+ const [data, setData] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+
+ const fetchData = useCallback(async () => {
+ setIsLoading(true);
+ try {
+ const res = await getApiStats(startDate, endDate);
+ if (res.success && res.data) {
+ setData(res.data);
+ }
+ } finally {
+ setIsLoading(false);
+ }
+ }, [startDate, endDate]);
+
+ useEffect(() => {
+ fetchData();
+ }, [fetchData]);
+
+ const handlePreset = (days: number) => {
+ const today = getToday();
+ if (days === 0) {
+ setStartDate(today);
+ } else {
+ const d = new Date();
+ d.setDate(d.getDate() - days);
+ setStartDate(d.toISOString().slice(0, 10));
+ }
+ setEndDate(today);
+ };
+
+ const serviceColorMap = useMemo(() => {
+ if (!data) return {};
+ const serviceNames = [...new Set(data.topApis.map((a) => a.serviceName))];
+ const map: Record = {};
+ serviceNames.forEach((name, i) => {
+ map[name] = {
+ tag: SERVICE_TAG_STYLES[i % SERVICE_TAG_STYLES.length],
+ bar: PIE_COLORS[i % PIE_COLORS.length],
+ };
+ });
+ return map;
+ }, [data]);
+
+ const statusChartData = useMemo(() => {
+ if (!data) return [];
+ return data.statusCodeDistribution.map((s) => ({
+ statusCode: String(s.statusCode),
+ count: s.count,
+ }));
+ }, [data]);
+
+ if (isLoading) {
+ return (
+
+ );
+ }
+
+ return (
+
+
API 통계
+
+
+
+ {!data ? (
+
데이터가 없습니다
+ ) : (
+ <>
+ {/* Charts */}
+
+ {/* Chart 1: HTTP Method Distribution */}
+
+
HTTP 메서드 분포
+ {data.methodDistribution.length > 0 ? (
+
+
+
+ {data.methodDistribution.map((_, idx) => (
+ |
+ ))}
+
+
+
+
+
+ ) : (
+
데이터가 없습니다
+ )}
+
+
+ {/* Chart 2: HTTP Status Code Distribution */}
+
+
HTTP 상태 코드 분포
+ {statusChartData.length > 0 ? (
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
데이터가 없습니다
+ )}
+
+
+
+ {/* Table 1: Top APIs */}
+
+
+
API 호출 순위
+
+ {data.topApis.length > 0 ? (
+
+
+
+
+ | 순위 |
+ 서비스 |
+ API |
+ 메서드 |
+ 호출 수 |
+ 평균 응답시간 |
+ 성공률 |
+
+
+
+ {data.topApis.slice(0, 20).map((api, idx) => {
+ const maxCount = data.topApis[0]?.callCount || 1;
+ const pct = (api.callCount / maxCount) * 100;
+ const colors = serviceColorMap[api.serviceName] || { tag: SERVICE_TAG_STYLES[0], bar: PIE_COLORS[0] };
+ return (
+
+ | {idx + 1} |
+
+
+ {api.serviceName}
+
+ |
+
+ {api.apiName}
+ |
+
+
+ {api.requestMethod}
+
+ |
+
+
+
+ {api.callCount.toLocaleString()}
+ |
+ {api.avgResponseTime.toFixed(0)}ms |
+ {api.successRate.toFixed(1)}% |
+
+ );
+ })}
+
+
+
+ ) : (
+
데이터가 없습니다
+ )}
+
+
+ {/* Table 2: Top Error APIs */}
+
+
+
API 에러 순위
+
+ {data.topErrorApis.length > 0 ? (
+
+
+
+
+ | 순위 |
+ 서비스 |
+ API |
+ 에러 수 |
+ 전체 수 |
+ 에러율 |
+
+
+
+ {data.topErrorApis.slice(0, 10).map((api, idx) => {
+ const colors = serviceColorMap[api.serviceName] || { tag: SERVICE_TAG_STYLES[0], bar: PIE_COLORS[0] };
+ return (
+
+ | {idx + 1} |
+
+
+ {api.serviceName}
+
+ |
+ {api.apiName} |
+ {api.errorCount.toLocaleString()} |
+ {api.totalCount.toLocaleString()} |
+ {api.errorRate.toFixed(1)}% |
+
+ );
+ })}
+
+
+
+ ) : (
+
데이터가 없습니다
+ )}
+
+
+ )}
+
+
서비스 통계
+
+
+
+ {!data || data.serviceStats.length === 0 ? (
+
데이터가 없습니다
+ ) : (
+ <>
+ {/* Summary Cards */}
+
+ {data.serviceStats.map((svc) => (
+
+
{svc.serviceName}
+
+ {svc.totalRequests.toLocaleString()}
+
+
+ 성공 {svc.successRate.toFixed(1)}%
+ {svc.avgResponseTime.toFixed(0)}ms
+
+
+ ))}
+
+
+ {/* Charts */}
+
+ {/* Chart 1: Service Request Count Bar */}
+
+
서비스별 요청 수
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Chart 2: Hourly Service Trend */}
+
+
시간별 서비스 요청 추이
+ {hourlyTrendPivoted.data.length > 0 ? (
+
+
+
+ `${h}시`} />
+
+ `${h}시`} />
+
+ {hourlyTrendPivoted.serviceNames.map((name, idx) => (
+
+ ))}
+
+
+ ) : (
+
데이터가 없습니다
+ )}
+
+
+
+ {/* Charts Row 2: Error Rate + Response Time */}
+
+ {/* Chart: Error Rate Comparison */}
+
+
서비스별 에러율 비교
+
+ ({
+ serviceName: s.serviceName,
+ successRate: Number(s.successRate.toFixed(1)),
+ errorRate: Number((100 - s.successRate).toFixed(1)),
+ }))}
+ layout="vertical"
+ >
+
+
+
+
+
+
+
+
+
+
+
+ {/* Chart: Avg Response Time Comparison */}
+
+
서비스별 평균 응답시간 비교
+
+ ({
+ serviceName: s.serviceName,
+ avgResponseTime: Number(s.avgResponseTime.toFixed(0)),
+ }))}
+ layout="vertical"
+ >
+
+
+
+
+
+ {data.serviceStats.map((s, idx) => {
+ const rt = s.avgResponseTime;
+ const color = rt < 100 ? '#10b981' : rt < 300 ? '#f59e0b' : '#ef4444';
+ return | ;
+ })}
+
+
+
+
+
+
+ )}
+
+
테넌트 통계
+
+
+
+ {!data || data.tenantStats.length === 0 ? (
+
데이터가 없습니다
+ ) : (
+ <>
+ {/* Summary Cards */}
+
+ {data.tenantStats.map((tenant) => (
+
+
{tenant.tenantName || 'Unknown'}
+
+ {tenant.totalRequests.toLocaleString()}
+
+
+ 사용자 {tenant.activeUsers}
+ 성공 {tenant.successRate.toFixed(1)}%
+
+
+ ))}
+
+
+ {/* Charts */}
+
+ {/* Chart 1: Daily Tenant Trend */}
+
+
일별 테넌트 요청 추이
+ {dailyTrendPivoted.data.length > 0 ? (
+
+
+
+
+
+
+
+ {dailyTrendPivoted.tenantNames.map((name, idx) => (
+
+ ))}
+
+
+ ) : (
+
데이터가 없습니다
+ )}
+
+
+ {/* Chart 2: Tenant API Key Stats */}
+
+
테넌트별 API Key 현황
+ {data.apiKeyStats.length > 0 ? (
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
데이터가 없습니다
+ )}
+
+
+
+ {/* Table: Tenant Details */}
+
+
+
테넌트 상세
+
+
+
+
+
+ | 테넌트 |
+ 요청 수 |
+ 활성 사용자 |
+ 성공률 |
+ 평균 응답시간 |
+
+
+
+ {data.tenantStats.map((tenant) => (
+
+ | {tenant.tenantName || 'Unknown'} |
+ {tenant.totalRequests.toLocaleString()} |
+ {tenant.activeUsers} |
+ {tenant.successRate.toFixed(1)}% |
+ {tenant.avgResponseTime.toFixed(0)}ms |
+
+ ))}
+
+
+
+
+
+ )}
+
+
사용량 추이
+
+ {/* Period Tabs */}
+
+ {PERIOD_OPTIONS.map((opt) => (
+
+ ))}
+
+
+ {isLoading ? (
+
+ ) : !data || data.items.length === 0 ? (
+
데이터가 없습니다
+ ) : (
+ <>
+ {/* Chart 1: 요청 수 추이 (full width) */}
+
+
요청 수 추이
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Charts 2 & 3: 2 column grid */}
+
+ {/* Chart 2: 성공률 + 응답시간 추이 */}
+
+
성공률 + 응답시간 추이
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Chart 3: 활성 사용자 추이 */}
+
+
활성 사용자 추이
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Table: 상세 데이터 */}
+
+
+
상세 데이터
+
+
+
+
+
+ | 기간 |
+ 총 요청 |
+ 성공 |
+ 실패 |
+ 성공률(%) |
+ 평균 응답시간(ms) |
+ 활성 사용자 |
+
+
+
+ {data.items.map((item) => (
+
+ |
+ {formatLabel(item.label, period)}
+ |
+
+ {item.totalRequests.toLocaleString()}
+ |
+
+ {item.successCount.toLocaleString()}
+ |
+
+ {item.failureCount.toLocaleString()}
+ |
+
+ {item.successRate.toFixed(1)}
+ |
+
+ {item.avgResponseTime.toFixed(0)}
+ |
+
+ {item.activeUsers.toLocaleString()}
+ |
+
+ ))}
+
+
+
+
+
+ )}
+
+
사용자 통계
+
+
+
+ {!data ? (
+
데이터가 없습니다
+ ) : (
+ <>
+ {/* Summary Cards */}
+
+
+
전체 사용자
+
{data.totalUsers}
+
+
+
API Key 보유 사용자
+
{data.usersWithActiveKey}
+
+
+
API 요청 사용자
+
{data.totalActiveUsers}
+
+
+
+ {/* Charts */}
+
+ {/* Chart 1: Daily Active Users */}
+
+
일별 API 요청 사용자 추이
+ {data.dailyActiveUsers.length > 0 ? (
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
데이터가 없습니다
+ )}
+
+
+ {/* Chart 2: Role Distribution Donut */}
+
+
역할별 요청 분포
+ {data.roleDistribution.length > 0 ? (
+
+
+
+ {data.roleDistribution.map((_, idx) => (
+ |
+ ))}
+
+
+
+
+
+ ) : (
+
데이터가 없습니다
+ )}
+
+
+
+ {/* Table: Top Users */}
+
+
+
상위 사용자 Top 10
+
+ {data.topUsers.length > 0 ? (
+
+
+
+
+ | 순위 |
+ 사용자 |
+ 역할 |
+ 요청 수 |
+ 성공률 |
+
+
+
+ {data.topUsers.slice(0, 10).map((user, idx) => (
+
+ | {idx + 1} |
+ {user.userName} |
+
+
+ {user.role}
+
+ |
+ {user.requestCount.toLocaleString()} |
+ {user.successRate.toFixed(1)}% |
+
+ ))}
+
+
+
+ ) : (
+
데이터가 없습니다
+ )}
+
+
+ )}
+