feat(content-list): 검색 버튼 색상 수정

- 검색 버튼 색상: #3bb9f1로 변경

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/api/audio_content_series.js

@@ -43,7 +43,7 @@ async function getSeriesBannerList(page = 1, size = 20) {
 async function createSeriesBanner(bannerData) {
   const formData = new FormData();
   if (bannerData.image) formData.append("image", bannerData.image);
-  const requestData = { seriesId: bannerData.seriesId };
+  const requestData = { seriesId: bannerData.seriesId, lang: bannerData.lang };
   formData.append("request", JSON.stringify(requestData));
   return Vue.axios.post("/admin/audio-content/series/banner/register", formData, {
     headers: { "Content-Type": "multipart/form-data" }

src/api/character.js

@@ -115,9 +115,10 @@ async function createCharacterBanner(bannerData) {
   // 이미지 FormData에 추가
   if (bannerData.image) formData.append('image', bannerData.image)
 
-  // 캐릭터 ID를 JSON 문자열로 변환하여 request 필드에 추가
+  // 캐릭터 ID와 언어 코드를 JSON 문자열로 변환하여 request 필드에 추가
   const requestData = {
-    characterId: bannerData.characterId
+    characterId: bannerData.characterId,
+    lang: bannerData.lang
   }
 
   formData.append('request', JSON.stringify(requestData))

src/api/member.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 
 async function login(email, password) {
-    return Vue.axios.post('/member/login', {
+    return Vue.axios.post('/admin/member/login', {
         email,
         password,
         isAdmin: true,

src/api/original_series_settlement.js

@@ -0,0 +1,37 @@
+import Vue from 'vue';
+
+// 소지 유저 조회
+async function getOwners() {
+  return Vue.axios.get('/admin/calculate/original-series/owners');
+}
+
+// 정산 내역 조회 (page는 1부터 시작하는 UI 기준, 서버에는 0부터 전달)
+async function getSettlementDetails({ startDate, endDate, creatorId, page = 1, size = 10 }) {
+  const params = new URLSearchParams();
+  // 서버 파라미터 스펙 변경: start_date, end_date, creator_id
+  if (startDate) params.append('start_date', startDate);
+  if (endDate) params.append('end_date', endDate);
+  if (creatorId != null) params.append("creator_id", creatorId);
+  params.append('page', Math.max(0, (page || 1) - 1));
+  params.append('size', size || 10);
+
+  return Vue.axios.get(`/admin/calculate/original-series/settlement-details?${params.toString()}`);
+}
+
+// 엑셀 다운로드 (xlsx 바이너리)
+async function downloadSettlementExcel({ startDate, endDate }) {
+  const params = new URLSearchParams();
+  // 서버 파라미터 스펙 변경: start_date, end_date
+  if (startDate) params.append('start_date', startDate);
+  if (endDate) params.append('end_date', endDate);
+
+  return Vue.axios.get(`/admin/calculate/original-series/settlement-details/excel?${params.toString()}` , {
+    responseType: 'blob'
+  });
+}
+
+export {
+  getOwners,
+  getSettlementDetails,
+  downloadSettlementExcel,
+};

src/components/SideMenu.vue

@@ -94,80 +94,135 @@ export default {
       this.isLoading = true
       try {
         let res = await api.getMenus();
-        if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
-          this.items = res.data.data
+        if (res.status === 200 && res.data.success === true) {
+          // 기본 메뉴 설정 (API 결과가 비어있을 수 있음)
+          this.items = Array.isArray(res.data.data) ? res.data.data : []
 
-          // '시리즈 관리' 메뉴에 '배너 등록' 하위 메뉴 추가
-          try {
-            const seriesMenu = this.items.find(m => m && m.title === '시리즈 관리')
-            if (seriesMenu) {
-              if (!Array.isArray(seriesMenu.items)) {
-                seriesMenu.items = seriesMenu.items ? [].concat(seriesMenu.items) : []
-              }
-              const exists = seriesMenu.items.some(ci => ci && ci.route === '/content/series/banner')
-              if (!exists) {
-                seriesMenu.items.push({
-                  title: '배너 등록',
-                  route: '/content/series/banner',
-                  items: null
-                })
+          // 현재 사용자 역할 확인
+          const role = (this.$store && this.$store.state && this.$store.state.accountStore && this.$store.state.accountStore.role)
+            || localStorage.role
+
+          // ADMIN 권한 전용 추가 메뉴들
+          if (role === 'ADMIN') {
+            // '시리즈 관리' 메뉴에 '배너 등록' 하위 메뉴 추가
+            try {
+              const seriesMenu = this.items.find(m => m && m.title === '시리즈 관리')
+              if (seriesMenu) {
+                if (!Array.isArray(seriesMenu.items)) {
+                  seriesMenu.items = seriesMenu.items ? [].concat(seriesMenu.items) : []
+                }
+                const exists = seriesMenu.items.some(ci => ci && ci.route === '/content/series/banner')
+                if (!exists) {
+                  seriesMenu.items.push({
+                    title: '배너 등록',
+                    route: '/content/series/banner',
+                    items: null
+                  })
+                }
               }
+            } catch (e) {
+              // ignore
+            }
+
+            // 캐릭터 챗봇 메뉴 추가
+            this.items.push({
+              title: '캐릭터 챗봇',
+              route: null,
+              items: [
+                {
+                  title: '배너 등록',
+                  route: '/character/banner',
+                  items: null
+                },
+                {
+                  title: '캐릭터 리스트',
+                  route: '/character',
+                  items: null
+                },
+                {
+                  title: '큐레이션',
+                  route: '/character/curation',
+                  items: null
+                },
+                {
+                  title: '정산',
+                  route: '/character/calculate',
+                  items: null
+                },
+                {
+                  title: '원작',
+                  route: '/original-work',
+                  items: null
+                },
+              ]
+            })
+
+            // 에이전트 관리 메뉴를 '크리에이터 관리' 바로 아래에 추가
+            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 === '정산현황')
+              if (calculateMenu) {
+                if (!Array.isArray(calculateMenu.items)) {
+                  calculateMenu.items = calculateMenu.items ? [].concat(calculateMenu.items) : []
+                }
+                const exists = calculateMenu.items.some(ci => ci && ci.route === '/calculate/channel-donation')
+                if (!exists) {
+                  calculateMenu.items.push({
+                    title: '채널 후원 정산',
+                    route: '/calculate/channel-donation',
+                    items: null
+                  })
+                }
+
+                const existsOriginal = calculateMenu.items.some(ci => ci && ci.route === '/calculate/original-series')
+                if (!existsOriginal) {
+                  calculateMenu.items.push({
+                    title: '오리지널 시리즈 정산',
+                    route: '/calculate/original-series',
+                    items: null
+                  })
+                }
+              }
+            } catch (e) {
+              // ignore
             }
-          } catch (e) {
-            // ignore
           }
 
-          // 캐릭터 챗봇 메뉴 추가
-          this.items.push({
-            title: '캐릭터 챗봇',
-            route: null,
-            items: [
-              {
-                title: '배너 등록',
-                route: '/character/banner',
-                items: null
-              },
-              {
-                title: '캐릭터 리스트',
-                route: '/character',
-                items: null
-              },
-              {
-                title: '큐레이션',
-                route: '/character/curation',
-                items: null
-              },
-              {
-                title: '정산',
-                route: '/character/calculate',
-                items: null
-              },
-              {
-                title: '원작',
-                route: '/original-work',
-                items: null
-              },
-            ]
-          })
+          // 조회한 메뉴가 비어 있고, 콘텐츠 매니저라면 기본 메뉴 추가
+          if (this.items.length === 0 && role === 'CONTENT_MANAGER') {
+            this.items.push({
+              title: '콘텐츠 리스트',
+              route: '/content/list',
+              items: null
+            })
+          }
 
-          // 정산 관리 메뉴에 '채널 후원 정산' 추가
-          try {
-            const calculateMenu = this.items.find(m => m && m.title === '정산 관리')
-            if (calculateMenu) {
-              if (!Array.isArray(calculateMenu.items)) {
-                calculateMenu.items = calculateMenu.items ? [].concat(calculateMenu.items) : []
-              }
-              const exists = calculateMenu.items.some(ci => ci && ci.route === '/calculate/channel-donation')
-              if (!exists) {
-                calculateMenu.items.push({
-                  title: '채널 후원 정산',
-                  route: '/calculate/channel-donation',
-                  items: null
-                })
-              }
-            }
-          } catch (e) {
-            // ignore
+          // 그래도 비어있다면 이전 동작과 동일하게 처리
+          if (this.items.length === 0) {
+            this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
+            this.logout();
           }
         } else {
           this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")

src/router/index.js

@@ -50,6 +50,58 @@ const routes = [
                 name: 'CreatorReview',
                 component: () => import(/* webpackChunkName: "counselor" */ '../views/Creator/CreatorSettlementRatio.vue')
             },
+            // Agent Management
+            {
+                path: '/calculate/original-series',
+                name: 'OriginalSeriesSettlement',
+                component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/OriginalSeriesSettlement.vue')
+            },
+            {
+                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/store/accountStore.js

@@ -12,17 +12,13 @@ enhanceAccessToken();
 const accountStore = {
     namespaced: true,
     state: {
-        userId: '',
-        nickname: '',
         accessToken: '',
-        profileImage: '',
+        role: '',
     },
     getters: {
         isAuthenticated(state) {
-            state.userId = state.userId || localStorage.userId
-            state.nickname = state.nickname || localStorage.nickname
-            state.profileImage = state.profileImage || localStorage.profileImage
             state.accessToken = state.accessToken || localStorage.accessToken
+            state.role = state.role || localStorage.role
 
             return state.accessToken !== undefined &&
                 state.accessToken !== null &&
@@ -31,27 +27,19 @@ const accountStore = {
         }
     },
     mutations: {
-        LOGIN(state, {userId, nickname, token, profileImage}) {
-            state.userId = userId
-            localStorage.userId = userId
-
-            state.nickname = nickname
-            localStorage.nickname = nickname
-
-            state.profileImage = profileImage
-            localStorage.profileImage = profileImage
-
+        LOGIN(state, {token, role}) {
             state.accessToken = token
             localStorage.accessToken = token
 
+            state.role = role
+            localStorage.role = role
+
             Vue.axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
         },
 
         LOGOUT(state) {
-            state.userId = ''
-            state.nickname = ''
-            state.profileImage = ''
             state.accessToken = ''
+            state.role = ''
 
             localStorage.clear()
             if (location.pathname === '/') {

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,515 @@
+<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,
+        // 디바운스 타이머 보관
+        searchDebounceTimer: null,
+      },
+
+      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)
+  },
+  beforeDestroy() {
+    // 검색 디바운스 타이머 정리
+    if (this.assignDialog && this.assignDialog.searchDebounceTimer) {
+      clearTimeout(this.assignDialog.searchDebounceTimer)
+      this.assignDialog.searchDebounceTimer = null
+    }
+  },
+  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)
+        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
+      }
+    },
+    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
+      // 다이얼로그 닫힐 때 디바운스 및 로딩 상태 초기화
+      if (this.assignDialog.searchDebounceTimer) {
+        clearTimeout(this.assignDialog.searchDebounceTimer)
+        this.assignDialog.searchDebounceTimer = null
+      }
+      this.assignDialog.searchLoading = false
+    },
+    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
+      }
+
+      // 디바운스: 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
+          }
+        }
+      }, 300)
+    },
+    async onAssign() {
+      if (!this.canAssign) return
+      this.assignDialog.loading = true
+      try {
+        const assignedAt = `${this.assignDialog.assignedDate}T00:00:00`
+        const res = await assignAgentCreator({
+          agentId: Number(this.agentId),
+          creatorId: Number(this.assignDialog.selectedCreatorId),
+          assignedAt,
+        })
+        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) {
+        this.notifyError(this.getErrorMessage(e))
+      } 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`
+        const res = await removeAgentCreator({
+          creatorId: Number(this.unassignDialog.target.creatorId),
+          unassignedAt,
+        })
+        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) {
+        this.notifyError(this.getErrorMessage(e))
+      } 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/Calculate/OriginalSeriesSettlement.vue

@@ -0,0 +1,340 @@
+<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-btn
+        color="primary"
+        :loading="excelLoading"
+        @click="onDownloadExcel"
+      >
+        엑셀 다운로드
+      </v-btn>
+    </v-toolbar>
+
+    <v-container>
+      <!-- 필터 영역 -->
+      <v-row
+        class="mt-2 mb-2"
+        align="center"
+        justify="end"
+      >
+        <v-col
+          cols="12"
+          md="3"
+        >
+          <v-autocomplete
+            v-model="selectedCreatorId"
+            :items="ownerOptions"
+            :loading="ownersLoading"
+            item-text="nickname"
+            item-value="creatorId"
+            label="멤버 선택"
+            dense
+            clearable
+            hide-details
+          />
+        </v-col>
+
+        <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:no-data>
+          <div class="text-center grey--text pa-6">
+            데이터가 없습니다.
+          </div>
+        </template>
+        <template v-slot:item.price="{ item }">
+          <span>{{ numberFormat(item.price) }}</span>
+        </template>
+        <template v-slot:item.totalCan="{ item }">
+          <span>{{ numberFormat(item.totalCan) }}</span>
+        </template>
+        <template v-slot:item.totalPoint="{ item }">
+          <span>{{ numberFormat(item.totalPoint) }}</span>
+        </template>
+      </v-data-table>
+
+      <v-row
+        class="mt-4"
+        justify="center"
+      >
+        <v-pagination
+          v-model="page"
+          :length="totalPages"
+          :total-visible="7"
+          @input="fetchList"
+        />
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import {
+  getOwners,
+  getSettlementDetails,
+  downloadSettlementExcel,
+} from "@/api/original_series_settlement";
+
+export default {
+  name: "OriginalSeriesSettlement",
+  data() {
+    return {
+      // 필터 상태
+      ownersLoading: false,
+      ownerOptions: [],
+      selectedCreatorId: null,
+      startDateStr: "",
+      endDateStr: "",
+      menuStart: false,
+      menuEnd: false,
+
+      // 목록 상태
+      isLoading: false,
+      items: [],
+      totalCount: 0,
+      page: 1,
+      pageSize: 20,
+
+      excelLoading: false,
+
+      headers: [
+        { text: "시리즈 제목", value: "seriesTitle", align: "center" },
+        { text: "콘텐츠 제목", value: "contentTitle", align: "center" },
+        { text: "가격", value: "price", align: "center" },
+        { text: "구분", value: "orderType", align: "center" },
+        { text: "판매 수", value: "salesCount", align: "center" },
+        { text: "합계(캔)", value: "totalCan", align: "center" },
+        { text: "합계(포인트)", value: "totalPoint", align: "center" },
+      ],
+    };
+  },
+  computed: {
+    totalPages() {
+      return Math.max(1, Math.ceil(this.totalCount / this.pageSize));
+    },
+  },
+  created() {
+    this.initDefaultDates();
+    this.loadOwners();
+  },
+  methods: {
+    numberFormat(v) {
+      if (v === null || v === undefined) return "-";
+      try {
+        return Number(v).toLocaleString();
+      } catch (e) {
+        return String(v);
+      }
+    },
+
+    notifyError(message) {
+      this.$dialog.notify.error(message);
+    },
+    notifySuccess(message) {
+      this.$dialog.notify.success(message);
+    },
+
+    // 이번 달 1일 ~ 오늘
+    initDefaultDates() {
+      const now = new Date();
+      const y = now.getFullYear();
+      const m = now.getMonth();
+      const first = new Date(y, m, 1);
+      const pad = (n) => (n < 10 ? "0" + n : "" + n);
+      this.startDateStr = `${first.getFullYear()}-${pad(
+        first.getMonth() + 1
+      )}-${pad(first.getDate())}`;
+      this.endDateStr = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(
+        now.getDate()
+      )}`;
+    },
+
+    async loadOwners() {
+      this.ownersLoading = true;
+      try {
+        const res = await getOwners();
+        if (res.status === 200 && res.data && res.data.success) {
+          const list = Array.isArray(res.data.data) ? res.data.data : [];
+          this.ownerOptions = list;
+          // 가장 조회된 값 순서로 온다고 가정, 첫 번째를 기본 선택
+          if (list.length > 0) {
+            this.selectedCreatorId = list[0].creatorId;
+          }
+          // 초기 조회 (이번 달 범위, 기본 멤버)
+          this.page = 1;
+          await this.fetchList();
+        } else {
+          this.notifyError(
+            res.data && res.data.message
+              ? res.data.message
+              : "소지 유저 조회 실패"
+          );
+        }
+      } catch (e) {
+        this.notifyError("소지 유저 조회 중 오류가 발생했습니다.");
+      } finally {
+        this.ownersLoading = false;
+      }
+    },
+
+    async onSearch() {
+      this.page = 1;
+      await this.fetchList();
+    },
+
+    async fetchList() {
+      if (!this.selectedCreatorId) {
+        this.items = [];
+        this.totalCount = 0;
+        return;
+      }
+      this.isLoading = true;
+      try {
+        const res = await getSettlementDetails({
+          startDate: this.startDateStr,
+          endDate: this.endDateStr,
+          creatorId: this.selectedCreatorId,
+          page: this.page,
+          size: this.pageSize,
+        });
+        if (res.status === 200 && res.data) {
+          if (res.data.success) {
+            const data = res.data.data || { totalCount: 0, items: [] };
+            this.totalCount = data.totalCount || 0;
+            this.items = Array.isArray(data.items) ? data.items : [];
+          } else {
+            this.notifyError(res.data.message || "정산 내역 조회 실패");
+          }
+        } else {
+          this.notifyError("정산 내역 조회 실패");
+        }
+      } catch (e) {
+        this.notifyError("정산 내역 조회 중 오류가 발생했습니다.");
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    async onDownloadExcel() {
+      this.excelLoading = true;
+      try {
+        const res = await downloadSettlementExcel({
+          startDate: this.startDateStr,
+          endDate: this.endDateStr,
+        });
+        const blob = new Blob([res.data], {
+          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.setAttribute("download", "오리지널_시리즈_정산.xlsx");
+        document.body.appendChild(link);
+        link.click();
+        link.parentNode.removeChild(link);
+        window.URL.revokeObjectURL(url);
+        this.notifySuccess("엑셀 다운로드가 시작되었습니다.");
+      } catch (e) {
+        this.notifyError("엑셀 다운로드 중 오류가 발생했습니다.");
+      } finally {
+        this.excelLoading = false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 테이블 헤더/바디 모두 가운데 정렬 */
+.v-data-table table thead th,
+.v-data-table table tbody td {
+  text-align: center !important;
+}
+</style>

src/views/Can/CanManagement.vue

@@ -135,7 +135,8 @@ export default {
       currency: 'KRW',
       currencies: [
         { text: 'KRW (한국 원)', value: 'KRW' },
-        { text: 'USD (미국 달러)', value: 'USD' }
+        { text: 'USD (미국 달러)', value: 'USD' },
+        { text: 'JPY (일본 엔)', value: 'JPY' }
       ],
       headers: [
         {

src/views/Chat/CharacterBanner.vue

@@ -184,6 +184,18 @@
                 </v-alert>
               </v-col>
             </v-row>
+            <v-row v-if="!isEdit">
+              <v-col cols="12">
+                <v-select
+                  v-model="bannerForm.lang"
+                  :items="languageOptions"
+                  label="언어 선택"
+                  item-text="text"
+                  item-value="value"
+                  outlined
+                />
+              </v-col>
+            </v-row>
             <v-row v-if="selectedCharacter">
               <v-col cols="12">
                 <v-alert
@@ -302,8 +314,14 @@ export default {
         image: null,
         imageUrl: '',
         characterId: null,
-        bannerId: null
+        bannerId: null,
+        lang: 'ko'
       },
+      languageOptions: [
+        { text: '한국어', value: 'ko' },
+        { text: '일본어', value: 'ja' },
+        { text: '영어', value: 'en' }
+      ],
       imageRules: [
         v => !!v || this.isEdit || '이미지를 선택하세요'
       ]
@@ -312,7 +330,7 @@ export default {
 
   computed: {
     isFormValid() {
-      return (this.bannerForm.image || (this.isEdit && this.bannerForm.imageUrl)) && this.selectedCharacter;
+      return (this.bannerForm.image || (this.isEdit && this.bannerForm.imageUrl)) && this.selectedCharacter && this.bannerForm.lang;
     }
   },
 
@@ -393,7 +411,8 @@ export default {
         image: null,
         imageUrl: '',
         characterId: null,
-        bannerId: null
+        bannerId: null,
+        lang: 'ko'
       };
       this.previewImage = null;
       this.searchKeyword = '';
@@ -414,7 +433,8 @@ export default {
         image: null,
         imageUrl: banner.imageUrl,
         characterId: banner.characterId,
-        bannerId: banner.id
+        bannerId: banner.id,
+        lang: banner.lang || banner.language || null
       };
       this.previewImage = null;
       this.searchKeyword = '';
@@ -430,7 +450,8 @@ export default {
         image: null,
         imageUrl: '',
         characterId: null,
-        bannerId: null
+        bannerId: null,
+        lang: 'ko'
       };
       this.previewImage = null;
       this.searchKeyword = '';
@@ -501,7 +522,8 @@ export default {
           // 배너 추가
           const response = await createCharacterBanner({
             image: this.bannerForm.image,
-            characterId: this.selectedCharacter.id
+            characterId: this.selectedCharacter.id,
+            lang: this.bannerForm.lang
           });
           if (response && response.status === 200 && response.data && response.data.success === true) {
             this.notifySuccess('배너가 추가되었습니다.');

src/views/Content/ContentList.vue

@@ -36,7 +36,7 @@
           >
             <v-btn
               slot="append"
-              color="#9970ff"
+              color="#3bb9f1"
               dark
               @click="search"
             >
@@ -75,6 +75,9 @@
                   <th class="text-center">
                     가격
                   </th>
+                  <th class="text-center">
+                    정산요율
+                  </th>
                   <th class="text-center">
                     한정판
                   </th>
@@ -93,7 +96,10 @@
                   <th class="text-center">
                     오픈 예정일
                   </th>
-                  <th class="text-center">
+                  <th
+                    v-if="isAdmin"
+                    class="text-center"
+                  >
                     관리
                   </th>
                 </tr>
@@ -157,6 +163,12 @@
                   <td v-else>
                     무료
                   </td>
+                  <td>
+                    <!-- settlementRatio가 null 또는 빈값이면 빈칸으로 표시 -->
+                    <span v-if="item.settlementRatio !== null && item.settlementRatio !== undefined && String(item.settlementRatio).trim() !== ''">
+                      {{ item.settlementRatio }}
+                    </span>
+                  </td>
                   <td
                     v-if="
                       item.totalContentCount > 0 &&
@@ -205,7 +217,7 @@
                   </td>
                   <td>{{ item.date }}</td>
                   <td>{{ item.releaseDate }}</td>
-                  <td>
+                  <td v-if="isAdmin">
                     <v-row>
                       <v-col>
                         <v-btn
@@ -355,6 +367,36 @@
               </v-col>
             </v-row>
           </v-card-text>
+          <v-card-text v-if="selected_audio_content.price > 0">
+            <v-row align="center">
+              <v-col cols="4">
+                정산요율
+              </v-col>
+              <v-col cols="8">
+                <v-text-field
+                  v-model="audio_content.settlement_ratio"
+                  label="정산요율"
+                  placeholder="예: 30"
+                  type="number"
+                  hide-details="auto"
+                  :disabled="audio_content.is_settlement_ratio_deleted"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text v-if="selected_audio_content.price > 0">
+            <v-row>
+              <v-col cols="4">
+                정산요율 삭제
+              </v-col>
+              <v-col cols="8">
+                <input
+                  v-model="audio_content.is_settlement_ratio_deleted"
+                  type="checkbox"
+                >
+              </v-col>
+            </v-row>
+          </v-card-text>
           <v-card-text>
             <v-row>
               <v-col cols="4">
@@ -488,6 +530,14 @@ export default {
     };
   },
 
+  computed: {
+    isAdmin() {
+      const role = (this.$store && this.$store.state && this.$store.state.accountStore && this.$store.state.accountStore.role)
+        || (typeof localStorage !== 'undefined' ? localStorage.role : '');
+      return role === 'ADMIN';
+    },
+  },
+
   async created() {
     this.audio_content = {
       id: null,
@@ -497,8 +547,13 @@ export default {
       is_adult: false,
       is_comment_available: false,
       is_default_cover_image: false,
+      is_settlement_ratio_deleted: false,
+      settlement_ratio: "",
     };
-    await this.getAudioContentThemeList();
+    // ADMIN 권한일 때만 테마 리스트 조회
+    if (this.isAdmin) {
+      await this.getAudioContentThemeList();
+    }
     await this.getAudioContent();
   },
 
@@ -531,6 +586,11 @@ export default {
       this.audio_content.is_adult = item.isAdult;
       this.audio_content.is_comment_available = item.isCommentAvailable;
       this.audio_content.is_default_cover_image = false;
+      this.audio_content.is_settlement_ratio_deleted = false;
+      this.audio_content.settlement_ratio =
+        item.settlementRatio !== null && item.settlementRatio !== undefined
+          ? String(item.settlementRatio)
+          : "";
 
       this.image_preview = item.coverImageUrl;
       this.cover_image_file = null;
@@ -590,6 +650,8 @@ export default {
         is_adult: false,
         is_comment_available: false,
         is_default_cover_image: false,
+        is_settlement_ratio_deleted: false,
+        settlement_ratio: "",
       };
       this.image_preview = null;
       this.cover_image_file = null;
@@ -631,6 +693,12 @@ export default {
           isDefaultCoverImage: this.audio_content.is_default_cover_image,
         };
 
+        // 유료 콘텐츠인 경우에만 정산요율 관련 플래그/값 전송 고려
+        const isPaid = this.selected_audio_content && this.selected_audio_content.price > 0;
+        if (isPaid) {
+          request.isSettlementRatioDeleted = this.audio_content.is_settlement_ratio_deleted;
+        }
+
         if (
           this.audio_content.title !== this.selected_audio_content.title &&
           this.audio_content.title.trim().length > 0
@@ -657,6 +725,21 @@ export default {
           request.isCommentAvailable = this.audio_content.is_comment_available;
         }
 
+        // settlementRatio 처리 (null/빈문자 케이스 포함)
+        const originalRatio =
+          this.selected_audio_content.settlementRatio !== null &&
+          this.selected_audio_content.settlementRatio !== undefined
+            ? String(this.selected_audio_content.settlementRatio)
+            : "";
+        const newRatio =
+          this.audio_content.settlement_ratio !== null &&
+          this.audio_content.settlement_ratio !== undefined
+            ? String(this.audio_content.settlement_ratio)
+            : "";
+        if (isPaid && !this.audio_content.is_settlement_ratio_deleted && newRatio !== originalRatio) {
+          request.settlementRatio = newRatio;
+        }
+
         const formData = new FormData();
         formData.append("request", JSON.stringify(request));
 

src/views/Content/ContentMainTopBanner.vue

@@ -109,6 +109,23 @@
             </v-col>
           </v-row>
         </v-card-text>
+        <!-- 언어 선택: 등록 시에만 노출 (수정 시 비노출) -->
+        <v-card-text v-if="!is_modify">
+          <v-row align="center">
+            <v-col cols="4">
+              언어
+            </v-col>
+            <v-col cols="8">
+              <v-select
+                v-model="banner.lang"
+                :items="langItems"
+                item-text="text"
+                item-value="value"
+                label="언어 선택"
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
         <v-card-text>
           <v-row align="center">
             <v-col cols="4">
@@ -327,7 +344,7 @@ export default {
             show_write_dialog: false,
             show_delete_confirm_dialog: false,
             selected_banner: {},
-            banner: {type: 'CREATOR', tab_id: 1},
+            banner: {type: 'CREATOR', tab_id: 1, lang: 'ko'},
             banners: [],
             events: [],
             creators: [],
@@ -335,7 +352,12 @@ export default {
             search_query_creator: '',
             search_query_series: '',
             tabs: [],
-            selected_tab_id: 1
+            selected_tab_id: 1,
+            langItems: [
+              { text: '한국어', value: 'ko' },
+              { text: '일본어', value: 'ja' },
+              { text: '영어', value: 'en' }
+            ]
         }
     },
 
@@ -379,7 +401,7 @@ export default {
             this.is_selecting = false
             this.show_write_dialog = false
             this.show_delete_confirm_dialog = false
-            this.banner = {type: 'CREATOR', tab_id: 1}
+            this.banner = {type: 'CREATOR', tab_id: 1, lang: 'ko'}
             this.selected_banner = {}
             this.search_query_creator = ''
             this.search_query_series = ''
@@ -432,6 +454,10 @@ export default {
             this.banner.link = banner.link
             this.banner.is_adult = banner.isAdult
             this.banner.tab_id = banner.tabId
+            // 수정 시 언어는 변경 불가하므로 UI를 표시하지 않음. 필요 시 내부 유지만 함 (기본값 또는 서버 값 사용)
+            if (banner.lang) {
+              this.banner.lang = banner.lang
+            }
 
             setTimeout(() => {
               this.is_selecting = false; // 선택 상태 해제
@@ -497,7 +523,8 @@ export default {
 
                 let request = {
                     type: this.banner.type,
-                    isAdult: this.banner.is_adult
+                    isAdult: this.banner.is_adult,
+                    lang: this.banner.lang || 'ko'
                 }
 
                 if (this.banner.type === 'CREATOR') {

src/views/Live/LiveRecommend.vue

@@ -153,6 +153,22 @@
               </v-col>
             </v-row>
           </v-card-text>
+          <v-card-text v-if="selected_recommend_live === null">
+            <v-row align="center">
+              <v-col cols="4">
+                언어
+              </v-col>
+              <v-col cols="8">
+                <v-select
+                  v-model="lang"
+                  :items="languageOptions"
+                  item-text="label"
+                  item-value="value"
+                  label="언어 선택"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
           <v-card-text>
             <v-row align="center">
               <v-col cols="4">
@@ -234,6 +250,12 @@ export default {
       start_date: null,
       end_date: null,
       is_adult: false,
+      lang: 'ko',
+      languageOptions: [
+        { label: '한국어', value: 'ko' },
+        { label: '일본어', value: 'ja' },
+        { label: '영어', value: 'en' },
+      ],
       headers: [
         {
           text: '이미지',
@@ -358,6 +380,7 @@ export default {
         formData.append("start_date", this.start_date)
         formData.append("end_date", this.end_date)
         formData.append("is_adult", this.is_adult)
+        formData.append("lang", this.lang)
 
         const res = await api.createRecommendCreatorBanner(formData);
         if (res.status === 200 && res.data.success === true) {
@@ -383,7 +406,8 @@ export default {
         this.image === null ||
         this.creator_id === null ||
         this.start_date === null ||
-        this.end_date === null
+        this.end_date === null ||
+        this.lang === null
       ) {
         this.notifyError('내용을 입력하세요')
       } else {
@@ -398,6 +422,9 @@ export default {
       this.creator_id = null
       this.start_date = null
       this.end_date = null
+      this.is_adult = false
+      this.lang = 'ko'
+      this.selected_recommend_live = null
     },
 
     notifyError(message) {
@@ -471,6 +498,8 @@ export default {
       }
     },
     showWriteDialog() {
+      this.selected_recommend_live = null
+      this.lang = 'ko'
       this.show_write_dialog = true
     },
   }

src/views/Member/MemberList.vue

@@ -19,7 +19,7 @@
           >
             <v-btn
               slot="append"
-              color="#9970ff"
+              color="#3bb9f1"
               dark
               @click="search"
             >
@@ -171,7 +171,7 @@
           <v-card-text>
             <v-row align="center">
               <v-col cols="4">
-                사용 여부
+                권한
               </v-col>
               <v-col cols="8">
                 <v-radio-group
@@ -183,10 +183,18 @@
                     value="CREATOR"
                     label="크리에이터"
                   />
+                  <v-radio
+                    value="AGENT"
+                    label="에이전트"
+                  />
                   <v-radio
                     value="USER"
                     label="일반회원"
                   />
+                  <v-radio
+                    value="CONTENT_MANAGER"
+                    label="콘텐츠 관리자"
+                  />
                   <v-spacer />
                 </v-radio-group>
               </v-col>
@@ -445,6 +453,10 @@ export default {
         this.user_type = 'USER'
       } else if (member.userType === '크리에이터') {
         this.user_type = 'CREATOR'
+      } else if (member.userType === '에이전트') {
+        this.user_type = 'AGENT'
+      } else if (member.userType === '콘텐츠 관리자') {
+        this.user_type = 'CONTENT_MANAGER'
       }
 
       this.email = member.email
@@ -512,7 +524,9 @@ 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.user_type === 'CONTENT_MANAGER' && this.member.userType === '콘텐츠 관리자')
       ) {
         this.notifyError("변경사항이 없습니다.")
       } else {

src/views/Series/ContentSeriesBanner.vue

@@ -66,6 +66,14 @@
               />
               <v-card-text class="text-center">
                 <div>{{ resolveSeriesTitle(banner) }}</div>
+                <v-chip
+                  v-if="banner.lang"
+                  x-small
+                  label
+                  class="mt-1"
+                >
+                  {{ banner.lang === 'ko' ? '한국어' : banner.lang === 'ja' ? '일본어' : '영어' }}
+                </v-chip>
               </v-card-text>
               <v-card-actions>
                 <v-spacer />
@@ -146,6 +154,17 @@
                 />
               </v-col>
             </v-row>
+            <v-row v-if="!isEdit">
+              <v-col cols="12">
+                <v-select
+                  v-model="bannerForm.lang"
+                  :items="languages"
+                  label="언어 선택"
+                  outlined
+                  :rules="[v => !!v || '언어를 선택하세요']"
+                />
+              </v-col>
+            </v-row>
             <v-row>
               <v-col cols="12">
                 <v-text-field
@@ -293,11 +312,17 @@ export default {
       searchResults: [],
       searchPerformed: false,
       previewImage: null,
+      languages: [
+        { text: '한국어', value: 'ko' },
+        { text: '일본어', value: 'ja' },
+        { text: '영어', value: 'en' }
+      ],
       bannerForm: {
         image: null,
         imageUrl: '',
         seriesId: null,
-        bannerId: null
+        bannerId: null,
+        lang: 'ko'
       },
       imageRules: [
         v => !!v || this.isEdit || '이미지를 선택하세요'
@@ -306,7 +331,7 @@ export default {
   },
   computed: {
     isFormValid() {
-      return (this.bannerForm.image || (this.isEdit && this.bannerForm.imageUrl)) && this.selectedSeries
+      return (this.bannerForm.image || (this.isEdit && this.bannerForm.imageUrl)) && this.selectedSeries && (this.isEdit || this.bannerForm.lang)
     }
   },
   watch: {
@@ -368,7 +393,7 @@ export default {
     showAddDialog() {
       this.isEdit = false
       this.selectedSeries = null
-      this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null }
+      this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null, lang: 'ko' }
       this.previewImage = null
       this.searchKeyword = ''
       this.searchResults = []
@@ -387,7 +412,8 @@ export default {
         image: null,
         imageUrl: banner.imageUrl || banner.imagePath,
         seriesId: banner.seriesId,
-        bannerId: banner.id
+        bannerId: banner.id,
+        lang: banner.lang || 'ko'
       }
       this.previewImage = null
       this.searchKeyword = ''
@@ -398,7 +424,7 @@ export default {
     closeDialog() {
       this.showDialog = false
       this.selectedSeries = null
-      this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null }
+      this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null, lang: 'ko' }
       this.previewImage = null
       this.searchKeyword = ''
       this.searchResults = []
@@ -450,13 +476,16 @@ export default {
           })
           if (response && response.status === 200 && response.data && response.data.success === true) {
             this.notifySuccess('배너가 수정되었습니다.')
+            this.closeDialog()
+            this.refreshBanners()
           } else {
             this.notifyError('배너 수정을 실패했습니다.')
           }
         } else {
           const response = await createSeriesBanner({
             image: this.bannerForm.image,
-            seriesId: this.selectedSeries.id
+            seriesId: this.selectedSeries.id,
+            lang: this.bannerForm.lang
           })
           if (response && response.status === 200 && response.data && response.data.success === true) {
             this.notifySuccess('배너가 추가되었습니다.')