From 8ce660d45eac008723246255a8d237e49722a799 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Mon, 13 Apr 2026 17:04:28 +0900
Subject: [PATCH 1/6] =?UTF-8?q?feat(menu):=20=EB=B9=88=20=EB=A9=94?=
 =?UTF-8?q?=EB=89=B4=EC=9D=BC=20=EB=95=8C=20=EA=B8=B0=EB=B3=B8=20'?=
 =?UTF-8?q?=EC=86=8C=EC=86=8D=20=ED=81=AC=EB=A6=AC=EC=97=90=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0'=20=EB=A9=94=EB=89=B4=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=9D=BC=EC=9A=B0=ED=8A=B8/=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/20260413_에이전트용메뉴추가.md | 25 +++++++++++++++++++++++++
 src/components/SideMenu.vue         | 11 +++++++++--
 src/router/index.js                 |  5 +++++
 src/views/Agent/Creators.vue        | 21 +++++++++++++++++++++
 4 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 docs/20260413_에이전트용메뉴추가.md
 create mode 100644 src/views/Agent/Creators.vue

diff --git a/docs/20260413_에이전트용메뉴추가.md b/docs/20260413_에이전트용메뉴추가.md
new file mode 100644
index 0000000..b8f926d
--- /dev/null
+++ b/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 화면이 노출됨을 확인함(수동 확인)
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index ba7ea0a..f6c0def 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -92,8 +92,15 @@ export default {
       this.isLoading = true
       try {
         let res = await api.getMenus();
-        if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
-          this.items = res.data.data
+        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' }
+            ]
+          }
         } else {
           this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
           this.logoutWithoutNetwork();
diff --git a/src/router/index.js b/src/router/index.js
index b5444eb..386007f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -20,6 +20,11 @@ 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')
+            },
             {
                 path: '/content/category/list',
                 name: 'ContentCategoryList',
diff --git a/src/views/Agent/Creators.vue b/src/views/Agent/Creators.vue
new file mode 100644
index 0000000..36b794a
--- /dev/null
+++ b/src/views/Agent/Creators.vue
@@ -0,0 +1,21 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col>
+        <h2>소속 크리에이터</h2>
+        <p class="mt-2 grey--text">
+          에이전트용 페이지입니다. 상세 내용은 추후에 추가될 예정입니다.
+        </p>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'AgentCreators'
+}
+</script>
+
+<style scoped>
+</style>
-- 
2.49.1


From 6c8c5fb6601ea5225fa076560c5e07dae717487c Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Mon, 13 Apr 2026 18:18:54 +0900
Subject: [PATCH 2/6] =?UTF-8?q?feat(agent-calc):=20=EC=97=90=EC=9D=B4?=
 =?UTF-8?q?=EC=A0=84=ED=8A=B8=20=EC=A0=84=EC=9A=A9=20=EC=A0=95=EC=82=B0=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4/=EB=9D=BC=EC=9A=B0=ED=8A=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EA=B8=B0=EB=B3=B8=20=EB=A9=94=EB=89=B4?=
 =?UTF-8?q?=20=EA=B2=BD=EB=A1=9C=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/20260413_정산메뉴에이전트전용분리.md     | 29 +++++++++++++++++++
 src/components/SideMenu.vue                   |  8 ++++-
 src/router/index.js                           | 26 +++++++++++++++++
 .../AgentCalculateChannelDonation.vue         | 15 ++++++++++
 .../Calculate/AgentCalculateCommunityPost.vue | 15 ++++++++++
 .../Agent/Calculate/AgentCalculateContent.vue | 15 ++++++++++
 .../AgentCalculateContentDonation.vue         | 15 ++++++++++
 .../Agent/Calculate/AgentCalculateLive.vue    | 15 ++++++++++
 8 files changed, 137 insertions(+), 1 deletion(-)
 create mode 100644 docs/20260413_정산메뉴에이전트전용분리.md
 create mode 100644 src/views/Agent/Calculate/AgentCalculateChannelDonation.vue
 create mode 100644 src/views/Agent/Calculate/AgentCalculateCommunityPost.vue
 create mode 100644 src/views/Agent/Calculate/AgentCalculateContent.vue
 create mode 100644 src/views/Agent/Calculate/AgentCalculateContentDonation.vue
 create mode 100644 src/views/Agent/Calculate/AgentCalculateLive.vue

