feat(agent-calculate): 에이전트 정산 화면 구현 및 API 연동

docs/20260413_에이전트정산페이지구현.md

@@ -0,0 +1,41 @@
+# 에이전트 전용 정산 페이지 구현 계획
+
+## 목적
+- 에이전트 전용 크리에이터별 정산 페이지 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 응답 시 데이터 표시 예상(수동 점검 예정)
+
+## 정정
+- 현재 없음. 추후 백엔드 스펙 변경 시 쿼리/필드명 반영 예정.