Merge pull request 'test' (#101) from test into main

Reviewed-on: #101

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/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,9 +94,16 @@ export default {
       this.isLoading = true
       try {
         let res = await api.getMenus();
-        if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
+        if (res.status === 200 && res.data.success === true) {
-          this.items = res.data.data
+          // 기본 메뉴 설정 (API 결과가 비어있을 수 있음)
+          this.items = Array.isArray(res.data.data) ? res.data.data : []
 
+          // 현재 사용자 역할 확인
+          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 === '시리즈 관리')
@@ -150,9 +157,32 @@ export default {
               ]
             })
 
-          // 정산 관리 메뉴에 '채널 후원 정산' 추가
+            // 에이전트 관리 메뉴를 '크리에이터 관리' 바로 아래에 추가
             try {
-            const calculateMenu = this.items.find(m => m && m.title === '정산 관리')
+              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) : []
@@ -165,10 +195,35 @@ export default {
                     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
             }
+          }
+
+          // 조회한 메뉴가 비어 있고, 콘텐츠 매니저라면 기본 메뉴 추가
+          if (this.items.length === 0 && role === 'CONTENT_MANAGER') {
+            this.items.push({
+              title: '콘텐츠 리스트',
+              route: '/content/list',
+              items: null
+            })
+          }
+
+          // 그래도 비어있다면 이전 동작과 동일하게 처리
+          if (this.items.length === 0) {
+            this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
+            this.logout();
+          }
         } else {
           this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
           this.logout();

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}) {
+        LOGIN(state, {token, role}) {
-            state.userId = userId
-            localStorage.userId = userId
-
-            state.nickname = nickname
-            localStorage.nickname = nickname
-
-            state.profileImage = profileImage
-            localStorage.profileImage = profileImage
-
             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/Content/ContentList.vue

@@ -36,7 +36,7 @@
           >
             <v-btn
               slot="append"
-              color="#9970ff"
+              color="#3bb9f1"
               dark
               @click="search"
             >
@@ -96,7 +96,10 @@
                   <th class="text-center">
                     오픈 예정일
                   </th>
-                  <th class="text-center">
+                  <th
+                    v-if="isAdmin"
+                    class="text-center"
+                  >
                     관리
                   </th>
                 </tr>
@@ -214,7 +217,7 @@
                   </td>
                   <td>{{ item.date }}</td>
                   <td>{{ item.releaseDate }}</td>
-                  <td>
+                  <td v-if="isAdmin">
                     <v-row>
                       <v-col>
                         <v-btn
@@ -527,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,
@@ -539,7 +550,10 @@ export default {
       is_settlement_ratio_deleted: false,
       settlement_ratio: "",
     };
+    // ADMIN 권한일 때만 테마 리스트 조회
+    if (this.isAdmin) {
       await this.getAudioContentThemeList();
+    }
     await this.getAudioContent();
   },
 

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 {