sodalive-vuejs-creator-admin/docs/20260413_에이전트정산페이지구현.md

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

목적

• 에이전트 전용 크리에이터별 정산 페이지 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 }>

체크리스트

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

검증 기록

1차 구현

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

정정

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