feat(calculate): 라이브 환불 기능 API 연동 및 UI 수정

- refundLive API 요청 파라미터를 canUsage에서 canUsageStr로 변경
- CalculateLive 화면의 환불 함수에서 canUsageStr을 전달하도록 수정
- API URL(/admin/calculate/live/refund) 및 필드 요구사항 반영

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.6.5",
+        "cropperjs": "^1.5.13",
         "file-saver": "^2.0.5",
         "lodash": "^4.17.21",
         "vue": "^2.6.11",
@@ -4907,6 +4908,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "node_modules/cropperjs": {
+      "version": "1.5.13",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.5.13.tgz",
+      "integrity": "sha512-by7jKAo73y5/Do0K6sxdTKHgndY0NMjG2bEdgeJxycbcmHuCiMXqw8sxy5C5Y5WTOTcDGmbT7Sr5CgKOXR06OA=="
+    },
     "node_modules/cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -19708,6 +19714,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "cropperjs": {
+      "version": "1.5.13",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.5.13.tgz",
+      "integrity": "sha512-by7jKAo73y5/Do0K6sxdTKHgndY0NMjG2bEdgeJxycbcmHuCiMXqw8sxy5C5Y5WTOTcDGmbT7Sr5CgKOXR06OA=="
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "cropperjs": "^1.5.13",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
     "vue": "^2.6.11",

src/api/audio_content.js

@@ -15,8 +15,12 @@ async function searchAudioContent(searchWord, page) {
     )
 }
 
