- {page}페이지
+ {totalPages != null
+ ? `${page} / ${totalPages} 페이지${total != null ? ` (총 ${total.toLocaleString()}건)` : ""}`
+ : `${page}페이지`}
diff --git a/frontend/src/hooks/useEventsPage.ts b/frontend/src/hooks/useEventsPage.ts
index eb35261..61ac2d1 100644
--- a/frontend/src/hooks/useEventsPage.ts
+++ b/frontend/src/hooks/useEventsPage.ts
@@ -1,5 +1,5 @@
import { useState, useEffect, useCallback, useRef, useMemo } from "react";
-import { getEvents } from "@/api/events";
+import { getEvents, getEventsPaged } from "@/api/events";
import { getCameras } from "@/api/cameras";
import { useAppContext } from "./useAppContext";
import type { EventResponse, CameraResponse } from "@/types";
@@ -27,6 +27,7 @@ export function useEventsPage() {
const [pageSize, setPageSize] = useState(8);
const [rawEvents, setRawEvents] = useState
([]);
const [hasNextPage, setHasNextPage] = useState(false);
+ const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(true);
const cameraMapRef = useRef>(new Map());
const [cameras, setCameras] = useState([]);
@@ -51,21 +52,23 @@ export function useEventsPage() {
const doFetch = useCallback(async (f: EventFilters, p: number, ps: number) => {
setLoading(true);
const { date_from, date_to } = periodToDates(f.period);
- const params: Parameters[0] = {
- limit: ps + 1, // 다음 페이지 존재 여부 판단용 +1
+ const params: Parameters[0] = {
+ limit: ps,
offset: (p - 1) * ps,
...(f.status ? { status: f.status } : {}),
...(f.type ? { type: f.type } : {}),
...(f.cameraId ? { camera_id: Number(f.cameraId) } : {}),
+ ...(f.station ? { station: f.station } : {}), // PR #30 — 백엔드 서버사이드 필터
...(date_from ? { date_from } : {}),
...(date_to ? { date_to } : {}),
...(f.search ? { search: f.search } : {}),
};
try {
- const result = await getEvents(params);
- setHasNextPage(result.length > ps);
+ const { items, total: t } = await getEventsPaged(params);
+ setTotal(t);
+ setHasNextPage(p * ps < t);
setRawEvents(
- result.slice(0, ps).map((e) => ({
+ items.map((e) => ({
...e,
camera: cameraMapRef.current.get(e.camera_id) ?? e.camera,
}))
@@ -89,13 +92,12 @@ export function useEventsPage() {
setPage(1);
}, []);
- // station: 백엔드 파라미터 미지원 → 현재 페이지 내 클라이언트 필터
- const displayEvents = useMemo(() => {
- if (!filters.station) return rawEvents;
- return rawEvents.filter(
- (e) => e.camera?.station_name === filters.station
- );
- }, [rawEvents, filters.station]);
+ // station 필터는 백엔드(PR #30)에서 처리되므로 클라 후필터 불필요
+ const displayEvents = rawEvents;
+ const totalPages = useMemo(
+ () => Math.max(1, Math.ceil(total / pageSize)),
+ [total, pageSize]
+ );
const cameraOptions = useMemo(
() =>
@@ -119,6 +121,7 @@ export function useEventsPage() {
...(filters.status ? { status: filters.status } : {}),
...(filters.type ? { type: filters.type } : {}),
...(filters.cameraId ? { camera_id: Number(filters.cameraId) } : {}),
+ ...(filters.station ? { station: filters.station } : {}),
...(date_from ? { date_from } : {}),
...(date_to ? { date_to } : {}),
...(filters.search ? { search: filters.search } : {}),
@@ -146,6 +149,8 @@ export function useEventsPage() {
pageSize,
setPageSize: handleSetPageSize,
hasNextPage,
+ total,
+ totalPages,
cameraOptions,
stationOptions,
refetch: () => doFetch(filters, page, pageSize),
diff --git a/frontend/src/pages/EventsPage.tsx b/frontend/src/pages/EventsPage.tsx
index cb5c12c..652747e 100644
--- a/frontend/src/pages/EventsPage.tsx
+++ b/frontend/src/pages/EventsPage.tsx
@@ -19,6 +19,8 @@ export default function EventsPage() {
pageSize,
setPageSize,
hasNextPage,
+ total,
+ totalPages,
cameraOptions,
stationOptions,
refetch,
@@ -49,6 +51,8 @@ export default function EventsPage() {
page={page}
pageSize={pageSize}
hasNextPage={hasNextPage}
+ totalPages={totalPages}
+ total={total}
onPageChange={setPage}
onPageSizeChange={setPageSize}
/>
diff --git a/frontend/src/pages/StatsPage.tsx b/frontend/src/pages/StatsPage.tsx
index a61f4bd..d6c6ad5 100644
--- a/frontend/src/pages/StatsPage.tsx
+++ b/frontend/src/pages/StatsPage.tsx
@@ -7,34 +7,61 @@ import EventTypeChart from "@/components/stats/EventTypeChart";
import HourlyDistributionChart from "@/components/stats/HourlyDistributionChart";
import FalseAlarmTable from "@/components/stats/FalseAlarmTable";
import CameraRankingTable from "@/components/stats/CameraRankingTable";
-import { getEvents, getEventStats, getEventStatsByCamera } from "@/api/events";
-import { getCameras } from "@/api/cameras";
import {
- buildDailyData,
- buildHourlyData,
- buildTypeData,
- buildFalseAlarmData,
- DAILY_DAYS,
-} from "@/lib/stats";
-import type { EventResponse, EventStats, CameraEventStats, CameraResponse } from "@/types";
+ getEvents,
+ getEventStats,
+ getEventStatsByCamera,
+ getEventStatsByType,
+ getEventStatsHourly,
+ getEventStatsDaily,
+} from "@/api/events";
+import { getCameras } from "@/api/cameras";
+import { buildFalseAlarmData, DAILY_DAYS } from "@/lib/stats";
+import { labelEventType } from "@/constants/eventTypes";
+import type {
+ EventResponse,
+ EventStats,
+ CameraEventStats,
+ CameraResponse,
+ EventTypeStat,
+ HourlyStat,
+ DailyStat,
+} from "@/types";
+
+const HOUR_SLOTS = [
+ "00-02", "02-04", "04-06", "06-08", "08-10", "10-12",
+ "12-14", "14-16", "16-18", "18-20", "20-22", "22-24",
+];
export default function StatsPage() {
+ // falseAlarm reason 집계 + 평균값 계산용 (서버 엔드포인트 없음)
const [events, setEvents] = useState([]);
const [stats, setStats] = useState(null);
const [cameraStats, setCameraStats] = useState([]);
+ // 서버 집계 결과 (PR #31)
+ const [typeStats, setTypeStats] = useState([]);
+ const [hourlyStats, setHourlyStats] = useState([]);
+ const [dailyStats, setDailyStats] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetch = async () => {
setLoading(true);
- const [evResult, statsResult, camStatsResult, camResult] = await Promise.allSettled([
- getEvents({ limit: 1000 }),
- getEventStats(),
- getEventStatsByCamera(),
- getCameras(),
- ]);
+ const [evResult, statsResult, camStatsResult, camResult, typeResult, hourlyResult, dailyResult] =
+ await Promise.allSettled([
+ getEvents({ limit: 1000 }),
+ getEventStats(),
+ getEventStatsByCamera(),
+ getCameras(),
+ getEventStatsByType(),
+ getEventStatsHourly(),
+ getEventStatsDaily(DAILY_DAYS),
+ ]);
if (evResult.status === "fulfilled") setEvents(evResult.value);
if (statsResult.status === "fulfilled") setStats(statsResult.value);
+ if (typeResult.status === "fulfilled") setTypeStats(typeResult.value);
+ if (hourlyResult.status === "fulfilled") setHourlyStats(hourlyResult.value);
+ if (dailyResult.status === "fulfilled") setDailyStats(dailyResult.value);
if (camStatsResult.status === "fulfilled") {
const cameraMap = new Map(
camResult.status === "fulfilled"
@@ -56,9 +83,44 @@ export default function StatsPage() {
fetch();
}, []);
- const dailyData = useMemo(() => buildDailyData(events), [events]);
- const hourlyData = useMemo(() => buildHourlyData(events), [events]);
- const typeData = useMemo(() => buildTypeData(events), [events]);
+ // 일별 추이 — 서버 응답을 `MM/DD` 키 record 로 변환 (최근 DAILY_DAYS 일)
+ const dailyData = useMemo(() => {
+ const result: Record = {};
+ for (let i = DAILY_DAYS - 1; i >= 0; i--) {
+ const d = new Date();
+ d.setDate(d.getDate() - i);
+ result[`${d.getMonth() + 1}/${d.getDate()}`] = 0;
+ }
+ dailyStats.forEach((s) => {
+ const d = new Date(s.day);
+ const key = `${d.getMonth() + 1}/${d.getDate()}`;
+ if (key in result) result[key] = s.count;
+ });
+ return result;
+ }, [dailyStats]);
+
+ // 시간대(서버 0~23) → 2시간 슬롯 record 로 합산
+ const hourlyData = useMemo(() => {
+ const result: Record = Object.fromEntries(HOUR_SLOTS.map((s) => [s, 0]));
+ hourlyStats.forEach((h) => {
+ const start = Math.floor(h.hour / 2) * 2;
+ const key = `${String(start).padStart(2, "0")}-${String(start + 2).padStart(2, "0")}`;
+ if (key in result) result[key] += h.count;
+ });
+ return result;
+ }, [hourlyStats]);
+
+ // event_type → 한글 label
+ const typeData = useMemo(() => {
+ const result: Record = {};
+ typeStats.forEach((t) => {
+ const label = labelEventType(t.event_type);
+ result[label] = (result[label] ?? 0) + t.count;
+ });
+ return result;
+ }, [typeStats]);
+
+ // 오탐 reason 집계 — 서버 엔드포인트 없어 events 1000건 기준 클라 집계
const falseAlarmData = useMemo(() => buildFalseAlarmData(events), [events]);
const avgDaily = useMemo(() => {
@@ -97,7 +159,7 @@ export default function StatsPage() {
{/* 데이터 범위 안내 */}
- ※ 통계는 최근 수집된 최대 1,000건의 이벤트를 기준으로 산출됩니다.
+ ※ 차트(일별·시간대별·유형별)는 서버에서 전체 데이터 기준으로 집계됩니다. 오탐 사유·평균 처리시간은 최근 1,000건 기준.
{/* 요약 카드 */}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index ff05c98..2913418 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -41,6 +41,26 @@ export interface CameraEventStats {
count: number;
}
+// 서버 통계 3종 (PR #31)
+export interface EventTypeStat {
+ event_type: string;
+ count: number;
+}
+export interface HourlyStat {
+ hour: number; // 0..23
+ count: number;
+}
+export interface DailyStat {
+ day: string; // YYYY-MM-DD
+ count: number;
+}
+
+// 페이지네이션 메타가 붙은 events 응답 (X-Total-Count 헤더 활용)
+export interface EventsPagedResult {
+ items: EventResponse[];
+ total: number;
+}
+
export interface NotificationResponse {
id: number;
event_id: number;
diff --git a/mobile/services/eventService.ts b/mobile/services/eventService.ts
index 72679cb..8cb97da 100644
--- a/mobile/services/eventService.ts
+++ b/mobile/services/eventService.ts
@@ -2,8 +2,7 @@
import api from './api';
import type { EventResponse, EventStats, CameraEventStats } from '@/types';
-/** GET /api/events/ */
-export const getEvents = (params?: {
+export interface EventsQuery {
limit?: number;
offset?: number;
status?: string;
@@ -11,9 +10,22 @@ export const getEvents = (params?: {
date_from?: string; // YYYY-MM-DD
date_to?: string; // YYYY-MM-DD
type?: string; // 감지 유형 필터
-}) =>
+ station?: string; // 역이름 부분일치 (백엔드 PR #30)
+ search?: string; // 통합 검색 (백엔드 PR #26)
+}
+
+/** GET /api/events/ */
+export const getEvents = (params?: EventsQuery) =>
api.get('/api/events/', { params }).then((r) => r.data);
+/** GET /api/events/ + 총 건수 (X-Total-Count 헤더, 백엔드 PR #31) */
+export const getEventsPaged = async (params?: EventsQuery) => {
+ const res = await api.get('/api/events/', { params });
+ const totalHeader = res.headers['x-total-count'];
+ const total = totalHeader ? Number(totalHeader) : res.data.length;
+ return { items: res.data, total: Number.isFinite(total) ? total : res.data.length };
+};
+
/** GET /api/events/{id} */
export const getEventById = (id: number) =>
api.get(`/api/events/${id}`).then((r) => r.data);
@@ -26,6 +38,21 @@ export const getEventStats = () =>
export const getEventStatsByCamera = () =>
api.get('/api/events/stats/by-camera').then((r) => r.data);
+/** GET /api/events/stats/by-type — 유형별 집계 (백엔드 PR #31) */
+export interface EventTypeStat { event_type: string; count: number }
+export const getEventStatsByType = () =>
+ api.get('/api/events/stats/by-type').then((r) => r.data);
+
+/** GET /api/events/stats/hourly — 시간대(0~23)별 집계 (백엔드 PR #31) */
+export interface HourlyStat { hour: number; count: number }
+export const getEventStatsHourly = (params?: { date_from?: string; date_to?: string }) =>
+ api.get('/api/events/stats/hourly', { params }).then((r) => r.data);
+
+/** GET /api/events/stats/daily — 최근 N일 일자별 집계 (백엔드 PR #31) */
+export interface DailyStat { day: string; count: number }
+export const getEventStatsDaily = (days = 30) =>
+ api.get('/api/events/stats/daily', { params: { days } }).then((r) => r.data);
+
/** PATCH /api/events/{id}/status — 처리완료 */
export const updateEventStatus = (id: number, status: 'confirmed' | 'false_alarm') =>
api.patch(`/api/events/${id}/status`, { status }).then((r) => r.data);