From 864402b09de2ef649c36d1ba4cc37f4c26dd69e7 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sat, 11 Apr 2026 20:01:24 +0900
Subject: [PATCH 01/10] =?UTF-8?q?feat(member):=20=ED=9A=8C=EC=9B=90=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=97=90=20AGENT(=EC=97=90=EC=9D=B4=EC=A0=84=ED=8A=B8?=
 =?UTF-8?q?)=20=ED=83=80=EC=9E=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 라디오 그룹에 `AGENT` 옵션(라벨: "에이전트") 추가
- `showPopupDialog`에서 서버값 '에이전트' → 내부값 'AGENT' 매핑 로직 추가
- `modify`의 변경 없음 판단 로직에 AGENT ↔ 에이전트 비교 조건 반영
---
 src/views/Member/MemberList.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/Member/MemberList.vue b/src/views/Member/MemberList.vue
index 07dfac1..8bcd212 100644
--- a/src/views/Member/MemberList.vue
+++ b/src/views/Member/MemberList.vue
@@ -183,6 +183,10 @@
                     value="CREATOR"
                     label="크리에이터"
                   />
+                  <v-radio
+                    value="AGENT"
+                    label="에이전트"
+                  />
                   <v-radio
                     value="USER"
                     label="일반회원"
@@ -445,6 +449,8 @@ export default {
         this.user_type = 'USER'
       } else if (member.userType === '크리에이터') {
         this.user_type = 'CREATOR'
+      } else if (member.userType === '에이전트') {
+        this.user_type = 'AGENT'
       }
 
       this.email = member.email
@@ -512,7 +518,8 @@ export default {
 
       if (
         (this.user_type === 'CREATOR' && this.member.userType === '크리에이터') ||
-        (this.user_type === 'USER' && this.member.userType === '일반회원')
+        (this.user_type === 'USER' && this.member.userType === '일반회원') ||
+        (this.user_type === 'AGENT' && this.member.userType === '에이전트')
       ) {
         this.notifyError("변경사항이 없습니다.")
       } else {
-- 
2.49.1


From 2277f9eca6fb5eddb7100514ed0d483b81ebdaef Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sat, 11 Apr 2026 20:37:49 +0900
Subject: [PATCH 02/10] =?UTF-8?q?feat(agent):=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C=EB=B0=94=EC=97=90=20=E2=80=98=EC=97=90=EC=9D=B4?=
 =?UTF-8?q?=EC=A0=84=ED=8A=B8=20=EA=B4=80=EB=A6=AC=E2=80=99=20=EB=A9=94?=
 =?UTF-8?q?=EB=89=B4=20=EB=B0=8F=20=EB=9D=BC=EC=9A=B0=ED=8A=B8/=EA=B8=B0?=
 =?UTF-8?q?=EB=B3=B8=20=EB=B7=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- router: /agent/list, /agent/settlement-ratio 라우트 등록
- SideMenu: ‘크리에이터 관리’ 바로 아래 ‘에이전트 관리’ 섹션 동적 삽입
- views: AgentList.vue, AgentSettlementRatio.vue 스텁 추가
---
 src/components/SideMenu.vue              | 23 +++++++++++++++++++++++
 src/router/index.js                      | 11 +++++++++++
 src/views/Agent/AgentList.vue            | 19 +++++++++++++++++++
 src/views/Agent/AgentSettlementRatio.vue | 19 +++++++++++++++++++
 4 files changed, 72 insertions(+)
 create mode 100644 src/views/Agent/AgentList.vue
 create mode 100644 src/views/Agent/AgentSettlementRatio.vue

diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 2819df9..239b15b 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -150,6 +150,29 @@ export default {
             ]
           })
 
