From 6148449ae5a68e94e7f94b8205709e27be67696d Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Mon, 13 Apr 2026 18:46:18 +0900
Subject: [PATCH] =?UTF-8?q?feat(agent-calculate):=20=EC=97=90=EC=9D=B4?=
 =?UTF-8?q?=EC=A0=84=ED=8A=B8=20=EC=A0=95=EC=82=B0=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EB=B0=8F=20API=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/20260413_에이전트정산페이지구현.md       |  41 +++
 src/api/agent_calculate.js                    |  46 ++++
 .../AgentCalculateChannelDonation.vue         | 238 +++++++++++++++++-
 .../Calculate/AgentCalculateCommunityPost.vue | 238 +++++++++++++++++-
 .../Agent/Calculate/AgentCalculateContent.vue | 238 +++++++++++++++++-
 .../AgentCalculateContentDonation.vue         | 238 +++++++++++++++++-
 .../Agent/Calculate/AgentCalculateLive.vue    | 238 +++++++++++++++++-
 7 files changed, 1252 insertions(+), 25 deletions(-)
 create mode 100644 docs/20260413_에이전트정산페이지구현.md
 create mode 100644 src/api/agent_calculate.js

diff --git a/docs/20260413_에이전트정산페이지구현.md b/docs/20260413_에이전트정산페이지구현.md
new file mode 100644
index 0000000..cbf6dd8
--- /dev/null
+++ b/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 응답 시 데이터 표시 예상(수동 점검 예정)
+
+## 정정
+- 현재 없음. 추후 백엔드 스펙 변경 시 쿼리/필드명 반영 예정.
diff --git a/src/api/agent_calculate.js b/src/api/agent_calculate.js
new file mode 100644
index 0000000..7e9f526
--- /dev/null
+++ b/src/api/agent_calculate.js
@@ -0,0 +1,46 @@
+import Vue from 'vue';
+
+// 에이전트 전용 정산 API
+
+async function getLiveByCreator(startDate, endDate, page, size) {
+  return Vue.axios.get(
+    '/agent/calculate/live-by-creator?startDateStr=' + startDate +
+    '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
+  );
+}
+
+async function getContentByCreator(startDate, endDate, page, size) {
+  return Vue.axios.get(
+    '/agent/calculate/content-by-creator?startDateStr=' + startDate +
+    '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
+  );
+}
+
+async function getContentDonationByCreator(startDate, endDate, page, size) {
+  return Vue.axios.get(
+    '/agent/calculate/content-donation-by-creator?startDateStr=' + startDate +
+    '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
+  );
+}
+
+async function getCommunityByCreator(startDate, endDate, page, size) {
+  return Vue.axios.get(
+    '/agent/calculate/community-by-creator?startDateStr=' + startDate +
+    '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
+  );
+}
+
+async function getChannelDonationByCreator(startDate, endDate, page, size) {
+  return Vue.axios.get(
+    '/agent/calculate/channel-donation-by-creator?startDateStr=' + startDate +
+    '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
+  );
+}
+
+export {
+  getLiveByCreator,
+  getContentByCreator,
+  getContentDonationByCreator,
+  getCommunityByCreator,
+  getChannelDonationByCreator
+}
diff --git a/src/views/Agent/Calculate/AgentCalculateChannelDonation.vue b/src/views/Agent/Calculate/AgentCalculateChannelDonation.vue
index 20e4c91..6fcf00a 100644
--- a/src/views/Agent/Calculate/AgentCalculateChannelDonation.vue
+++ b/src/views/Agent/Calculate/AgentCalculateChannelDonation.vue
@@ -1,13 +1,241 @@
 <template>
