Merge pull request '에이전트 기능' (#38) from test into main

Reviewed-on: #38

docs/20260413_에이전트소속크리에이터목록.md

@@ -0,0 +1,90 @@
+# 에이전트 소속 크리에이터 목록 페이지 구현 계획
+
+- [ ] API 호출 함수 추가 (`src/api/agent_calculate.js`)
+- [ ] 페이지 테이블 구현 (`src/views/Agent/Creators.vue`)
+- [ ] 서버 페이징 연동 (page, size, totalCount)
+- [ ] 기본 로딩/에러 처리
+- [ ] 테이블 화면 중앙 정렬 및 내용 크기 기반 축소 표시 (`src/views/Agent/Creators.vue`)
+ - [ ] 프로필 이미지/테이블 2배 확대 (`src/views/Agent/Creators.vue`)
+ - [ ] v-pagination으로 커스텀 페이징 적용 (`src/views/Agent/Creators.vue`)
+  - [ ] 순번 컬럼 추가(역순, 페이지 연속) (`src/views/Agent/Creators.vue`)
+
+## 검증 기록
+
+### 1차 구현
+- 무엇을: 에이전트 소속 크리에이터 목록 조회 및 테이블 렌더링, 페이지 전환 확인
+- 왜: 에이전트가 담당 크리에이터 정보를 빠르게 확인할 수 있도록 하기 위함
+- 어떻게:
+  - 애플리케이션 실행 후 좌측 메뉴에서 해당 페이지 진입
+  - 1페이지 로드 시 닉네임/프로필 이미지 표시 여부 확인 (성공/실패)
+  - 페이지네이션에서 2페이지로 이동하여 데이터 갱신 확인 (성공/실패)
+  - 실패 시 개발자 도구 네트워크 탭으로 요청/응답 확인 후 사유 기록
+
+### 2차 수정 (UI 정렬/크기)
+- 무엇을: 테이블을 화면 가득이 아닌 가운데 정렬하고, 내용 크기에 맞춰 축소되도록 스타일 조정
+- 왜: 가독성 향상 및 과도한 공백 제거 요청 반영
+- 어떻게:
+  - `src/views/Agent/Creators.vue`에서 `<v-row justify="center">`, `<v-col cols="12" sm="10" md="8" lg="6">`로 컨테이너 폭 제한
+  - `v-data-table`에 `shrink-table` 클래스 적용하여 `display: inline-table; width: auto;`로 내용 기반 너비 설정
+  - 검증: 브라우저에서 페이지 진입 후 테이블이 가운데 정렬되고 좌우로 과도하게 늘어나지 않는지 확인 (성공/실패)
+
+### 3차 수정 (데이터 미표시 해결 + v-pagination 적용)
+- 무엇을: API 응답 파싱 보강으로 목록 데이터 미표시 이슈 해결, `v-pagination` 기반 페이징 적용
+- 왜: 일부 API가 `{ success, data }` 래핑 형태로 응답하여 기존 파싱 로직에서 `items`가 세팅되지 않던 문제 해결 및 요구사항에 따른 커스텀 페이징 적용
+- 어떻게:
+  - `src/views/Agent/Creators.vue`
+    - `fetchItems`에서 `success === true && data`, `data` 단독, 래핑 없음까지 모두 대응하도록 분기처리 추가
+    - `total_page = ceil(totalCount / itemsPerPage)` 계산 및 `v-pagination` 추가(@input → `fetchItems`)
+    - `page` watcher 제거로 중복 호출 방지, 오류 시 `notifyError`로 안내
+  - 검증(수동):
+    - 페이지 진입 시 1페이지 데이터가 테이블에 표시되는지 확인 (성공/실패)
+    - `v-pagination`에서 2페이지 클릭 시 새 데이터로 갱신 및 로딩 인디케이터 동작 확인 (성공/실패)
+    - 네트워크 탭에서 `/agent/calculate/creator/list?page=1&size=20` 요청/응답 확인 (성공/실패)
+
+### 4차 수정 (프로필 이미지 및 테이블 크기 2배)
+- 무엇을: 프로필 이미지 아바타 크기를 36 → 72로 2배 확대, 테이블 표시 크기를 2배로 스케일링
+- 왜: 목록 가독성 향상 및 요구사항(2배 확대) 반영
+- 어떻게:
+  - `src/views/Agent/Creators.vue`
+    - `<v-avatar size="72">`로 변경
+    - `.shrink-table`에 `transform: scale(2); transform-origin: top center;` 추가하여 렌더 크기 2배 확대
+  - 검증(수동):
+    - 페이지 진입 시 아바타 직경이 기존 대비 2배로 커졌는지 확인 (성공/실패)
+    - 테이블 텍스트/셀 간격 등 전체 렌더가 2배로 커져 중앙에 표시되는지 확인 (성공/실패)
+
+### 5차 수정 (아이템 패딩 추가 + 헤더 가운데 정렬)
+- 무엇을: 테이블 아이템(셀) 패딩을 10px 추가하여 행 간격 확보, 헤더 텍스트 가운데 정렬
+- 왜: 아이템 사이 공간이 없어 답답하다는 피드백 반영 및 가독성 향상
+- 어떻게:
+  - `src/views/Agent/Creators.vue`
+    - headers `align: 'center'`로 업데이트(프로필/닉네임)
+    - `.shrink-table ::v-deep .v-data-table__wrapper table tbody tr > td { padding: 10px; }` 추가
+    - 보조로 `.shrink-table ::v-deep thead th { text-align: center !important; }` 추가
+  - 검증(수동):
+    - 테이블 행의 세로/가로 여백이 이전 대비 확장되었는지 확인 (성공/실패)
+    - 헤더 텍스트가 가운데 정렬로 표시되는지 확인 (성공/실패)
+
+### 6차 수정 (셀 패딩 미적용 해결 + 테이블 너비 50%)
+- 무엇을: 셀(td) 패딩이 적용되지 않던 문제를 deep 선택자/우선순위로 해결, 테이블 너비를 내용 기반(auto)에서 화면 50%로 변경
+- 왜: Vuetify 기본 스타일 우선 적용으로 padding 반영 실패, 내용 기반 너비가 너무 작아 가독성 저하
+- 어떻게:
+  - `src/views/Agent/Creators.vue`
+    - `.shrink-table ::v-deep .v-data-table__wrapper > table > tbody > tr > td { padding: 10px !important; }`로 선택자 보강 및 `!important` 적용
+    - `.shrink-table { display: block; width: 50vw; }`로 변경하여 중앙 정렬 상태에서 화면의 50% 너비 유지
+    - 기존 `transform: scale(2)`는 제거하여 너비 계산 왜곡 방지(아바타 72px 확대는 유지)
+  - 검증(수동):
+    - 각 셀에 10px 패딩이 실제로 적용되는지 확인(개발자 도구로 td 컴퓨티드 스타일 확인) (성공/실패)
+    - 브라우저 폭 기준 테이블이 약 50% 너비를 차지하고 중앙에 정렬되는지 확인 (성공/실패)
+    - 창 크기를 조절해도 50% 비율이 유지되는지 확인 (성공/실패)
+
+### 7차 수정 (순번 컬럼 역순/페이지 연속)
+- 무엇을: 테이블 맨 앞에 순번 컬럼을 추가하고 전체 인원 기준 역순으로 번호를 표시. 페이지가 넘어가도 연속되도록 구현
+- 왜: 많은 인원 목록에서 상대적 위치를 직관적으로 파악하기 위함
+- 어떻게:
+  - `src/views/Agent/Creators.vue`
+    - headers에 `{ text: '순번', value: 'no', align: 'center', sortable: false }` 추가
+    - `fetchItems` 완료 후 `no = totalCount - ((page - 1) * itemsPerPage) - index` 로 각 아이템에 번호 주입
+  - 검증(수동):
+    - 1페이지에서 첫 행의 순번이 `totalCount`와 동일하고, 아래로 갈수록 1씩 감소하는지 확인 (성공/실패)
+    - 2페이지로 이동 시 이전 페이지 마지막 다음 번호가 이어서 표시되는지 확인 (성공/실패)
+    - 마지막 페이지 마지막 행의 번호가 1인지 확인 (성공/실패)

docs/20260413_에이전트용메뉴추가.md

@@ -0,0 +1,25 @@
+# 에이전트용 메뉴 추가 (기본 메뉴 생성)
+
+- [x] SideMenu에서 getMenus 결과가 빈 배열일 때 기본 메뉴로 대체한다.
+  - [x] 기본 메뉴 항목: `{ title: '소속 크리에이터', route: '/agent/creators' }`
+- [x] 라우터에 `/agent/creators` 경로를 추가한다. (DefaultLayout 하위)
+- [x] 페이지 컴포넌트를 생성한다. (`src/views/Agent/Creators.vue`), 내용은 placeholder로 둔다.
+
+## 배경/의도
+- 에이전트용 메뉴가 아직 백엔드에 없어서 메뉴 조회 시 빈 배열이 내려올 가능성이 높다.
+- 빈 배열일 때는 로그아웃 처리 대신 기본 단독 메뉴 ‘소속 크리에이터’를 제공해 접근할 수 있도록 한다.
+
+## 구현 체크리스트
+- [x] `SideMenu.vue`의 `getMenus()`에서 성공(200/success)이고 `data.length === 0`이면 기본 메뉴로 할당
+- [x] 기존처럼 성공 + 데이터 존재 시에는 응답 데이터를 그대로 사용
+- [x] 라우터 `index.js`에 `/agent/creators` children route 추가
+- [x] `src/views/Agent/Creators.vue` 생성 및 라우터 연동
+
+## 검증 기록
+### 1차 구현
+- 무엇을: 빈 메뉴 응답 시 기본 메뉴 노출 및 라우팅 동작 확인
+- 왜: 에이전트용 메뉴가 없어도 최소 탐색 경로를 제공하기 위함
+- 어떻게:
+  - 가정: API 응답이 `{ success: true, data: [] }`
+  - 기대: 사이드 메뉴에 ‘소속 크리에이터’ 단일 항목 표시, 클릭 시 `/agent/creators`로 이동하여 placeholder 화면 노출
+  - 결과: 로컬에서 메뉴가 빈 배열일 때 사이드 메뉴에 ‘소속 크리에이터’가 표시되고 클릭 시 `/agent/creators`로 이동하여 placeholder 화면이 노출됨을 확인함(수동 확인)

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 응답 시 데이터 표시 예상(수동 점검 예정)
+
+## 정정
+- 현재 없음. 추후 백엔드 스펙 변경 시 쿼리/필드명 반영 예정.

docs/20260413_정산메뉴에이전트전용분리.md

@@ -0,0 +1,29 @@
+# 정산 메뉴 에이전트 전용 분리 계획
+
+## 배경/목표
+- 기존 `/calculate/*` 경로는 크리에이터 전용 라우트/페이지다.
+- 빈 메뉴일 때 기본으로 추가한 정산 메뉴 5종은 에이전트 전용으로 분리되어야 한다.
+- 에이전트 전용 라우트를 `/agent/calculate/*` 네임스페이스로 제공하고, 페이지는 추후 구현을 위해 플레이스홀더로 생성한다.
+
+## 구현 체크리스트
+- [x] 라우터에 에이전트 전용 경로 추가 (`/agent/calculate/*`)
+  - [x] `/agent/calculate/live`
+  - [x] `/agent/calculate/content-by-date`
+  - [x] `/agent/calculate/content-donation-by-date`
+  - [x] `/agent/calculate/community-post`
+  - [x] `/agent/calculate/channel-donation`
+- [x] 에이전트 전용 뷰 컴포넌트(플레이스홀더) 생성: `src/views/Agent/Calculate/*`
+- [x] 사이드 메뉴 기본 항목이 에이전트 전용 경로를 가리키도록 수정
+- [x] 기본 동작 수동 검증 (라우팅/메뉴 이동 확인)
+
+## 범위/제한
+- API 연동은 포함하지 않음. 화면은 "추후 구현" 플레이스홀더로 둔다.
+- 기존 크리에이터 전용 라우트/화면은 변경하지 않는다.
+
+## 검증 기록
+### 1차 구현
+- 무엇을: 에이전트 전용 라우트 5종 추가 및 사이드 메뉴 경로 교체, 플레이스홀더 화면 생성
+- 왜: 크리에이터 전용 경로와 구분하여 접근/권한/콘텍스트 분리를 명확히 하기 위함
+- 어떻게:
+  - 라우팅 수동 점검: 각 메뉴 클릭 시 `/agent/calculate/*` 로 이동되는지 확인
+  - 결과: 성공(플레이스홀더 화면 타이틀 확인)

src/api/agent_calculate.js

@@ -0,0 +1,53 @@
+import Vue from 'vue';
+
+// 에이전트 전용 정산 API
+
+async function getAgentAssignedCreatorList(page, size) {
+  return Vue.axios.get(
+    '/agent/calculate/creator/list?page=' + (page - 1) + '&size=' + size
+  );
+}
+
+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 {
+  getAgentAssignedCreatorList,
+  getLiveByCreator,
+  getContentByCreator,
+  getContentDonationByCreator,
+  getCommunityByCreator,
+  getChannelDonationByCreator
+}

src/components/SideMenu.vue

@@ -92,8 +92,21 @@ export default {
       this.isLoading = true
       try {
         let res = await api.getMenus();
-        if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
+        if (res.status === 200 && res.data.success === true) {
+          if (res.data.data && res.data.data.length > 0) {
             this.items = res.data.data
+          } else {
+            // 빈 메뉴일 경우 기본 단독 메뉴를 제공한다.
+            // 요구사항: 정산 관련 기본 메뉴를 추가한다.
+            this.items = [
+              { title: '소속 크리에이터', route: '/agent/creators' },
+              { title: '크리에이터별 라이브 정산', route: '/agent/calculate/live' },
+              { title: '크리에이터별 콘텐츠 정산', route: '/agent/calculate/content-by-date' },
+              { title: '크리에이터별 콘텐츠 후원 정산', route: '/agent/calculate/content-donation-by-date' },
+              { title: '크리에이터별 커뮤니티 정산', route: '/agent/calculate/community-post' },
+              { title: '크리에이터별 채널 후원 정산', route: '/agent/calculate/channel-donation' },
+            ]
+          }
         } else {
           this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
           this.logoutWithoutNetwork();

src/router/index.js

@@ -20,6 +20,37 @@ const routes = [
                 name: 'ContentList',
                 component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentList.vue')
             },
+            {
+                path: '/agent/creators',
+                name: 'AgentCreators',
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/Creators.vue')
+            },
+            // Agent-only calculate routes (placeholders)
+            {
+                path: '/agent/calculate/live',
+                name: 'AgentCalculateLive',
+                component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateLive.vue')
+            },
+            {
+                path: '/agent/calculate/content-by-date',
+                name: 'AgentCalculateContent',
+                component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateContent.vue')
+            },
+            {
+                path: '/agent/calculate/content-donation-by-date',
+                name: 'AgentCalculateContentDonation',
+                component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateContentDonation.vue')
+            },
+            {
+                path: '/agent/calculate/community-post',
+                name: 'AgentCalculateCommunityPost',
+                component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateCommunityPost.vue')
+            },
+            {
+                path: '/agent/calculate/channel-donation',
+                name: 'AgentCalculateChannelDonation',
+                component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateChannelDonation.vue')
+            },
             {
                 path: '/content/category/list',
                 name: 'ContentCategoryList',

src/views/Agent/Calculate/AgentCalculateChannelDonation.vue

@@ -0,0 +1,243 @@
+<template>
+  <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',
+  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>
+
+<style scoped>
+</style>

src/views/Agent/Calculate/AgentCalculateCommunityPost.vue

@@ -0,0 +1,243 @@
+<template>
+  <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',
+  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>
+
+<style scoped>
+</style>

src/views/Agent/Calculate/AgentCalculateContent.vue

@@ -0,0 +1,243 @@
+<template>
+  <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',
+  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>
+
+<style scoped>
+</style>

src/views/Agent/Calculate/AgentCalculateContentDonation.vue

@@ -0,0 +1,243 @@
+<template>
+  <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',
+  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>
+
+<style scoped>
+</style>

src/views/Agent/Calculate/AgentCalculateLive.vue

@@ -0,0 +1,243 @@
+<template>
+  <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',
+  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>
+
+<style scoped>
+</style>

src/views/Agent/Creators.vue

@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>소속 크리에이터 - {{ totalCount }}명</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row justify="center">
+        <v-col
+          cols="12"
+          sm="10"
+          md="8"
+          lg="6"
+        >
+          <div class="table-center">
+            <v-data-table
+              :headers="headers"
+              :items="items"
+              :loading="is_loading"
+              :items-per-page="-1"
+              class="elevation-1 shrink-table"
+              hide-default-footer
+            >
+              <template v-slot:item.profileImageUrl="{ item }">
+                <v-avatar size="72">
+                  <v-img
+                    :src="item.profileImageUrl"
+                    alt="profile"
+                  />
+                </v-avatar>
+              </template>
+            </v-data-table>
+          </div>
+        </v-col>
+      </v-row>
+
+      <!-- 커스텀 페이지네이션 -->
+      <v-row
+        class="text-center"
+        justify="center"
+      >
+        <v-col
+          cols="12"
+          sm="10"
+          md="8"
+          lg="6"
+        >
+          <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: 'AgentCreators',
+  data() {
+    return {
+      headers: [
+        { text: '순번', value: 'no', align: 'center', sortable: false },
+        { text: '프로필', value: 'profileImageUrl', align: 'center', sortable: false },
+        { text: '닉네임', value: 'creatorNickname', align: 'center' }
+      ],
+      items: [],
+      totalCount: 0,
+      page: 1,
+      itemsPerPage: 20,
+      total_page: 1,
+      is_loading: false
+    };
+  },
+  watch: {
+    itemsPerPage() {
+      // 페이지 크기 변경 시 첫 페이지부터 다시 조회
+      this.page = 1;
+      this.fetchItems();
+    }
+  },
+  mounted() {
+    this.fetchItems();
+  },
+  methods: {
+    notifyError(message) {
+      // 전역 dialog 플러그인이 없다면 콘솔로 폴백
+      if (this.$dialog && this.$dialog.notify && this.$dialog.notify.error) {
+        this.$dialog.notify.error(message)
+      } else {
+        // eslint-disable-next-line no-console
+        console.error(message)
+      }
+    },
+    async onPage() {
+      await this.fetchItems();
+    },
+    async fetchItems() {
+      try {
+        this.is_loading = true;
+        const res = await api.getAgentAssignedCreatorList(this.page, this.itemsPerPage);
+        // 성공 응답이 { success: true, data: {...} } 혹은 { data: {...} } 형태 모두 대응
+        let payload = null;
+        if (res && res.status === 200) {
+          if (res.data && res.data.success === true && res.data.data) {
+            payload = res.data.data;
+          } else if (res.data && res.data.data) {
+            payload = res.data.data;
+          } else if (res.data && (res.data.items || res.data.totalCount !== undefined)) {
+            // wrapping 없이 바로 내려오는 경우
+            payload = res.data;
+          }
+        }
+
+        if (!payload) {
+          this.notifyError(res?.data?.message || '목록을 불러오지 못했습니다. 다시 시도해 주세요.');
+          this.items = [];
+          this.totalCount = 0;
+          this.total_page = 1;
+          return;
+        }
+
+        this.totalCount = Number(payload.totalCount || 0);
+        this.items = Array.isArray(payload.items) ? payload.items : [];
+        const totalPage = Math.ceil(this.totalCount / this.itemsPerPage);
+        this.total_page = totalPage > 0 ? totalPage : 1;
+
+        // 페이지 연속 역순 번호 부여 (전체 totalCount 기준)
+        const startNo = this.totalCount - ((this.page - 1) * this.itemsPerPage);
+        this.items = this.items.map((it, idx) => ({
+          ...it,
+          no: startNo - idx
+        }));
+      } catch (e) {
+        // 최소한의 에러 로깅
+        // eslint-disable-next-line no-console
+        console.error('[AgentCreators] 목록 조회 실패', e);
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.');
+      } finally {
+        this.is_loading = false;
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 테이블을 화면 가운데 정렬하고, 내용 너비에 맞춰 축소 표시 */
+.table-center {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.shrink-table {
+  display: block;
+  /* 화면의 50% 너비로 고정 표시 */
+  width: 50vw;
+}
+
+/* 아이템(셀) 패딩 추가로 행 간격/여백 확보 (Vuetify 기본값보다 우선 적용) */
+.shrink-table ::v-deep .v-data-table__wrapper > table > tbody > tr > td {
+  padding: 10px !important;
+}
+
+/* 헤더 텍스트 가운데 정렬 (헤더 align 설정 보조) */
+.shrink-table ::v-deep thead th {
+  text-align: center !important;
+}
+</style>