+          // 에이전트 관리 메뉴를 '크리에이터 관리' 바로 아래에 추가
+          try {
+            const insertAfterTitle = '크리에이터 관리'
+            const agentMenu = {
+              title: '에이전트 관리',
+              route: null,
+              items: [
+                { title: '에이전트 리스트', route: '/agent/list', items: null },
+                { title: '에이전트 정산 비율', route: '/agent/settlement-ratio', items: null },
+              ]
+            }
+
+            const idx = this.items.findIndex(m => m && m.title === insertAfterTitle)
+            if (idx >= 0) {
+              this.items.splice(idx + 1, 0, agentMenu)
+            } else {
+              // 기준 메뉴가 없으면 하단에 추가
+              this.items.push(agentMenu)
+            }
+          } catch (e) {
+            // ignore
+          }
+
           // 정산 관리 메뉴에 '채널 후원 정산' 추가
           try {
             const calculateMenu = this.items.find(m => m && m.title === '정산 관리')
diff --git a/src/router/index.js b/src/router/index.js
index 307c7e3..4eaa859 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -50,6 +50,17 @@ const routes = [
                 name: 'CreatorReview',
                 component: () => import(/* webpackChunkName: "counselor" */ '../views/Creator/CreatorSettlementRatio.vue')
             },
+            // Agent Management
+            {
+                path: '/agent/list',
+                name: 'AgentList',
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentList.vue')
+            },
+            {
+                path: '/agent/settlement-ratio',
+                name: 'AgentSettlementRatio',
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentSettlementRatio.vue')
+            },
             {
                 path: '/live/tags',
                 name: 'LiveTags',
diff --git a/src/views/Agent/AgentList.vue b/src/views/Agent/AgentList.vue
new file mode 100644
index 0000000..09b22cd
--- /dev/null
+++ b/src/views/Agent/AgentList.vue
@@ -0,0 +1,19 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12">
+        <h2>에이전트 리스트</h2>
+        <p>에이전트 목록을 관리합니다. (구현 예정)</p>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'AgentList',
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/AgentSettlementRatio.vue b/src/views/Agent/AgentSettlementRatio.vue
new file mode 100644
index 0000000..b6201f3
--- /dev/null
+++ b/src/views/Agent/AgentSettlementRatio.vue
@@ -0,0 +1,19 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12">
+        <h2>에이전트 정산 비율</h2>
+        <p>에이전트 정산 비율을 설정/관리합니다. (구현 예정)</p>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'AgentSettlementRatio',
+}
+</script>
+
+<style scoped>
+</style>
-- 
2.49.1


From 2adb0d5daa62a5a5e4bd45cd7b0578debeb72df5 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sat, 11 Apr 2026 20:51:28 +0900
Subject: [PATCH 03/10] =?UTF-8?q?feat(agent):=20AgentList.vue=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20=E2=80=94=20=EC=B4=9D=20=EC=97=90=EC=9D=B4=EC=A0=84?=
 =?UTF-8?q?=ED=8A=B8=20=EC=88=98,=20=EC=A0=95=EC=82=B0=20=ED=95=AD?=
 =?UTF-8?q?=EB=AA=A9=EB=B3=84=20=EA=B8=88=EC=95=A1,=20=ED=95=A9=EA=B3=84?=
 =?UTF-8?q?=20=ED=91=9C=EC=8B=9C=20=EB=B0=8F=20=EB=9D=BC=EC=9A=B0=ED=8C=85?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- api: /admin/partner/agent/list 연동을 위한 api/agent.js 추가(getAgentList)
- router: 에이전트 상세 및 5종 정산 상세 라우트 추가(파라미터 agentId 사용)
- AgentDetail.vue와 정산 상세 5개 뷰(플레이스홀더) 추가
- 숫자/통화 포맷 적용 및 클릭 가능한 스타일 클래스 추가
---
 src/api/agent.js                              |  12 +
 src/router/index.js                           |  36 +++
 .../Agent/AgentChannelDonationSettlement.vue  |  37 +++
 src/views/Agent/AgentCommunitySettlement.vue  |  37 +++
 .../Agent/AgentContentDonationSettlement.vue  |  37 +++
 src/views/Agent/AgentContentSettlement.vue    |  37 +++
 src/views/Agent/AgentDetail.vue               |  37 +++
 src/views/Agent/AgentList.vue                 | 221 +++++++++++++++++-
 src/views/Agent/AgentLiveSettlement.vue       |  37 +++
 9 files changed, 483 insertions(+), 8 deletions(-)
 create mode 100644 src/api/agent.js
 create mode 100644 src/views/Agent/AgentChannelDonationSettlement.vue
 create mode 100644 src/views/Agent/AgentCommunitySettlement.vue
 create mode 100644 src/views/Agent/AgentContentDonationSettlement.vue
 create mode 100644 src/views/Agent/AgentContentSettlement.vue
 create mode 100644 src/views/Agent/AgentDetail.vue
 create mode 100644 src/views/Agent/AgentLiveSettlement.vue

diff --git a/src/api/agent.js b/src/api/agent.js
new file mode 100644
index 0000000..e6b1b5b
--- /dev/null
+++ b/src/api/agent.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+
+// 에이전트 리스트 조회
+// 서버 스펙에 페이지네이션이 없다면 단순 GET으로 사용
+// 추후 필요 시 params(page,size) 확장 가능
+async function getAgentList() {
+  return Vue.axios.get('/admin/partner/agent/list')
+}
+
+export {
+  getAgentList
+}
diff --git a/src/router/index.js b/src/router/index.js
index 4eaa859..4d6fddc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -56,6 +56,42 @@ const routes = [
                 name: 'AgentList',
                 component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentList.vue')
             },
+            {
+                path: '/agent/:agentId',
+                name: 'AgentDetail',
+                props: true,
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentDetail.vue')
+            },
+            {
+                path: '/agent/:agentId/settlement/live',
+                name: 'AgentSettlementLive',
+                props: true,
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentLiveSettlement.vue')
+            },
+            {
+                path: '/agent/:agentId/settlement/content',
+                name: 'AgentSettlementContent',
+                props: true,
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentContentSettlement.vue')
+            },
+            {
+                path: '/agent/:agentId/settlement/community',
+                name: 'AgentSettlementCommunity',
+                props: true,
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentCommunitySettlement.vue')
+            },
+            {
+                path: '/agent/:agentId/settlement/content-donation',
+                name: 'AgentSettlementContentDonation',
+                props: true,
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentContentDonationSettlement.vue')
+            },
+            {
+                path: '/agent/:agentId/settlement/channel-donation',
+                name: 'AgentSettlementChannelDonation',
+                props: true,
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentChannelDonationSettlement.vue')
+            },
             {
                 path: '/agent/settlement-ratio',
                 name: 'AgentSettlementRatio',
diff --git a/src/views/Agent/AgentChannelDonationSettlement.vue b/src/views/Agent/AgentChannelDonationSettlement.vue
new file mode 100644
index 0000000..151ad27
--- /dev/null
+++ b/src/views/Agent/AgentChannelDonationSettlement.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>에이전트 정산 상세 - 채널 후원</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h3>채널 후원 정산 상세 페이지 (준비중)</h3>
+          <p>Agent ID: {{ agentId }}</p>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentChannelDonationSettlement',
+  props: {
+    agentId: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/AgentCommunitySettlement.vue b/src/views/Agent/AgentCommunitySettlement.vue
new file mode 100644
index 0000000..524d50c
--- /dev/null
+++ b/src/views/Agent/AgentCommunitySettlement.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>에이전트 정산 상세 - 커뮤니티</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h3>커뮤니티 정산 상세 페이지 (준비중)</h3>
+          <p>Agent ID: {{ agentId }}</p>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentCommunitySettlement',
+  props: {
+    agentId: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/AgentContentDonationSettlement.vue b/src/views/Agent/AgentContentDonationSettlement.vue
new file mode 100644
index 0000000..8800d26
--- /dev/null
+++ b/src/views/Agent/AgentContentDonationSettlement.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>에이전트 정산 상세 - 콘텐츠 후원</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h3>콘텐츠 후원 정산 상세 페이지 (준비중)</h3>
+          <p>Agent ID: {{ agentId }}</p>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentContentDonationSettlement',
+  props: {
+    agentId: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/AgentContentSettlement.vue b/src/views/Agent/AgentContentSettlement.vue
new file mode 100644
index 0000000..4a64401
--- /dev/null
+++ b/src/views/Agent/AgentContentSettlement.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>에이전트 정산 상세 - 콘텐츠</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h3>콘텐츠 정산 상세 페이지 (준비중)</h3>
+          <p>Agent ID: {{ agentId }}</p>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentContentSettlement',
+  props: {
+    agentId: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/AgentDetail.vue b/src/views/Agent/AgentDetail.vue
new file mode 100644
index 0000000..d5c20ca
--- /dev/null
+++ b/src/views/Agent/AgentDetail.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>에이전트 상세</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h3>에이전트 상세 페이지 (준비중)</h3>
+          <p>Agent ID: {{ agentId }}</p>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentDetail',
+  props: {
+    agentId: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Agent/AgentList.vue b/src/views/Agent/AgentList.vue
index 09b22cd..b47325c 100644
--- a/src/views/Agent/AgentList.vue
+++ b/src/views/Agent/AgentList.vue
@@ -1,19 +1,224 @@
 <template>
-  <v-container fluid>
-    <v-row>
-      <v-col cols="12">
-        <h2>에이전트 리스트</h2>
-        <p>에이전트 목록을 관리합니다. (구현 예정)</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>
+        <v-col
+          cols="12"
+          class="text-right"
+        >
+          총 에이전트 수: <strong>{{ totalCount | numberFormat }}</strong>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-simple-table class="elevation-10">
+            <template>
+              <thead>
+                <tr>
+                  <th class="text-center">
+                    에이전트 닉네임
+                  </th>
+                  <th class="text-center">
+                    소속 크리에이터 수
+                  </th>
+                  <th class="text-center">
+                    라이브
+                  </th>
+                  <th class="text-center">
+                    콘텐츠
+                  </th>
+                  <th class="text-center">
+                    커뮤니티
+                  </th>
+                  <th class="text-center">
+                    콘텐츠 후원
+                  </th>
+                  <th class="text-center">
+                    채널 후원
+                  </th>
+                  <th class="text-center">
+                    합계
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="item in agentList"
+                  :key="item.agentId"
+                >
+                  <td
+                    class="link"
+                    @click="goAgentDetail(item)"
+                  >
+                    {{ item.agentNickname }}
+                  </td>
+                  <td class="text-center">
+                    {{ item.assignedCreatorCount | numberFormat }}
+                  </td>
+                  <td
+                    class="text-right clickable"
+                    @click="goSettlement(item, 'live')"
+                  >
+                    {{ formatCurrency(item.liveAgentSettlementAmount) }}
+                  </td>
+                  <td
+                    class="text-right clickable"
+                    @click="goSettlement(item, 'content')"
+                  >
+                    {{ formatCurrency(item.contentAgentSettlementAmount) }}
+                  </td>
+                  <td
+                    class="text-right clickable"
+                    @click="goSettlement(item, 'community')"
+                  >
+                    {{ formatCurrency(item.communityAgentSettlementAmount) }}
+                  </td>
+                  <td
+                    class="text-right clickable"
+                    @click="goSettlement(item, 'content-donation')"
+                  >
+                    {{ formatCurrency(item.contentDonationAgentSettlementAmount) }}
+                  </td>
+                  <td
+                    class="text-right clickable"
+                    @click="goSettlement(item, 'channel-donation')"
+                  >
+                    {{ formatCurrency(item.channelDonationAgentSettlementAmount) }}
+                  </td>
+                  <td class="text-right">
+                    {{ formatCurrency(totalAmount(item)) }}
+                  </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+        </v-col>
+      </v-row>
+
+      <!-- 페이지네이션은 서버 지원 시 활성화
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="fetchList"
+          />
+        </v-col>
+      </v-row>
+      -->
+    </v-container>
+  </div>
 </template>
 
 <script>
+import { getAgentList } from '@/api/agent'
+
 export default {
   name: 'AgentList',
+  filters: {
+    numberFormat(v) {
+      if (v === null || v === undefined) return '-'
+      try {
+        return new Intl.NumberFormat('ko-KR').format(v)
+      } catch (e) {
+        return v
+      }
+    }
+  },
+  data() {
+    return {
+      agentList: [],
+      totalCount: 0,
+      // 페이지네이션(필요 시)
+      page: 1,
+      total_page: 1,
+      page_size: 20,
+      is_loading: false,
+    }
+  },
+  created() {
+    this.fetchList()
+  },
+  methods: {
+    async fetchList() {
+      if (this.is_loading) return
+      this.is_loading = true
+      try {
+        const res = await getAgentList(/* this.page, this.page_size */)
+        // 일부 API는 { data: { totalCount, items } } 형태로 한 번 더 래핑됨을 대비
+        let payload = (res && res.data) ? res.data : null
+        if (payload && payload.data && (!payload.items && !payload.totalCount)) {
+          payload = payload.data
+        }
+        const data = payload || { totalCount: 0, items: [] }
+        this.totalCount = data.totalCount || 0
+        this.agentList = Array.isArray(data.items) ? data.items : []
+        // 서버가 페이지네이션 정보를 주면 설정하도록 남김
+        this.total_page = Math.max(1, Math.ceil(this.totalCount / this.page_size))
+      } catch (e) {
+        this.totalCount = 0
+        this.agentList = []
+      } finally {
+        this.is_loading = false
+      }
+    },
+    formatCurrency(n) {
+      const num = Number(n || 0)
+      return new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW', maximumFractionDigits: 0 }).format(num)
+    },
+    totalAmount(item) {
+      const {
+        liveAgentSettlementAmount = 0,
+        contentAgentSettlementAmount = 0,
+        communityAgentSettlementAmount = 0,
+        contentDonationAgentSettlementAmount = 0,
+        channelDonationAgentSettlementAmount = 0,
+      } = item || {}
+      return (
+        (liveAgentSettlementAmount || 0) +
+        (contentAgentSettlementAmount || 0) +
+        (communityAgentSettlementAmount || 0) +
+        (contentDonationAgentSettlementAmount || 0) +
+        (channelDonationAgentSettlementAmount || 0)
+      )
+    },
+    goAgentDetail(item) {
+      this.$router.push({ name: 'AgentDetail', params: { agentId: item.agentId } })
+    },
+    goSettlement(item, type) {
+      const id = item.agentId
+      const nameMap = {
+        'live': 'AgentSettlementLive',
+        'content': 'AgentSettlementContent',
+        'community': 'AgentSettlementCommunity',
+        'content-donation': 'AgentSettlementContentDonation',
+        'channel-donation': 'AgentSettlementChannelDonation',
+      }
+      const name = nameMap[type]
+      if (!name) return
+      this.$router.push({ name, params: { agentId: id } })
+    }
+  }
 }
 </script>
 
 <style scoped>
+.link {
+  color: #3f51b5;
+  cursor: pointer;
+  text-decoration: underline;
+}
+.clickable {
+  cursor: pointer;
+}
 </style>
diff --git a/src/views/Agent/AgentLiveSettlement.vue b/src/views/Agent/AgentLiveSettlement.vue
new file mode 100644
index 0000000..3d43e9c
--- /dev/null
+++ b/src/views/Agent/AgentLiveSettlement.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>에이전트 정산 상세 - 라이브</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+    <v-container>
+      <v-row>
+        <v-col>
+          <h3>라이브 정산 상세 페이지 (준비중)</h3>
+          <p>Agent ID: {{ agentId }}</p>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentLiveSettlement',
+  props: {
+    agentId: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
-- 
2.49.1


From 49de52355216eb584b648c916bf54625ae6ec496 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sat, 11 Apr 2026 21:18:08 +0900
Subject: [PATCH 04/10] =?UTF-8?q?fix(router):=20/agent/settlement-ratio=20?=
 =?UTF-8?q?=EA=B2=BD=EB=A1=9C=EA=B0=80=20=EC=97=90=EC=9D=B4=EC=A0=84?=
 =?UTF-8?q?=ED=8A=B8=20=EC=83=81=EC=84=B8=EB=A1=9C=20=EC=9E=98=EB=AA=BB=20?=
 =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8C=85=EB=90=98=EB=8D=98=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

정적 경로(`/agent/settlement-ratio`)가 동적 경로(`/agent/:agentId`)보다 뒤에 있어
동적으로 매칭되던 라우팅 우선순위 문제를 해결했습니다.
- router/index.js: 정적 경로를 동적 경로보다 앞에 배치
- 기능/로직 변경 없음, 라우팅 매칭 순서만 조정
---
 src/router/index.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 4d6fddc..48b4e84 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -56,12 +56,6 @@ const routes = [
                 name: 'AgentList',
                 component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentList.vue')
             },
-            {
-                path: '/agent/:agentId',
-                name: 'AgentDetail',
-                props: true,
-                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentDetail.vue')
-            },
             {
                 path: '/agent/:agentId/settlement/live',
                 name: 'AgentSettlementLive',
@@ -97,6 +91,12 @@ const routes = [
                 name: 'AgentSettlementRatio',
                 component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentSettlementRatio.vue')
             },
+            {
+                path: '/agent/:agentId',
+                name: 'AgentDetail',
+                props: true,
+                component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/AgentDetail.vue')
+            },
             {
                 path: '/live/tags',
                 name: 'LiveTags',
-- 
2.49.1


From 7608cefba11c5a760188d04b20b5515fd1a152c9 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sat, 11 Apr 2026 22:01:53 +0900
Subject: [PATCH 05/10] =?UTF-8?q?feat(agent):=20=EC=97=90=EC=9D=B4?=
 =?UTF-8?q?=EC=A0=84=ED=8A=B8=20=EC=A0=95=EC=82=B0=20=EB=B9=84=EC=9C=A8=20?=
 =?UTF-8?q?=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

- 에이전트 정산 비율 API 추가 (목록/등록/수정/닉네임 검색)
- AgentSettlementRatio.vue 구현 — 목록 테이블, "에이전트 비율 추가" 버튼, 수정 버튼 및 등록/수정 공용 팝업 추가
- UX: 닉네임 검색(v-autocomplete), 숫자/범위(0~100) 검증, datetime-local 입력값 LocalDateTime 문자열 변환 처리
- 에러/로딩 상태 기본 처리 및 목록 새로고침 흐름 반영
---
 src/api/agent.js                         |  40 ++-
 src/views/Agent/AgentSettlementRatio.vue | 336 ++++++++++++++++++++++-
 2 files changed, 366 insertions(+), 10 deletions(-)

diff --git a/src/api/agent.js b/src/api/agent.js
index e6b1b5b..b14de7c 100644
--- a/src/api/agent.js
+++ b/src/api/agent.js
@@ -7,6 +7,42 @@ async function getAgentList() {
   return Vue.axios.get('/admin/partner/agent/list')
 }
 
-export {
-  getAgentList
+// 에이전트 정산 비율 목록 조회
+async function getAgentSettlementRatioList() {
+  return Vue.axios.get('/admin/partner/agent/ratio')
+}
+
+// 에이전트 정산 비율 등록
+// payload: { memberId: number, settlementRatio: number, effectiveFrom: string(yyyy-MM-ddTHH:mm:ss) }
+async function createAgentSettlementRatio(payload) {
+  return Vue.axios.post('/admin/partner/agent/ratio', payload)
+}
+
+// 에이전트 정산 비율 수정
+// payload: { memberId: number, settlementRatio: number, effectiveFrom: string(yyyy-MM-ddTHH:mm:ss) }
+async function updateAgentSettlementRatio(payload) {
+  return Vue.axios.post('/admin/partner/agent/ratio/update', payload)
+}
+
+// 에이전트 닉네임 검색
+// 반환: [{ id, nickname }]
+async function searchAgentByNickname(query) {
+  try {
+    const res = await Vue.axios.get('/admin/partner/agent/search-by-nickname', {
+      params: { nickname: query, search_word: query }
+    })
+    if (res && Array.isArray(res.data)) return res.data
+    if (res && res.data && Array.isArray(res.data.data)) return res.data.data
+    return []
+  } catch (e) {
+    return []
+  }
+}
+
+export {
+  getAgentList,
+  getAgentSettlementRatioList,
+  createAgentSettlementRatio,
+  updateAgentSettlementRatio,
+  searchAgentByNickname,
 }
diff --git a/src/views/Agent/AgentSettlementRatio.vue b/src/views/Agent/AgentSettlementRatio.vue
index b6201f3..d8c678a 100644
--- a/src/views/Agent/AgentSettlementRatio.vue
+++ b/src/views/Agent/AgentSettlementRatio.vue
@@ -1,19 +1,339 @@
 <template>
-  <v-container fluid>
-    <v-row>
-      <v-col cols="12">
-        <h2>에이전트 정산 비율</h2>
-        <p>에이전트 정산 비율을 설정/관리합니다. (구현 예정)</p>
-      </v-col>
-    </v-row>
-  </v-container>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>에이전트 정산 비율</v-toolbar-title>
+      <v-spacer />
+      <v-btn
+        color="primary"
+        dark
+        @click="onClickCreate"
+      >
+        에이전트 비율 추가
+      </v-btn>
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col
+          cols="12"
+          class="text-right"
+        >
+          총 에이전트 수: <strong>{{ totalCount | numberFormat }}</strong>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-simple-table class="elevation-10">
+            <template>
+              <thead>
+                <tr>
+                  <th class="text-center">
+                    에이전트 닉네임
+                  </th>
+                  <th class="text-center">
+                    정산 비율(%)
+                  </th>
+                  <th class="text-center">
+                    관리
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="item in items"
+                  :key="item.memberId"
+                >
+                  <td class="text-center">
+                    {{ item.nickname }}
+                  </td>
+                  <td class="text-center">
+                    {{ (item.current && item.current.settlementRatio != null) ? item.current.settlementRatio : '-' }}
+                  </td>
+                  <td class="text-center">
+                    <v-btn
+                      small
+                      outlined
+                      color="primary"
+                      @click="onClickEdit(item)"
+                    >
+                      수정
+                    </v-btn>
+                  </td>
+                </tr>
+                <tr v-if="!loading && (!items || items.length===0)">
+                  <td
+                    colspan="3"
+                    class="text-center grey--text"
+                  >
+                    데이터가 없습니다.
+                  </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <!-- 등록/수정 팝업 -->
+    <v-dialog
+      v-model="dialog"
+      max-width="560px"
+      persistent
+    >
+      <v-card>
+        <v-card-title class="headline">
+          {{ isEdit ? '에이전트 비율 수정' : '에이전트 비율 등록' }}
+        </v-card-title>
+        <v-card-text>
+          <v-form
+            ref="form"
+            v-model="formValid"
+          >
+            <!-- 에이전트 선택/표시 -->
+            <div v-if="!isEdit">
+              <v-autocomplete
+                v-model="selectedAgent"
+                :items="agentSearchItems"
+                :loading="agentSearchLoading"
+                :search-input.sync="agentSearchQuery"
+                hide-selected
+                hide-no-data
+                label="에이전트 닉네임 검색"
+                item-text="nickname"
+                item-value="id"
+                return-object
+                clearable
+                :rules="[v=>!!v || '에이전트를 선택하세요.']"
+                @update:search-input="onSearchAgent"
+              />
+            </div>
+            <div v-else>
+              <v-text-field
+                v-model="form.nickname"
+                label="에이전트"
+                disabled
+              />
+            </div>
+
+            <v-text-field
+              v-model.number="form.settlementRatio"
+              label="정산 비율(%)"
+              type="number"
+              min="0"
+              max="100"
+              :rules="ratioRules"
+              required
+            />
+
+            <v-text-field
+              v-model="form.effectiveFrom"
+              label="적용 시작 날짜"
+              type="date"
+              :rules="[v=>!!v || '적용 시작 날짜를 선택하세요.']"
+              required
+            />
+          </v-form>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            :disabled="submitting"
+            @click="closeDialog"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="primary"
+            dark
+            :loading="submitting"
+            :disabled="!formValid || submitting"
+            @click="onSubmit"
+          >
+            등록
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
 </template>
 
 <script>
+import {
+  getAgentSettlementRatioList,
+  createAgentSettlementRatio,
+  updateAgentSettlementRatio,
+  searchAgentByNickname
+} from '@/api/agent'
 export default {
   name: 'AgentSettlementRatio',
+  filters: {
+    numberFormat(v) {
+      if (v === null || v === undefined) return '-'
+      try {
+        return new Intl.NumberFormat('ko-KR').format(v)
+      } catch (e) {
+        return v
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      items: [],
+      totalCount: 0,
+
+      dialog: false,
+      isEdit: false,
+      submitting: false,
+      formValid: false,
+      form: {
+        memberId: null,
+        nickname: '',
+        settlementRatio: null,
+        effectiveFrom: ''
+      },
+      ratioRules: [
+        v => (v !== null && v !== '' && !isNaN(v)) || '숫자를 입력하세요.',
+        v => (v >= 0 && v <= 100) || '0~100 사이 값이어야 합니다.'
+      ],
+
+      // 에이전트 검색
+      selectedAgent: null,
+      agentSearchQuery: '',
+      agentSearchItems: [],
+      agentSearchLoading: false,
+    }
+  },
+  created() {
+    this.fetchList()
+  },
+  methods: {
+    async fetchList() {
+      if (this.loading) return
+      this.loading = true
+      try {
+        const res = await getAgentSettlementRatioList()
+        let payload = (res && res.data) ? res.data : null
+        if (payload && payload.data && (!payload.items && !payload.totalCount)) {
+          payload = payload.data
+        }
+        const data = payload || { totalCount: 0, items: [] }
+        this.totalCount = data.totalCount || 0
+        this.items = Array.isArray(data.items) ? data.items : []
+      } catch (e) {
+        this.totalCount = 0
+        this.items = []
+      } finally {
+        this.loading = false
+      }
+    },
+    onClickCreate() {
+      this.isEdit = false
+      this.resetForm()
+      this.dialog = true
+    },
+    onClickEdit(item) {
+      this.isEdit = true
+      this.resetForm()
+      this.form.memberId = item.memberId
+      this.form.nickname = item.nickname
+      this.form.settlementRatio = item && item.current ? item.current.settlementRatio : null
+      this.form.effectiveFrom = this.defaultDateTimeLocal()
+      this.dialog = true
+    },
+    closeDialog() {
+      if (this.submitting) return
+      this.dialog = false
+    },
+    resetForm() {
+      this.submitting = false
+      this.formValid = false
+      this.form = {
+        memberId: null,
+        nickname: '',
+        settlementRatio: null,
+        effectiveFrom: this.defaultDateTimeLocal()
+      }
+      this.selectedAgent = null
+      this.agentSearchQuery = ''
+      this.agentSearchItems = []
+      if (this.$refs.form && this.$refs.form.resetValidation) this.$refs.form.resetValidation()
+    },
+    defaultDateTimeLocal() {
+      // 날짜만 선택하도록 기본값은 오늘 날짜 (YYYY-MM-DD)
+      const d = new Date()
+      const pad = n => n.toString().padStart(2, '0')
+      const yyyy = d.getFullYear()
+      const MM = pad(d.getMonth() + 1)
+      const dd = pad(d.getDate())
+      return `${yyyy}-${MM}-${dd}`
+    },
+    toLocalDateTimeString(v) {
+      // 입력 타입이 date이므로 "YYYY-MM-DD"를 받아 "YYYY-MM-DDT00:00:00"로 변환
+      // 과거 호환: datetime-local("YYYY-MM-DDTHH:mm")가 들어오면 초를 붙여 반환
+      if (!v) return null
+      if (v.length === 10) return `${v}T00:00:00`
+      if (v.length === 16) return `${v}:00`
+      // 이미 초까지 포함된 형태면 그대로 사용
+      if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?$/.test(v)) {
+        return v.length === 16 ? `${v}:00` : v
+      }
+      return `${v}T00:00:00`
+    },
+    async onSubmit() {
+      if (this.submitting) return
+      const ok = await this.$refs.form.validate?.()
+      if (!ok) return
+      try {
+        this.submitting = true
+        const payload = {
+          memberId: this.isEdit ? this.form.memberId : (this.selectedAgent && this.selectedAgent.id),
+          settlementRatio: Number(this.form.settlementRatio),
+          effectiveFrom: this.toLocalDateTimeString(this.form.effectiveFrom)
+        }
+        if (!payload.memberId) {
+          this.submitting = false
+          return
+        }
+        if (this.isEdit) {
+          await updateAgentSettlementRatio(payload)
+        } else {
+          await createAgentSettlementRatio(payload)
+        }
+        this.dialog = false
+        await this.fetchList()
+      } catch (e) {
+        // 실패 시에도 버튼 로딩 해제
+      } finally {
+        this.submitting = false
+      }
+    },
+    async onSearchAgent(q) {
+      if (!q) {
+        this.agentSearchItems = []
+        return
+      }
+      this.agentSearchLoading = true
+      try {
+        const list = await searchAgentByNickname(q)
+        this.agentSearchItems = Array.isArray(list) ? list : []
+      } catch (e) {
+        this.agentSearchItems = []
+      } finally {
+        this.agentSearchLoading = false
+      }
+    }
+  }
 }
 </script>
 
 <style scoped>
+.clickable { cursor: pointer; }
+.link { color: #1976d2; cursor: pointer; text-decoration: underline; }
 </style>
-- 
2.49.1


From c7a02ea4ccb88ff1158c46962ce682def03b0679 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sat, 11 Apr 2026 22:20:18 +0900
Subject: [PATCH 06/10] =?UTF-8?q?feat(agent):=20=EC=97=90=EC=9D=B4?=
 =?UTF-8?q?=EC=A0=84=ED=8A=B8=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=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

- api/agent.js에 소속 관리 API 추가 (조회/검색/소속/해제) 및 Pageable 0-based 처리
- AgentDetail.vue 구현 — 목록/페이지네이션/소속 추가(자정 00:00:00)/소속 해제(날짜+시간)
- AgentList.vue에서 상세 진입 시 닉네임을 쿼리로 전달하여 상세에서 표시
- AgentDetail.vue에 간단한 스타일 클래스 추가
---
 src/api/agent.js                |  38 +++
 src/views/Agent/AgentDetail.vue | 415 +++++++++++++++++++++++++++++++-
 src/views/Agent/AgentList.vue   |   2 +-
 3 files changed, 448 insertions(+), 7 deletions(-)

diff --git a/src/api/agent.js b/src/api/agent.js
index b14de7c..d1a19c4 100644
--- a/src/api/agent.js
+++ b/src/api/agent.js
@@ -39,10 +39,48 @@ async function searchAgentByNickname(query) {
   }
 }
 
+// 에이전트 소속 크리에이터 목록 조회
+// GET /admin/partner/agent/{agentId}/creator/list
+// params: { page, size }
+async function getAgentAssignedCreatorList(agentId, page = 1, size = 20) {
+  // Spring Pageable은 일반적으로 0-based page index를 사용
+  const zeroBasedPage = Math.max(0, Number(page || 1) - 1)
+  return Vue.axios.get(`/admin/partner/agent/${agentId}/creator/list`, {
+    params: { page: zeroBasedPage, size }
+  })
+}
+
+// 추가 가능한 크리에이터 검색
+// GET /admin/partner/agent/creator/search?search_word=...
+async function searchAdminAgentAssignableCreators(search_word) {
+  return Vue.axios.get('/admin/partner/agent/creator/search', {
+    params: { search_word }
+  })
+}
+
+// 에이전트에 크리에이터 소속 시키기
+// POST /admin/partner/agent/assignment
+// payload: { agentId, creatorId, assignedAt }  // assignedAt: LocalDateTime string (yyyy-MM-ddTHH:mm:ss)
+async function assignAgentCreator(payload) {
+  return Vue.axios.post('/admin/partner/agent/assignment', payload)
+}
+
+// 크리에이터 소속 해제
+// POST /admin/partner/agent/assignment/remove
+// payload: { creatorId, unassignedAt } // unassignedAt: LocalDateTime string
+async function removeAgentCreator(payload) {
+  return Vue.axios.post('/admin/partner/agent/assignment/remove', payload)
+}
+
 export {
   getAgentList,
   getAgentSettlementRatioList,
   createAgentSettlementRatio,
   updateAgentSettlementRatio,
   searchAgentByNickname,
+  // 에이전트 상세 - 소속 크리에이터 관리
+  getAgentAssignedCreatorList,
+  searchAdminAgentAssignableCreators,
+  assignAgentCreator,
+  removeAgentCreator,
 }
diff --git a/src/views/Agent/AgentDetail.vue b/src/views/Agent/AgentDetail.vue
index d5c20ca..fc62204 100644
--- a/src/views/Agent/AgentDetail.vue
+++ b/src/views/Agent/AgentDetail.vue
@@ -7,21 +7,262 @@
       >
         <v-icon>mdi-arrow-left</v-icon>
       </v-btn>
-      <v-toolbar-title>에이전트 상세</v-toolbar-title>
+      <v-toolbar-title>{{ (agentNickname || '-') + ' 소속 크리에이터' }}</v-toolbar-title>
       <v-spacer />
+      <v-btn
+        color="#3bb9f1"
+        dark
+        :loading="assignDialog.loading"
+        @click="openAssignDialog"
+      >
+        소속 추가
+      </v-btn>
     </v-toolbar>
+
+    <br>
+
     <v-container>
+      <!-- 소속 크리에이터 목록 -->
       <v-row>
         <v-col>
-          <h3>에이전트 상세 페이지 (준비중)</h3>
-          <p>Agent ID: {{ agentId }}</p>
+          <v-simple-table class="elevation-10">
+            <template>
+              <thead>
+                <tr>
+                  <th class="text-center">
+                    닉네임
+                  </th>
+                  <th class="text-center">
+                    소속일
+                  </th>
+                  <th class="text-center">
+                    관리
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-if="is_loading">
+                  <td
+                    colspan="3"
+                    class="text-center"
+                  >
+                    불러오는 중...
+                  </td>
+                </tr>
+                <tr v-else-if="items.length === 0">
+                  <td
+                    colspan="3"
+                    class="text-center"
+                  >
+                    소속된 크리에이터가 없습니다.
+                  </td>
+                </tr>
+                <tr
+                  v-for="row in items"
+                  :key="row.creatorId"
+                >
+                  <td class="text-center">
+                    {{ row.creatorNickname }}
+                  </td>
+                  <td class="text-center">
+                    {{ formatDateTime(row.assignedAt) }}
+                  </td>
+                  <td class="text-center">
+                    <v-btn
+                      text
+                      small
+                      color="error"
+                      @click="openUnassignDialog(row)"
+                    >
+                      소속 해제
+                    </v-btn>
+                  </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+        </v-col>
+      </v-row>
+
+      <v-row
+        v-if="total_page > 1"
+        class="text-center"
+      >
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="fetchList"
+          />
         </v-col>
       </v-row>
     </v-container>
+
+    <!-- 소속 추가 다이얼로그 -->
+    <v-dialog
+      v-model="assignDialog.visible"
+      max-width="600px"
+    >
+      <v-card>
+        <v-card-title>크리에이터 소속 추가</v-card-title>
+        <v-card-text>
+          <v-autocomplete
+            v-model="assignDialog.selectedCreatorId"
+            :items="assignDialog.searchItems"
+            :loading="assignDialog.searchLoading"
+            :search-input.sync="assignDialog.searchQuery"
+            hide-no-data
+            hide-selected
+            clearable
+            label="크리에이터 검색"
+            item-text="creatorNickname"
+            item-value="creatorId"
+            @update:search-input="onSearchCreators"
+          />
+
+          <v-menu
+            ref="menuAssignedDate"
+            v-model="assignDialog.menu"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-model="assignDialog.assignedDate"
+                label="소속 날짜(자정으로 처리)"
+                readonly
+                dense
+                v-bind="attrs"
+                clearable
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="assignDialog.assignedDate"
+              locale="ko-kr"
+              @input="$refs.menuAssignedDate.save(assignDialog.assignedDate)"
+            />
+          </v-menu>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            @click="closeAssignDialog"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="primary"
+            :disabled="!canAssign"
+            :loading="assignDialog.loading"
+            @click="onAssign"
+          >
+            추가
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 소속 해제 다이얼로그 -->
+    <v-dialog
+      v-model="unassignDialog.visible"
+      max-width="600px"
+    >
+      <v-card>
+        <v-card-title>소속 해제</v-card-title>
+        <v-card-text>
+          <div class="mb-3">
+            크리에이터: <strong>{{ unassignDialog.target && unassignDialog.target.creatorNickname || '-' }}</strong>
+          </div>
+
+          <v-menu
+            ref="menuUnassignDate"
+            v-model="unassignDialog.menuDate"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-model="unassignDialog.date"
+                label="해제 날짜"
+                readonly
+                dense
+                v-bind="attrs"
+                clearable
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="unassignDialog.date"
+              locale="ko-kr"
+              @input="$refs.menuUnassignDate.save(unassignDialog.date)"
+            />
+          </v-menu>
+
+          <v-menu
+            ref="menuUnassignTime"
+            v-model="unassignDialog.menuTime"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="290px"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-model="unassignDialog.time"
+                label="해제 시간(시:분)"
+                readonly
+                dense
+                v-bind="attrs"
+                clearable
+                v-on="on"
+              />
+            </template>
+            <v-time-picker
+              v-if="unassignDialog.menuTime"
+              v-model="unassignDialog.time"
+              format="24hr"
+              full-width
+              @click:minute="$refs.menuUnassignTime.save(unassignDialog.time)"
+            />
+          </v-menu>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            @click="closeUnassignDialog"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="error"
+            :disabled="!canUnassign"
+            :loading="unassignDialog.loading"
+            @click="onUnassign"
+          >
+            해제
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
 <script>
+import {
+  getAgentAssignedCreatorList,
+  searchAdminAgentAssignableCreators,
+  assignAgentCreator,
+  removeAgentCreator
+} from '@/api/agent'
+
 export default {
   name: 'AgentDetail',
   props: {
@@ -29,9 +270,171 @@ export default {
       type: [String, Number],
       required: true
     }
+  },
+  data() {
+    return {
+      agentNickname: this.$route && this.$route.query ? this.$route.query.nickname : '',
+      is_loading: false,
+      items: [],
+      totalCount: 0,
+      page: 1,
+      page_size: 20,
+
+      assignDialog: {
+        visible: false,
+        loading: false,
+        selectedCreatorId: null,
+        assignedDate: this.todayStr(),
+        menu: false,
+        searchQuery: '',
+        searchItems: [],
+        searchLoading: false,
+      },
+
+      unassignDialog: {
+        visible: false,
+        loading: false,
+        target: null,
+        date: this.todayStr(),
+        time: this.nowTimeHHmm(),
+        menuDate: false,
+        menuTime: false,
+      },
+    }
+  },
+  computed: {
+    total_page() {
+      return Math.max(1, Math.ceil((this.totalCount || 0) / this.page_size))
+    },
+    canAssign() {
+      return !!(this.assignDialog.selectedCreatorId && this.assignDialog.assignedDate)
+    },
+    canUnassign() {
+      return !!(this.unassignDialog.target && this.unassignDialog.date && this.unassignDialog.time)
+    }
+  },
+  created() {
+    this.fetchList(1)
+  },
+  methods: {
+    async fetchList(page = this.page) {
+      if (this.is_loading) return
+      this.is_loading = true
+      try {
+        this.page = page
+        const res = await getAgentAssignedCreatorList(this.agentId, Math.max(1, this.page), this.page_size)
+        // ApiResponse<GetAdminAgentAssignedCreatorResponse>
+        let payload = res && res.data ? res.data : null
+        if (payload && payload.data) payload = payload.data
+        const data = payload || { totalCount: 0, items: [] }
+        this.totalCount = data.totalCount || 0
+        this.items = Array.isArray(data.items) ? data.items : []
+      } catch (e) {
+        this.totalCount = 0
+        this.items = []
+      } finally {
+        this.is_loading = false
+      }
+    },
+    openAssignDialog() {
+      this.assignDialog.visible = true
+      this.assignDialog.selectedCreatorId = null
+      this.assignDialog.assignedDate = this.todayStr()
+      this.assignDialog.searchQuery = ''
+      this.assignDialog.searchItems = []
+    },
+    closeAssignDialog() {
+      this.assignDialog.visible = false
+    },
+    async onSearchCreators(q) {
+      const query = (q || '').trim()
+      this.assignDialog.searchQuery = query
+      if (!query) {
+        this.assignDialog.searchItems = []
+        return
+      }
+      this.assignDialog.searchLoading = true
+      try {
+        const res = await searchAdminAgentAssignableCreators(query)
+        let payload = res && res.data ? res.data : null
+        if (payload && payload.data) payload = payload.data
+        const data = payload || { totalCount: 0, items: [] }
+        this.assignDialog.searchItems = Array.isArray(data.items) ? data.items : []
+      } catch (e) {
+        this.assignDialog.searchItems = []
+      } finally {
+        this.assignDialog.searchLoading = false
+      }
+    },
+    async onAssign() {
+      if (!this.canAssign) return
+      this.assignDialog.loading = true
+      try {
+        const assignedAt = `${this.assignDialog.assignedDate}T00:00:00`
+        await assignAgentCreator({
+          agentId: Number(this.agentId),
+          creatorId: Number(this.assignDialog.selectedCreatorId),
+          assignedAt,
+        })
+        this.closeAssignDialog()
+        this.fetchList(1)
+      } catch (e) {
+        // noop: 에러 토스트 자리는 프로젝트 전역 플러그인 유무에 따라 추가 가능
+      } finally {
+        this.assignDialog.loading = false
+      }
+    },
+    openUnassignDialog(row) {
+      this.unassignDialog.visible = true
+      this.unassignDialog.loading = false
+      this.unassignDialog.target = row
+      this.unassignDialog.date = this.todayStr()
+      this.unassignDialog.time = this.nowTimeHHmm()
+    },
+    closeUnassignDialog() {
+      this.unassignDialog.visible = false
+    },
+    async onUnassign() {
+      if (!this.canUnassign) return
+      this.unassignDialog.loading = true
+      try {
+        const time = this.unassignDialog.time || '00:00'
+        const unassignedAt = `${this.unassignDialog.date}T${time}:00`
+        await removeAgentCreator({
+          creatorId: Number(this.unassignDialog.target.creatorId),
+          unassignedAt,
+        })
+        this.closeUnassignDialog()
+        this.fetchList(this.page)
+      } catch (e) {
+        // noop
+      } finally {
+        this.unassignDialog.loading = false
+      }
+    },
+    formatDateTime(s) {
+      if (!s) return '-'
+      try {
+        // s는 LocalDateTime 문자열(예: 2026-01-01T00:00:00)
+        const [d, t] = String(s).split('T')
+        const hhmm = (t || '').slice(0,5)
+        return `${d} ${hhmm}`
+      } catch (e) {
+        return s
+      }
+    },
+    todayStr() {
+      const d = new Date()
+      const mm = String(d.getMonth() + 1).padStart(2, '0')
+      const dd = String(d.getDate()).padStart(2, '0')
+      return `${d.getFullYear()}-${mm}-${dd}`
+    },
+    nowTimeHHmm() {
+      const d = new Date()
+      const hh = String(d.getHours()).padStart(2, '0')
+      const mm = String(d.getMinutes()).padStart(2, '0')
+      return `${hh}:${mm}`
+    }
   }
 }
 </script>
-
-<style scoped>
-</style>
diff --git a/src/views/Agent/AgentList.vue b/src/views/Agent/AgentList.vue
index b47325c..83d45b1 100644
--- a/src/views/Agent/AgentList.vue
+++ b/src/views/Agent/AgentList.vue
@@ -193,7 +193,7 @@ export default {
       )
     },
     goAgentDetail(item) {
-      this.$router.push({ name: 'AgentDetail', params: { agentId: item.agentId } })
+      this.$router.push({ name: 'AgentDetail', params: { agentId: item.agentId }, query: { nickname: item.agentNickname } })
     },
     goSettlement(item, type) {
       const id = item.agentId
-- 
2.49.1


From d5a75cd29f4e4f154cb5c448cde7ff3017328c72 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sat, 11 Apr 2026 23:04:51 +0900
Subject: [PATCH 07/10] =?UTF-8?q?feat(agent,settlement):=20=ED=81=AC?=
 =?UTF-8?q?=EB=A6=AC=EC=97=90=EC=9D=B4=ED=84=B0=20=EA=B8=B0=EC=A4=80=20?=
 =?UTF-8?q?=EC=A0=95=EC=82=B0=20=EC=83=81=EC=84=B8=20API/=EB=B7=B0=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98/=EC=A0=95=EB=A0=AC=20=EC=9D=BC?=
 =?UTF-8?q?=EA=B4=80=EC=84=B1=20=ED=99=95=EB=B3=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- api/agent: 정산 상세 조회 API 다수 추가(라이브/콘텐츠/커뮤니티/콘텐츠·채널 후원)
- 공통 파라미터 빌더 및 1→0 기반 페이지 변환 유틸 도입으로 Spring Pageable 규약 준수
- 정산 상세 뷰(라이브/콘텐츠/커뮤니티/콘텐츠 후원/채널 후원): 닉네임 표시, 페이지·정렬 파라미터 적용
- 로딩/에러/빈 결과 초기화 처리 강화, 합계 초기화로 실패 시 데이터 오해 방지
- AgentList: 정산 상세 라우팅 시 닉네임 query 전달로 상단 타이틀 표시 개선
---
 src/api/agent.js                              |  59 ++++
 .../Agent/AgentChannelDonationSettlement.vue  | 235 ++++++++++++++-
 src/views/Agent/AgentCommunitySettlement.vue  | 235 ++++++++++++++-
 .../Agent/AgentContentDonationSettlement.vue  | 235 ++++++++++++++-
 src/views/Agent/AgentContentSettlement.vue    | 235 ++++++++++++++-
 src/views/Agent/AgentList.vue                 |   2 +-
 src/views/Agent/AgentLiveSettlement.vue       | 269 +++++++++++++++++-
 7 files changed, 1225 insertions(+), 45 deletions(-)

diff --git a/src/api/agent.js b/src/api/agent.js
index d1a19c4..2faefda 100644
--- a/src/api/agent.js
+++ b/src/api/agent.js
@@ -1,5 +1,11 @@
 import Vue from 'vue'
 
+// 공통: 페이지 파라미터 변환(1-based UI → 0-based Spring Pageable)
+function toZeroBased(page) {
+  const p = Number(page || 1)
+  return Math.max(0, p - 1)
+}
+
 // 에이전트 리스트 조회
 // 서버 스펙에 페이지네이션이 없다면 단순 GET으로 사용
 // 추후 필요 시 params(page,size) 확장 가능
@@ -72,6 +78,53 @@ async function removeAgentCreator(payload) {
   return Vue.axios.post('/admin/partner/agent/assignment/remove', payload)
 }
 
+// =========================
+// 정산 상세 - 에이전트별(크리에이터 기준 집계)
+// 공통 Request: startDateStr, endDateStr, Spring Pageable(page,size,sort)
+// 공통 Response: ApiResponse<GetAgentSettlementByCreatorResponse>
+//   { success, message, data: { totalCount, total:{...}, items:[...] } }
+
+function buildSettlementParams({ startDateStr, endDateStr, page = 1, size = 20, sort }) {
+  const params = {
+    startDateStr,
+    endDateStr,
+    page: toZeroBased(page),
+    size
+  }
+  if (sort) params.sort = sort
+  return params
+}
+
+async function getAgentLiveSettlementByCreator(agentId, { startDateStr, endDateStr, page = 1, size = 20, sort } = {}) {
+  return Vue.axios.get(`/admin/partner/agent/${agentId}/calculate/live-by-creator`, {
+    params: buildSettlementParams({ startDateStr, endDateStr, page, size, sort })
+  })
+}
+
+async function getAgentContentSettlementByCreator(agentId, { startDateStr, endDateStr, page = 1, size = 20, sort } = {}) {
+  return Vue.axios.get(`/admin/partner/agent/${agentId}/calculate/content-by-creator`, {
+    params: buildSettlementParams({ startDateStr, endDateStr, page, size, sort })
+  })
+}
+
+async function getAgentCommunitySettlementByCreator(agentId, { startDateStr, endDateStr, page = 1, size = 20, sort } = {}) {
+  return Vue.axios.get(`/admin/partner/agent/${agentId}/calculate/community-by-creator`, {
+    params: buildSettlementParams({ startDateStr, endDateStr, page, size, sort })
+  })
+}
+
+async function getAgentContentDonationSettlementByCreator(agentId, { startDateStr, endDateStr, page = 1, size = 20, sort } = {}) {
+  return Vue.axios.get(`/admin/partner/agent/${agentId}/calculate/content-donation-by-creator`, {
+    params: buildSettlementParams({ startDateStr, endDateStr, page, size, sort })
+  })
+}
+
+async function getAgentChannelDonationSettlementByCreator(agentId, { startDateStr, endDateStr, page = 1, size = 20, sort } = {}) {
+  return Vue.axios.get(`/admin/partner/agent/${agentId}/calculate/channel-donation-by-creator`, {
+    params: buildSettlementParams({ startDateStr, endDateStr, page, size, sort })
+  })
+}
+
 export {
   getAgentList,
   getAgentSettlementRatioList,
@@ -83,4 +136,10 @@ export {
   searchAdminAgentAssignableCreators,
   assignAgentCreator,
   removeAgentCreator,
+  // 에이전트 정산 상세 (크리에이터 기준)
+  getAgentLiveSettlementByCreator,
+  getAgentContentSettlementByCreator,
+  getAgentCommunitySettlementByCreator,
+  getAgentContentDonationSettlementByCreator,
+  getAgentChannelDonationSettlementByCreator,
 }
diff --git a/src/views/Agent/AgentChannelDonationSettlement.vue b/src/views/Agent/AgentChannelDonationSettlement.vue
index 151ad27..5118352 100644
--- a/src/views/Agent/AgentChannelDonationSettlement.vue
+++ b/src/views/Agent/AgentChannelDonationSettlement.vue
@@ -7,27 +7,244 @@
       >
         <v-icon>mdi-arrow-left</v-icon>
       </v-btn>
-      <v-toolbar-title>에이전트 정산 상세 - 채널 후원</v-toolbar-title>
+      <v-toolbar-title>{{ displayNickname }} 정산 상세 - 채널 후원</v-toolbar-title>
       <v-spacer />
     </v-toolbar>
+
     <v-container>
-      <v-row>
-        <v-col>
-          <h3>채널 후원 정산 상세 페이지 (준비중)</h3>
-          <p>Agent ID: {{ agentId }}</p>
+      <!-- 필터 영역 -->
+      <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="startDateStr"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="startDateStr"
+              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="endDateStr"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="endDateStr"
+              scrollable
+              @input="menuEnd = false"
+            />
+          </v-menu>
+        </v-col>
+        <v-col
+          cols="12"
+          md="2"
+        >
+          <v-btn
+            color="primary"
+            :loading="isLoading"
+            @click="onSearch"
+          >
+            조회
+          </v-btn>
         </v-col>
       </v-row>
+
+
+      <!-- 테이블 영역 -->
+      <v-data-table
+        :headers="headers"
+        :items="items"
+        :loading="isLoading"
+        :items-per-page="pageSize"
+        class="elevation-1"
+        disable-pagination
+        hide-default-footer
+      >
+        <!-- 표 최상단 합계 행 -->
+        <template v-slot:body.prepend>
+          <tr>
+            <td class="text-center">
+              합계
+            </td>
+            <td class="text-center">
+              {{ numberFormat(total.count) }}
+            </td>
+            <td class="text-center">
+              {{ numberFormat(total.totalCan) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.krw) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.fee) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.settlementAmount) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.tax) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.depositAmount) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.agentSettlementAmount) }}
+            </td>
+          </tr>
+        </template>
+        <template v-slot:item.count="{ item }">
+          {{ numberFormat(item.count) }}
+        </template>
+        <template v-slot:item.totalCan="{ item }">
+          {{ numberFormat(item.totalCan) }}
+        </template>
+        <template v-slot:item.krw="{ item }">
+          {{ currencyKRW(item.krw) }}
+        </template>
+        <template v-slot:item.fee="{ item }">
+          {{ currencyKRW(item.fee) }}
+        </template>
+        <template v-slot:item.settlementAmount="{ item }">
+          {{ currencyKRW(item.settlementAmount) }}
+        </template>
+        <template v-slot:item.tax="{ item }">
+          {{ currencyKRW(item.tax) }}
+        </template>
+        <template v-slot:item.depositAmount="{ item }">
+          {{ currencyKRW(item.depositAmount) }}
+        </template>
+        <template v-slot:item.agentSettlementAmount="{ item }">
+          {{ currencyKRW(item.agentSettlementAmount) }}
+        </template>
+      </v-data-table>
+
+      <!-- 페이지네이션 -->
+      <div class="d-flex justify-center mt-2">
+        <v-pagination
+          v-model="page"
+          :length="totalPages"
+          :total-visible="7"
+          @input="onPageChange"
+        />
+      </div>
     </v-container>
   </div>
 </template>
 
 <script>
+import { getAgentChannelDonationSettlementByCreator } from '@/api/agent'
+
 export default {
   name: 'AgentChannelDonationSettlement',
-  props: {
-    agentId: {
-      type: [String, Number],
-      required: true
+  props: { agentId: { type: [String, Number], required: true } },
+  data() {
+    const today = new Date()
+    const yyyy = today.getFullYear()
+    const mm = String(today.getMonth() + 1).padStart(2, '0')
+    const dd = String(today.getDate()).padStart(2, '0')
+    const firstDay = `${yyyy}-${mm}-01`
+    const endDay = `${yyyy}-${mm}-${dd}`
+    return {
+      startDateStr: firstDay,
+      endDateStr: endDay,
+      menuStart: false,
+      menuEnd: false,
+      page: 1,
+      pageSize: 20,
+      isLoading: false,
+      totalCount: 0,
+      totalPages: 1,
+      total: { count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0 },
+      items: [],
+      headers: [
+        { text: '닉네임', value: 'creatorNickname', align: 'center' },
+        { text: '건수', value: 'count', align: 'center', width: 100 },
+        { text: '총 CAN', value: 'totalCan', align: 'center', width: 120 },
+        { text: '원화', value: 'krw', align: 'center', width: 140 },
+        { text: '수수료', value: 'fee', align: 'center', width: 120 },
+        { text: '정산금액', value: 'settlementAmount', align: 'center', width: 140 },
+        { text: '세금', value: 'tax', align: 'center', width: 120 },
+        { text: '입금액', value: 'depositAmount', align: 'center', width: 140 },
+        { text: '에이전트 정산', value: 'agentSettlementAmount', align: 'center', width: 160 },
+      ]
+    }
+  },
+  computed: {
+    displayNickname() {
+      const q = (this.$route && this.$route.query) || {}
+      return q.nickname || '에이전트'
+    }
+  },
+  mounted() { this.fetchList() },
+  methods: {
+    numberFormat(n) { return new Intl.NumberFormat('ko-KR').format(Number(n || 0)) },
+    currencyKRW(n) { return new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW', maximumFractionDigits: 0 }).format(Number(n || 0)) },
+    onSearch() { this.page = 1; this.fetchList() },
+    onPageChange() { this.fetchList() },
+    async fetchList() {
+      this.isLoading = true
+      try {
+        const res = await getAgentChannelDonationSettlementByCreator(this.agentId, {
+          startDateStr: this.startDateStr,
+          endDateStr: this.endDateStr,
+          page: this.page,
+          size: this.pageSize,
+        })
+        let payload = res && res.data ? res.data : null
+        if (payload && payload.data && (!payload.items && !payload.totalCount)) payload = payload.data
+        const data = payload || { totalCount: 0, total: {}, items: [] }
+        this.totalCount = Number(data.totalCount || 0)
+        this.totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize))
+        const defTotal = { count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0 }
+        this.total = Object.assign({}, defTotal, data.total || {})
+        this.items = Array.isArray(data.items) ? data.items : []
+      } catch (e) {
+        this.totalCount = 0
+        this.totalPages = 1
+        this.total = { count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0 }
+        this.items = []
+      } finally {
+        this.isLoading = false
+      }
     }
   }
 }
diff --git a/src/views/Agent/AgentCommunitySettlement.vue b/src/views/Agent/AgentCommunitySettlement.vue
index 524d50c..8e19895 100644
--- a/src/views/Agent/AgentCommunitySettlement.vue
+++ b/src/views/Agent/AgentCommunitySettlement.vue
@@ -7,27 +7,244 @@
       >
         <v-icon>mdi-arrow-left</v-icon>
       </v-btn>
-      <v-toolbar-title>에이전트 정산 상세 - 커뮤니티</v-toolbar-title>
+      <v-toolbar-title>{{ displayNickname }} 정산 상세 - 커뮤니티</v-toolbar-title>
       <v-spacer />
     </v-toolbar>
+
     <v-container>
-      <v-row>
-        <v-col>
-          <h3>커뮤니티 정산 상세 페이지 (준비중)</h3>
-          <p>Agent ID: {{ agentId }}</p>
+      <!-- 필터 영역 -->
+      <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="startDateStr"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="startDateStr"
+              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="endDateStr"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="endDateStr"
+              scrollable
+              @input="menuEnd = false"
+            />
+          </v-menu>
+        </v-col>
+        <v-col
+          cols="12"
+          md="2"
+        >
+          <v-btn
+            color="primary"
+            :loading="isLoading"
+            @click="onSearch"
+          >
+            조회
+          </v-btn>
         </v-col>
       </v-row>
+
+
+      <!-- 테이블 영역 -->
+      <v-data-table
+        :headers="headers"
+        :items="items"
+        :loading="isLoading"
+        :items-per-page="pageSize"
+        class="elevation-1"
+        disable-pagination
+        hide-default-footer
+      >
+        <!-- 표 최상단 합계 행 -->
+        <template v-slot:body.prepend>
+          <tr>
+            <td class="text-center">
+              합계
+            </td>
+            <td class="text-center">
+              {{ numberFormat(total.count) }}
+            </td>
+            <td class="text-center">
+              {{ numberFormat(total.totalCan) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.krw) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.fee) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.settlementAmount) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.tax) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.depositAmount) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.agentSettlementAmount) }}
+            </td>
+          </tr>
+        </template>
+        <template v-slot:item.count="{ item }">
+          {{ numberFormat(item.count) }}
+        </template>
+        <template v-slot:item.totalCan="{ item }">
+          {{ numberFormat(item.totalCan) }}
+        </template>
+        <template v-slot:item.krw="{ item }">
+          {{ currencyKRW(item.krw) }}
+        </template>
+        <template v-slot:item.fee="{ item }">
+          {{ currencyKRW(item.fee) }}
+        </template>
+        <template v-slot:item.settlementAmount="{ item }">
+          {{ currencyKRW(item.settlementAmount) }}
+        </template>
+        <template v-slot:item.tax="{ item }">
+          {{ currencyKRW(item.tax) }}
+        </template>
+        <template v-slot:item.depositAmount="{ item }">
+          {{ currencyKRW(item.depositAmount) }}
+        </template>
+        <template v-slot:item.agentSettlementAmount="{ item }">
+          {{ currencyKRW(item.agentSettlementAmount) }}
+        </template>
+      </v-data-table>
+
+      <!-- 페이지네이션 -->
+      <div class="d-flex justify-center mt-2">
+        <v-pagination
+          v-model="page"
+          :length="totalPages"
+          :total-visible="7"
+          @input="onPageChange"
+        />
+      </div>
     </v-container>
   </div>
 </template>
 
 <script>
+import { getAgentCommunitySettlementByCreator } from '@/api/agent'
+
 export default {
   name: 'AgentCommunitySettlement',
-  props: {
-    agentId: {
-      type: [String, Number],
-      required: true
+  props: { agentId: { type: [String, Number], required: true } },
+  data() {
+    const today = new Date()
+    const yyyy = today.getFullYear()
+    const mm = String(today.getMonth() + 1).padStart(2, '0')
+    const dd = String(today.getDate()).padStart(2, '0')
+    const firstDay = `${yyyy}-${mm}-01`
+    const endDay = `${yyyy}-${mm}-${dd}`
+    return {
+      startDateStr: firstDay,
+      endDateStr: endDay,
+      menuStart: false,
+      menuEnd: false,
+      page: 1,
+      pageSize: 20,
+      isLoading: false,
+      totalCount: 0,
+      totalPages: 1,
+      total: { count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0 },
+      items: [],
+      headers: [
+        { text: '닉네임', value: 'creatorNickname', align: 'center' },
+        { text: '건수', value: 'count', align: 'center', width: 100 },
+        { text: '총 CAN', value: 'totalCan', align: 'center', width: 120 },
+        { text: '원화', value: 'krw', align: 'center', width: 140 },
+        { text: '수수료', value: 'fee', align: 'center', width: 120 },
+        { text: '정산금액', value: 'settlementAmount', align: 'center', width: 140 },
+        { text: '세금', value: 'tax', align: 'center', width: 120 },
+        { text: '입금액', value: 'depositAmount', align: 'center', width: 140 },
+        { text: '에이전트 정산', value: 'agentSettlementAmount', align: 'center', width: 160 },
+      ]
+    }
+  },
+  computed: {
+    displayNickname() {
+      const q = (this.$route && this.$route.query) || {}
+      return q.nickname || '에이전트'
+    }
+  },
+  mounted() { this.fetchList() },
+  methods: {
+    numberFormat(n) { return new Intl.NumberFormat('ko-KR').format(Number(n || 0)) },
+    currencyKRW(n) { return new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW', maximumFractionDigits: 0 }).format(Number(n || 0)) },
+    onSearch() { this.page = 1; this.fetchList() },
+    onPageChange() { this.fetchList() },
+    async fetchList() {
+      this.isLoading = true
+      try {
+        const res = await getAgentCommunitySettlementByCreator(this.agentId, {
+          startDateStr: this.startDateStr,
+          endDateStr: this.endDateStr,
+          page: this.page,
+          size: this.pageSize,
+        })
+        let payload = res && res.data ? res.data : null
+        if (payload && payload.data && (!payload.items && !payload.totalCount)) payload = payload.data
+        const data = payload || { totalCount: 0, total: {}, items: [] }
+        this.totalCount = Number(data.totalCount || 0)
+        this.totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize))
+        const defTotal = { count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0 }
+        this.total = Object.assign({}, defTotal, data.total || {})
+        this.items = Array.isArray(data.items) ? data.items : []
+      } catch (e) {
+        this.totalCount = 0
+        this.totalPages = 1
+        this.total = { count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0 }
+        this.items = []
+      } finally {
+        this.isLoading = false
+      }
     }
   }
 }
diff --git a/src/views/Agent/AgentContentDonationSettlement.vue b/src/views/Agent/AgentContentDonationSettlement.vue
index 8800d26..c97fa8b 100644
--- a/src/views/Agent/AgentContentDonationSettlement.vue
+++ b/src/views/Agent/AgentContentDonationSettlement.vue
@@ -7,27 +7,244 @@
       >
         <v-icon>mdi-arrow-left</v-icon>
       </v-btn>
-      <v-toolbar-title>에이전트 정산 상세 - 콘텐츠 후원</v-toolbar-title>
+      <v-toolbar-title>{{ displayNickname }} 정산 상세 - 콘텐츠 후원</v-toolbar-title>
       <v-spacer />
     </v-toolbar>
+
     <v-container>
-      <v-row>
-        <v-col>
-          <h3>콘텐츠 후원 정산 상세 페이지 (준비중)</h3>
-          <p>Agent ID: {{ agentId }}</p>
+      <!-- 필터 영역 -->
+      <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="startDateStr"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="startDateStr"
+              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="endDateStr"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="endDateStr"
+              scrollable
+              @input="menuEnd = false"
+            />
+          </v-menu>
+        </v-col>
+        <v-col
+          cols="12"
+          md="2"
+        >
+          <v-btn
+            color="primary"
+            :loading="isLoading"
+            @click="onSearch"
+          >
+            조회
+          </v-btn>
         </v-col>
       </v-row>
+
+
+      <!-- 테이블 영역 -->
+      <v-data-table
+        :headers="headers"
+        :items="items"
+        :loading="isLoading"
+        :items-per-page="pageSize"
+        class="elevation-1"
+        disable-pagination
+        hide-default-footer
+      >
+        <!-- 표 최상단 합계 행 -->
+        <template v-slot:body.prepend>
+          <tr>
+            <td class="text-center">
+              합계
+            </td>
+            <td class="text-center">
+              {{ numberFormat(total.count) }}
+            </td>
+            <td class="text-center">
+              {{ numberFormat(total.totalCan) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.krw) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.fee) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.settlementAmount) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.tax) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.depositAmount) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.agentSettlementAmount) }}
+            </td>
+          </tr>
+        </template>
+        <template v-slot:item.count="{ item }">
+          {{ numberFormat(item.count) }}
+        </template>
+        <template v-slot:item.totalCan="{ item }">
+          {{ numberFormat(item.totalCan) }}
+        </template>
+        <template v-slot:item.krw="{ item }">
+          {{ currencyKRW(item.krw) }}
+        </template>
+        <template v-slot:item.fee="{ item }">
+          {{ currencyKRW(item.fee) }}
+        </template>
+        <template v-slot:item.settlementAmount="{ item }">
+          {{ currencyKRW(item.settlementAmount) }}
+        </template>
+        <template v-slot:item.tax="{ item }">
+          {{ currencyKRW(item.tax) }}
+        </template>
+        <template v-slot:item.depositAmount="{ item }">
+          {{ currencyKRW(item.depositAmount) }}
+        </template>
+        <template v-slot:item.agentSettlementAmount="{ item }">
+          {{ currencyKRW(item.agentSettlementAmount) }}
+        </template>
+      </v-data-table>
+
+      <!-- 페이지네이션 -->
+      <div class="d-flex justify-center mt-2">
+        <v-pagination
+          v-model="page"
+          :length="totalPages"
+          :total-visible="7"
+          @input="onPageChange"
+        />
+      </div>
     </v-container>
   </div>
 </template>
 
 <script>