-async function modifyAudioContent(request) {
-    return Vue.axios.put("/admin/audio-content", request)
+async function modifyAudioContent(formData) {
+    return Vue.axios.put("/admin/audio-content", formData, {
+        headers: {
+            "Content-Type": "multipart/form-data"
+        }
+    })
 }
 
 async function getBannerList(tabId) {

src/api/calculate.js

@@ -1,19 +1,19 @@
 import Vue from 'vue';
 
-async function getCalculateLive(startDate, endDate) {
-    return Vue.axios.get('/admin/calculate/live?startDateStr=' + startDate + '&endDateStr=' + endDate);
+async function getCalculateLive(startDate, endDate, page, size) {
+    return Vue.axios.get('/admin/calculate/live?startDateStr=' + startDate + '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size);
 }
 
-async function getCalculateContent(startDate, endDate) {
-    return Vue.axios.get('/admin/calculate/content-list?startDateStr=' + startDate + '&endDateStr=' + endDate);
+async function getCalculateContent(startDate, endDate, page, size) {
+    return Vue.axios.get('/admin/calculate/content-list?startDateStr=' + startDate + '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size);
 }
 
 async function getCumulativeSalesByContent(page, size) {
     return Vue.axios.get('/admin/calculate/cumulative-sales-by-content?page=' + (page - 1) + "&size=" + size);
 }
 
-async function getCalculateContentDonation(startDate, endDate) {
-    return Vue.axios.get('/admin/calculate/content-donation-list?startDateStr=' + startDate + '&endDateStr=' + endDate);
+async function getCalculateContentDonation(startDate, endDate, page, size) {
+    return Vue.axios.get('/admin/calculate/content-donation-list?startDateStr=' + startDate + '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size);
 }
 
 async function getCalculateCommunityPost(startDate, endDate, page, size) {
@@ -57,6 +57,72 @@ async function getCalculateCommunityByCreator(startDate, endDate, page, size) {
     )
 }
 
+async function getCalculateChannelDonationByCreator(startDate, endDate, page, size) {
+    return Vue.axios.get('/admin/calculate/channel-donation-by-creator?startDateStr=' +
+        startDate + '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
+    )
+}
+
+async function getCalculateChannelDonationByDate(startDate, endDate, page, size) {
+    return Vue.axios.get('/admin/calculate/channel-donation-by-date?startDateStr=' +
+        startDate + '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
+    )
+}
+
+async function downloadCalculateChannelDonationByCreatorExcel(startDate, endDate) {
+    return Vue.axios.get('/admin/calculate/channel-donation-by-creator/excel?startDateStr=' + startDate + '&endDateStr=' + endDate, {
+        responseType: 'blob'
+    });
+}
+
+async function downloadCalculateLiveExcel(startDate, endDate) {
+    return Vue.axios.get('/admin/calculate/live/excel?startDateStr=' + startDate + '&endDateStr=' + endDate, {
+        responseType: 'blob'
+    });
+}
+
+async function downloadCalculateContentExcel(startDate, endDate) {
+    return Vue.axios.get('/admin/calculate/content-list/excel?startDateStr=' + startDate + '&endDateStr=' + endDate, {
+        responseType: 'blob'
+    });
+}
+
+async function downloadCalculateContentDonationExcel(startDate, endDate) {
+    return Vue.axios.get('/admin/calculate/content-donation-list/excel?startDateStr=' + startDate + '&endDateStr=' + endDate, {
+        responseType: 'blob'
+    });
+}
+
+async function downloadCalculateCommunityPostExcel(startDate, endDate) {
+    return Vue.axios.get('/admin/calculate/community-post/excel?startDateStr=' + startDate + '&endDateStr=' + endDate, {
+        responseType: 'blob'
+    });
+}
+
+async function downloadCalculateLiveByCreatorExcel(startDate, endDate) {
+    return Vue.axios.get('/admin/calculate/live-by-creator/excel?startDateStr=' + startDate + '&endDateStr=' + endDate, {
+        responseType: 'blob'
+    });
+}
+
+async function downloadCalculateContentByCreatorExcel(startDate, endDate) {
+    return Vue.axios.get('/admin/calculate/content-by-creator/excel?startDateStr=' + startDate + '&endDateStr=' + endDate, {
+        responseType: 'blob'
+    });
+}
+
+async function downloadCalculateCommunityByCreatorExcel(startDate, endDate) {
+    return Vue.axios.get('/admin/calculate/community-by-creator/excel?startDateStr=' + startDate + '&endDateStr=' + endDate, {
+        responseType: 'blob'
+    });
+}
+
+async function downloadCalculateChannelDonationByDateExcel(startDate, endDate) {
+    return Vue.axios.get('/admin/calculate/channel-donation-by-date/excel?startDateStr=' + startDate + '&endDateStr=' + endDate, {
+        responseType: 'blob'
+    });
+}
+
 async function updateCreatorSettlementRatio(creatorSettlementRatio) {
     const request = {
         memberId: creatorSettlementRatio.creator_id,
@@ -72,6 +138,15 @@ async function deleteCreatorSettlementRatio(memberId) {
     return Vue.axios.post('/admin/calculate/ratio/delete/' + memberId);
 }
 
+async function refundLive(roomId, canUsageStr) {
+    const request = {
+        roomId: roomId,
+        canUsageStr: canUsageStr
+    };
+
+    return Vue.axios.post('/admin/calculate/live/refund', request);
+}
+
 export {
     getCalculateLive,
     getCalculateContent,
@@ -82,7 +157,19 @@ export {
     createCreatorSettlementRatio,
     updateCreatorSettlementRatio,
     deleteCreatorSettlementRatio,
+    refundLive,
     getCalculateLiveByCreator,
     getCalculateContentByCreator,
-    getCalculateCommunityByCreator
+    getCalculateCommunityByCreator,
+    getCalculateChannelDonationByCreator,
+    getCalculateChannelDonationByDate,
+    downloadCalculateChannelDonationByCreatorExcel,
+    downloadCalculateLiveExcel,
+    downloadCalculateContentExcel,
+    downloadCalculateContentDonationExcel,
+    downloadCalculateCommunityPostExcel,
+    downloadCalculateLiveByCreatorExcel,
+    downloadCalculateContentByCreatorExcel,
+    downloadCalculateCommunityByCreatorExcel,
+    downloadCalculateChannelDonationByDateExcel
 }

src/api/character.js

@@ -49,11 +49,12 @@ async function createCharacter(characterData) {
     age: toNullIfBlank(characterData.age),
     gender: toNullIfBlank(characterData.gender),
     mbti: toNullIfBlank(characterData.mbti),
-    characterType: toNullIfBlank(characterData.type),
+    characterType: toNullIfBlank(characterData.characterType),
     originalWorkId: characterData.originalWorkId || null,
     speechPattern: toNullIfBlank(characterData.speechPattern),
     speechStyle: toNullIfBlank(characterData.speechStyle),
     appearance: toNullIfBlank(characterData.appearance),
+    region: characterData.region || null,
     tags: characterData.tags || [],
     hobbies: characterData.hobbies || [],
     values: characterData.values || [],

src/api/charge_status.js

@@ -11,4 +11,8 @@ async function getChargeStatusDetail(startDate, paymentGateway, currency) {
     );
 }
 
-export { getChargeStatus, getChargeStatusDetail }
+async function refundCharge(chargeId) {
+    return Vue.axios.post('/admin/charge/refund', { chargeId });
+}
+
+export { getChargeStatus, getChargeStatusDetail, refundCharge }

src/api/member.js

@@ -52,6 +52,11 @@ async function resetPassword(id) {
     return Vue.axios.post("/admin/member/password/reset", request)
 }
 
+async function blockMember(memberId, reason) {
+    const request = {memberId, reason}
+    return Vue.axios.post("/admin/member/block", request)
+}
+
 /**
  * 닉네임으로 회원 검색 API
  * - 서버 구현 차이를 흡수하기 위해 nickname, search_word 두 파라미터 모두 전송
@@ -87,5 +92,6 @@ export {
     updateMember,
     getCreatorAllList,
     resetPassword,
+    blockMember,
     searchMembersByNickname
 }

src/components/SideMenu.vue

@@ -149,6 +149,26 @@ export default {
               },
             ]
           })
+
+          // 정산 관리 메뉴에 '채널 후원 정산' 추가
+          try {
+            const calculateMenu = this.items.find(m => m && m.title === '정산 관리')
+            if (calculateMenu) {
+              if (!Array.isArray(calculateMenu.items)) {
+                calculateMenu.items = calculateMenu.items ? [].concat(calculateMenu.items) : []
+              }
+              const exists = calculateMenu.items.some(ci => ci && ci.route === '/calculate/channel-donation')
+              if (!exists) {
+                calculateMenu.items.push({
+                  title: '채널 후원 정산',
+                  route: '/calculate/channel-donation',
+                  items: null
+                })
+              }
+            }
+          } catch (e) {
+            // ignore
+          }
         } else {
           this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
           this.logout();

src/router/index.js

@@ -210,6 +210,16 @@ const routes = [
                 name: 'CalculateCommunityByCreator',
                 component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateCommunityByCreator.vue')
             },
+            {
+                path: '/calculate/channel-donation',
+                name: 'CalculateChannelDonation',
+                component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateChannelDonation.vue')
+            },
+            {
+                path: '/calculate/channel-donation-by-creator',
+                name: 'CalculateChannelDonationByCreator',
+                component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateChannelDonationByCreator.vue')
+            },
             {
                 path: '/notice',
                 name: 'NoticeView',

src/views/Calculate/CalculateChannelDonation.vue

@@ -0,0 +1,267 @@
+<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="2">
+          <datetime
+            v-model="start_date"
+            class="datepicker"
+            format="YYYY-MM-DD"
+          />
+        </v-col>
+
+        <v-col cols="1">
+          ~
+        </v-col>
+
+        <v-col cols="2">
+          <datetime
+            v-model="end_date"
+            class="datepicker"
+            format="YYYY-MM-DD"
+          />
+        </v-col>
+
+        <v-col cols="1" />
+
+        <v-col cols="2">
+          <v-btn
+            block
+            color="#3bb9f1"
+            dark
+            depressed
+            @click="getCalculateChannelDonationByDate"
+          >
+            조회
+          </v-btn>
+        </v-col>
+
+        <v-spacer />
+
+        <v-col cols="2">
+          <v-btn
+            block
+            color="#3bb9f1"
+            dark
+            depressed
+            @click="downloadExcel"
+          >
+            엑셀 다운로드
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="items"
+            :loading="is_loading"
+            :items-per-page="-1"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template slot="body.prepend">
+              <tr v-if="total">
+                <td colspan="2">
+                  합계
+                </td>
+                <td class="text-center">
+                  {{ total.count.toLocaleString() }} 건
+                </td>
+                <td class="text-center">
+                  {{ total.totalCan.toLocaleString() }} 캔
+                </td>
+                <td class="text-center">
+                  {{ total.krw.toLocaleString() }} 원
+                </td>
+                <td class="text-center">
+                  {{ total.fee.toLocaleString() }} 원
+                </td>
+                <td class="text-center">
+                  {{ total.settlementAmount.toLocaleString() }} 원
+                </td>
+                <td class="text-center">
+                  {{ total.withholdingTax.toLocaleString() }} 원
+                </td>
+                <td class="text-center">
+                  {{ total.depositAmount.toLocaleString() }} 원
+                </td>
+              </tr>
+            </template>
+
+            <template v-slot:item.date="{ item }">
+              {{ item.date }}
+            </template>
+
+            <template v-slot:item.creator="{ item }">
+              {{ item.creator }}
+            </template>
+
+            <template v-slot:item.count="{ item }">
+              {{ item.count.toLocaleString() }} 건
+            </template>
+
+            <template v-slot:item.totalCan="{ item }">
+              {{ item.totalCan.toLocaleString() }} 캔
+            </template>
+
+            <template v-slot:item.krw="{ item }">
+              {{ item.krw.toLocaleString() }} 원
+            </template>
+
+            <template v-slot:item.fee="{ item }">
+              {{ item.fee.toLocaleString() }} 원
+            </template>
+
+            <template v-slot:item.settlementAmount="{ item }">
+              {{ item.settlementAmount.toLocaleString() }} 원
+            </template>
+
+            <template v-slot:item.withholdingTax="{ item }">
+              {{ item.withholdingTax.toLocaleString() }} 원
+            </template>
+
+            <template v-slot:item.depositAmount="{ item }">
+              {{ item.depositAmount.toLocaleString() }} 원
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            :total-visible="7"
+            @input="next"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/calculate'
+import datetime from 'vuejs-datetimepicker'
+
+export default {
+  name: 'CalculateChannelDonation',
+  components: {
+    datetime
+  },
+  data() {
+    return {
+      start_date: '',
+      end_date: '',
+      is_loading: false,
+      items: [],
+      total: null,
+      page: 1,
+      page_size: 20,
+      total_page: 1,
+      headers: [
+        { text: '날짜', align: 'center', sortable: false, value: 'date' },
+        { text: '크리에이터', align: 'center', sortable: false, value: 'creator' },
+        { text: '건수', align: 'center', sortable: false, value: 'count' },
+        { text: '캔', align: 'center', sortable: false, value: 'totalCan' },
+        { text: '원화', align: 'center', sortable: false, value: 'krw' },
+        { text: '수수료(6.6%)', align: 'center', sortable: false, value: 'fee' },
+        { text: '정산금액', align: 'center', sortable: false, value: 'settlementAmount' },
+        { text: '원천세(3.3%)', align: 'center', sortable: false, value: 'withholdingTax' },
+        { text: '입금액', align: 'center', sortable: false, value: 'depositAmount' }
+      ]
+    }
+  },
+
+  async created() {
+    const date = new Date()
+    const firstDate = new Date(date.getFullYear(), date.getMonth(), 1)
+    const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0)
+
+    this.start_date = this.formatDate(firstDate)
+    this.end_date = this.formatDate(lastDate)
+
+    await this.getCalculateChannelDonationByDate()
+  },
+
+  methods: {
+    formatDate(date) {
+      const year = date.getFullYear()
+      const month = ('0' + (date.getMonth() + 1)).slice(-2)
+      const day = ('0' + date.getDate()).slice(-2)
+      return `${year}-${month}-${day}`
+    },
+
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    async next() {
+      await this.getCalculateChannelDonationByDate()
+    },
+
+    async getCalculateChannelDonationByDate() {
+      this.is_loading = true
+      try {
+        const res = await api.getCalculateChannelDonationByDate(
+          this.start_date.substring(0, 10),
+          this.end_date.substring(0, 10),
+          this.page,
+          this.page_size
+        )
+
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+          this.items = data.items
+          this.total = data.total
+          this.total_page = Math.ceil(data.totalCount / this.page_size) || 1
+        } else {
+          this.notifyError(res.data.message || '데이터를 불러오는 중 오류가 발생했습니다.')
+        }
+      } catch (e) {
+        this.notifyError('서버와의 통신 중 오류가 발생했습니다.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async downloadExcel() {
+      try {
+        const res = await api.downloadCalculateChannelDonationByDateExcel(
+          this.start_date.substring(0, 10),
+          this.end_date.substring(0, 10)
+        )
+        const url = window.URL.createObjectURL(new Blob([res.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', '채널후원정산.xlsx')
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      } catch (e) {
+        this.notifyError('엑셀 다운로드 중 오류가 발생했습니다.')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.datepicker {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+</style>

src/views/Calculate/CalculateChannelDonationByCreator.vue

@@ -0,0 +1,262 @@
+<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="2">
+          <datetime
+            v-model="start_date"
+            class="datepicker"
+            format="YYYY-MM-DD"
+          />
+        </v-col>
+
+        <v-col cols="1">
+          ~
+        </v-col>
+
+        <v-col cols="2">
+          <datetime
+            v-model="end_date"
+            class="datepicker"
+            format="YYYY-MM-DD"
+          />
+        </v-col>
+
+        <v-col cols="1" />
+
+        <v-col cols="2">
+          <v-btn
+            block
+            color="#3bb9f1"
+            dark
+            depressed
+            @click="getCalculateChannelDonationByCreator"
+          >
+            조회
+          </v-btn>
+        </v-col>
+
+        <v-spacer />
+
+        <v-col cols="2">
+          <v-btn
+            block
+            color="#3bb9f1"
+            dark
+            depressed
+            @click="downloadExcel"
+          >
+            엑셀 다운로드
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="items"
+            :loading="is_loading"
+            :items-per-page="-1"
+            class="elevation-1"
+            hide-default-footer
+          >
+            <template slot="body.prepend">
+              <tr v-if="total">
+                <td>
+                  합계
+                </td>
+                <td class="text-center">
+                  {{ total.count.toLocaleString() }} 건
+                </td>
+                <td class="text-center">
+                  {{ total.totalCan.toLocaleString() }} 캔
+                </td>
+                <td class="text-center">
+                  {{ total.krw.toLocaleString() }} 원
+                </td>
+                <td class="text-center">
+                  {{ total.fee.toLocaleString() }} 원
+                </td>
+                <td class="text-center">
+                  {{ total.settlementAmount.toLocaleString() }} 원
+                </td>
+                <td class="text-center">
+                  {{ total.withholdingTax.toLocaleString() }} 원
+                </td>
+                <td class="text-center">
+                  {{ total.depositAmount.toLocaleString() }} 원
+                </td>
+              </tr>
+            </template>
+
+            <template v-slot:item.creator="{ item }">
+              {{ item.creator }}
+            </template>
+
+            <template v-slot:item.count="{ item }">
+              {{ item.count.toLocaleString() }} 건
+            </template>
+
+            <template v-slot:item.totalCan="{ item }">
+              {{ item.totalCan.toLocaleString() }} 캔
+            </template>
+
+            <template v-slot:item.krw="{ item }">
+              {{ item.krw.toLocaleString() }} 원
+            </template>
+
+            <template v-slot:item.fee="{ item }">
+              {{ item.fee.toLocaleString() }} 원
+            </template>
+
+            <template v-slot:item.settlementAmount="{ item }">
+              {{ item.settlementAmount.toLocaleString() }} 원
+            </template>
+
+            <template v-slot:item.withholdingTax="{ item }">
+              {{ item.withholdingTax.toLocaleString() }} 원
+            </template>
+
+            <template v-slot:item.depositAmount="{ item }">
+              {{ item.depositAmount.toLocaleString() }} 원
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            :total-visible="7"
+            @input="next"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/calculate'
+import datetime from 'vuejs-datetimepicker'
+
+export default {
+  name: 'CalculateChannelDonationByCreator',
+  components: {
+    datetime
+  },
+  data() {
+    return {
+      start_date: '',
+      end_date: '',
+      is_loading: false,
+      items: [],
+      total: null,
+      page: 1,
+      page_size: 20,
+      total_page: 1,
+      headers: [
+        { text: '크리에이터', align: 'center', sortable: false, value: 'creator' },
+        { text: '건수', align: 'center', sortable: false, value: 'count' },
+        { text: '캔', align: 'center', sortable: false, value: 'totalCan' },
+        { text: '원화', align: 'center', sortable: false, value: 'krw' },
+        { text: '수수료(6.6%)', align: 'center', sortable: false, value: 'fee' },
+        { text: '정산금액', align: 'center', sortable: false, value: 'settlementAmount' },
+        { text: '원천세(3.3%)', align: 'center', sortable: false, value: 'withholdingTax' },
+        { text: '입금액', align: 'center', sortable: false, value: 'depositAmount' }
+      ]
+    }
+  },
+
+  async created() {
+    const date = new Date()
+    const firstDate = new Date(date.getFullYear(), date.getMonth(), 1)
+    const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0)
+
+    this.start_date = this.formatDate(firstDate)
+    this.end_date = this.formatDate(lastDate)
+
+    await this.getCalculateChannelDonationByCreator()
+  },
+
+  methods: {
+    formatDate(date) {
+      const year = date.getFullYear()
+      const month = ('0' + (date.getMonth() + 1)).slice(-2)
+      const day = ('0' + date.getDate()).slice(-2)
+      return `${year}-${month}-${day}`
+    },
+
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    async next() {
+      await this.getCalculateChannelDonationByCreator()
+    },
+
+    async getCalculateChannelDonationByCreator() {
+      this.is_loading = true
+      try {
+        const res = await api.getCalculateChannelDonationByCreator(
+          this.start_date.substring(0, 10),
+          this.end_date.substring(0, 10),
+          this.page,
+          this.page_size
+        )
+
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+          this.items = data.items
+          this.total = data.total
+          this.total_page = Math.ceil(data.totalCount / this.page_size) || 1
+        } else {
+          this.notifyError(res.data.message || '데이터를 불러오는 중 오류가 발생했습니다.')
+        }
+      } catch (e) {
+        this.notifyError('서버와의 통신 중 오류가 발생했습니다.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async downloadExcel() {
+      try {
+        const res = await api.downloadCalculateChannelDonationByCreatorExcel(
+          this.start_date.substring(0, 10),
+          this.end_date.substring(0, 10)
+        )
+        const url = window.URL.createObjectURL(new Blob([res.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', '크리에이터별_채널후원정산.xlsx')
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      } catch (e) {
+        this.notifyError('엑셀 다운로드 중 오류가 발생했습니다.')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.datepicker {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+</style>

src/views/Calculate/CalculateCommunityByCreator.vue

@@ -47,22 +47,15 @@
         <v-spacer />
 
         <v-col cols="2">
-          <vue-excel-xlsx
-            :data="items"
-            :columns="columns"
-            :file-name="'정산'"
-            :file-type="'xlsx'"
-            :sheet-name="'정산'"
-          >
           <v-btn
             block
             color="#3bb9f1"
             dark
             depressed
+            @click="downloadExcel"
           >
             엑셀 다운로드
           </v-btn>
-          </vue-excel-xlsx>
         </v-col>
       </v-row>
 
@@ -156,40 +149,6 @@ export default {
       page_size: 20,
       total_page: 0,
       items: [],
-      columns: [
-        {
-          label: "이메일",
-          field: "email",
-        },
-        {
-          label: "크리에이터",
-          field: "nickname",
-        },
-        {
-          label: "합계(캔)",
-          field: "totalCan",
-        },
-        {
-          label: "원화",
-          field: "totalKrw",
-        },
-        {
-          label: "결제수수료(6.6%)",
-          field: "paymentFee",
-        },
-        {
-          label: "정산금액",
-          field: "settlementAmount",
-        },
-        {
-          label: "원천세(3.3%)",
-          field: "tax",
-        },
-        {
-          label: "입금액",
-          field: "depositAmount",
-        },
-      ],
       headers: [
         {
           text: '이메일',
@@ -309,6 +268,21 @@ export default {
       } finally {
         this.is_loading = false
       }
+    },
+
+    async downloadExcel() {
+      try {
+        const res = await api.downloadCalculateCommunityByCreatorExcel(this.start_date, this.end_date)
+        const url = window.URL.createObjectURL(new Blob([res.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', '크리에이터별_커뮤니티정산.xlsx')
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      } catch (e) {
+        this.notifyError('엑셀 다운로드 중 오류가 발생했습니다.')
+      }
     }
   }
 }

src/views/Calculate/CalculateCommunityPost.vue

@@ -35,7 +35,7 @@
         <v-col cols="2">
           <v-btn
             block
-            color="#9970ff"
+            color="#3bb9f1"
             dark
             depressed
             @click="getCalculateCommunityPost"
@@ -47,22 +47,15 @@
         <v-spacer />
 
         <v-col cols="2">
-          <vue-excel-xlsx
-            :data="items"
-            :columns="columns"
-            :file-name="'커뮤니티-정산'"
-            :file-type="'xlsx'"
-            :sheet-name="'커뮤니티-정산'"
-          >
           <v-btn
             block
-              color="#9970ff"
+            color="#3bb9f1"
             dark
             depressed
+            @click="downloadExcel"
           >
             엑셀 다운로드
           </v-btn>
-          </vue-excel-xlsx>
         </v-col>
       </v-row>
       <v-row>
@@ -136,52 +129,6 @@ export default {
       page_size: 20,
       total_page: 0,
       items: [],
-      columns: [
-        {
-          label: '날짜',
-          field: 'date',
-        },
-        {
-          label: '크리에이터',
-          field: 'nickname',
-        },
-        {
-          label: '내용(앞 10글자)',
-          field: 'title'
-        },
-        {
-          label: '판매금액(캔)',
-          field: 'can',
-        },
-        {
-          label: '구매유저수',
-          field: 'numberOfPurchase',
-        },
-        {
-          label: '합계(캔)',
-          field: 'totalCan',
-        },
-        {
-          label: '원화',
-          field: 'totalKrw',
-        },
-        {
-          label: '수수료\n(6.6%)',
-          field: 'paymentFee',
-        },
-        {
-          label: '정산금액',
-          field: 'settlementAmount',
-        },
-        {
-          label: '원천세\n(3.3%)',
-          field: 'tax',
-        },
-        {
-          label: '입금액',
-          field: 'depositAmount',
-        }
-      ],
       headers: [
         {
           text: '날짜',
@@ -309,6 +256,21 @@ export default {
         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         this.is_loading = false
       }
+    },
+
+    async downloadExcel() {
+      try {
+        const res = await api.downloadCalculateCommunityPostExcel(this.start_date, this.end_date)
+        const url = window.URL.createObjectURL(new Blob([res.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', '커뮤니티-정산.xlsx')
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      } catch (e) {
+        this.notifyError('엑셀 다운로드 중 오류가 발생했습니다.')
+      }
     }
   }
 }

src/views/Calculate/CalculateContent.vue

@@ -35,7 +35,7 @@
         <v-col cols="2">
           <v-btn
             block
-            color="#9970ff"
+            color="#3bb9f1"
             dark
             depressed
             @click="getCalculateContent"
@@ -48,22 +48,15 @@
         <v-spacer />
 
         <v-col cols="2">
-          <vue-excel-xlsx
-            :data="items"
-            :columns="columns"
-            :file-name="'정산'"
-            :file-type="'xlsx'"
-            :sheet-name="'정산'"
-          >
           <v-btn
             block
-              color="#9970ff"
+            color="#3bb9f1"
             dark
             depressed
+            @click="downloadExcel"
           >
             엑셀 다운로드
           </v-btn>
-          </vue-excel-xlsx>
         </v-col>
       </v-row>
       <v-row>
@@ -126,6 +119,16 @@
           </v-data-table>
         </v-col>
       </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
     </v-container>
   </div>
 </template>
@@ -143,61 +146,10 @@ export default {
       is_loading: false,
       start_date: null,
       end_date: null,
+      page: 1,
+      page_size: 20,
+      total_page: 0,
       items: [],
-      columns: [
-        {
-          label: '판매일',
-          field: 'saleDate',
-        },
-        {
-          label: '크리에이터',
-          field: 'nickname',
-        },
-        {
-          label: '제목',
-          field: 'title',
-        },
-        {
-          label: '구분',
-          field: 'orderType',
-        },
-        {
-          label: '판매금액(캔)',
-          field: 'orderPrice',
-        },
-        {
-          label: '판매수',
-          field: 'numberOfPeople',
-        },
-        {
-          label: '합계(캔)',
-          field: 'totalCan',
-        },
-        {
-          label: '원화',
-          field: 'totalKrw',
-        },
-        {
-          label: '수수료\n(6.6%)',
-          field: 'paymentFee',
-        },
-        {
-          label: '정산금액',
-          field: 'settlementAmount',
-        },
-        {
-          label: '원천세\n(3.3%)',
-          field: 'tax',
-        },
-        {
-          label: '입금액',
-          field: 'depositAmount',
-        },
-        {
-          label: '등록일',
-          field: 'registrationDate',
-        },
-      ],
       headers: [
         {
           text: '판매일',
@@ -321,9 +273,10 @@ export default {
       this.is_loading = true
 
       try {
-        const res = await api.getCalculateContent(this.start_date, this.end_date)
+        const res = await api.getCalculateContent(this.start_date, this.end_date, this.page, this.page_size)
         if (res.status === 200 && res.data.success === true) {
-          this.items = res.data.data
+          this.items = res.data.data.items
+          this.total_page = Math.ceil(res.data.data.totalCount / this.page_size)
         } else {
           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         }
@@ -333,6 +286,25 @@ export default {
         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         this.is_loading = false
       }
+    },
+
+    next() {
+      this.getCalculateContent()
+    },
+
+    async downloadExcel() {
+      try {
+        const res = await api.downloadCalculateContentExcel(this.start_date, this.end_date)
+        const url = window.URL.createObjectURL(new Blob([res.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', '콘텐츠정산.xlsx')
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      } catch (e) {
+        this.notifyError('엑셀 다운로드 중 오류가 발생했습니다.')
+      }
     }
   }
 }

src/views/Calculate/CalculateContentByCreator.vue

@@ -47,22 +47,15 @@
         <v-spacer />
 
         <v-col cols="2">
-          <vue-excel-xlsx
-            :data="items"
-            :columns="columns"
-            :file-name="'정산'"
-            :file-type="'xlsx'"
-            :sheet-name="'정산'"
-          >
           <v-btn
             block
             color="#3bb9f1"
             dark
             depressed
+            @click="downloadExcel"
           >
             엑셀 다운로드
           </v-btn>
-          </vue-excel-xlsx>
         </v-col>
       </v-row>
 
@@ -156,40 +149,6 @@ export default {
       page_size: 20,
       total_page: 0,
       items: [],
-      columns: [
-        {
-          label: "이메일",
-          field: "email",
-        },
-        {
-          label: "크리에이터",
-          field: "nickname",
-        },
-        {
-          label: "합계(캔)",
-          field: "totalCan",
-        },
-        {
-          label: "원화",
-          field: "totalKrw",
-        },
-        {
-          label: "결제수수료(6.6%)",
-          field: "paymentFee",
-        },
-        {
-          label: "정산금액",
-          field: "settlementAmount",
-        },
-        {
-          label: "원천세(3.3%)",
-          field: "tax",
-        },
-        {
-          label: "입금액",
-          field: "depositAmount",
-        },
-      ],
       headers: [
         {
           text: '이메일',
@@ -309,6 +268,21 @@ export default {
       } finally {
         this.is_loading = false
       }
+    },
+
+    async downloadExcel() {
+      try {
+        const res = await api.downloadCalculateContentByCreatorExcel(this.start_date, this.end_date)
+        const url = window.URL.createObjectURL(new Blob([res.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', '크리에이터별_콘텐츠정산.xlsx')
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      } catch (e) {
+        this.notifyError('엑셀 다운로드 중 오류가 발생했습니다.')
+      }
     }
   }
 }

src/views/Calculate/CalculateContentDonation.vue

@@ -35,7 +35,7 @@
         <v-col cols="2">
           <v-btn
             block
-            color="#9970ff"
+            color="#3bb9f1"
             dark
             depressed
             @click="getCalculateContentDonation"
@@ -48,22 +48,15 @@
         <v-spacer />
 
         <v-col cols="2">
-          <vue-excel-xlsx
-            :data="items"
-            :columns="columns"
-            :file-name="'정산'"
-            :file-type="'xlsx'"
-            :sheet-name="'정산'"
-          >
           <v-btn
             block
-              color="#9970ff"
+            color="#3bb9f1"
             dark
             depressed
+            @click="downloadExcel"
           >
             엑셀 다운로드
           </v-btn>
-          </vue-excel-xlsx>
         </v-col>
       </v-row>
       <v-row>
@@ -118,6 +111,16 @@
           </v-data-table>
         </v-col>
       </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
     </v-container>
   </div>
 </template>
@@ -135,57 +138,10 @@ export default {
       is_loading: false,
       start_date: null,
       end_date: null,
+      page: 1,
+      page_size: 20,
+      total_page: 0,
       items: [],
-      columns: [
-        {
-          label: '후원날짜',
-          field: 'donationDate',
-        },
-        {
-          label: '크리에이터',
-          field: 'nickname',
-        },
-        {
-          label: '콘텐츠 제목',
-          field: 'title',
-        },
-        {
-          label: '구분',
-          field: 'paidOrFree',
-        },
-        {
-          label: '후원수',
-          field: 'numberOfDonation',
-        },
-        {
-          label: '합계(캔)',
-          field: 'totalCan',
-        },
-        {
-          label: '원화',
-          field: 'totalKrw',
-        },
-        {
-          label: '수수료\n(6.6%)',
-          field: 'paymentFee',
-        },
-        {
-          label: '정산금액',
-          field: 'settlementAmount',
-        },
-        {
-          label: '원천세\n(3.3%)',
-          field: 'tax',
-        },
-        {
-          label: '입금액',
-          field: 'depositAmount',
-        },
-        {
-          label: '콘텐츠 등록일',
-          field: 'registrationDate',
-        },
-      ],
       headers: [
         {
           text: '후원날짜',
@@ -303,9 +259,10 @@ export default {
       this.is_loading = true
 
       try {
-        const res = await api.getCalculateContentDonation(this.start_date, this.end_date)
+        const res = await api.getCalculateContentDonation(this.start_date, this.end_date, this.page, this.page_size)
         if (res.status === 200 && res.data.success === true) {
-          this.items = res.data.data
+          this.items = res.data.data.items
+          this.total_page = Math.ceil(res.data.data.totalCount / this.page_size)
         } else {
           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         }
@@ -315,6 +272,25 @@ export default {
         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         this.is_loading = false
       }
+    },
+
+    next() {
+      this.getCalculateContentDonation()
+    },
+
+    async downloadExcel() {
+      try {
+        const res = await api.downloadCalculateContentDonationExcel(this.start_date, this.end_date)
+        const url = window.URL.createObjectURL(new Blob([res.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', '콘텐츠후원정산.xlsx')
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      } catch (e) {
+        this.notifyError('엑셀 다운로드 중 오류가 발생했습니다.')
+      }
     }
   }
 }

src/views/Calculate/CalculateLive.vue

@@ -35,7 +35,7 @@
         <v-col cols="2">
           <v-btn
             block
-            color="#9970ff"
+            color="#3bb9f1"
             dark
             depressed
             @click="getCalculateLive"
@@ -47,22 +47,15 @@
         <v-spacer />
 
         <v-col cols="2">
-          <vue-excel-xlsx
-            :data="items"
-            :columns="columns"
-            :file-name="'정산'"
-            :file-type="'xlsx'"
-            :sheet-name="'정산'"
-          >
           <v-btn
             block
-              color="#9970ff"
+            color="#3bb9f1"
             dark
             depressed
+            @click="downloadExcel"
           >
             엑셀 다운로드
           </v-btn>
-          </vue-excel-xlsx>
         </v-col>
       </v-row>
 
@@ -76,10 +69,6 @@
             class="elevation-1"
             hide-default-footer
           >
-            <template v-slot:item.email="{ item }">
-              {{ item.email }}
-            </template>
-
             <template v-slot:item.nickname="{ item }">
               {{ item.nickname }}
             </template>
@@ -123,9 +112,29 @@
             <template v-slot:item.depositAmount="{ item }">
               {{ item.depositAmount.toLocaleString() }} 원
             </template>
+
+            <template v-slot:item.actions="{ item }">
+              <v-btn
+                small
+                color="error"
+                @click="refund(item)"
+              >
+                환불
+              </v-btn>
+            </template>
           </v-data-table>
         </v-col>
       </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
     </v-container>
   </div>
 </template>
@@ -143,68 +152,11 @@ export default {
       is_loading: false,
       start_date: null,
       end_date: null,
+      page: 1,
+      page_size: 20,
+      total_page: 0,
       items: [],
-      columns: [
-        {
-          label: "이메일",
-          field: "email",
-        },
-        {
-          label: "크리에이터",
-          field: "nickname",
-        },
-        {
-          label: "날짜",
-          field: "date",
-        },
-        {
-          label: "제목",
-          field: "title",
-        },
-        {
-          label: "구분",
-          field: "canUsageStr",
-        },
-        {
-          label: "입장캔",
-          field: "entranceFee",
-        },
-        {
-          label: "인원",
-          field: "numberOfPeople",
-        },
-        {
-          label: "합계(캔)",
-          field: "totalAmount",
-        },
-        {
-          label: "원화",
-          field: "totalKrw",
-        },
-        {
-          label: "결제수수료(6.6%)",
-          field: "paymentFee",
-        },
-        {
-          label: "정산금액",
-          field: "settlementAmount",
-        },
-        {
-          label: "원천세(3.3%)",
-          field: "tax",
-        },
-        {
-          label: "입금액",
-          field: "depositAmount",
-        },
-      ],
       headers: [
-        {
-          text: '이메일',
-          align: 'center',
-          sortable: false,
-          value: 'email',
-        },
         {
           text: '크리에이터',
           align: 'center',
@@ -275,6 +227,12 @@ export default {
           align: 'center',
           sortable: false,
           value: 'depositAmount',
+        },
+        {
+          text: '관리',
+          align: 'center',
+          sortable: false,
+          value: 'actions',
         }
       ],
     }
@@ -315,9 +273,10 @@ export default {
       this.is_loading = true
 
       try {
-        const res = await api.getCalculateLive(this.start_date, this.end_date)
+        const res = await api.getCalculateLive(this.start_date, this.end_date, this.page, this.page_size)
         if (res.status === 200 && res.data.success === true) {
-          this.items = res.data.data
+          this.items = res.data.data.items
+          this.total_page = Math.ceil(res.data.data.totalCount / this.page_size)
         } else {
           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         }
@@ -327,6 +286,41 @@ export default {
         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         this.is_loading = false
       }
+    },
+
+    next() {
+      this.getCalculateLive()
+    },
+
+    async refund(item) {
+      if (confirm('정말로 환불하시겠습니까?')) {
+        try {
+          const res = await api.refundLive(item.roomId, item.canUsageStr)
+          if (res.status === 200 && res.data.success === true) {
+            this.notifySuccess('환불 처리가 완료되었습니다.')
+            await this.getCalculateLive()
+          } else {
+            this.notifyError(res.data.message || '환불 처리 중 오류가 발생했습니다.')
+          }
+        } catch (e) {
+          this.notifyError('환불 처리 중 오류가 발생했습니다.')
+        }
+      }
+    },
+
+    async downloadExcel() {
+      try {
+        const res = await api.downloadCalculateLiveExcel(this.start_date, this.end_date)
+        const url = window.URL.createObjectURL(new Blob([res.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', '라이브정산.xlsx')
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      } catch (e) {
+        this.notifyError('엑셀 다운로드 중 오류가 발생했습니다.')
+      }
     }
   }
 }

src/views/Calculate/CalculateLiveByCreator.vue

@@ -47,22 +47,15 @@
         <v-spacer />
 
         <v-col cols="2">
-          <vue-excel-xlsx
-            :data="items"
-            :columns="columns"
-            :file-name="'정산'"
-            :file-type="'xlsx'"
-            :sheet-name="'정산'"
-          >
           <v-btn
             block
             color="#3bb9f1"
             dark
             depressed
+            @click="downloadExcel"
           >
             엑셀 다운로드
           </v-btn>
-          </vue-excel-xlsx>
         </v-col>
       </v-row>
 
@@ -156,40 +149,6 @@ export default {
       page_size: 20,
       total_page: 0,
       items: [],
-      columns: [
-        {
-          label: "이메일",
-          field: "email",
-        },
-        {
-          label: "크리에이터",
-          field: "nickname",
-        },
-        {
-          label: "합계(캔)",
-          field: "totalCan",
-        },
-        {
-          label: "원화",
-          field: "totalKrw",
-        },
-        {
-          label: "결제수수료(6.6%)",
-          field: "paymentFee",
-        },
-        {
-          label: "정산금액",
-          field: "settlementAmount",
-        },
-        {
-          label: "원천세(3.3%)",
-          field: "tax",
-        },
-        {
-          label: "입금액",
-          field: "depositAmount",
-        },
-      ],
       headers: [
         {
           text: '이메일',
@@ -309,6 +268,21 @@ export default {
       } finally {
         this.is_loading = false
       }
+    },
+
+    async downloadExcel() {
+      try {
+        const res = await api.downloadCalculateLiveByCreatorExcel(this.start_date, this.end_date)
+        const url = window.URL.createObjectURL(new Blob([res.data]))
+        const link = document.createElement('a')
+        link.href = url
+        link.setAttribute('download', '크리에이터별_라이브정산.xlsx')
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      } catch (e) {
+        this.notifyError('엑셀 다운로드 중 오류가 발생했습니다.')
+      }
     }
   }
 }

src/views/Can/CanManagement.vue

@@ -36,6 +36,7 @@
                 <v-data-table
                   :headers="headers"
                   :items="cans"
+                  :items-per-page="-1"
                   class="elevation-1"
                   hide-default-footer
                 >

src/views/Can/CanStatus.vue

@@ -94,10 +94,6 @@
               class="elevation-1"
               hide-default-footer
             >
-              <template v-slot:item.accountId="{ item }">
-                {{ item.accountId }}
-              </template>
-
               <template v-slot:item.nickname="{ item }">
                 {{ item.nickname }}
               </template>
@@ -113,6 +109,16 @@
               <template v-slot:item.datetime="{ item }">
                 {{ item.datetime }}
               </template>
+
+              <template v-slot:item.refund="{ item }">
+                <v-btn
+                  color="error"
+                  small
+                  @click="confirmRefund(item)"
+                >
+                  환불
+                </v-btn>
+              </template>
             </v-data-table>
             <v-card-actions v-show="!is_loading">
               <v-spacer />
@@ -146,14 +152,9 @@ export default {
       end_date: null,
       items: [],
       detail_items: null,
+      selected_date_item: null,
       show_popup_dialog: false,
       detail_headers: [
-        {
-          text: 'no',
-          align: 'center',
-          sortable: false,
-          value: 'accountId',
-        },
         {
           text: '닉네임',
           align: 'center',
@@ -184,6 +185,12 @@ export default {
           sortable: false,
           value: 'datetime',
         },
+        {
+          text: '환불',
+          align: 'center',
+          sortable: false,
+          value: 'refund',
+        },
       ],
       headers: [
         {
@@ -284,6 +291,7 @@ export default {
     async getChargeStatusDetail(value) {
       if (value.date !== '합계') {
         this.is_loading = true
+        this.selected_date_item = value
 
         try {
           const res = await api.getChargeStatusDetail(value.date, value.pg, value.currency)
@@ -300,6 +308,45 @@ export default {
           this.is_loading = false
         }
       }
+    },
+
+    async confirmRefund(item) {
+      let canText = `${item.chargeCan}캔`
+      if (item.rewardCan > 0) {
+        canText += ` + ${item.rewardCan}캔`
+      }
+
+      const confirm = await this.$dialog.confirm({
+        title: '환불 확인',
+        text: `${item.nickname}님의 ${canText}을 환불하시겠습니까?`,
+        actions: {
+          false: '취소',
+          true: '환불'
+        }
+      })
+
+      if (confirm) {
+        await this.refundCharge(item.chargeId)
+      }
+    },
+
+    async refundCharge(chargeId) {
+      this.is_loading = true
+
+      try {
+        const res = await api.refundCharge(chargeId)
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess('환불이 완료되었습니다.')
+          await this.getChargeStatusDetail(this.selected_date_item)
+          await this.getChargeStatus()
+        } else {
+          this.notifyError(res.data.message || '환불 처리 중 오류가 발생했습니다.')
+        }
+      } catch (e) {
+        this.notifyError('환불 처리 중 오류가 발생했습니다.')
+      } finally {
+        this.is_loading = false
+      }
     }
   }
 }

src/views/Chat/CharacterForm.vue

@@ -109,11 +109,11 @@
               </v-col>
             </v-row>
 
-            <!-- 성별 -->
+            <!-- 성별 & 리전 -->
             <v-row>
               <v-col
                 cols="12"
-                md="6"
+                md="4"
               >
                 <v-select
                   v-model="character.gender"
@@ -124,10 +124,35 @@
                 />
               </v-col>
 
+              <v-col
+                cols="12"
+                md="4"
+              >
+                <v-select
+                  v-if="!isEdit"
+                  v-model="character.region"
+                  :items="regionOptions"
+                  item-text="text"
+                  item-value="value"
+                  label="리전"
+                  outlined
+                  dense
+                />
+                <v-text-field
+                  v-else
+                  :value="regionDisplayText"
+                  label="리전"
+                  readonly
+                  outlined
+                  dense
+                  background-color="grey lighten-4"
+                />
+              </v-col>
+
               <!-- 나이 -->
               <v-col
                 cols="12"
-                md="6"
+                md="4"
               >
                 <v-text-field
                   v-model="character.age"
@@ -328,10 +353,11 @@
               <v-col cols="12">
                 <v-textarea
                   v-model="character.systemPrompt"
-                  label="시스템 프롬프트"
+                  label="시스템 프롬프트 (최대 2000자)"
                   outlined
                   auto-grow
                   rows="4"
+                  counter="2000"
                   :class="{ 'required-asterisk': !isEdit }"
                   :rules="systemPromptRules"
                 />
@@ -1116,6 +1142,7 @@ export default {
         speechStyle: '',
         appearance: '',
         systemPrompt: '',
+        region: 'KR',
         tags: [],
         memories: [],
         relationships: [],
@@ -1150,9 +1177,14 @@ export default {
         'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ',
         'ISTP', 'ISFP', 'ESTP', 'ESFP'
       ],
+      regionOptions: [
+        { text: '한국', value: 'KR' },
+        { text: '일본', value: 'JP' }
+      ],
       typeOptions: ['Clone', 'Character'],
       systemPromptRules: [
-        v => (this.isEdit ? true : (!!v && v.trim().length > 0) || '시스템 프롬프트를 입력하세요')
+        v => (this.isEdit ? true : (!!v && v.trim().length > 0) || '시스템 프롬프트를 입력하세요'),
+        v => (!!v && v.length <= 2000) || '최대 2000자까지 입력 가능합니다'
       ],
       // 인물 관계 옵션 및 검증 규칙
       relationshipTypeOptions: ['가족', '친구', '동료', '연인', '기타'],
@@ -1197,6 +1229,10 @@ export default {
       const hasNonIdField = Object.keys(changed || {}).some(k => k !== 'id');
       const imageChanged = !!this.character.image; // 새 이미지 선택 여부
       return !(hasNonIdField || imageChanged);
+    },
+    regionDisplayText() {
+      const option = this.regionOptions.find(opt => opt.value === this.character.region);
+      return option ? option.text : this.character.region;
     }
   },
 
@@ -1569,9 +1605,12 @@ export default {
       const result = { ...data };
       // 기본값 보정
       if (result.originalWorkId == null) result.originalWorkId = null;
+      // 리전 정보가 없는 경우 기본값 KR 설정
+      if (!result.region) result.region = 'KR';
+
       const simpleFields = [
         'name', 'systemPrompt', 'description', 'age', 'gender', 'mbti',
-        'characterType', 'speechPattern', 'speechStyle', 'appearance', 'imageUrl'
+        'characterType', 'speechPattern', 'speechStyle', 'appearance', 'imageUrl', 'region'
       ];
       simpleFields.forEach(f => {
         if (result[f] == null) result[f] = '';
@@ -1595,6 +1634,7 @@ export default {
           speechPattern: this.character.speechPattern,
           speechStyle: this.character.speechStyle,
           appearance: this.character.appearance,
+          region: this.character.region,
           tags: this.character.tags || [],
           hobbies: this.character.hobbies || [],
           values: this.character.values || [],
@@ -1615,7 +1655,7 @@ export default {
       // 기본 필드 비교
       const simpleFields = [
         'name', 'description', 'age', 'gender', 'mbti', 'characterType', 'originalWorkId',
-        'speechPattern', 'speechStyle', 'isActive'
+        'speechPattern', 'speechStyle', 'isActive', 'region'
       ];
 
       simpleFields.forEach(field => {

src/views/Chat/CharacterList.vue

@@ -79,6 +79,9 @@
                   <th class="text-center">
                     태그
                   </th>
+                  <th class="text-center">
+                    리전
+                  </th>
                   <th class="text-center">
                     등록일
                   </th>
@@ -150,6 +153,7 @@
                     </div>
                     <span v-else>-</span>
                   </td>
+                  <td>{{ getRegionText(item.region) }}</td>
                   <td>{{ item.createdAt }}</td>
                   <td>{{ item.updatedAt || '-' }}</td>
                   <td>
@@ -284,7 +288,11 @@ export default {
       total_page: 0,
       characters: [],
       selected_character: {},
-      searchTerm: ''
+      searchTerm: '',
+      regionOptions: [
+        { text: '한국', value: 'KR' },
+        { text: '일본', value: 'JP' }
+      ]
     }
   },
 
@@ -301,6 +309,11 @@ export default {
       this.$dialog.notify.success(message)
     },
 
+    getRegionText(region) {
+      if (!region) return '-';
+      const option = this.regionOptions.find(opt => opt.value === region);
+      return option ? option.text : region;
+    },
 
     showDetailDialog(item, type) {
       this.selected_character = item;

src/views/Content/ContentList.vue

@@ -125,7 +125,13 @@
                       :lines="3"
                     />
                   </td>
-                  <td style="max-width: 200px !important; word-break:break-all; height: auto;">
+                  <td
+                    style="
+                      max-width: 200px !important;
+                      word-break: break-all;
+                      height: auto;
+                    "
+                  >
                     <vue-show-more-text
                       :text="item.detail"
                       :lines="3"
@@ -133,7 +139,13 @@
                   </td>
                   <td>{{ item.creatorNickname }}</td>
                   <td>{{ item.theme }}</td>
-                  <td style="max-width: 100px !important; word-break:break-all; height: auto;">
+                  <td
+                    style="
+                      max-width: 100px !important;
+                      word-break: break-all;
+                      height: auto;
+                    "
+                  >
                     <vue-show-more-text
                       :text="item.tags"
                       :lines="3"
@@ -146,14 +158,29 @@
                     무료
                   </td>
                   <td
-                    v-if="item.totalContentCount > 0 && item.remainingContentCount > 0"
-                    style="min-width: 100px !important; word-break:break-all; height: auto;"
+                    v-if="
+                      item.totalContentCount > 0 &&
+                        item.remainingContentCount > 0
+                    "
+                    style="
+                      min-width: 100px !important;
+                      word-break: break-all;
+                      height: auto;
+                    "
                   >
-                    {{ item.totalContentCount - item.remainingContentCount }} / {{ item.totalContentCount }}
+                    {{ item.totalContentCount - item.remainingContentCount }} /
+                    {{ item.totalContentCount }}
                   </td>
                   <td
-                    v-else-if="item.totalContentCount > 0 && item.remainingContentCount <= 0"
-                    style="min-width: 100px !important; word-break:break-all; height: auto;"
+                    v-else-if="
+                      item.totalContentCount > 0 &&
+                        item.remainingContentCount <= 0
+                    "
+                    style="
+                      min-width: 100px !important;
+                      word-break: break-all;
+                      height: auto;
+                    "
                   >
                     Sold Out
                   </td>
@@ -233,9 +260,60 @@
         persistent
       >
         <v-card>
-          <v-card-title>
-            콘텐츠 수정
-          </v-card-title>
+          <v-card-title> 콘텐츠 수정 </v-card-title>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                커버 이미지
+              </v-col>
+              <v-col cols="8">
+                <v-img
+                  v-if="image_preview"
+                  :src="image_preview"
+                  max-width="200"
+                  aspect-ratio="1"
+                  contain
+                  class="mb-2"
+                />
+                <v-file-input
+                  v-model="cover_image_file"
+                  label="커버 이미지 선택"
+                  accept="image/*"
+                  prepend-icon="mdi-camera"
+                  outlined
+                  dense
+                  @change="onFileChange"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text v-if="show_cropper">
+            <v-row>
+              <v-col cols="12">
+                <div style="max-height: 400px">
+                  <img
+                    ref="cropper_image"
+                    :src="cropper_src"
+                    style="max-width: 100%"
+                  >
+                </div>
+                <v-btn
+                  color="primary"
+                  class="mt-2"
+                  @click="cropImage"
+                >
+                  크롭 적용
+                </v-btn>
+                <v-btn
+                  color="grey"
+                  class="mt-2 ml-2"
+                  @click="cancelCrop"
+                >
+                  취소
+                </v-btn>
+              </v-col>
+            </v-row>
+          </v-card-text>
           <v-card-text>
             <v-row align="center">
               <v-col cols="4">
@@ -373,16 +451,18 @@
 </template>
 
 <script>
-import * as api from '@/api/audio_content'
+import * as api from "@/api/audio_content";
 import * as dynamicLink from "@/api/firebase_dynamic_link";
 
-import VuetifyAudio from 'vuetify-audio'
-import VueShowMoreText from 'vue-show-more-text'
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+import VuetifyAudio from "vuetify-audio";
+import VueShowMoreText from "vue-show-more-text";
 
 export default {
   name: "AudioContentList",
 
-  components: {VuetifyAudio, VueShowMoreText},
+  components: { VuetifyAudio, VueShowMoreText },
 
   data() {
     return {
@@ -391,60 +471,135 @@ export default {
       show_delete_confirm_dialog: false,
       page: 1,
       total_page: 0,
-      status: 'OPEN',
-      search_word: '',
+      status: "OPEN",
+      search_word: "",
       audio_content: {},
       audio_contents: [],
       themeList: [],
       selected_audio_content: {},
-      utm_source: '',
-      utm_medium: '',
-      utm_campaign: '',
-    }
+      utm_source: "",
+      utm_medium: "",
+      utm_campaign: "",
+      cover_image_file: null,
+      image_preview: null,
+      cropper: null,
+      show_cropper: false,
+      cropper_src: null,
+    };
   },
 
   async created() {
+    this.audio_content = {
+      id: null,
+      title: "",
+      detail: "",
+      theme_id: null,
+      is_adult: false,
+      is_comment_available: false,
+      is_default_cover_image: false,
+    };
     await this.getAudioContentThemeList();
-    await this.getAudioContent()
+    await this.getAudioContent();
   },
 
   methods: {
     notifyError(message) {
-      this.$dialog.notify.error(message)
+      this.$dialog.notify.error(message);
     },
 
     notifySuccess(message) {
-      this.$dialog.notify.success(message)
+      this.$dialog.notify.success(message);
     },
 
     deleteConfirm(item) {
-      this.selected_audio_content = item
-      this.show_delete_confirm_dialog = true
+      this.selected_audio_content = item;
+      this.show_delete_confirm_dialog = true;
     },
 
     deleteCancel() {
-      this.selected_audio_content = {}
-      this.show_delete_confirm_dialog = false
+      this.selected_audio_content = {};
+      this.show_delete_confirm_dialog = false;
     },
 
     showModifyDialog(item) {
-      this.selected_audio_content = item
+      this.selected_audio_content = item;
 
-      this.audio_content.id = item.audioContentId
-      this.audio_content.title = item.title
-      this.audio_content.detail = item.detail
-      this.audio_content.theme_id = item.themeId
-      this.audio_content.is_adult = item.isAdult
-      this.audio_content.is_comment_available = item.isCommentAvailable
-      this.audio_content.is_default_cover_image = false
-      this.show_modify_dialog = true
+      this.audio_content.id = item.audioContentId;
+      this.audio_content.title = item.title;
+      this.audio_content.detail = item.detail;
+      this.audio_content.theme_id = item.themeId;
+      this.audio_content.is_adult = item.isAdult;
+      this.audio_content.is_comment_available = item.isCommentAvailable;
+      this.audio_content.is_default_cover_image = false;
+
+      this.image_preview = item.coverImageUrl;
+      this.cover_image_file = null;
+      this.show_modify_dialog = true;
+    },
+
+    onFileChange(file) {
+      if (!file) {
+        this.image_preview = this.selected_audio_content.coverImageUrl;
+        this.show_cropper = false;
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        this.cropper_src = e.target.result;
+        this.show_cropper = true;
+        this.$nextTick(() => {
+          if (this.cropper) {
+            this.cropper.destroy();
+          }
+          this.cropper = new Cropper(this.$refs.cropper_image, {
+            aspectRatio: 1,
+            viewMode: 1,
+          });
+        });
+      };
+      reader.readAsDataURL(file);
+    },
+
+    cropImage() {
+      const canvas = this.cropper.getCroppedCanvas({
+        width: 500,
+        height: 500,
+      });
+      this.image_preview = canvas.toDataURL();
+      canvas.toBlob((blob) => {
+        this.cover_image_file = new File([blob], "cover_image.png", {
+          type: "image/png",
+        });
+      });
+      this.show_cropper = false;
+    },
+
+    cancelCrop() {
+      this.show_cropper = false;
+      this.cover_image_file = null;
+      this.image_preview = this.selected_audio_content.coverImageUrl;
     },
 
     cancel() {
-      this.selected_audio_content = {}
-      this.audio_content = {}
-      this.show_modify_dialog = false
-      this.show_delete_confirm_dialog = false
+      this.selected_audio_content = {};
+      this.audio_content = {
+        id: null,
+        title: "",
+        detail: "",
+        theme_id: null,
+        is_adult: false,
+        is_comment_available: false,
+        is_default_cover_image: false,
+      };
+      this.image_preview = null;
+      this.cover_image_file = null;
+      this.show_cropper = false;
+      if (this.cropper) {
+        this.cropper.destroy();
+        this.cropper = null;
+      }
+      this.show_modify_dialog = false;
+      this.show_delete_confirm_dialog = false;
     },
 
     async modify() {
@@ -453,8 +608,8 @@ export default {
         this.audio_content.title === undefined ||
         this.audio_content.title.trim().length <= 0
       ) {
-        this.notifyError("제목을 입력하세요")
-        return
+        this.notifyError("제목을 입력하세요");
+        return;
       }
 
       if (
@@ -462,194 +617,223 @@ export default {
         this.audio_content.detail === undefined ||
         this.audio_content.detail.trim().length <= 0
       ) {
-        this.notifyError("내용을 입력하세요")
-        return
+        this.notifyError("내용을 입력하세요");
+        return;
       }
 
       if (this.is_loading) return;
 
-      this.isLoading = true
+      this.is_loading = true;
 
       try {
         const request = {
           id: this.audio_content.id,
-          isDefaultCoverImage: this.audio_content.is_default_cover_image
-        }
+          isDefaultCoverImage: this.audio_content.is_default_cover_image,
+        };
 
         if (
-          this.selected_audio_content.title !== this.audio_content.title &&
+          this.audio_content.title !== this.selected_audio_content.title &&
           this.audio_content.title.trim().length > 0
         ) {
-          request.title = this.audio_content.title
+          request.title = this.audio_content.title;
+        }
+        if (this.audio_content.detail !== this.selected_audio_content.detail) {
+          request.detail = this.audio_content.detail;
         }
-
         if (
-          this.selected_audio_content.detail !== this.audio_content.detail &&
-          this.audio_content.detail.trim().length > 0
+          this.audio_content.theme_id !== this.selected_audio_content.themeId
         ) {
-          request.detail = this.audio_content.detail
+          request.themeId = this.audio_content.theme_id;
+        }
+        if (
+          this.audio_content.is_adult !== this.selected_audio_content.isAdult
+        ) {
+          request.isAdult = this.audio_content.is_adult;
+        }
+        if (
+          this.audio_content.is_comment_available !==
+          this.selected_audio_content.isCommentAvailable
+        ) {
+          request.isCommentAvailable = this.audio_content.is_comment_available;
         }
 
-        if (this.selected_audio_content.themeId !== this.audio_content.theme_id) {
-          request.themeId = this.audio_content.theme_id
+        const formData = new FormData();
+        formData.append("request", JSON.stringify(request));
+
+        if (this.cover_image_file) {
+          formData.append("coverImage", this.cover_image_file);
         }
 
-        if (this.selected_audio_content.isAdult !== this.audio_content.is_adult) {
-          request.isAdult = this.audio_content.is_adult
-        }
-
-        if (this.selected_audio_content.isCommentAvailable !== this.audio_content.is_comment_available) {
-          request.isCommentAvailable = this.audio_content.is_comment_available
-        }
-
-        const res = await api.modifyAudioContent(request)
+        const res = await api.modifyAudioContent(formData);
         if (res.status === 200 && res.data.success === true) {
-          this.cancel()
-          this.notifySuccess('수정되었습니다.')
+          this.cancel();
+          this.notifySuccess("수정되었습니다.");
 
-          this.audio_contents = []
-          await this.getAudioContent()
+          this.audio_contents = [];
+          await this.getAudioContent();
         } else {
-          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.notifyError(
+            res.data.message ||
+              "알 수 없는 오류가 발생했습니다. 다시 시도해 주세요."
+          );
         }
       } catch (e) {
-        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.");
       } finally {
-        this.is_loading = false
+        this.is_loading = false;
       }
     },
 
     async deleteAudioContent() {
       if (this.is_loading) return;
-      this.is_loading = true
+      this.is_loading = true;
 
       try {
-        let request = {id: this.selected_audio_content.audioContentId, isActive: false}
+        let request = {
+          id: this.selected_audio_content.audioContentId,
+          isActive: false,
+        };
 
-        const res = await api.modifyAudioContent(request)
+        const formData = new FormData();
+        formData.append("request", JSON.stringify(request));
+
+        const res = await api.modifyAudioContent(formData);
         if (res.status === 200 && res.data.success === true) {
-          this.cancel()
-          this.notifySuccess('삭제되었습니다.')
+          this.cancel();
+          this.notifySuccess("삭제되었습니다.");
 
-          this.audio_contents = []
-          await this.getAudioContent()
+          this.audio_contents = [];
+          await this.getAudioContent();
         } else {
-          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.notifyError(
+            res.data.message ||
+              "알 수 없는 오류가 발생했습니다. 다시 시도해 주세요."
+          );
         }
       } catch (e) {
-        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.");
       } finally {
-        this.is_loading = false
+        this.is_loading = false;
       }
     },
 
     async next() {
       if (this.search_word.length < 2) {
-        this.search_word = ''
-        await this.getAudioContent()
+        this.search_word = "";
+        await this.getAudioContent();
       } else {
-        await this.searchAudioContent()
+        await this.searchAudioContent();
       }
     },
 
     async getAudioContentThemeList() {
-      this.is_loading = true
+      this.is_loading = true;
       try {
-        const res = await api.getAudioContentThemeList()
+        const res = await api.getAudioContentThemeList();
         if (res.status === 200 && res.data.success === true) {
           this.themeList = res.data.data.map((item) => {
-            return {title: item.theme, value: item.id}
-          })
+            return { title: item.theme, value: item.id };
+          });
         } else {
-          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.notifyError(
+            res.data.message ||
+              "알 수 없는 오류가 발생했습니다. 다시 시도해 주세요."
+          );
         }
 
-        this.is_loading = false
+        this.is_loading = false;
       } catch (e) {
-        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-        this.is_loading = false
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.");
+        this.is_loading = false;
       }
     },
 
     async getAudioContent() {
-      this.is_loading = true
+      this.is_loading = true;
       try {
-        const res = await api.getAudioContentList(this.status, this.page)
+        const res = await api.getAudioContentList(this.status, this.page);
         if (res.status === 200 && res.data.success === true) {
-          const data = res.data.data
+          const data = res.data.data;
 
-          const total_page = Math.ceil(data.totalCount / 10)
-          this.audio_contents = data.items
+          const total_page = Math.ceil(data.totalCount / 10);
+          this.audio_contents = data.items;
 
-          if (total_page <= 0)
-            this.total_page = 1
-          else
-            this.total_page = total_page
+          if (total_page <= 0) this.total_page = 1;
+          else this.total_page = total_page;
         } else {
-          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.notifyError(
+            res.data.message ||
+              "알 수 없는 오류가 발생했습니다. 다시 시도해 주세요."
+          );
         }
 
-        this.is_loading = false
+        this.is_loading = false;
       } catch (e) {
-        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-        this.is_loading = false
+        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.");
+        this.is_loading = false;
       }
     },
 
     async search() {
-      this.page = 1
-      await this.searchAudioContent()
+      this.page = 1;
+      await this.searchAudioContent();
     },
 
     async searchAudioContent() {
       if (this.search_word.length === 0) {
-        await this.getAudioContent()
+        await this.getAudioContent();
       } else if (this.search_word.length < 2) {
-        this.notifyError('검색어를 2글자 이상 입력하세요.')
+        this.notifyError("검색어를 2글자 이상 입력하세요.");
       } else {
-        this.is_loading = true
+        this.is_loading = true;
         try {
-          const res = await api.searchAudioContent(this.search_word, this.page)
+          const res = await api.searchAudioContent(this.search_word, this.page);
           if (res.status === 200 && res.data.success === true) {
-            const data = res.data.data
+            const data = res.data.data;
 
-            const total_page = Math.ceil(data.totalCount / 10)
-            this.audio_contents = data.items
+            const total_page = Math.ceil(data.totalCount / 10);
+            this.audio_contents = data.items;
 
-            if (total_page <= 0)
-              this.total_page = 1
-            else
-              this.total_page = total_page
+            if (total_page <= 0) this.total_page = 1;
+            else this.total_page = total_page;
           } else {
-            this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+            this.notifyError(
+              res.data.message ||
+                "알 수 없는 오류가 발생했습니다. 다시 시도해 주세요."
+            );
           }
 
-          this.is_loading = false
+          this.is_loading = false;
         } catch (e) {
-          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-          this.is_loading = false
+          this.notifyError(
+            "알 수 없는 오류가 발생했습니다. 다시 시도해 주세요."
+          );
+          this.is_loading = false;
         }
       }
     },
 
     async shareAudioContent(item) {
-      this.is_loading = true
+      this.is_loading = true;
       try {
-        const linkData = await dynamicLink.shareAudioContent(item, this.utm_source, this.utm_medium, this.utm_campaign);
+        const linkData = await dynamicLink.shareAudioContent(
+          item,
+          this.utm_source,
+          this.utm_medium,
+          this.utm_campaign
+        );
         if (linkData.status === 200) {
-          await navigator.clipboard.writeText(linkData.data.shortLink)
-          this.notifySuccess("링크가 복사되었습니다.")
+          await navigator.clipboard.writeText(linkData.data.shortLink);
+          this.notifySuccess("링크가 복사되었습니다.");
         } else {
-          this.notifyError("링크를 생성하지 못했습니다.")
+          this.notifyError("링크를 생성하지 못했습니다.");
         }
       } finally {
-        this.is_loading = false
+        this.is_loading = false;
       }
     },
-  }
-}
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/Member/MemberList.vue

@@ -193,6 +193,14 @@
             </v-row>
           </v-card-text>
           <v-card-actions v-show="!is_loading">
+            <v-btn
+              color="error"
+              text
+              @click="showBlockReasonDialog"
+            >
+              차단
+            </v-btn>
+            <v-spacer />
             <v-btn
               color="blue darken-1"
               text
@@ -200,7 +208,6 @@
             >
               비밀번호 재설정
             </v-btn>
-            <v-spacer />
             <v-btn
               color="blue darken-1"
               text
@@ -252,6 +259,74 @@
         </v-card>
       </v-dialog>
     </v-row>
+
+    <v-row>
+      <v-dialog
+        v-model="show_block_reason_dialog"
+        max-width="500px"
+        persistent
+      >
+        <v-card>
+          <v-card-title>차단(탈퇴) 사유 입력</v-card-title>
+          <v-card-text>
+            <v-textarea
+              v-model="block_reason"
+              label="사유를 입력해주세요"
+              outlined
+              hide-details
+            />
+          </v-card-text>
+          <v-card-actions v-show="!is_loading">
+            <v-spacer />
+            <v-btn
+              color="error"
+              text
+              @click="confirmBlock"
+            >
+              차단
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancelBlock"
+            >
+              취소
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+
+    <v-row>
+      <v-dialog
+        v-model="show_confirm_block_dialog"
+        max-width="500px"
+        persistent
+      >
+        <v-card>
+          <v-card-title class="text-h6">
+            '{{ nickname }}' 계정과 본인인증 정보, 같은 본인인증 정보를 사용하는 모든 계정을 차단합니다.
+          </v-card-title>
+          <v-card-actions v-show="!is_loading">
+            <v-spacer />
+            <v-btn
+              color="error"
+              text
+              @click="blockMember"
+            >
+              차단
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancelBlock"
+            >
+              취소
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
   </div>
 </template>
 
@@ -274,6 +349,9 @@ export default {
       user_type: null,
       show_popup_dialog: false,
       show_confirm_reset_password_dialog: false,
+      show_block_reason_dialog: false,
+      show_confirm_block_dialog: false,
+      block_reason: '',
     }
   },
 
@@ -382,6 +460,51 @@ export default {
       this.user_type = null
       this.show_popup_dialog = false
       this.show_confirm_reset_password_dialog = false
+      this.show_block_reason_dialog = false
+      this.show_confirm_block_dialog = false
+      this.block_reason = ''
+    },
+
+    showBlockReasonDialog() {
+      this.show_popup_dialog = false
+      this.show_block_reason_dialog = true
+    },
+
+    cancelBlock() {
+      this.show_block_reason_dialog = false
+      this.show_confirm_block_dialog = false
+      this.block_reason = ''
+      this.show_popup_dialog = true
+    },
+
+    confirmBlock() {
+      if (this.block_reason.length === 0) {
+        this.notifyError('차단 사유를 입력해주세요.')
+        return
+      }
+      this.show_block_reason_dialog = false
+      this.show_confirm_block_dialog = true
+    },
+
+    async blockMember() {
+      this.is_loading = true
+      try {
+        const res = await api.blockMember(this.member.id, this.block_reason)
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess('차단되었습니다.')
+          this.cancel()
+
+          this.page = 1
+          await this.getMemberList()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+
+        this.is_loading = false
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      }
     },
 
     async modify() {

src/views/Member/MemberStatisticsView.vue

@@ -73,6 +73,12 @@
                 <td>
                   {{ total_sign_up_google_count }}
                 </td>
+                <td>
+                  {{ total_sign_up_apple_count }}
+                </td>
+                <td>
+                  {{ total_sign_up_line_count }}
+                </td>
                 <td>
                   {{ total_auth_count }}
                 </td>
@@ -105,6 +111,14 @@
               {{ item.signUpGoogleCount.toLocaleString() }}
             </template>
 
+            <template v-slot:item.signUpAppleCount="{ item }">
+              {{ item.signUpAppleCount.toLocaleString() }}
+            </template>
+
+            <template v-slot:item.signUpLineCount="{ item }">
+              {{ item.signUpLineCount.toLocaleString() }}
+            </template>
+
             <template v-slot:item.authCount="{ item }">
               {{ item.authCount.toLocaleString() }}
             </template>
@@ -151,6 +165,8 @@ export default {
       total_sign_up_email_count: 0,
       total_sign_up_kakao_count: 0,
       total_sign_up_google_count: 0,
+      total_sign_up_apple_count: 0,
+      total_sign_up_line_count: 0,
       total_sign_out_count: 0,
       total_payment_member_count: 0,
       page: 1,
@@ -187,6 +203,18 @@ export default {
           sortable: false,
           value: 'signUpGoogleCount',
         },
+        {
+          text: '애플 가입 수',
+          align: 'center',
+          sortable: false,
+          value: 'signUpAppleCount',
+        },
+        {
+          text: '라인 가입 수',
+          align: 'center',
+          sortable: false,
+          value: 'signUpLineCount',
+        },
         {
           text: '본인인증 수',
           align: 'center',
@@ -253,6 +281,8 @@ export default {
           this.total_sign_up_email_count = data.totalSignUpEmailCount
           this.total_sign_up_kakao_count = data.totalSignUpKakaoCount
           this.total_sign_up_google_count = data.totalSignUpGoogleCount
+          this.total_sign_up_apple_count = data.totalSignUpAppleCount
+          this.total_sign_up_line_count = data.totalSignUpLineCount
           this.total_sign_out_count = data.totalSignOutCount
           this.total_payment_member_count = data.totalPaymentMemberCount
           this.items = data.items

src/views/Series/ContentSeriesList.vue

@@ -44,6 +44,9 @@
                   <th class="text-center">
                     연재여부
                   </th>
+                  <th class="text-center">
+                    연재요일
+                  </th>
                   <th class="text-center">
                     19금
                   </th>
@@ -89,6 +92,7 @@
                   <td>{{ item.genre }}</td>
                   <td>{{ item.numberOfWorks }}</td>
                   <td>{{ item.state }}</td>
+                  <td>{{ formatPublishedDays(item.publishedDaysOfWeek) }}</td>
                   <td>
                     <div v-if="item.isAdult">
                       O
@@ -365,6 +369,19 @@ export default {
       this.$dialog.notify.success(message)
     },
 
+    // 연재 요일 표시용 포맷터
+    formatPublishedDays(days) {
+      if (!Array.isArray(days) || days.length === 0) return '-'
+      // RANDOM 우선 처리
+      if (days.includes('RANDOM')) return '랜덤'
+      const map = this.daysOfWeekOptions.reduce((acc, cur) => {
+        acc[cur.value] = cur.text
+        return acc
+      }, {})
+      const labels = days.map(d => map[d] || d)
+      return labels.join(', ')
+    },
+
     async getAudioContentSeries() {
       this.is_loading = true