feat: 발송 관리 페이지 구현 (#23)

seonkyu.kim commented

2026-02-27 14:31:44 +00:00

Owner

📋 작업 요약

발송 통계 페이지 (/statistics) 구현: 4개 통계 카드, 월간 추이 차트, 플랫폼별 도넛 차트, 시간대별 바 차트, 최근 이력 테이블, 오픈율 Top5
발송 이력 페이지 (/statistics/history) 구현: 필터, 테이블, 슬라이드 패널, 페이지네이션
브레드크럼 그룹 라벨 처리 및 메시지 목록 연동

Closes #23

🛠️ 작업 내용 (Changes)

types.ts — 타입 정의 + 목 데이터 15건 (SendHistory에 messageId 추가)
StatsSummaryCards — 4개 통계 카드 (대시보드 스타일 통일, 성공률/실패율 카드 리디자인)
MonthlyTrendChart — SVG 라인 차트 (발송/성공/오픈 3라인, 호버 툴팁)
PlatformDistribution — SVG 도넛 차트 (iOS/Android, 범례)
HourlyBarChart — CSS 바 차트 (24시간, 호버 툴팁)
RecentHistoryTable — 최근 5건 테이블 (전체 보기 링크)
OpenRateTop5 — 오픈율 Top 5 랭킹 (프로그레스 바)
HistorySlidePanel — 발송 상세 슬라이드 패널 (기본 정보, 발송 결과, 실패 사유, 발송 내용)
StatisticsPage — 통계 페이지 조립 (날짜/서비스 필터)
StatisticsHistoryPage — 이력 페이지 조립 (검색/서비스/상태/날짜 필터, 페이지네이션)
AppHeader — 브레드크럼 그룹 라벨 처리 (발송 관리 > 발송 통계/발송 이력)
MessageListPage — URL 쿼리 파라미터(messageId) 수신하여 자동 필터 적용

📢 리뷰어 참고 사항 (To Reviewers)

모든 차트는 외부 라이브러리 없이 SVG/CSS로 직접 구현 (대시보드와 동일 패턴)
날짜 필터 기본값: 오늘 기준 1달 전 ~ 오늘 (대시보드와 동일)
슬라이드 패널에서 "메시지 목록" 클릭 시 ?messageId=xxx로 메시지 관리 페이지 이동 후 자동 검색
발송 ID / 메시지 ID 분리: 발송 ID는 발송 이력 고유키, 메시지 ID는 메시지 관리와 연결되는 키

✅ 체크리스트 (Self Checklist)

빌드 성공 (npx tsc --noEmit)
불필요한 로그/주석 제거
컨벤션 준수
기밀 정보 하드코딩 없음

📸 스크린샷 / 테스트 로그 (Screenshots/Logs)

없음

## 📋 작업 요약 - 발송 통계 페이지 (`/statistics`) 구현: 4개 통계 카드, 월간 추이 차트, 플랫폼별 도넛 차트, 시간대별 바 차트, 최근 이력 테이블, 오픈율 Top5 - 발송 이력 페이지 (`/statistics/history`) 구현: 필터, 테이블, 슬라이드 패널, 페이지네이션 - 브레드크럼 그룹 라벨 처리 및 메시지 목록 연동 ## 🔗 관련 이슈 (Related Issues) Closes #23 ## 🛠️ 작업 내용 (Changes) - [x] `types.ts` — 타입 정의 + 목 데이터 15건 (SendHistory에 messageId 추가) - [x] `StatsSummaryCards` — 4개 통계 카드 (대시보드 스타일 통일, 성공률/실패율 카드 리디자인) - [x] `MonthlyTrendChart` — SVG 라인 차트 (발송/성공/오픈 3라인, 호버 툴팁) - [x] `PlatformDistribution` — SVG 도넛 차트 (iOS/Android, 범례) - [x] `HourlyBarChart` — CSS 바 차트 (24시간, 호버 툴팁) - [x] `RecentHistoryTable` — 최근 5건 테이블 (전체 보기 링크) - [x] `OpenRateTop5` — 오픈율 Top 5 랭킹 (프로그레스 바) - [x] `HistorySlidePanel` — 발송 상세 슬라이드 패널 (기본 정보, 발송 결과, 실패 사유, 발송 내용) - [x] `StatisticsPage` — 통계 페이지 조립 (날짜/서비스 필터) - [x] `StatisticsHistoryPage` — 이력 페이지 조립 (검색/서비스/상태/날짜 필터, 페이지네이션) - [x] `AppHeader` — 브레드크럼 그룹 라벨 처리 (발송 관리 > 발송 통계/발송 이력) - [x] `MessageListPage` — URL 쿼리 파라미터(messageId) 수신하여 자동 필터 적용 ## 📢 리뷰어 참고 사항 (To Reviewers) - 모든 차트는 외부 라이브러리 없이 SVG/CSS로 직접 구현 (대시보드와 동일 패턴) - 날짜 필터 기본값: 오늘 기준 1달 전 ~ 오늘 (대시보드와 동일) - 슬라이드 패널에서 "메시지 목록" 클릭 시 `?messageId=xxx`로 메시지 관리 페이지 이동 후 자동 검색 - 발송 ID / 메시지 ID 분리: 발송 ID는 발송 이력 고유키, 메시지 ID는 메시지 관리와 연결되는 키 ## ✅ 체크리스트 (Self Checklist) - [x] 빌드 성공 (`npx tsc --noEmit`) - [x] 불필요한 로그/주석 제거 - [x] 컨벤션 준수 - [x] 기밀 정보 하드코딩 없음 ## 📸 스크린샷 / 테스트 로그 (Screenshots/Logs) - 없음

seonkyu.kim added 1 commit 2026-02-27 14:31:45 +00:00

feat: 발송 관리 페이지 구현 (#23 ) 530e92240a

- 발송 통계 페이지 (StatisticsPage): 4개 통계 카드, 월간 추이 라인 차트, 플랫폼별 도넛 차트, 시간대별 바 차트, 최근 이력 테이블, 오픈율 Top5
- 발송 이력 페이지 (StatisticsHistoryPage): 검색/서비스/상태/날짜 필터, 발송 이력 테이블, 행 클릭 슬라이드 패널 (발송 상세), 페이지네이션
- 타입 정의 + 목 데이터 15건 (types.ts)
- 브레드크럼 그룹 라벨 처리 (발송 관리 > 발송 통계/발송 이력)
- 날짜 필터 기본값: 오늘 기준 1달 전 ~ 오늘
- 대시보드와 카드/차트 스타일 통일
- 메시지 목록 연동: 슬라이드 패널에서 messageId 쿼리 파라미터로 이동

Closes #23