+import { getAgentContentDonationSettlementByCreator } from '@/api/agent'
+
 export default {
   name: 'AgentContentDonationSettlement',
-  props: {
-    agentId: {
-      type: [String, Number],
-      required: true
+  props: { agentId: { type: [String, Number], required: true } },
+  data() {
+    const today = new Date()
+    const yyyy = today.getFullYear()
+    const mm = String(today.getMonth() + 1).padStart(2, '0')
+    const dd = String(today.getDate()).padStart(2, '0')
+    const firstDay = `${yyyy}-${mm}-01`
+    const endDay = `${yyyy}-${mm}-${dd}`
+    return {
+      startDateStr: firstDay,
+      endDateStr: endDay,
+      menuStart: false,
+      menuEnd: false,
+      page: 1,
+      pageSize: 20,
+      isLoading: false,
+      totalCount: 0,
+      totalPages: 1,
+      total: { count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0 },
+      items: [],
+      headers: [
+        { text: '닉네임', value: 'creatorNickname', align: 'center' },
+        { text: '건수', value: 'count', align: 'center', width: 100 },
+        { text: '총 CAN', value: 'totalCan', align: 'center', width: 120 },
+        { text: '원화', value: 'krw', align: 'center', width: 140 },
+        { text: '수수료', value: 'fee', align: 'center', width: 120 },
+        { text: '정산금액', value: 'settlementAmount', align: 'center', width: 140 },
+        { text: '세금', value: 'tax', align: 'center', width: 120 },
+        { text: '입금액', value: 'depositAmount', align: 'center', width: 140 },
+        { text: '에이전트 정산', value: 'agentSettlementAmount', align: 'center', width: 160 },
+      ]
+    }
+  },
+  computed: {
+    displayNickname() {
+      const q = (this.$route && this.$route.query) || {}
+      return q.nickname || '에이전트'
+    }
+  },
+  mounted() { this.fetchList() },
+  methods: {
+    numberFormat(n) { return new Intl.NumberFormat('ko-KR').format(Number(n || 0)) },
+    currencyKRW(n) { return new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW', maximumFractionDigits: 0 }).format(Number(n || 0)) },
+    onSearch() { this.page = 1; this.fetchList() },
+    onPageChange() { this.fetchList() },
+    async fetchList() {
+      this.isLoading = true
+      try {
+        const res = await getAgentContentDonationSettlementByCreator(this.agentId, {
+          startDateStr: this.startDateStr,
+          endDateStr: this.endDateStr,
+          page: this.page,
+          size: this.pageSize,
+        })
+        let payload = res && res.data ? res.data : null
+        if (payload && payload.data && (!payload.items && !payload.totalCount)) payload = payload.data
+        const data = payload || { totalCount: 0, total: {}, items: [] }
+        this.totalCount = Number(data.totalCount || 0)
+        this.totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize))
+        const defTotal = { count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0 }
+        this.total = Object.assign({}, defTotal, data.total || {})
+        this.items = Array.isArray(data.items) ? data.items : []
+      } catch (e) {
+        this.totalCount = 0
+        this.totalPages = 1
+        this.total = { count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0 }
+        this.items = []
+      } finally {
+        this.isLoading = false
+      }
     }
   }
 }
diff --git a/src/views/Agent/AgentContentSettlement.vue b/src/views/Agent/AgentContentSettlement.vue
index 4a64401..98365dd 100644
--- a/src/views/Agent/AgentContentSettlement.vue
+++ b/src/views/Agent/AgentContentSettlement.vue
@@ -7,27 +7,244 @@
       >
         <v-icon>mdi-arrow-left</v-icon>
       </v-btn>
-      <v-toolbar-title>에이전트 정산 상세 - 콘텐츠</v-toolbar-title>
+      <v-toolbar-title>{{ displayNickname }} 정산 상세 - 콘텐츠</v-toolbar-title>
       <v-spacer />
     </v-toolbar>
+
     <v-container>
-      <v-row>
-        <v-col>
-          <h3>콘텐츠 정산 상세 페이지 (준비중)</h3>
-          <p>Agent ID: {{ agentId }}</p>
+      <!-- 필터 영역 -->
+      <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="startDateStr"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="startDateStr"
+              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="endDateStr"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="endDateStr"
+              scrollable
+              @input="menuEnd = false"
+            />
+          </v-menu>
+        </v-col>
+        <v-col
+          cols="12"
+          md="2"
+        >
+          <v-btn
+            color="primary"
+            :loading="isLoading"
+            @click="onSearch"
+          >
+            조회
+          </v-btn>
         </v-col>
       </v-row>
+
+
+      <!-- 테이블 영역 -->
+      <v-data-table
+        :headers="headers"
+        :items="items"
+        :loading="isLoading"
+        :items-per-page="pageSize"
+        class="elevation-1"
+        disable-pagination
+        hide-default-footer
+      >
+        <!-- 표 최상단 합계 행 -->
+        <template v-slot:body.prepend>
+          <tr>
+            <td class="text-center">
+              합계
+            </td>
+            <td class="text-center">
+              {{ numberFormat(total.count) }}
+            </td>
+            <td class="text-center">
+              {{ numberFormat(total.totalCan) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.krw) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.fee) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.settlementAmount) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.tax) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.depositAmount) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.agentSettlementAmount) }}
+            </td>
+          </tr>
+        </template>
+        <template v-slot:item.count="{ item }">
+          {{ numberFormat(item.count) }}
+        </template>
+        <template v-slot:item.totalCan="{ item }">
+          {{ numberFormat(item.totalCan) }}
+        </template>
+        <template v-slot:item.krw="{ item }">
+          {{ currencyKRW(item.krw) }}
+        </template>
+        <template v-slot:item.fee="{ item }">
+          {{ currencyKRW(item.fee) }}
+        </template>
+        <template v-slot:item.settlementAmount="{ item }">
+          {{ currencyKRW(item.settlementAmount) }}
+        </template>
+        <template v-slot:item.tax="{ item }">
+          {{ currencyKRW(item.tax) }}
+        </template>
+        <template v-slot:item.depositAmount="{ item }">
+          {{ currencyKRW(item.depositAmount) }}
+        </template>
+        <template v-slot:item.agentSettlementAmount="{ item }">
+          {{ currencyKRW(item.agentSettlementAmount) }}
+        </template>
+      </v-data-table>
+
+      <!-- 페이지네이션 -->
+      <div class="d-flex justify-center mt-2">
+        <v-pagination
+          v-model="page"
+          :length="totalPages"
+          :total-visible="7"
+          @input="onPageChange"
+        />
+      </div>
     </v-container>
   </div>
 </template>
 
 <script>