diff --git a/docs/20260413_정산메뉴에이전트전용분리.md b/docs/20260413_정산메뉴에이전트전용분리.md
new file mode 100644
index 0000000..aaba50b
--- /dev/null
+++ b/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/*` 로 이동되는지 확인
+  - 결과: 성공(플레이스홀더 화면 타이틀 확인)
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index f6c0def..fa2b1e1 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -97,8 +97,14 @@ export default {
             this.items = res.data.data
           } else {
             // 빈 메뉴일 경우 기본 단독 메뉴를 제공한다.
+            // 요구사항: 정산 관련 기본 메뉴를 추가한다.
             this.items = [
-              { title: '소속 크리에이터', route: '/agent/creators' }
+              { 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 {
diff --git a/src/router/index.js b/src/router/index.js
index 386007f..1fa7b8e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,6 +25,32 @@ const routes = [
                 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',
diff --git a/src/views/Agent/Calculate/AgentCalculateChannelDonation.vue b/src/views/Agent/Calculate/AgentCalculateChannelDonation.vue
new file mode 100644
index 0000000..20e4c91
--- /dev/null
+++ b/src/views/Agent/Calculate/AgentCalculateChannelDonation.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    <h2>에이전트 전용 - 크리에이터별 채널 후원 정산</h2>
+    <p>이 페이지는 추후 구현 예정입니다.</p>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'AgentCalculateChannelDonation'
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/Calculate/AgentCalculateCommunityPost.vue b/src/views/Agent/Calculate/AgentCalculateCommunityPost.vue
new file mode 100644
index 0000000..06051f7
--- /dev/null
+++ b/src/views/Agent/Calculate/AgentCalculateCommunityPost.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    <h2>에이전트 전용 - 크리에이터별 커뮤니티 정산</h2>
+    <p>이 페이지는 추후 구현 예정입니다.</p>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'AgentCalculateCommunityPost'
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/Calculate/AgentCalculateContent.vue b/src/views/Agent/Calculate/AgentCalculateContent.vue
new file mode 100644
index 0000000..d0d986d
--- /dev/null
+++ b/src/views/Agent/Calculate/AgentCalculateContent.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    <h2>에이전트 전용 - 크리에이터별 콘텐츠 정산</h2>
+    <p>이 페이지는 추후 구현 예정입니다.</p>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'AgentCalculateContent'
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/Calculate/AgentCalculateContentDonation.vue b/src/views/Agent/Calculate/AgentCalculateContentDonation.vue
new file mode 100644
index 0000000..cea6269
--- /dev/null
+++ b/src/views/Agent/Calculate/AgentCalculateContentDonation.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    <h2>에이전트 전용 - 크리에이터별 콘텐츠 후원 정산</h2>
+    <p>이 페이지는 추후 구현 예정입니다.</p>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'AgentCalculateContentDonation'
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/Calculate/AgentCalculateLive.vue b/src/views/Agent/Calculate/AgentCalculateLive.vue
new file mode 100644
index 0000000..8ec08dc
--- /dev/null
+++ b/src/views/Agent/Calculate/AgentCalculateLive.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-container>
+    <h2>에이전트 전용 - 크리에이터별 라이브 정산</h2>
+    <p>이 페이지는 추후 구현 예정입니다.</p>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'AgentCalculateLive'
+}
+</script>
+
+<style scoped>
+</style>
-- 
2.49.1


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 3/6] =?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>
 
-- 
2.49.1


From 5533b0c02a77c61012a216fb5c7edfcba4b0795d Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Mon, 13 Apr 2026 19:16:15 +0900
Subject: [PATCH 4/6] =?UTF-8?q?feat(agent-creator):=20=EC=97=90=EC=9D=B4?=
 =?UTF-8?q?=EC=A0=84=ED=8A=B8=20=EC=86=8C=EC=86=8D=20=ED=81=AC=EB=A6=AC?=
 =?UTF-8?q?=EC=97=90=EC=9D=B4=ED=84=B0=20=EB=AA=A9=EB=A1=9D=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/20260413_에이전트소속크리에이터목록.md |  77 +++++++++
 src/api/agent_calculate.js                  |   7 +
 src/views/Agent/Creators.vue                | 172 ++++++++++++++++++--
 3 files changed, 245 insertions(+), 11 deletions(-)
 create mode 100644 docs/20260413_에이전트소속크리에이터목록.md

diff --git a/docs/20260413_에이전트소속크리에이터목록.md b/docs/20260413_에이전트소속크리에이터목록.md
new file mode 100644
index 0000000..9d76ecc
--- /dev/null
+++ b/docs/20260413_에이전트소속크리에이터목록.md
@@ -0,0 +1,77 @@
+# 에이전트 소속 크리에이터 목록 페이지 구현 계획
+
+- [ ] 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`)
+
+## 검증 기록
+
+### 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% 비율이 유지되는지 확인 (성공/실패)
diff --git a/src/api/agent_calculate.js b/src/api/agent_calculate.js
index 7e9f526..62e5a83 100644
--- a/src/api/agent_calculate.js
+++ b/src/api/agent_calculate.js
@@ -2,6 +2,12 @@ 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 +
@@ -38,6 +44,7 @@ async function getChannelDonationByCreator(startDate, endDate, page, size) {
 }
 
 export {
+  getAgentAssignedCreatorList,
   getLiveByCreator,
   getContentByCreator,
   getContentDonationByCreator,
diff --git a/src/views/Agent/Creators.vue b/src/views/Agent/Creators.vue
index 36b794a..bc3176a 100644
--- a/src/views/Agent/Creators.vue
+++ b/src/views/Agent/Creators.vue
@@ -1,21 +1,171 @@
 <template>
-  <v-container fluid>
-    <v-row>
-      <v-col>
-        <h2>소속 크리에이터</h2>
-        <p class="mt-2 grey--text">
-          에이전트용 페이지입니다. 상세 내용은 추후에 추가될 예정입니다.
-        </p>
-      </v-col>
-    </v-row>
-  </v-container>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>에이전트 전용 - 소속 크리에이터</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'
+  name: 'AgentCreators',
+  data() {
+    return {
+      headers: [
+        { 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;
+      } 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>
-- 
2.49.1


From cac14832c29a031f15811db226eb1d61bc9200ad Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Mon, 13 Apr 2026 19:17:53 +0900
Subject: [PATCH 5/6] =?UTF-8?q?feat(agent):=20=ED=88=B4=EB=B0=94=20?=
 =?UTF-8?q?=EC=A0=9C=EB=AA=A9=EC=97=90=EC=84=9C=20"=EC=97=90=EC=9D=B4?=
 =?UTF-8?q?=EC=A0=84=ED=8A=B8=20=EC=A0=84=EC=9A=A9=20-=20"=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Agent/Calculate/AgentCalculateChannelDonation.vue | 2 +-
 src/views/Agent/Calculate/AgentCalculateCommunityPost.vue   | 2 +-
 src/views/Agent/Calculate/AgentCalculateContent.vue         | 2 +-
 src/views/Agent/Calculate/AgentCalculateContentDonation.vue | 2 +-
 src/views/Agent/Calculate/AgentCalculateLive.vue            | 2 +-
 src/views/Agent/Creators.vue                                | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/Agent/Calculate/AgentCalculateChannelDonation.vue b/src/views/Agent/Calculate/AgentCalculateChannelDonation.vue
index 6fcf00a..0ecf92f 100644
--- a/src/views/Agent/Calculate/AgentCalculateChannelDonation.vue
+++ b/src/views/Agent/Calculate/AgentCalculateChannelDonation.vue
@@ -2,7 +2,7 @@
   <div>
     <v-toolbar dark>
       <v-spacer />
-      <v-toolbar-title>에이전트 전용 - 크리에이터별 채널 후원 정산</v-toolbar-title>
+      <v-toolbar-title>크리에이터별 채널 후원 정산</v-toolbar-title>
       <v-spacer />
     </v-toolbar>
 
diff --git a/src/views/Agent/Calculate/AgentCalculateCommunityPost.vue b/src/views/Agent/Calculate/AgentCalculateCommunityPost.vue
index a4fe078..f98cff1 100644
--- a/src/views/Agent/Calculate/AgentCalculateCommunityPost.vue
+++ b/src/views/Agent/Calculate/AgentCalculateCommunityPost.vue
@@ -2,7 +2,7 @@
   <div>
     <v-toolbar dark>
       <v-spacer />
-      <v-toolbar-title>에이전트 전용 - 크리에이터별 커뮤니티 정산</v-toolbar-title>
+      <v-toolbar-title>크리에이터별 커뮤니티 정산</v-toolbar-title>
       <v-spacer />
     </v-toolbar>
 
diff --git a/src/views/Agent/Calculate/AgentCalculateContent.vue b/src/views/Agent/Calculate/AgentCalculateContent.vue
index d499483..83846dd 100644
--- a/src/views/Agent/Calculate/AgentCalculateContent.vue
+++ b/src/views/Agent/Calculate/AgentCalculateContent.vue
@@ -2,7 +2,7 @@
   <div>
     <v-toolbar dark>
       <v-spacer />
-      <v-toolbar-title>에이전트 전용 - 크리에이터별 콘텐츠 정산</v-toolbar-title>
+      <v-toolbar-title>크리에이터별 콘텐츠 정산</v-toolbar-title>
       <v-spacer />
     </v-toolbar>
 
diff --git a/src/views/Agent/Calculate/AgentCalculateContentDonation.vue b/src/views/Agent/Calculate/AgentCalculateContentDonation.vue
index 497211e..91c2078 100644
--- a/src/views/Agent/Calculate/AgentCalculateContentDonation.vue
+++ b/src/views/Agent/Calculate/AgentCalculateContentDonation.vue
@@ -2,7 +2,7 @@
   <div>
     <v-toolbar dark>
       <v-spacer />
-      <v-toolbar-title>에이전트 전용 - 크리에이터별 콘텐츠 후원 정산</v-toolbar-title>
+      <v-toolbar-title>크리에이터별 콘텐츠 후원 정산</v-toolbar-title>
       <v-spacer />
     </v-toolbar>
 
diff --git a/src/views/Agent/Calculate/AgentCalculateLive.vue b/src/views/Agent/Calculate/AgentCalculateLive.vue
index 46ecabc..65c04e8 100644
--- a/src/views/Agent/Calculate/AgentCalculateLive.vue
+++ b/src/views/Agent/Calculate/AgentCalculateLive.vue
@@ -2,7 +2,7 @@
   <div>
     <v-toolbar dark>
       <v-spacer />
-      <v-toolbar-title>에이전트 전용 - 크리에이터별 라이브 정산</v-toolbar-title>
+      <v-toolbar-title>크리에이터별 라이브 정산</v-toolbar-title>
       <v-spacer />
     </v-toolbar>
 
diff --git a/src/views/Agent/Creators.vue b/src/views/Agent/Creators.vue
index bc3176a..4d58416 100644
--- a/src/views/Agent/Creators.vue
+++ b/src/views/Agent/Creators.vue
@@ -2,7 +2,7 @@
   <div>
     <v-toolbar dark>
       <v-spacer />
-      <v-toolbar-title>에이전트 전용 - 소속 크리에이터</v-toolbar-title>
+      <v-toolbar-title>소속 크리에이터</v-toolbar-title>
       <v-spacer />
     </v-toolbar>
 
-- 
2.49.1


From c24103f303447705aa6ea88429aadf5a29e2752d Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Mon, 13 Apr 2026 19:39:54 +0900
Subject: [PATCH 6/6] =?UTF-8?q?feat(agent):=20=ED=88=B4=EB=B0=94=20?=
 =?UTF-8?q?=EC=A0=9C=EB=AA=A9=EC=97=90=20=ED=81=AC=EB=A6=AC=EC=97=90?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=88=98=20=ED=91=9C=EC=8B=9C,=20?=
 =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=EC=97=90=20=EC=88=9C=EB=B2=88=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/20260413_에이전트소속크리에이터목록.md | 13 +++++++++++++
 src/views/Agent/Creators.vue                | 10 +++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/docs/20260413_에이전트소속크리에이터목록.md b/docs/20260413_에이전트소속크리에이터목록.md
index 9d76ecc..f23905d 100644
--- a/docs/20260413_에이전트소속크리에이터목록.md
+++ b/docs/20260413_에이전트소속크리에이터목록.md
@@ -7,6 +7,7 @@
 - [ ] 테이블 화면 중앙 정렬 및 내용 크기 기반 축소 표시 (`src/views/Agent/Creators.vue`)
  - [ ] 프로필 이미지/테이블 2배 확대 (`src/views/Agent/Creators.vue`)
  - [ ] v-pagination으로 커스텀 페이징 적용 (`src/views/Agent/Creators.vue`)
+  - [ ] 순번 컬럼 추가(역순, 페이지 연속) (`src/views/Agent/Creators.vue`)
 
 ## 검증 기록
 
@@ -75,3 +76,15 @@
     - 각 셀에 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인지 확인 (성공/실패)
diff --git a/src/views/Agent/Creators.vue b/src/views/Agent/Creators.vue
index 4d58416..922a39b 100644
--- a/src/views/Agent/Creators.vue
+++ b/src/views/Agent/Creators.vue
@@ -2,7 +2,7 @@
   <div>
     <v-toolbar dark>
       <v-spacer />
-      <v-toolbar-title>소속 크리에이터</v-toolbar-title>
+      <v-toolbar-title>소속 크리에이터 - {{ totalCount }}명</v-toolbar-title>
       <v-spacer />
     </v-toolbar>
 
@@ -69,6 +69,7 @@ export default {
   data() {
     return {
       headers: [
+        { text: '순번', value: 'no', align: 'center', sortable: false },
         { text: '프로필', value: 'profileImageUrl', align: 'center', sortable: false },
         { text: '닉네임', value: 'creatorNickname', align: 'center' }
       ],
@@ -132,6 +133,13 @@ export default {
         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
-- 
2.49.1