feat(agent): 정산 월 라벨 추가 및 테이블 정렬/레이아웃 개선

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

src/api/agent.js

@@ -0,0 +1,145 @@
+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) 확장 가능
+async function getAgentList() {
+  return Vue.axios.get('/admin/partner/agent/list')
+}
+
+// 에이전트 정산 비율 목록 조회
+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 []
+  }
+}
+
+// 에이전트 소속 크리에이터 목록 조회
+// 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)
+}
+
+// =========================
+// 정산 상세 - 에이전트별(크리에이터 기준 집계)
+// 공통 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,
+  createAgentSettlementRatio,
+  updateAgentSettlementRatio,
+  searchAgentByNickname,
+  // 에이전트 상세 - 소속 크리에이터 관리
+  getAgentAssignedCreatorList,
+  searchAdminAgentAssignableCreators,
+  assignAgentCreator,
+  removeAgentCreator,
+  // 에이전트 정산 상세 (크리에이터 기준)
+  getAgentLiveSettlementByCreator,
+  getAgentContentSettlementByCreator,
+  getAgentCommunitySettlementByCreator,
+  getAgentContentDonationSettlementByCreator,
+  getAgentChannelDonationSettlementByCreator,
+}

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 === '정산 관리')

src/router/index.js

@@ -50,6 +50,53 @@ 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/: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',
+                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',

src/views/Agent/AgentChannelDonationSettlement.vue

@@ -0,0 +1,254 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>{{ displayNickname }} 정산 상세 - 채널 후원</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <v-container>
+      <!-- 필터 영역 -->
+      <v-row
+        class="mt-2 mb-2"
+        align="center"
+        justify="end"
+      >
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuStart"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="시작일"
+                readonly
+                dense
+                :value="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 } },
+  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
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/Agent/AgentCommunitySettlement.vue

@@ -0,0 +1,254 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>{{ displayNickname }} 정산 상세 - 커뮤니티</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <v-container>
+      <!-- 필터 영역 -->
+      <v-row
+        class="mt-2 mb-2"
+        align="center"
+        justify="end"
+      >
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuStart"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="시작일"
+                readonly
+                dense
+                :value="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 } },
+  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
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/Agent/AgentContentDonationSettlement.vue

@@ -0,0 +1,254 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>{{ displayNickname }} 정산 상세 - 콘텐츠 후원</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <v-container>
+      <!-- 필터 영역 -->
+      <v-row
+        class="mt-2 mb-2"
+        align="center"
+        justify="end"
+      >
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuStart"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="시작일"
+                readonly
+                dense
+                :value="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 } },
+  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
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/Agent/AgentContentSettlement.vue

@@ -0,0 +1,254 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>{{ displayNickname }} 정산 상세 - 콘텐츠</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <v-container>
+      <!-- 필터 영역 -->
+      <v-row
+        class="mt-2 mb-2"
+        align="center"
+        justify="end"
+      >
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuStart"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="시작일"
+                readonly
+                dense
+                :value="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 } },
+  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
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/Agent/AgentDetail.vue

@@ -0,0 +1,440 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <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>
+          <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: {
+    agentId: {
+      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>

src/views/Agent/AgentList.vue

@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>에이전트 리스트</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col
+          cols="6"
+          class="text-left"
+        >
+          <strong>{{ settlementMonthLabel }}</strong>
+        </v-col>
+        <v-col
+          cols="6"
+          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-center clickable"
+                    @click="goSettlement(item, 'live')"
+                  >
+                    {{ formatCurrency(item.liveAgentSettlementAmount) }}
+                  </td>
+                  <td
+                    class="text-center clickable"
+                    @click="goSettlement(item, 'content')"
+                  >
+                    {{ formatCurrency(item.contentAgentSettlementAmount) }}
+                  </td>
+                  <td
+                    class="text-center clickable"
+                    @click="goSettlement(item, 'community')"
+                  >
+                    {{ formatCurrency(item.communityAgentSettlementAmount) }}
+                  </td>
+                  <td
+                    class="text-center clickable"
+                    @click="goSettlement(item, 'content-donation')"
+                  >
+                    {{ formatCurrency(item.contentDonationAgentSettlementAmount) }}
+                  </td>
+                  <td
+                    class="text-center clickable"
+                    @click="goSettlement(item, 'channel-donation')"
+                  >
+                    {{ formatCurrency(item.channelDonationAgentSettlementAmount) }}
+                  </td>
+                  <td class="text-center">
+                    {{ 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,
+    }
+  },
+  computed: {
+    settlementMonthLabel() {
+      const now = new Date()
+      const month = now.getMonth() + 1 // 1~12
+      return `${month}월 정산 내역`
+    }
+  },
+  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 }, query: { nickname: item.agentNickname } })
+    },
+    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 }, query: { nickname: item.agentNickname } })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.link {
+  color: #3f51b5;
+  cursor: pointer;
+  text-decoration: underline;
+}
+.clickable {
+  cursor: pointer;
+}
+/* 테이블 셀 가운데 정렬 */
+table th,
+table td {
+  text-align: center !important;
+}
+</style>

src/views/Agent/AgentLiveSettlement.vue

@@ -0,0 +1,290 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="$router.back()"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-toolbar-title>{{ displayNickname }} 정산 상세 - 라이브</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <v-container>
+      <!-- 필터 영역 -->
+      <v-row
+        class="mt-2 mb-2"
+        align="center"
+        justify="end"
+      >
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-menu
+            v-model="menuStart"
+            :close-on-content-click="false"
+            transition="scale-transition"
+            offset-y
+            min-width="auto"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-text-field
+                v-bind="attrs"
+                label="시작일"
+                readonly
+                dense
+                :value="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 }
+  },
+  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
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/Agent/AgentSettlementRatio.vue

@@ -0,0 +1,339 @@
+<template>
+  <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>

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 {