+import { getAgentContentSettlementByCreator } from '@/api/agent'
+
 export default {
   name: 'AgentContentSettlement',
-  props: {
-    agentId: {
-      type: [String, Number],
-      required: true
+  props: { agentId: { type: [String, Number], required: true } },
+  data() {
+    const today = new Date()
+    const yyyy = today.getFullYear()
+    const mm = String(today.getMonth() + 1).padStart(2, '0')
+    const dd = String(today.getDate()).padStart(2, '0')
+    const firstDay = `${yyyy}-${mm}-01`
+    const endDay = `${yyyy}-${mm}-${dd}`
+    return {
+      startDateStr: firstDay,
+      endDateStr: endDay,
+      menuStart: false,
+      menuEnd: false,
+      page: 1,
+      pageSize: 20,
+      isLoading: false,
+      totalCount: 0,
+      totalPages: 1,
+      total: { count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0 },
+      items: [],
+      headers: [
+        { text: '닉네임', value: 'creatorNickname', align: 'center' },
+        { text: '건수', value: 'count', align: 'center', width: 100 },
+        { text: '총 CAN', value: 'totalCan', align: 'center', width: 120 },
+        { text: '원화', value: 'krw', align: 'center', width: 140 },
+        { text: '수수료', value: 'fee', align: 'center', width: 120 },
+        { text: '정산금액', value: 'settlementAmount', align: 'center', width: 140 },
+        { text: '세금', value: 'tax', align: 'center', width: 120 },
+        { text: '입금액', value: 'depositAmount', align: 'center', width: 140 },
+        { text: '에이전트 정산', value: 'agentSettlementAmount', align: 'center', width: 160 },
+      ]
+    }
+  },
+  computed: {
+    displayNickname() {
+      const q = (this.$route && this.$route.query) || {}
+      return q.nickname || '에이전트'
+    }
+  },
+  mounted() { this.fetchList() },
+  methods: {
+    numberFormat(n) { return new Intl.NumberFormat('ko-KR').format(Number(n || 0)) },
+    currencyKRW(n) { return new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW', maximumFractionDigits: 0 }).format(Number(n || 0)) },
+    onSearch() { this.page = 1; this.fetchList() },
+    onPageChange() { this.fetchList() },
+    async fetchList() {
+      this.isLoading = true
+      try {
+        const res = await getAgentContentSettlementByCreator(this.agentId, {
+          startDateStr: this.startDateStr,
+          endDateStr: this.endDateStr,
+          page: this.page,
+          size: this.pageSize,
+        })
+        let payload = res && res.data ? res.data : null
+        if (payload && payload.data && (!payload.items && !payload.totalCount)) payload = payload.data
+        const data = payload || { totalCount: 0, total: {}, items: [] }
+        this.totalCount = Number(data.totalCount || 0)
+        this.totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize))
+        const defTotal = { count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0 }
+        this.total = Object.assign({}, defTotal, data.total || {})
+        this.items = Array.isArray(data.items) ? data.items : []
+      } catch (e) {
+        this.totalCount = 0
+        this.totalPages = 1
+        this.total = { count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0 }
+        this.items = []
+      } finally {
+        this.isLoading = false
+      }
     }
   }
 }
diff --git a/src/views/Agent/AgentList.vue b/src/views/Agent/AgentList.vue
index 83d45b1..1f7d87c 100644
--- a/src/views/Agent/AgentList.vue
+++ b/src/views/Agent/AgentList.vue
@@ -206,7 +206,7 @@ export default {
       }
       const name = nameMap[type]
       if (!name) return
-      this.$router.push({ name, params: { agentId: id } })
+      this.$router.push({ name, params: { agentId: id }, query: { nickname: item.agentNickname } })
     }
   }
 }
