# 에이전트 전용 정산 페이지 구현 계획

## 목적
- 에이전트 전용 크리에이터별 정산 페이지 5종을 구현한다.
- 날짜 범위 지정 UI 제공, 합계를 테이블 최상단에 노출, 서버 페이징 대응.

## 대상 페이지
- 라이브 정산: `/agent/calculate/live`
- 콘텐츠 정산: `/agent/calculate/content-by-date`
- 콘텐츠 후원 정산: `/agent/calculate/content-donation-by-date`
- 커뮤니티 정산: `/agent/calculate/community-post`
- 채널 후원 정산: `/agent/calculate/channel-donation`

## API
- Method: GET
- Base URL prefix: `/agent/calculate/*`
- 공통 쿼리: `startDateStr`, `endDateStr`, `page`, `size`
- 응답 스키마(공통):
  - `totalCount: number`
  - `total: { count, totalCan, krw, fee, settlementAmount, tax, depositAmount, agentSettlementAmount }`
  - `items: Array<{ creatorId, creatorNickname, count, totalCan, krw, fee, settlementAmount, tax, depositAmount, agentSettlementAmount }>`

## 체크리스트
- [x] API 모듈 `src/api/agent_calculate.js` 생성 및 5개 함수 구현
- [x] 날짜 범위 선택 UI 및 조회 버튼 구현(공통 패턴 사용: vuejs-datetimepicker)
- [x] 데이터 테이블 구현(헤더: 닉네임, 건수, 총 CAN, 원화, 수수료, 정산금액, 세금, 입금액, 에이전트 정산금액)
- [x] 합계(total)를 테이블 최상단 body.prepend로 표시
- [x] 서버 페이징(v-pagination) 연동 및 총 페이지 계산
- [x] 로딩 인디케이터/에러 노티 추가
- [x] 각 페이지 초기 로드 시 당월 1일 ~ 말일 기본 조회

## 검증 기록
### 1차 구현
- 무엇을: 에이전트 전용 정산 5개 화면(API 연동 훅/합계/페이징/숫자 포맷) 구현
- 왜: 에이전트가 기간별 크리에이터 정산 현황을 통합 조회하기 위함
- 어떻게:
  - 명령/절차: 로컬 서버 실행 후 각 경로 진입 → 기본 기간(당월) 자동 조회 → 날짜 변경 후 조회 → 합계/목록/페이징 확인
  - 결과: UI 및 파라미터 구성 확인 완료. 백엔드 연결 환경에서 200 응답 시 데이터 표시 예상(수동 점검 예정)

## 정정
- 현재 없음. 추후 백엔드 스펙 변경 시 쿼리/필드명 반영 예정.