-  <v-container>
-    <h2>에이전트 전용 - 크리에이터별 채널 후원 정산</h2>
-    <p>이 페이지는 추후 구현 예정입니다.</p>
-  </v-container>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>에이전트 전용 - 크리에이터별 채널 후원 정산</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <!-- 필터 영역 -->
+      <v-row
+        class="mt-2 mb-2"
+        align="center"
+        justify="end"
+      >
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuStart"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="시작일"
+                readonly
+                dense
+                :value="start_date"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="start_date"
+              scrollable
+              @input="menuStart = false"
+            />
+          </v-menu>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuEnd"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="종료일"
+                readonly
+                dense
+                :value="end_date"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="end_date"
+              scrollable
+              @input="menuEnd = false"
+            />
+          </v-menu>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="2"
+        >
+          <v-btn
+            color="#3bb9f1"
+            :loading="is_loading"
+            @click="fetchItems"
+          >
+            조회
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="items"
+            :loading="is_loading"
+            :items-per-page="-1"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template slot="body.prepend">
+              <tr>
+                <td>합계</td>
+                <td>{{ (total.count || 0).toLocaleString() }}</td>
+                <td>{{ (total.totalCan || 0).toLocaleString() }} 캔</td>
+                <td>{{ (total.krw || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.fee || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.settlementAmount || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.tax || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.depositAmount || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.agentSettlementAmount || 0).toLocaleString() }} 원</td>
+              </tr>
+            </template>
+
+            <template v-slot:item.totalCan="{ item }">
+              {{ (item.totalCan || 0).toLocaleString() }} 캔
+            </template>
+            <template v-slot:item.krw="{ item }">
+              {{ (item.krw || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.fee="{ item }">
+              {{ (item.fee || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.settlementAmount="{ item }">
+              {{ (item.settlementAmount || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.tax="{ item }">
+              {{ (item.tax || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.depositAmount="{ item }">
+              {{ (item.depositAmount || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.agentSettlementAmount="{ item }">
+              {{ (item.agentSettlementAmount || 0).toLocaleString() }} 원
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="onPage"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
 </template>
 
 <script>
+import * as api from '@/api/agent_calculate';
+
 export default {
-  name: 'AgentCalculateChannelDonation'
+  name: 'AgentCalculateChannelDonation',
+  components: { },
+  data() {
+    return {
+      is_loading: false,
+      menuStart: false,
+      menuEnd: false,
+      start_date: null,
+      end_date: null,
+      page: 1,
+      page_size: 20,
+      total_page: 0,
+      items: [],
+      total: {
+        count: 0,
+        totalCan: 0,
+        krw: 0,
+        fee: 0,
+        settlementAmount: 0,
+        tax: 0,
+        depositAmount: 0,
+        agentSettlementAmount: 0
+      },
+      headers: [
+        { text: '닉네임', value: 'creatorNickname', align: 'center', sortable: false },
+        { text: '건수', value: 'count', align: 'center', sortable: false },
+        { text: '총 CAN', value: 'totalCan', align: 'center', sortable: false },
+        { text: '원화', value: 'krw', align: 'center', sortable: false },
+        { text: '수수료', value: 'fee', align: 'center', sortable: false },
+        { text: '정산금액', value: 'settlementAmount', align: 'center', sortable: false },
+        { text: '세금', value: 'tax', align: 'center', sortable: false },
+        { text: '입금액', value: 'depositAmount', align: 'center', sortable: false },
+        { text: '에이전트 정산금액', value: 'agentSettlementAmount', align: 'center', sortable: false },
+      ]
+    }
+  },
+  async created() {
+    const date = new Date();
+    const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
+    const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+
+    const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
+    const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
+
+    this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
+    this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
+
+    await this.fetchItems();
+  },
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+    async onPage() {
+      await this.fetchItems();
+    },
+    async fetchItems() {
+      this.is_loading = true
+      try {
+        const res = await api.getChannelDonationByCreator(this.start_date, this.end_date, this.page, this.page_size)
+        if (res.status === 200 && res.data && res.data.success === true) {
+          const data = res.data.data
+          this.items = data.items || []
+          this.total = data.total || this.total
+          const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
+          this.total_page = totalPage > 0 ? totalPage : 1
+        } else if (res.data && res.data.data) {
+          const data = res.data.data
+          this.items = data.items || []
+          this.total = data.total || this.total
+          const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
+          this.total_page = totalPage > 0 ? totalPage : 1
+        } else {
+          this.notifyError(res.data?.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    }
+  }
 }
 </script>
 
diff --git a/src/views/Agent/Calculate/AgentCalculateCommunityPost.vue b/src/views/Agent/Calculate/AgentCalculateCommunityPost.vue
index 06051f7..a4fe078 100644
--- a/src/views/Agent/Calculate/AgentCalculateCommunityPost.vue
+++ b/src/views/Agent/Calculate/AgentCalculateCommunityPost.vue
@@ -1,13 +1,241 @@
 <template>
-  <v-container>
-    <h2>에이전트 전용 - 크리에이터별 커뮤니티 정산</h2>
-    <p>이 페이지는 추후 구현 예정입니다.</p>
-  </v-container>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>에이전트 전용 - 크리에이터별 커뮤니티 정산</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <!-- 필터 영역 -->
+      <v-row
+        class="mt-2 mb-2"
+        align="center"
+        justify="end"
+      >
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuStart"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="시작일"
+                readonly
+                dense
+                :value="start_date"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="start_date"
+              scrollable
+              @input="menuStart = false"
+            />
+          </v-menu>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuEnd"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="종료일"
+                readonly
+                dense
+                :value="end_date"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="end_date"
+              scrollable
+              @input="menuEnd = false"
+            />
+          </v-menu>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="2"
+        >
+          <v-btn
+            color="#3bb9f1"
+            :loading="is_loading"
+            @click="fetchItems"
+          >
+            조회
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="items"
+            :loading="is_loading"
+            :items-per-page="-1"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template slot="body.prepend">
+              <tr>
+                <td>합계</td>
+                <td>{{ (total.count || 0).toLocaleString() }}</td>
+                <td>{{ (total.totalCan || 0).toLocaleString() }} 캔</td>
+                <td>{{ (total.krw || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.fee || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.settlementAmount || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.tax || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.depositAmount || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.agentSettlementAmount || 0).toLocaleString() }} 원</td>
+              </tr>
+            </template>
+
+            <template v-slot:item.totalCan="{ item }">
+              {{ (item.totalCan || 0).toLocaleString() }} 캔
+            </template>
+            <template v-slot:item.krw="{ item }">
+              {{ (item.krw || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.fee="{ item }">
+              {{ (item.fee || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.settlementAmount="{ item }">
+              {{ (item.settlementAmount || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.tax="{ item }">
+              {{ (item.tax || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.depositAmount="{ item }">
+              {{ (item.depositAmount || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.agentSettlementAmount="{ item }">
+              {{ (item.agentSettlementAmount || 0).toLocaleString() }} 원
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="onPage"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
 </template>
 
 <script>
+import * as api from '@/api/agent_calculate';
+
 export default {
-  name: 'AgentCalculateCommunityPost'
+  name: 'AgentCalculateCommunityPost',
+  components: { },
+  data() {
+    return {
+      is_loading: false,
+      menuStart: false,
+      menuEnd: false,
+      start_date: null,
+      end_date: null,
+      page: 1,
+      page_size: 20,
+      total_page: 0,
+      items: [],
+      total: {
+        count: 0,
+        totalCan: 0,
+        krw: 0,
+        fee: 0,
+        settlementAmount: 0,
+        tax: 0,
+        depositAmount: 0,
+        agentSettlementAmount: 0
+      },
+      headers: [
+        { text: '닉네임', value: 'creatorNickname', align: 'center', sortable: false },
+        { text: '건수', value: 'count', align: 'center', sortable: false },
+        { text: '총 CAN', value: 'totalCan', align: 'center', sortable: false },
+        { text: '원화', value: 'krw', align: 'center', sortable: false },
+        { text: '수수료', value: 'fee', align: 'center', sortable: false },
+        { text: '정산금액', value: 'settlementAmount', align: 'center', sortable: false },
+        { text: '세금', value: 'tax', align: 'center', sortable: false },
+        { text: '입금액', value: 'depositAmount', align: 'center', sortable: false },
+        { text: '에이전트 정산금액', value: 'agentSettlementAmount', align: 'center', sortable: false },
+      ]
+    }
+  },
+  async created() {
+    const date = new Date();
+    const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
+    const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+
+    const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
+    const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
+
+    this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
+    this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
+
+    await this.fetchItems();
+  },
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+    async onPage() {
+      await this.fetchItems();
+    },
+    async fetchItems() {
+      this.is_loading = true
+      try {
+        const res = await api.getCommunityByCreator(this.start_date, this.end_date, this.page, this.page_size)
+        if (res.status === 200 && res.data && res.data.success === true) {
+          const data = res.data.data
+          this.items = data.items || []
+          this.total = data.total || this.total
+          const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
+          this.total_page = totalPage > 0 ? totalPage : 1
+        } else if (res.data && res.data.data) {
+          const data = res.data.data
+          this.items = data.items || []
+          this.total = data.total || this.total
+          const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
+          this.total_page = totalPage > 0 ? totalPage : 1
+        } else {
+          this.notifyError(res.data?.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    }
+  }
 }
 </script>
 
diff --git a/src/views/Agent/Calculate/AgentCalculateContent.vue b/src/views/Agent/Calculate/AgentCalculateContent.vue
index d0d986d..d499483 100644
--- a/src/views/Agent/Calculate/AgentCalculateContent.vue
+++ b/src/views/Agent/Calculate/AgentCalculateContent.vue
@@ -1,13 +1,241 @@
 <template>
-  <v-container>
-    <h2>에이전트 전용 - 크리에이터별 콘텐츠 정산</h2>
-    <p>이 페이지는 추후 구현 예정입니다.</p>
-  </v-container>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>에이전트 전용 - 크리에이터별 콘텐츠 정산</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <!-- 필터 영역 -->
+      <v-row
+        class="mt-2 mb-2"
+        align="center"
+        justify="end"
+      >
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuStart"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="시작일"
+                readonly
+                dense
+                :value="start_date"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="start_date"
+              scrollable
+              @input="menuStart = false"
+            />
+          </v-menu>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuEnd"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="종료일"
+                readonly
+                dense
+                :value="end_date"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="end_date"
+              scrollable
+              @input="menuEnd = false"
+            />
+          </v-menu>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="2"
+        >
+          <v-btn
+            color="#3bb9f1"
+            :loading="is_loading"
+            @click="fetchItems"
+          >
+            조회
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="items"
+            :loading="is_loading"
+            :items-per-page="-1"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template slot="body.prepend">
+              <tr>
+                <td>합계</td>
+                <td>{{ (total.count || 0).toLocaleString() }}</td>
+                <td>{{ (total.totalCan || 0).toLocaleString() }} 캔</td>
+                <td>{{ (total.krw || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.fee || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.settlementAmount || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.tax || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.depositAmount || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.agentSettlementAmount || 0).toLocaleString() }} 원</td>
+              </tr>
+            </template>
+
+            <template v-slot:item.totalCan="{ item }">
+              {{ (item.totalCan || 0).toLocaleString() }} 캔
+            </template>
+            <template v-slot:item.krw="{ item }">
+              {{ (item.krw || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.fee="{ item }">
+              {{ (item.fee || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.settlementAmount="{ item }">
+              {{ (item.settlementAmount || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.tax="{ item }">
+              {{ (item.tax || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.depositAmount="{ item }">
+              {{ (item.depositAmount || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.agentSettlementAmount="{ item }">
+              {{ (item.agentSettlementAmount || 0).toLocaleString() }} 원
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="onPage"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
 </template>
 
 <script>
+import * as api from '@/api/agent_calculate';
+
 export default {
-  name: 'AgentCalculateContent'
+  name: 'AgentCalculateContent',
+  components: { },
+  data() {
+    return {
+      is_loading: false,
+      menuStart: false,
+      menuEnd: false,
+      start_date: null,
+      end_date: null,
+      page: 1,
+      page_size: 20,
+      total_page: 0,
+      items: [],
+      total: {
+        count: 0,
+        totalCan: 0,
+        krw: 0,
+        fee: 0,
+        settlementAmount: 0,
+        tax: 0,
+        depositAmount: 0,
+        agentSettlementAmount: 0
+      },
+      headers: [
+        { text: '닉네임', value: 'creatorNickname', align: 'center', sortable: false },
+        { text: '건수', value: 'count', align: 'center', sortable: false },
+        { text: '총 CAN', value: 'totalCan', align: 'center', sortable: false },
+        { text: '원화', value: 'krw', align: 'center', sortable: false },
+        { text: '수수료', value: 'fee', align: 'center', sortable: false },
+        { text: '정산금액', value: 'settlementAmount', align: 'center', sortable: false },
+        { text: '세금', value: 'tax', align: 'center', sortable: false },
+        { text: '입금액', value: 'depositAmount', align: 'center', sortable: false },
+        { text: '에이전트 정산금액', value: 'agentSettlementAmount', align: 'center', sortable: false },
+      ]
+    }
+  },
+  async created() {
+    const date = new Date();
+    const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
+    const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+
+    const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
+    const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
+
+    this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
+    this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
+
+    await this.fetchItems();
+  },
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+    async onPage() {
+      await this.fetchItems();
+    },
+    async fetchItems() {
+      this.is_loading = true
+      try {
+        const res = await api.getContentByCreator(this.start_date, this.end_date, this.page, this.page_size)
+        if (res.status === 200 && res.data && res.data.success === true) {
+          const data = res.data.data
+          this.items = data.items || []
+          this.total = data.total || this.total
+          const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
+          this.total_page = totalPage > 0 ? totalPage : 1
+        } else if (res.data && res.data.data) {
+          const data = res.data.data
+          this.items = data.items || []
+          this.total = data.total || this.total
+          const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
+          this.total_page = totalPage > 0 ? totalPage : 1
+        } else {
+          this.notifyError(res.data?.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    }
+  }
 }
 </script>
 
diff --git a/src/views/Agent/Calculate/AgentCalculateContentDonation.vue b/src/views/Agent/Calculate/AgentCalculateContentDonation.vue
index cea6269..497211e 100644
--- a/src/views/Agent/Calculate/AgentCalculateContentDonation.vue
+++ b/src/views/Agent/Calculate/AgentCalculateContentDonation.vue
@@ -1,13 +1,241 @@
 <template>
-  <v-container>
-    <h2>에이전트 전용 - 크리에이터별 콘텐츠 후원 정산</h2>
-    <p>이 페이지는 추후 구현 예정입니다.</p>
-  </v-container>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>에이전트 전용 - 크리에이터별 콘텐츠 후원 정산</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <!-- 필터 영역 -->
+      <v-row
+        class="mt-2 mb-2"
+        align="center"
+        justify="end"
+      >
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuStart"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="시작일"
+                readonly
+                dense
+                :value="start_date"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="start_date"
+              scrollable
+              @input="menuStart = false"
+            />
+          </v-menu>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuEnd"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="종료일"
+                readonly
+                dense
+                :value="end_date"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="end_date"
+              scrollable
+              @input="menuEnd = false"
+            />
+          </v-menu>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="2"
+        >
+          <v-btn
+            color="#3bb9f1"
+            :loading="is_loading"
+            @click="fetchItems"
+          >
+            조회
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="items"
+            :loading="is_loading"
+            :items-per-page="-1"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template slot="body.prepend">
+              <tr>
+                <td>합계</td>
+                <td>{{ (total.count || 0).toLocaleString() }}</td>
+                <td>{{ (total.totalCan || 0).toLocaleString() }} 캔</td>
+                <td>{{ (total.krw || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.fee || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.settlementAmount || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.tax || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.depositAmount || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.agentSettlementAmount || 0).toLocaleString() }} 원</td>
+              </tr>
+            </template>
+
+            <template v-slot:item.totalCan="{ item }">
+              {{ (item.totalCan || 0).toLocaleString() }} 캔
+            </template>
+            <template v-slot:item.krw="{ item }">
+              {{ (item.krw || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.fee="{ item }">
+              {{ (item.fee || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.settlementAmount="{ item }">
+              {{ (item.settlementAmount || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.tax="{ item }">
+              {{ (item.tax || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.depositAmount="{ item }">
+              {{ (item.depositAmount || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.agentSettlementAmount="{ item }">
+              {{ (item.agentSettlementAmount || 0).toLocaleString() }} 원
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="onPage"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
 </template>
 
 <script>
+import * as api from '@/api/agent_calculate';
+
 export default {
-  name: 'AgentCalculateContentDonation'
+  name: 'AgentCalculateContentDonation',
+  components: { },
+  data() {
+    return {
+      is_loading: false,
+      menuStart: false,
+      menuEnd: false,
+      start_date: null,
+      end_date: null,
+      page: 1,
+      page_size: 20,
+      total_page: 0,
+      items: [],
+      total: {
+        count: 0,
+        totalCan: 0,
+        krw: 0,
+        fee: 0,
+        settlementAmount: 0,
+        tax: 0,
+        depositAmount: 0,
+        agentSettlementAmount: 0
+      },
+      headers: [
+        { text: '닉네임', value: 'creatorNickname', align: 'center', sortable: false },
+        { text: '건수', value: 'count', align: 'center', sortable: false },
+        { text: '총 CAN', value: 'totalCan', align: 'center', sortable: false },
+        { text: '원화', value: 'krw', align: 'center', sortable: false },
+        { text: '수수료', value: 'fee', align: 'center', sortable: false },
+        { text: '정산금액', value: 'settlementAmount', align: 'center', sortable: false },
+        { text: '세금', value: 'tax', align: 'center', sortable: false },
+        { text: '입금액', value: 'depositAmount', align: 'center', sortable: false },
+        { text: '에이전트 정산금액', value: 'agentSettlementAmount', align: 'center', sortable: false },
+      ]
+    }
+  },
+  async created() {
+    const date = new Date();
+    const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
+    const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+
+    const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
+    const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
+
+    this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
+    this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
+
+    await this.fetchItems();
+  },
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+    async onPage() {
+      await this.fetchItems();
+    },
+    async fetchItems() {
+      this.is_loading = true
+      try {
+        const res = await api.getContentDonationByCreator(this.start_date, this.end_date, this.page, this.page_size)
+        if (res.status === 200 && res.data && res.data.success === true) {
+          const data = res.data.data
+          this.items = data.items || []
+          this.total = data.total || this.total
+          const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
+          this.total_page = totalPage > 0 ? totalPage : 1
+        } else if (res.data && res.data.data) {
+          const data = res.data.data
+          this.items = data.items || []
+          this.total = data.total || this.total
+          const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
+          this.total_page = totalPage > 0 ? totalPage : 1
+        } else {
+          this.notifyError(res.data?.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    }
+  }
 }
 </script>
 
diff --git a/src/views/Agent/Calculate/AgentCalculateLive.vue b/src/views/Agent/Calculate/AgentCalculateLive.vue
index 8ec08dc..46ecabc 100644
--- a/src/views/Agent/Calculate/AgentCalculateLive.vue
+++ b/src/views/Agent/Calculate/AgentCalculateLive.vue
@@ -1,13 +1,241 @@
 <template>
-  <v-container>
-    <h2>에이전트 전용 - 크리에이터별 라이브 정산</h2>
-    <p>이 페이지는 추후 구현 예정입니다.</p>
-  </v-container>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>에이전트 전용 - 크리에이터별 라이브 정산</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <!-- 필터 영역 -->
+      <v-row
+        class="mt-2 mb-2"
+        align="center"
+        justify="end"
+      >
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuStart"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="시작일"
+                readonly
+                dense
+                :value="start_date"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="start_date"
+              scrollable
+              @input="menuStart = false"
+            />
+          </v-menu>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuEnd"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="종료일"
+                readonly
+                dense
+                :value="end_date"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="end_date"
+              scrollable
+              @input="menuEnd = false"
+            />
+          </v-menu>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="2"
+        >
+          <v-btn
+            color="#3bb9f1"
+            :loading="is_loading"
+            @click="fetchItems"
+          >
+            조회
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="items"
+            :loading="is_loading"
+            :items-per-page="-1"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template slot="body.prepend">
+              <tr>
+                <td>합계</td>
+                <td>{{ (total.count || 0).toLocaleString() }}</td>
+                <td>{{ (total.totalCan || 0).toLocaleString() }} 캔</td>
+                <td>{{ (total.krw || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.fee || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.settlementAmount || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.tax || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.depositAmount || 0).toLocaleString() }} 원</td>
+                <td>{{ (total.agentSettlementAmount || 0).toLocaleString() }} 원</td>
+              </tr>
+            </template>
+
+            <template v-slot:item.totalCan="{ item }">
+              {{ (item.totalCan || 0).toLocaleString() }} 캔
+            </template>
+            <template v-slot:item.krw="{ item }">
+              {{ (item.krw || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.fee="{ item }">
+              {{ (item.fee || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.settlementAmount="{ item }">
+              {{ (item.settlementAmount || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.tax="{ item }">
+              {{ (item.tax || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.depositAmount="{ item }">
+              {{ (item.depositAmount || 0).toLocaleString() }} 원
+            </template>
+            <template v-slot:item.agentSettlementAmount="{ item }">
+              {{ (item.agentSettlementAmount || 0).toLocaleString() }} 원
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="onPage"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
 </template>
 
 <script>
+import * as api from '@/api/agent_calculate';
+
 export default {
-  name: 'AgentCalculateLive'
+  name: 'AgentCalculateLive',
+  components: { },
+  data() {
+    return {
+      is_loading: false,
+      menuStart: false,
+      menuEnd: false,
+      start_date: null,
+      end_date: null,
+      page: 1,
+      page_size: 20,
+      total_page: 0,
+      items: [],
+      total: {
+        count: 0,
+        totalCan: 0,
+        krw: 0,
+        fee: 0,
+        settlementAmount: 0,
+        tax: 0,
+        depositAmount: 0,
+        agentSettlementAmount: 0
+      },
+      headers: [
+        { text: '닉네임', value: 'creatorNickname', align: 'center', sortable: false },
+        { text: '건수', value: 'count', align: 'center', sortable: false },
+        { text: '총 CAN', value: 'totalCan', align: 'center', sortable: false },
+        { text: '원화', value: 'krw', align: 'center', sortable: false },
+        { text: '수수료', value: 'fee', align: 'center', sortable: false },
+        { text: '정산금액', value: 'settlementAmount', align: 'center', sortable: false },
+        { text: '세금', value: 'tax', align: 'center', sortable: false },
+        { text: '입금액', value: 'depositAmount', align: 'center', sortable: false },
+        { text: '에이전트 정산금액', value: 'agentSettlementAmount', align: 'center', sortable: false },
+      ]
+    }
+  },
+  async created() {
+    const date = new Date();
+    const firstDate = new Date(date.getFullYear(), date.getMonth(), 1);
+    const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+
+    const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
+    const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
+
+    this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
+    this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
+
+    await this.fetchItems();
+  },
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+    async onPage() {
+      await this.fetchItems();
+    },
+    async fetchItems() {
+      this.is_loading = true
+      try {
+        const res = await api.getLiveByCreator(this.start_date, this.end_date, this.page, this.page_size)
+        if (res.status === 200 && res.data && res.data.success === true) {
+          const data = res.data.data
+          this.items = data.items || []
+          this.total = data.total || this.total
+          const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
+          this.total_page = totalPage > 0 ? totalPage : 1
+        } else if (res.data && res.data.data) { // 일부 API는 success 없이 data만 줄 수도 있음
+          const data = res.data.data
+          this.items = data.items || []
+          this.total = data.total || this.total
+          const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
+          this.total_page = totalPage > 0 ? totalPage : 1
+        } else {
+          this.notifyError(res.data?.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    }
+  }
 }
 </script>