diff --git a/src/views/Agent/AgentLiveSettlement.vue b/src/views/Agent/AgentLiveSettlement.vue
index 3d43e9c..b711aff 100644
--- a/src/views/Agent/AgentLiveSettlement.vue
+++ b/src/views/Agent/AgentLiveSettlement.vue
@@ -7,27 +7,280 @@
       >
         <v-icon>mdi-arrow-left</v-icon>
       </v-btn>
-      <v-toolbar-title>에이전트 정산 상세 - 라이브</v-toolbar-title>
+      <v-toolbar-title>{{ displayNickname }} 정산 상세 - 라이브</v-toolbar-title>
       <v-spacer />
     </v-toolbar>
+
     <v-container>
-      <v-row>
-        <v-col>
-          <h3>라이브 정산 상세 페이지 (준비중)</h3>
-          <p>Agent ID: {{ agentId }}</p>
+      <!-- 필터 영역 -->
+      <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="startDateStr"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="startDateStr"
+              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="endDateStr"
+                v-on="on"
+              />
+            </template>
+            <v-date-picker
+              v-model="endDateStr"
+              scrollable
+              @input="menuEnd = false"
+            />
+          </v-menu>
+        </v-col>
+
+        <v-col
+          cols="12"
+          md="2"
+        >
+          <v-btn
+            color="primary"
+            :loading="isLoading"
+            @click="onSearch"
+          >
+            조회
+          </v-btn>
         </v-col>
       </v-row>
