광고주용 캠페인 성과·정산 웹 대시보드

광고주가 캠페인별 노출·참여·집행 금액을 한 화면에서 확인하고 상태·기간으로 걸러 봅니다. 캠페인 목록과 상세 지표를 폴링 기반으로 갱신하는 조회 API와 비대칭 타일 화면을 설계합니다.

• Next.js 클라이언트 훅으로 15초 주기 폴링을 구성하고 탭 비활성 시 일시 정지
• NestJS 조회 API에서 MySQL 캠페인 마스터와 MongoDB 이벤트 집계를 병합
• 정렬·상태·기간 필터 조건을 URL 쿼리와 동기화해 화면 공유를 지원

노출·참여·집행 금액을 캠페인 단위로 합산하는 조회 계층을 설계하고, 폴링 주기를 환경 설정으로 조정할 수 있게 구현합니다.

정산 기간을 고르면 건별 내역과 상세를 보고 같은 조건의 엑셀 파일을 내려받습니다. 기간 필터와 상세 패널, 서버 측 엑셀 생성 엔드포인트를 구현합니다.

• 기간 선택기와 정산 상태 필터를 NestJS 쿼리 DTO로 검증
• 정산 건 상세를 우측 패널로 열어 캠페인별 집행 금액 내역을 표시
• 엑셀 파일을 서버에서 스트림 방식으로 생성해 대용량 목록도 메모리 부담 없이 내려받기

화면에 보이는 필터 조건과 다운로드 파일의 조건이 동일하도록 하나의 쿼리 정의를 공유하는 구조를 설계합니다.

광고주별 계정으로 로그인하고 자신의 캠페인과 정산 데이터만 조회합니다. JWT 세션과 광고주 식별자 기반 조회 범위 강제를 API 계층에서 구현합니다.

• NestJS 가드에서 액세스 토큰을 검증하고 리프레시 토큰은 HttpOnly 쿠키로 보관
• 모든 조회 쿼리에 광고주 식별자 조건을 공통 인터셉터로 강제
• 타 광고주 리소스 요청 시 404로 응답해 존재 여부를 노출하지 않음

개별 API가 아니라 공통 계층에서 조회 범위를 강제하는 구조로 데이터 격리 누락 가능성을 줄이도록 설계합니다.

기간별 노출·참여 추이와 집행 금액 비중을 차트와 표로 비교합니다. Recharts 기반 추이 차트, 도넛 비중, 상세 테이블을 같은 필터와 연동합니다.

• Recharts 영역·막대 차트에 일·주·월 집계 단위 전환을 적용
• 차트 구간을 선택하면 하단 테이블이 같은 기간으로 좁혀지는 연동 구조 설계
• 서버 집계 결과를 React Query로 캐싱하고 필터 변경 시 키 단위로 무효화

차트와 표가 하나의 필터 상태를 공유하도록 설계해 화면 간 수치 불일치를 막는 구조를 구현합니다.