+
+
+      <!-- 테이블 영역 -->
+      <v-data-table
+        :headers="headers"
+        :items="items"
+        :loading="isLoading"
+        :items-per-page="pageSize"
+        class="elevation-1"
+        disable-pagination
+        hide-default-footer
+      >
+        <!-- 표 최상단 합계 행 -->
+        <template v-slot:body.prepend>
+          <tr>
+            <td class="text-center">
+              합계
+            </td>
+            <td class="text-center">
+              {{ numberFormat(total.count) }}
+            </td>
+            <td class="text-center">
+              {{ numberFormat(total.totalCan) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.krw) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.fee) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.settlementAmount) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.tax) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.depositAmount) }}
+            </td>
+            <td class="text-center">
+              {{ currencyKRW(total.agentSettlementAmount) }}
+            </td>
+          </tr>
+        </template>
+        <template v-slot:item.count="{ item }">
+          {{ numberFormat(item.count) }}
+        </template>
+        <template v-slot:item.totalCan="{ item }">
+          {{ numberFormat(item.totalCan) }}
+        </template>
+        <template v-slot:item.krw="{ item }">
+          {{ currencyKRW(item.krw) }}
+        </template>
+        <template v-slot:item.fee="{ item }">
+          {{ currencyKRW(item.fee) }}
+        </template>
+        <template v-slot:item.settlementAmount="{ item }">
+          {{ currencyKRW(item.settlementAmount) }}
+        </template>
+        <template v-slot:item.tax="{ item }">
+          {{ currencyKRW(item.tax) }}
+        </template>
+        <template v-slot:item.depositAmount="{ item }">
+          {{ currencyKRW(item.depositAmount) }}
+        </template>
+        <template v-slot:item.agentSettlementAmount="{ item }">
+          {{ currencyKRW(item.agentSettlementAmount) }}
+        </template>
+      </v-data-table>
+
+      <!-- 페이지네이션 -->
+      <div class="d-flex justify-center mt-2">
+        <v-pagination
+          v-model="page"
+          :length="totalPages"
+          :total-visible="7"
+          @input="onPageChange"
+        />
+      </div>
     </v-container>
   </div>
 </template>
 
 <script>
+import { getAgentLiveSettlementByCreator } from '@/api/agent'
+
 export default {
   name: 'AgentLiveSettlement',
   props: {
-    agentId: {
-      type: [String, Number],
-      required: true
+    agentId: { type: [String, Number], required: true }
+  },
+  data() {
+    const today = new Date()
+    const yyyy = today.getFullYear()
+    const mm = String(today.getMonth() + 1).padStart(2, '0')
+    const dd = String(today.getDate()).padStart(2, '0')
+    const firstDay = `${yyyy}-${mm}-01`
+    const endDay = `${yyyy}-${mm}-${dd}`
+    return {
+      // 필터
+      startDateStr: firstDay,
+      endDateStr: endDay,
+      menuStart: false,
+      menuEnd: false,
+      page: 1,
+      pageSize: 20,
+
+      // 데이터
+      isLoading: false,
+      totalCount: 0,
+      totalPages: 1,
+      total: {
+        count: 0,
+        totalCan: 0,
+        krw: 0,
+        fee: 0,
+        settlementAmount: 0,
+        tax: 0,
+        depositAmount: 0,
+        agentSettlementAmount: 0
+      },
+      items: [],
+
+      headers: [
+        { text: '닉네임', value: 'creatorNickname', align: 'center' },
+        { text: '건수', value: 'count', align: 'center', width: 100 },
+        { text: '총 CAN', value: 'totalCan', align: 'center', width: 120 },
+        { text: '원화', value: 'krw', align: 'center', width: 140 },
+        { text: '수수료', value: 'fee', align: 'center', width: 120 },
+        { text: '정산금액', value: 'settlementAmount', align: 'center', width: 140 },
+        { text: '세금', value: 'tax', align: 'center', width: 120 },
+        { text: '입금액', value: 'depositAmount', align: 'center', width: 140 },
+        { text: '에이전트 정산', value: 'agentSettlementAmount', align: 'center', width: 160 },
+      ]
+    }
+  },
+  computed: {
+    displayNickname() {
+      const q = (this.$route && this.$route.query) || {}
+      return q.nickname || '에이전트'
+    }
+  },
+  mounted() {
+    this.fetchList()
+  },
+  methods: {
+    numberFormat(n) {
+      const v = Number(n || 0)
+      return new Intl.NumberFormat('ko-KR').format(v)
+    },
+    currencyKRW(n) {
+      const v = Number(n || 0)
+      return new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW', maximumFractionDigits: 0 }).format(v)
+    },
+    onSearch() {
+      this.page = 1
+      this.fetchList()
+    },
+    onPageChange() {
+      this.fetchList()
+    },
+    async fetchList() {
+      this.isLoading = true
+      try {
+        const res = await getAgentLiveSettlementByCreator(this.agentId, {
+          startDateStr: this.startDateStr,
+          endDateStr: this.endDateStr,
+          // UI는 1-based, API 유틸이 0-based로 변환함
+          page: this.page,
+          size: this.pageSize,
+        })
+        // 일부 API가 { data: {...} } 래핑일 수 있으므로 방어적으로 파싱
+        let payload = res && res.data ? res.data : null
+        if (payload && payload.data && (!payload.items && !payload.totalCount)) {
+          payload = payload.data
+        }
+        const data = payload || { totalCount: 0, total: {}, items: [] }
+        this.totalCount = Number(data.totalCount || 0)
+        this.totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize))
+        const defTotal = {
+          count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0
+        }
+        this.total = Object.assign({}, defTotal, data.total || {})
+        this.items = Array.isArray(data.items) ? data.items : []
+      } catch (e) {
+        this.totalCount = 0
+        this.totalPages = 1
+        this.total = { count: 0, totalCan: 0, krw: 0, fee: 0, settlementAmount: 0, tax: 0, depositAmount: 0, agentSettlementAmount: 0 }
+        this.items = []
+      } finally {
+        this.isLoading = false
+      }
     }
   }
 }
-- 
2.49.1


From 0d494d34820ebf69980907f920e19a0fb39c189e Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Sat, 11 Apr 2026 23:11:22 +0900
Subject: [PATCH 08/10] =?UTF-8?q?feat(agent):=20=EC=A0=95=EC=82=B0=20?=
 =?UTF-8?q?=EC=9B=94=20=EB=9D=BC=EB=B2=A8=20=EC=B6=94=EA=B0=80=20=EB=B0=8F?=
 =?UTF-8?q?=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=EC=A0=95=EB=A0=AC/=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 상단 레이아웃을 6/6으로 분할하고 좌측에 현재 `<월> 정산 내역` 라벨 표시
- 총 에이전트 수 표시는 우측 정렬로 유지
- 금액/합계 열 정렬을 text-right → text-center로 통일하여 가독성 향상
- 전역 테이블 셀 가운데 정렬 CSS 추가(th/td)
- 클릭 가능한 금액 셀의 UX 유지(cursor: pointer)
---
 src/views/Agent/AgentList.vue | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/views/Agent/AgentList.vue b/src/views/Agent/AgentList.vue
index 1f7d87c..6c9527c 100644
--- a/src/views/Agent/AgentList.vue
+++ b/src/views/Agent/AgentList.vue
@@ -11,7 +11,13 @@
     <v-container>
       <v-row>
         <v-col
-          cols="12"
+          cols="6"
+          class="text-left"
+        >
+          <strong>{{ settlementMonthLabel }}</strong>
+        </v-col>
+        <v-col
+          cols="6"
           class="text-right"
         >
           총 에이전트 수: <strong>{{ totalCount | numberFormat }}</strong>
@@ -65,36 +71,36 @@
                     {{ item.assignedCreatorCount | numberFormat }}
                   </td>
                   <td
-                    class="text-right clickable"
+                    class="text-center clickable"
                     @click="goSettlement(item, 'live')"
                   >
                     {{ formatCurrency(item.liveAgentSettlementAmount) }}
                   </td>
                   <td
-                    class="text-right clickable"
+                    class="text-center clickable"
                     @click="goSettlement(item, 'content')"
                   >
                     {{ formatCurrency(item.contentAgentSettlementAmount) }}
                   </td>
                   <td
-                    class="text-right clickable"
+                    class="text-center clickable"
                     @click="goSettlement(item, 'community')"
                   >
                     {{ formatCurrency(item.communityAgentSettlementAmount) }}
                   </td>
                   <td
-                    class="text-right clickable"
+                    class="text-center clickable"
                     @click="goSettlement(item, 'content-donation')"
                   >
                     {{ formatCurrency(item.contentDonationAgentSettlementAmount) }}
                   </td>
                   <td
-                    class="text-right clickable"
+                    class="text-center clickable"
                     @click="goSettlement(item, 'channel-donation')"
                   >
                     {{ formatCurrency(item.channelDonationAgentSettlementAmount) }}
                   </td>
-                  <td class="text-right">
+                  <td class="text-center">
                     {{ formatCurrency(totalAmount(item)) }}
                   </td>
                 </tr>
@@ -146,6 +152,13 @@ export default {
       is_loading: false,
     }
   },
+  computed: {
+    settlementMonthLabel() {
+      const now = new Date()
+      const month = now.getMonth() + 1 // 1~12
+      return `${month}월 정산 내역`
+    }
+  },
   created() {
     this.fetchList()
   },
@@ -221,4 +234,9 @@ export default {
 .clickable {
   cursor: pointer;
 }
+/* 테이블 셀 가운데 정렬 */
+table th,
+table td {
+  text-align: center !important;
+}
 </style>
-- 
2.49.1


From ceee1681c967a60357d4f3e5c60722cefca29d35 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Mon, 13 Apr 2026 13:59:26 +0900
Subject: [PATCH 09/10] =?UTF-8?q?feat(agent):=20=EC=97=90=EC=9D=B4?=
 =?UTF-8?q?=EC=A0=84=ED=8A=B8-=ED=81=AC=EB=A6=AC=EC=97=90=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EC=98=A4=EB=A5=98=20=EB=A9=94=EC=8B=9C=EC=A7=80=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Agent/AgentDetail.vue | 72 ++++++++++++++++++++++++---------
 1 file changed, 54 insertions(+), 18 deletions(-)

diff --git a/src/views/Agent/AgentDetail.vue b/src/views/Agent/AgentDetail.vue
index fc62204..98a6bd3 100644
--- a/src/views/Agent/AgentDetail.vue
+++ b/src/views/Agent/AgentDetail.vue
@@ -317,21 +317,42 @@ export default {
     this.fetchList(1)
   },
   methods: {
+    notifyError(message) {
+      // vuetify-dialog 플러그인을 통해 오류 노출
+      if (this.$dialog && this.$dialog.notify && this.$dialog.notify.error) {
+        this.$dialog.notify.error(message)
+      }
+    },
+    getErrorMessage(e) {
+      const fallback = '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.'
+      try {
+        if (!e) return fallback
+        // axios 형태의 에러 응답을 우선 사용
+        const msg = (e.response && e.response.data && (e.response.data.message || e.response.data.error || e.response.data.msg))
+          || e.message
+        return msg || fallback
+      } catch (_) {
+        return fallback
+      }
+    },
     async fetchList(page = this.page) {
       if (this.is_loading) return
       this.is_loading = true
       try {
         this.page = page
         const res = await getAgentAssignedCreatorList(this.agentId, Math.max(1, this.page), this.page_size)
-        // ApiResponse<GetAdminAgentAssignedCreatorResponse>
-        let payload = res && res.data ? res.data : null
-        if (payload && payload.data) payload = payload.data
-        const data = payload || { totalCount: 0, items: [] }
-        this.totalCount = data.totalCount || 0
-        this.items = Array.isArray(data.items) ? data.items : []
+        if (res && res.status === 200 && res.data && res.data.success === true) {
+          const data = (res.data && res.data.data) || { totalCount: 0, items: [] }
+          this.totalCount = data.totalCount || 0
+          this.items = Array.isArray(data.items) ? data.items : []
+        } else {
+          const msg = res && res.data && (res.data.message || res.data.error || res.data.msg)
+          this.notifyError(msg || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
       } catch (e) {
         this.totalCount = 0
         this.items = []
+        this.notifyError(this.getErrorMessage(e))
       } finally {
         this.is_loading = false
       }
@@ -356,12 +377,17 @@ export default {
       this.assignDialog.searchLoading = true
       try {
         const res = await searchAdminAgentAssignableCreators(query)
-        let payload = res && res.data ? res.data : null
-        if (payload && payload.data) payload = payload.data
-        const data = payload || { totalCount: 0, items: [] }
-        this.assignDialog.searchItems = Array.isArray(data.items) ? data.items : []
+        if (res && res.status === 200 && res.data && res.data.success === true) {
+          const data = (res.data && res.data.data) || { totalCount: 0, items: [] }
+          this.assignDialog.searchItems = Array.isArray(data.items) ? data.items : []
+        } else {
+          this.assignDialog.searchItems = []
+          const msg = res && res.data && (res.data.message || res.data.error || res.data.msg)
+          this.notifyError(msg || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
       } catch (e) {
         this.assignDialog.searchItems = []
+        this.notifyError(this.getErrorMessage(e))
       } finally {
         this.assignDialog.searchLoading = false
       }
@@ -371,15 +397,20 @@ export default {
       this.assignDialog.loading = true
       try {
         const assignedAt = `${this.assignDialog.assignedDate}T00:00:00`
-        await assignAgentCreator({
+        const res = await assignAgentCreator({
           agentId: Number(this.agentId),
           creatorId: Number(this.assignDialog.selectedCreatorId),
           assignedAt,
         })
-        this.closeAssignDialog()
-        this.fetchList(1)
+        if (res && res.status === 200 && res.data && res.data.success === true) {
+          this.closeAssignDialog()
+          this.fetchList(1)
+        } else {
+          const msg = res && res.data && (res.data.message || res.data.error || res.data.msg)
+          this.notifyError(msg || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
       } catch (e) {
-        // noop: 에러 토스트 자리는 프로젝트 전역 플러그인 유무에 따라 추가 가능
+        this.notifyError(this.getErrorMessage(e))
       } finally {
         this.assignDialog.loading = false
       }
@@ -400,14 +431,19 @@ export default {
       try {
         const time = this.unassignDialog.time || '00:00'
         const unassignedAt = `${this.unassignDialog.date}T${time}:00`
-        await removeAgentCreator({
+        const res = await removeAgentCreator({
           creatorId: Number(this.unassignDialog.target.creatorId),
           unassignedAt,
         })
-        this.closeUnassignDialog()
-        this.fetchList(this.page)
+        if (res && res.status === 200 && res.data && res.data.success === true) {
+          this.closeUnassignDialog()
+          this.fetchList(this.page)
+        } else {
+          const msg = res && res.data && (res.data.message || res.data.error || res.data.msg)
+          this.notifyError(msg || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
       } catch (e) {
-        // noop
+        this.notifyError(this.getErrorMessage(e))
       } finally {
         this.unassignDialog.loading = false
       }
-- 
2.49.1


From 2e499483dda6bf0689f4fe2e5522a094b8b59ca7 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Mon, 13 Apr 2026 14:04:58 +0900
Subject: [PATCH 10/10] =?UTF-8?q?feat(agent):=20=EC=86=8C=EC=86=8D=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=20=ED=81=AC=EB=A6=AC=EC=97=90=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EA=B2=80=EC=83=89=20=EB=94=94=EB=B0=94=EC=9A=B4=EC=8A=A4=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- onSearchCreators에 300ms 디바운스 로직 추가
- assignDialog.searchDebounceTimer 상태 추가 및 다이얼로그/소멸 시 정리
- 최신 검색어와 응답 불일치 시 결과 반영 방지 가드
- 검색어 비었을 때 로딩/결과 초기화 처리 강화
---
 src/views/Agent/AgentDetail.vue | 73 +++++++++++++++++++++++++--------
 1 file changed, 56 insertions(+), 17 deletions(-)

diff --git a/src/views/Agent/AgentDetail.vue b/src/views/Agent/AgentDetail.vue
index 98a6bd3..d80257b 100644
--- a/src/views/Agent/AgentDetail.vue
+++ b/src/views/Agent/AgentDetail.vue
@@ -289,6 +289,8 @@ export default {
         searchQuery: '',
         searchItems: [],
         searchLoading: false,
+        // 디바운스 타이머 보관
+        searchDebounceTimer: null,
       },
 
       unassignDialog: {
@@ -316,6 +318,13 @@ export default {
   created() {
     this.fetchList(1)
   },
+  beforeDestroy() {
+    // 검색 디바운스 타이머 정리
+    if (this.assignDialog && this.assignDialog.searchDebounceTimer) {
+      clearTimeout(this.assignDialog.searchDebounceTimer)
+      this.assignDialog.searchDebounceTimer = null
+    }
+  },
   methods: {
     notifyError(message) {
       // vuetify-dialog 플러그인을 통해 오류 노출
@@ -366,31 +375,61 @@ export default {
     },
     closeAssignDialog() {
       this.assignDialog.visible = false
+      // 다이얼로그 닫힐 때 디바운스 및 로딩 상태 초기화
+      if (this.assignDialog.searchDebounceTimer) {
+        clearTimeout(this.assignDialog.searchDebounceTimer)
+        this.assignDialog.searchDebounceTimer = null
+      }
+      this.assignDialog.searchLoading = false
     },
-    async onSearchCreators(q) {
+    onSearchCreators(q) {
       const query = (q || '').trim()
       this.assignDialog.searchQuery = query
+
+      // 기존 타이머가 있으면 취소
+      if (this.assignDialog.searchDebounceTimer) {
+        clearTimeout(this.assignDialog.searchDebounceTimer)
+        this.assignDialog.searchDebounceTimer = null
+      }
+
       if (!query) {
+        // 검색어 없으면 결과/로딩 초기화
         this.assignDialog.searchItems = []
+        this.assignDialog.searchLoading = false
         return
       }
-      this.assignDialog.searchLoading = true
-      try {
-        const res = await searchAdminAgentAssignableCreators(query)
-        if (res && res.status === 200 && res.data && res.data.success === true) {
-          const data = (res.data && res.data.data) || { totalCount: 0, items: [] }
-          this.assignDialog.searchItems = Array.isArray(data.items) ? data.items : []
-        } else {
-          this.assignDialog.searchItems = []
-          const msg = res && res.data && (res.data.message || res.data.error || res.data.msg)
-          this.notifyError(msg || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+
+      // 디바운스: 300ms 이후 최신 검색어로 요청
+      this.assignDialog.searchDebounceTimer = setTimeout(async () => {
+        // 요청 직전 로딩 시작
+        this.assignDialog.searchLoading = true
+        const currentQuery = this.assignDialog.searchQuery
+        try {
+          const res = await searchAdminAgentAssignableCreators(currentQuery)
+          // 사용자가 그 사이에 검색어를 바꿨다면 이 응답은 무시
+          if (this.assignDialog.searchQuery !== currentQuery) return
+
+          if (res && res.status === 200 && res.data && res.data.success === true) {
+            const data = (res.data && res.data.data) || { totalCount: 0, items: [] }
+            this.assignDialog.searchItems = Array.isArray(data.items) ? data.items : []
+          } else {
+            this.assignDialog.searchItems = []
+            const msg = res && res.data && (res.data.message || res.data.error || res.data.msg)
+            this.notifyError(msg || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          }
+        } catch (e) {
+          // 에러 시에도 최신 검색어와 일치할 때만 처리
+          if (this.assignDialog.searchQuery === currentQuery) {
+            this.assignDialog.searchItems = []
+            this.notifyError(this.getErrorMessage(e))
+          }
+        } finally {
+          // 최신 검색어와 일치할 때만 로딩 해제
+          if (this.assignDialog.searchQuery === currentQuery) {
+            this.assignDialog.searchLoading = false
+          }
         }
-      } catch (e) {
-        this.assignDialog.searchItems = []
-        this.notifyError(this.getErrorMessage(e))
-      } finally {
-        this.assignDialog.searchLoading = false
-      }
+      }, 300)
     },
     async onAssign() {
       if (!this.canAssign) return
-- 
2.49.1