Merge pull request 'feat(admin-series): 시리즈 리스트에 연재요일 표시' (#85) from test into main

Reviewed-on: #85

src/api/audio_content_series.js

@@ -1,34 +1,89 @@
-import Vue from 'vue';
+import Vue from "vue";
 
 async function getAudioContentSeriesList(page) {
-    return Vue.axios.get("/admin/audio-content/series?page=" + (page - 1) + "&size=10");
+  return Vue.axios.get("/admin/audio-content/series?page=" + (page - 1) + "&size=10");
 }
 
 async function getAudioContentSeriesGenreList() {
-    return Vue.axios.get('/admin/audio-content/series/genre');
+  return Vue.axios.get("/admin/audio-content/series/genre");
 }
 
 async function createAudioContentSeriesGenre(genre, is_adult) {
-    return Vue.axios.post('/admin/audio-content/series/genre', {genre: genre, isAdult: is_adult})
+  return Vue.axios.post("/admin/audio-content/series/genre", { genre: genre, isAdult: is_adult });
 }
 
 async function updateAudioContentSeriesGenre(request) {
-    return Vue.axios.put('/admin/audio-content/series/genre', request)
+  return Vue.axios.put("/admin/audio-content/series/genre", request);
 }
 
 async function updateAudioContentSeriesGenreOrders(ids) {
-    return Vue.axios.put('/admin/audio-content/series/genre/orders', {ids: ids})
+  return Vue.axios.put("/admin/audio-content/series/genre/orders", { ids: ids });
 }
 
 async function searchSeriesList(searchWord) {
-    return Vue.axios.get("/admin/audio-content/series/search?search_word=" + searchWord)
+  return Vue.axios.get("/admin/audio-content/series/search?search_word=" + searchWord);
+}
+
+// 시리즈 수정
+async function updateAudioContentSeries(request) {
+  return Vue.axios.put("/admin/audio-content/series", request);
+}
+
+// ========================
+// 시리즈 배너 API
+// ========================
+// 배너 리스트 조회
+async function getSeriesBannerList(page = 1, size = 20) {
+  return Vue.axios.get("/admin/audio-content/series/banner/list", {
+    params: { page: page - 1, size }
+  });
+}
+
+// 배너 등록
+async function createSeriesBanner(bannerData) {
+  const formData = new FormData();
+  if (bannerData.image) formData.append("image", bannerData.image);
+  const requestData = { seriesId: bannerData.seriesId };
+  formData.append("request", JSON.stringify(requestData));
+  return Vue.axios.post("/admin/audio-content/series/banner/register", formData, {
+    headers: { "Content-Type": "multipart/form-data" }
+  });
+}
+
+// 배너 수정
+async function updateSeriesBanner(bannerData) {
+  const formData = new FormData();
+  if (bannerData.image) formData.append("image", bannerData.image);
+  const requestData = { seriesId: bannerData.seriesId, bannerId: bannerData.bannerId };
+  formData.append("request", JSON.stringify(requestData));
+  return Vue.axios.put("/admin/audio-content/series/banner/update", formData, {
+    headers: { "Content-Type": "multipart/form-data" }
+  });
+}
+
+// 배너 삭제
+async function deleteSeriesBanner(bannerId) {
+  // 백엔드 사양이 불명확하여 쿼리 파라미터로 전송
+  return Vue.axios.delete("/admin/audio-content/series/banner/" + bannerId);
+}
+
+// 배너 순서 변경
+async function updateSeriesBannerOrder(ids) {
+  return Vue.axios.put("/admin/audio-content/series/banner/orders", { ids });
 }
 
 export {
-    getAudioContentSeriesList,
-    getAudioContentSeriesGenreList,
-    createAudioContentSeriesGenre,
-    updateAudioContentSeriesGenre,
-    updateAudioContentSeriesGenreOrders,
-    searchSeriesList
-}
+  getAudioContentSeriesList,
+  getAudioContentSeriesGenreList,
+  createAudioContentSeriesGenre,
+  updateAudioContentSeriesGenre,
+  updateAudioContentSeriesGenreOrders,
+  searchSeriesList,
+  updateAudioContentSeries,
+  // series banner
+  getSeriesBannerList,
+  createSeriesBanner,
+  updateSeriesBanner,
+  deleteSeriesBanner,
+  updateSeriesBannerOrder
+};

src/api/can.js

@@ -13,8 +13,8 @@ async function insertCan(can, rewardCan, price, currency) {
     return Vue.axios.post('/admin/can', request);
 }
 
-async function paymentCan(can, method, member_id) {
-    const request = {memberId: member_id, method: method, can: can}
+async function paymentCan(can, method, memberIds) {
+    const request = {memberIds: memberIds, method: method, can: can}
     return Vue.axios.post('/admin/can/charge', request)
 }
 

src/api/charge_status.js

@@ -4,8 +4,11 @@ async function getChargeStatus(startDate, endDate) {
     return Vue.axios.get('/admin/charge/status?startDateStr=' + startDate + '&endDateStr=' + endDate);
 }
 
-async function getChargeStatusDetail(startDate, paymentGateway) {
-    return Vue.axios.get('/admin/charge/status/detail?startDateStr=' + startDate + '&paymentGateway=' + paymentGateway);
+async function getChargeStatusDetail(startDate, paymentGateway, currency) {
+    return Vue.axios.get('/admin/charge/status/detail?startDateStr=' + startDate
+      + '&paymentGateway=' + paymentGateway
+      + '&currency=' + currency
+    );
 }
 
 export { getChargeStatus, getChargeStatusDetail }

src/api/member.js

@@ -52,13 +52,40 @@ async function resetPassword(id) {
     return Vue.axios.post("/admin/member/password/reset", request)
 }
 
-export {
-    login,
-    getMemberList,
-    searchMember,
-    getCreatorList,
-    searchCreator,
-    updateMember,
-    getCreatorAllList,
-    resetPassword
+/**
+ * 닉네임으로 회원 검색 API
+ * - 서버 구현 차이를 흡수하기 위해 nickname, search_word 두 파라미터 모두 전송
+ * - 응답은 다음 두 형태를 모두 허용하고 배열로 정규화하여 반환
+ *   1) [{ id, nickname }, ...]
+ *   2) { data: [{ id, nickname }, ...] }
+ * @param {string} query
+ * @returns {Promise<Array<{id:number,nickname:string}>>}
+ */
+async function searchMembersByNickname(query) {
+  try {
+    const res = await Vue.axios.get('/admin/member/search-by-nickname', {
+      params: { search_word: query }
+    })
+    if (res && Array.isArray(res.data)) {
+      return res.data
+    }
+    if (res && res.data && Array.isArray(res.data.data)) {
+      return res.data.data
+    }
+    return []
+  } catch (e) {
+    return []
+  }
+}
+
+export {
+  login,
+  getMemberList,
+  searchMember,
+  getCreatorList,
+  searchCreator,
+  updateMember,
+  getCreatorAllList,
+  resetPassword,
+  searchMembersByNickname
 }

src/components/SideMenu.vue

@@ -97,6 +97,26 @@ export default {
         if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
           this.items = res.data.data
 
+          // '시리즈 관리' 메뉴에 '배너 등록' 하위 메뉴 추가
+          try {
+            const seriesMenu = this.items.find(m => m && m.title === '시리즈 관리')
+            if (seriesMenu) {
+              if (!Array.isArray(seriesMenu.items)) {
+                seriesMenu.items = seriesMenu.items ? [].concat(seriesMenu.items) : []
+              }
+              const exists = seriesMenu.items.some(ci => ci && ci.route === '/content/series/banner')
+              if (!exists) {
+                seriesMenu.items.push({
+                  title: '배너 등록',
+                  route: '/content/series/banner',
+                  items: null
+                })
+              }
+            }
+          } catch (e) {
+            // ignore
+          }
+
           // 캐릭터 챗봇 메뉴 추가
           this.items.push({
             title: '캐릭터 챗봇',

src/router/index.js

@@ -120,6 +120,11 @@ const routes = [
                 name: 'ContentSeriesRecommendFree',
                 component: () => import(/* webpackChunkName: "series" */ '../views/Series/ContentSeriesRecommendFree.vue')
             },
+            {
+                path: '/content/series/banner',
+                name: 'ContentSeriesBanner',
+                component: () => import(/* webpackChunkName: "series" */ '../views/Series/ContentSeriesBanner.vue')
+            },
             {
                 path: '/promotion/event',
                 name: 'EventView',

src/views/Can/CanCharge.vue

@@ -8,11 +8,29 @@
 
     <br>
     <v-container>
-      <v-text-field
-        v-model="account_id"
-        label="회원번호"
+      <v-autocomplete
+        v-model="selectedMembers"
+        :items="displaySearchItems"
+        :loading="searchLoading"
+        :search-input.sync="searchQuery"
+        label="닉네임으로 사용자 검색 (여러 명 선택 가능)"
+        item-text="nickname"
+        item-value="id"
+        return-object
+        multiple
+        small-chips
+        clearable
         outlined
-        required
+        cache-items
+        :value-comparator="compareMember"
+        @update:search-input="onSearch"
+      />
+
+      <v-text-field
+        v-model="manualInput"
+        label="회원번호 직접 입력 (여러 개 입력 가능, 콤마/공백 구분)"
+        outlined
+        clearable
       />
 
       <v-text-field
@@ -34,7 +52,7 @@
         <v-col>
           <v-btn
             block
-            color="#9970ff"
+            color="#3bb9f1"
             dark
             depressed
             @click="confirm"
@@ -52,7 +70,7 @@
           <v-card>
             <v-card-title>캔 지급 확인</v-card-title>
             <v-card-text>
-              회원번호: {{ account_id }}
+              지급 대상: {{ confirmTargets.join(', ') }}
             </v-card-text>
             <v-card-text>
               기록내용: {{ method }}
@@ -88,6 +106,7 @@
 
 <script>
 import * as api from '@/api/can'
+import { searchMembersByNickname } from '@/api/member'
 
 export default {
   name: "CanCharge",
@@ -96,12 +115,60 @@ export default {
     return {
       show_confirm: false,
       is_loading: false,
-      account_id: '',
+      // 기존 account_id -> member_id로 명칭 변경 및 다중 입력 구조로 변경
+      selectedMembers: [], // 검색으로 선택된 사용자 {id, nickname} 객체 배열
+      searchItems: [],
+      searchLoading: false,
+      searchQuery: '',
+      searchDebounceTimer: null,
+      lastSearchToken: 0,
+      manualInput: '', // 수동 입력: 회원번호 여러 개 (콤마/공백 구분)
       method: '',
       can: ''
     }
   },
 
+  computed: {
+    // 확인 다이얼로그에 표시할 대상 이름들
+    confirmTargets() {
+      const names = []
+      // 검색으로 선택된 사용자 닉네임
+      if (this.selectedMembers && this.selectedMembers.length > 0) {
+        names.push(...this.selectedMembers.map(m => m.nickname))
+      }
+      // 수동 입력 회원번호는 번호 그대로 표기
+      const manualIds = this.parseManualIds()
+      if (manualIds.length > 0) {
+        names.push(...manualIds.map(String))
+      }
+      return names
+    },
+    // 검색 결과 목록에 현재 선택된 사용자들을 항상 포함시켜
+    // 선택 chip이 사라지지 않도록 보장
+    displaySearchItems() {
+      const map = new Map()
+      ;(this.selectedMembers || []).forEach(m => {
+        if (m && (m.id !== undefined && m.id !== null)) {
+          map.set(String(m.id), m)
+        }
+      })
+      ;(this.searchItems || []).forEach(m => {
+        if (m && (m.id !== undefined && m.id !== null)) {
+          const key = String(m.id)
+          if (!map.has(key)) map.set(key, m)
+        }
+      })
+      return Array.from(map.values())
+    }
+  },
+
+  beforeDestroy() {
+    if (this.searchDebounceTimer) {
+      clearTimeout(this.searchDebounceTimer)
+      this.searchDebounceTimer = null
+    }
+  },
+
   methods: {
     notifyError(message) {
       this.$dialog.notify.error(message)
@@ -111,19 +178,91 @@ export default {
       this.$dialog.notify.success(message)
     },
 
-    confirm() {
-      if (this.account_id.trim() === '' || isNaN(this.account_id)) {
-        return this.notifyError('캔을 지급할 회원의 회원번호를 입력하세요.')
+    // v-autocomplete의 선택 비교를 id 기준으로 수행
+    compareMember(a, b) {
+      if (a === b) return true
+      if (!a || !b) return false
+      const aid = typeof a === 'object' ? a.id : a
+      const bid = typeof b === 'object' ? b.id : b
+      if (aid === undefined || bid === undefined || aid === null || bid === null) return false
+      return String(aid) === String(bid)
+    },
+
+    onSearch(val) {
+      this.searchQuery = val
+
+      // 입력이 없으면 즉시 초기화하고 이전 타이머/로딩을 정리
+      if (!val || val.trim().length === 0) {
+        if (this.searchDebounceTimer) {
+          clearTimeout(this.searchDebounceTimer)
+          this.searchDebounceTimer = null
+        }
+        this.searchLoading = false
+        this.searchItems = []
+        return
       }
 
+      // 디바운스: 입력 멈춘 뒤에만 호출
+      if (this.searchDebounceTimer) {
+        clearTimeout(this.searchDebounceTimer)
+        this.searchDebounceTimer = null
+      }
+
+      this.searchDebounceTimer = setTimeout(async () => {
+        if (val.trim().length >= 2) {
+          const token = ++this.lastSearchToken
+          this.searchLoading = true
+          try {
+            const items = await searchMembersByNickname(val)
+            // 가장 최근 쿼리에 대한 응답만 반영
+            if (token === this.lastSearchToken) {
+              this.searchItems = items
+            }
+          } catch (e) {
+            if (token === this.lastSearchToken) {
+              this.searchItems = []
+            }
+          } finally {
+            if (token === this.lastSearchToken) {
+              this.searchLoading = false
+            }
+          }
+        }
+      }, 300)
+    },
+
+    parseManualIds() {
+      if (!this.manualInput) return []
+      return this.manualInput
+        .split(/[\s,]+/)
+        .map(s => s.trim())
+        .filter(s => s.length > 0 && /^\d+$/.test(s))
+        .map(s => Number(s))
+    },
+
+    buildMemberIds() {
+      const idsFromSearch = (this.selectedMembers || []).map(m => Number(m.id)).filter(id => !isNaN(id))
+      const idsFromManual = this.parseManualIds()
+      // 중복 제거
+      const set = new Set([...idsFromSearch, ...idsFromManual])
+      return Array.from(set)
+    },
+
+    confirm() {
+      // 유효성 검증
       if (this.method.trim() === '') {
         return this.notifyError('기록할 내용을 입력하세요')
       }
 
-      if (isNaN(this.can)) {
+      if (this.can === '' || isNaN(this.can)) {
         return this.notifyError('캔은 숫자만 넣을 수 있습니다.')
       }
 
+      const memberIds = this.buildMemberIds()
+      if (memberIds.length === 0) {
+        return this.notifyError('캔을 지급할 대상을 추가하세요. (닉네임 검색 선택 또는 회원번호 입력)')
+      }
+
       if (!this.is_loading) {
         this.show_confirm = true
       }
@@ -140,10 +279,15 @@ export default {
         try {
           this.show_confirm = false
 
-          const res = await api.paymentCan(Number(this.can), this.method, this.account_id)
+          const memberIds = this.buildMemberIds()
+          const res = await api.paymentCan(Number(this.can), this.method, memberIds)
           if (res.status === 200 && res.data.success === true) {
             this.notifySuccess('캔이 지급되었습니다.')
-            this.account_id = ''
+            // 상태 초기화
+            this.selectedMembers = []
+            this.searchItems = []
+            this.searchQuery = ''
+            this.manualInput = ''
             this.method = ''
             this.can = ''
             this.is_loading = false

src/views/Can/CanManagement.vue

@@ -40,7 +40,7 @@
                   hide-default-footer
                 >
                   <template v-slot:item.priceStr="{ item }">
-                    {{ formatMoney(item.price, item.currency) }}
+                    {{ formatMoney(item.priceStr, item.currency) }}
                   </template>
 
                   <template v-slot:item.can="{ item }">

src/views/Can/CanStatus.vue

@@ -62,7 +62,7 @@
             </template>
 
             <template v-slot:item.chargeAmount="{ item }">
-              {{ item.chargeAmount.toLocaleString() }} 원
+              {{ formatMoney(item.chargeAmount, item.currency) }}
             </template>
 
             <template v-slot:item.locale="{ item }">
@@ -107,7 +107,7 @@
               </template>
 
               <template v-slot:item.amount="{ item }">
-                {{ item.amount.toLocaleString() }} 원
+                {{ formatMoney(item.amount, item.locale) }}
               </template>
 
               <template v-slot:item.datetime="{ item }">
@@ -204,6 +204,12 @@ export default {
           sortable: false,
           value: 'chargeCount',
         },
+        {
+          text: '화폐단위',
+          align: 'center',
+          sortable: false,
+          value: 'currency',
+        },
         {
           text: 'PG',
           sortable: false,
@@ -248,6 +254,15 @@ export default {
       this.show_popup_dialog = false
     },
 
+    formatMoney(price, currencyCode, locale = navigator.language) {
+      const formatted = new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currencyCode
+      }).format(price);
+
+      return formatted.replace(/([^\d\s])(\d)/, '$1 $2');
+    },
+
     async getChargeStatus() {
       this.is_loading = true
 
@@ -271,7 +286,7 @@ export default {
         this.is_loading = true
 
         try {
-          const res = await api.getChargeStatusDetail(value.date, value.pg)
+          const res = await api.getChargeStatusDetail(value.date, value.pg, value.currency)
           if (res.status === 200 && res.data.success === true) {
             this.detail_items = res.data.data
             this.show_popup_dialog = true

src/views/Series/ContentSeriesBanner.vue

@@ -0,0 +1,529 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="goBack"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-spacer />
+      <v-toolbar-title>시리즈 배너 관리</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <v-container>
+      <v-row>
+        <v-col cols="4">
+          <v-btn
+            color="primary"
+            dark
+            @click="showAddDialog"
+          >
+            배너 추가
+          </v-btn>
+        </v-col>
+        <v-spacer />
+      </v-row>
+
+      <!-- 로딩 표시 -->
+      <v-row v-if="isLoading && banners.length === 0">
+        <v-col class="text-center">
+          <v-progress-circular
+            indeterminate
+            color="primary"
+            size="64"
+          />
+        </v-col>
+      </v-row>
+
+      <!-- 배너 그리드 -->
+      <v-row>
+        <draggable
+          v-model="banners"
+          class="row"
+          style="width: 100%"
+          :options="{ animation: 150 }"
+          @end="onDragEnd"
+        >
+          <v-col
+            v-for="banner in banners"
+            :key="banner.id"
+            cols="12"
+            sm="6"
+            md="4"
+            lg="3"
+            class="banner-item"
+          >
+            <v-card
+              class="mx-auto"
+              max-width="300"
+            >
+              <v-img
+                :src="banner.imagePath || banner.imageUrl"
+                height="200"
+                contain
+              />
+              <v-card-text class="text-center">
+                <div>{{ resolveSeriesTitle(banner) }}</div>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn
+                  small
+                  color="primary"
+                  @click="showEditDialog(banner)"
+                >
+                  수정
+                </v-btn>
+                <v-btn
+                  small
+                  color="error"
+                  @click="confirmDelete(banner)"
+                >
+                  삭제
+                </v-btn>
+                <v-spacer />
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </draggable>
+      </v-row>
+
+      <!-- 데이터가 없을 때 표시 -->
+      <v-row v-if="!isLoading && banners.length === 0">
+        <v-col class="text-center">
+          <p>등록된 배너가 없습니다.</p>
+        </v-col>
+      </v-row>
+
+      <!-- 무한 스크롤 로딩 -->
+      <v-row v-if="isLoading && banners.length > 0">
+        <v-col class="text-center">
+          <v-progress-circular
+            indeterminate
+            color="primary"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <!-- 배너 추가/수정 다이얼로그 -->
+    <v-dialog
+      v-model="showDialog"
+      max-width="600px"
+      persistent
+    >
+      <v-card>
+        <v-card-title>
+          <span class="headline">{{ isEdit ? '배너 수정' : '배너 추가' }}</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <v-col cols="12">
+                <v-file-input
+                  v-model="bannerForm.image"
+                  label="배너 이미지"
+                  accept="image/*"
+                  prepend-icon="mdi-camera"
+                  show-size
+                  truncate-length="15"
+                  :rules="imageRules"
+                  outlined
+                />
+              </v-col>
+            </v-row>
+            <v-row v-if="previewImage || (isEdit && bannerForm.imageUrl)">
+              <v-col
+                cols="12"
+                class="text-center"
+              >
+                <v-img
+                  :src="previewImage || bannerForm.imageUrl"
+                  max-height="200"
+                  contain
+                />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="searchKeyword"
+                  label="시리즈 검색"
+                  outlined
+                  @keyup.enter="searchSeries"
+                />
+              </v-col>
+            </v-row>
+            <v-row v-if="searchResults.length > 0">
+              <v-col cols="12">
+                <v-list>
+                  <v-list-item
+                    v-for="series in searchResults"
+                    :key="series.id"
+                    @click="selectSeries(series)"
+                  >
+                    <v-list-item-avatar>
+                      <v-img :src="series.imageUrl" />
+                    </v-list-item-avatar>
+                    <v-list-item-content>
+                      <v-list-item-title>{{ series.title || series.name }}</v-list-item-title>
+                    </v-list-item-content>
+                  </v-list-item>
+                </v-list>
+              </v-col>
+            </v-row>
+            <v-row v-if="searchPerformed && searchResults.length === 0">
+              <v-col cols="12">
+                <v-alert
+                  type="info"
+                  outlined
+                >
+                  검색결과가 없습니다.
+                </v-alert>
+              </v-col>
+            </v-row>
+            <v-row v-if="selectedSeries">
+              <v-col cols="12">
+                <v-alert
+                  type="info"
+                  outlined
+                >
+                  <v-row align="center">
+                    <v-col cols="auto">
+                      <v-avatar size="50">
+                        <v-img :src="selectedSeries.imageUrl" />
+                      </v-avatar>
+                    </v-col>
+                    <v-col>
+                      <div class="font-weight-medium">
+                        선택된 시리즈: {{ selectedSeries.title || selectedSeries.name }}
+                      </div>
+                    </v-col>
+                  </v-row>
+                </v-alert>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="closeDialog"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="blue darken-1"
+            text
+            :disabled="!isFormValid || isSubmitting"
+            @click="saveBanner"
+          >
+            {{ isSubmitting ? '저장중...' : (isEdit ? '수정' : '추가') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 삭제 확인 다이얼로그 -->
+    <v-dialog
+      v-model="showDeleteDialog"
+      max-width="400px"
+    >
+      <v-card>
+        <v-card-title class="headline">
+          삭제 확인
+        </v-card-title>
+        <v-card-text>
+          이 배너를 삭제하시겠습니까?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="showDeleteDialog = false"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="red darken-1"
+            text
+            :disabled="isSubmitting"
+            @click="deleteBanner"
+          >
+            삭제
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import {
+  getSeriesBannerList,
+  createSeriesBanner,
+  updateSeriesBanner,
+  deleteSeriesBanner,
+  updateSeriesBannerOrder,
+  searchSeriesList
+} from '@/api/audio_content_series'
+
+export default {
+  name: 'ContentSeriesBanner',
+  components: { draggable },
+  data() {
+    return {
+      isLoading: false,
+      isSubmitting: false,
+      banners: [],
+      page: 1,
+      hasMoreItems: true,
+      showDialog: false,
+      showDeleteDialog: false,
+      isEdit: false,
+      selectedBanner: null,
+      selectedSeries: null,
+      searchKeyword: '',
+      searchResults: [],
+      searchPerformed: false,
+      previewImage: null,
+      bannerForm: {
+        image: null,
+        imageUrl: '',
+        seriesId: null,
+        bannerId: null
+      },
+      imageRules: [
+        v => !!v || this.isEdit || '이미지를 선택하세요'
+      ]
+    }
+  },
+  computed: {
+    isFormValid() {
+      return (this.bannerForm.image || (this.isEdit && this.bannerForm.imageUrl)) && this.selectedSeries
+    }
+  },
+  watch: {
+    'bannerForm.image'(newImage) {
+      if (newImage) {
+        this.createImagePreview(newImage)
+      } else {
+        this.previewImage = null
+      }
+    }
+  },
+  mounted() {
+    this.loadBanners()
+    window.addEventListener('scroll', this.handleScroll)
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
+  methods: {
+    notifyError(message) {
+      this.$dialog && this.$dialog.notify && this.$dialog.notify.error ? this.$dialog.notify.error(message) : console.error(message)
+    },
+    notifySuccess(message) {
+      this.$dialog && this.$dialog.notify && this.$dialog.notify.success ? this.$dialog.notify.success(message) : console.log(message)
+    },
+    goBack() {
+      this.$router.push('/content/series/list')
+    },
+    resolveSeriesTitle(banner) {
+      return banner.seriesTitle || banner.seriesName || banner.title || banner.name || '시리즈'
+    },
+    async loadBanners() {
+      if (this.isLoading || !this.hasMoreItems) return
+      this.isLoading = true
+      try {
+        const response = await getSeriesBannerList(this.page)
+        if (response && response.status === 200 && response.data && response.data.success === true) {
+          const data = response.data.data
+          const newBanners = (data && (data.content || data.items || data)) || []
+          this.banners = [...this.banners, ...newBanners]
+          this.hasMoreItems = newBanners.length > 0
+          this.page++
+        } else {
+          this.notifyError('배너 목록을 불러오는데 실패했습니다.')
+        }
+      } catch (e) {
+        this.notifyError('배너 목록을 불러오는데 실패했습니다.')
+      } finally {
+        this.isLoading = false
+      }
+    },
+    handleScroll() {
+      const scrollPosition = window.innerHeight + window.scrollY
+      const documentHeight = document.documentElement.offsetHeight
+      if (scrollPosition >= documentHeight - 200 && !this.isLoading && this.hasMoreItems) {
+        this.loadBanners()
+      }
+    },
+    showAddDialog() {
+      this.isEdit = false
+      this.selectedSeries = null
+      this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null }
+      this.previewImage = null
+      this.searchKeyword = ''
+      this.searchResults = []
+      this.searchPerformed = false
+      this.showDialog = true
+    },
+    showEditDialog(banner) {
+      this.isEdit = true
+      this.selectedBanner = banner
+      this.selectedSeries = {
+        id: banner.seriesId,
+        title: banner.seriesTitle || banner.seriesName || banner.title || banner.name,
+        imageUrl: banner.seriesImageUrl
+      }
+      this.bannerForm = {
+        image: null,
+        imageUrl: banner.imageUrl || banner.imagePath,
+        seriesId: banner.seriesId,
+        bannerId: banner.id
+      }
+      this.previewImage = null
+      this.searchKeyword = ''
+      this.searchResults = []
+      this.searchPerformed = false
+      this.showDialog = true
+    },
+    closeDialog() {
+      this.showDialog = false
+      this.selectedSeries = null
+      this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null }
+      this.previewImage = null
+      this.searchKeyword = ''
+      this.searchResults = []
+      this.searchPerformed = false
+    },
+    confirmDelete(banner) {
+      this.selectedBanner = banner
+      this.showDeleteDialog = true
+    },
+    createImagePreview(file) {
+      if (!file) return
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        this.previewImage = e.target.result
+      }
+      reader.readAsDataURL(file)
+    },
+    async searchSeries() {
+      if (!this.searchKeyword || this.searchKeyword.length < 2) {
+        this.notifyError('검색어를 2글자 이상 입력하세요.')
+        return
+      }
+      try {
+        const response = await searchSeriesList(this.searchKeyword)
+        if (response && response.status === 200 && response.data && response.data.success === true) {
+          const data = response.data.data
+          this.searchResults = Array.isArray(data) ? data : (data && (data.content || data.items)) || []
+          this.searchPerformed = true
+        }
+      } catch (error) {
+        console.error('시리즈 검색 오류:', error)
+        this.notifyError('시리즈 검색에 실패했습니다.')
+      }
+    },
+    selectSeries(series) {
+      this.selectedSeries = series
+      this.bannerForm.seriesId = series.id
+      this.searchResults = []
+    },
+    async saveBanner() {
+      if (!this.isFormValid || this.isSubmitting) return
+      this.isSubmitting = true
+      try {
+        if (this.isEdit) {
+          const response = await updateSeriesBanner({
+            image: this.bannerForm.image,
+            seriesId: this.selectedSeries.id,
+            bannerId: this.bannerForm.bannerId
+          })
+          if (response && response.status === 200 && response.data && response.data.success === true) {
+            this.notifySuccess('배너가 수정되었습니다.')
+          } else {
+            this.notifyError('배너 수정을 실패했습니다.')
+          }
+        } else {
+          const response = await createSeriesBanner({
+            image: this.bannerForm.image,
+            seriesId: this.selectedSeries.id
+          })
+          if (response && response.status === 200 && response.data && response.data.success === true) {
+            this.notifySuccess('배너가 추가되었습니다.')
+            this.closeDialog()
+            this.refreshBanners()
+          } else {
+            this.notifyError('배너 추가를 실패했습니다.')
+          }
+        }
+      } catch (error) {
+        console.error('배너 저장 오류:', error)
+        this.notifyError('배너 저장에 실패했습니다.')
+      } finally {
+        this.isSubmitting = false
+      }
+    },
+    async deleteBanner() {
+      if (!this.selectedBanner || this.isSubmitting) return
+      this.isSubmitting = true
+      try {
+        const response = await deleteSeriesBanner(this.selectedBanner.id)
+        if (response && response.status === 200 && response.data && response.data.success === true) {
+          this.notifySuccess('배너가 삭제되었습니다.')
+          this.showDeleteDialog = false
+          this.refreshBanners()
+        } else {
+          this.notifyError('배너 삭제에 실패했습니다.')
+        }
+      } catch (error) {
+        console.error('배너 삭제 오류:', error)
+        this.notifyError('배너 삭제에 실패했습니다.')
+      } finally {
+        this.isSubmitting = false
+      }
+    },
+    refreshBanners() {
+      this.banners = []
+      this.page = 1
+      this.hasMoreItems = true
+      this.loadBanners()
+    },
+    async onDragEnd() {
+      try {
+        const bannerIds = this.banners.map(banner => banner.id)
+        const response = await updateSeriesBannerOrder(bannerIds)
+        if (response && response.status === 200 && response.data && response.data.success === true) {
+          this.notifySuccess('배너 순서가 변경되었습니다.')
+        } else {
+          this.notifyError('배너 순서 변경에 실패했습니다.')
+        }
+      } catch (error) {
+        console.error('배너 순서 변경 오류:', error)
+        this.notifyError('배너 순서 변경에 실패했습니다.')
+        this.refreshBanners()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.banner-item {
+  transition: all 0.3s;
+}
+
+.banner-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+</style>

src/views/Series/ContentSeriesList.vue

@@ -44,9 +44,15 @@
                   <th class="text-center">
                     연재여부
                   </th>
+                  <th class="text-center">
+                    연재요일
+                  </th>
                   <th class="text-center">
                     19금
                   </th>
+                  <th class="text-center">
+                    수정
+                  </th>
                 </tr>
               </thead>
               <tbody>
@@ -73,19 +79,20 @@
                   <td>
                     <vue-show-more-text
                       :text="item.title"
-                      :lines="3"
+                      :lines="2"
                     />
                   </td>
                   <td style="max-width: 200px !important; word-break:break-all; height: auto;">
                     <vue-show-more-text
                       :text="item.introduction"
-                      :lines="3"
+                      :lines="2"
                     />
                   </td>
                   <td>{{ item.creatorNickname }}</td>
                   <td>{{ item.genre }}</td>
                   <td>{{ item.numberOfWorks }}</td>
                   <td>{{ item.state }}</td>
+                  <td>{{ formatPublishedDays(item.publishedDaysOfWeek) }}</td>
                   <td>
                     <div v-if="item.isAdult">
                       O
@@ -94,6 +101,17 @@
                       X
                     </div>
                   </td>
+                  <td class="text-center">
+                    <v-btn
+                      small
+                      color="#3bb9f1"
+                      dark
+                      depressed
+                      @click="openEditDialog(item)"
+                    >
+                      수정
+                    </v-btn>
+                  </td>
                 </tr>
               </tbody>
             </template>
@@ -111,6 +129,165 @@
         </v-col>
       </v-row>
     </v-container>
+
+    <v-dialog
+      v-model="show_edit_dialog"
+      max-width="700px"
+      persistent
+    >
+      <v-card>
+        <v-card-title>
+          시리즈 수정
+        </v-card-title>
+        <v-card-text>
+          <v-row>
+            <v-col
+              cols="3"
+              class="text-center"
+            >
+              <v-img
+                :src="edit_target.coverImageUrl"
+                max-width="120"
+                max-height="120"
+                class="rounded-circle"
+              />
+            </v-col>
+            <v-col cols="9">
+              <div style="font-weight:600;">
+                {{ edit_target.title }}
+              </div>
+              <div
+                v-if="edit_target.introduction"
+                style="max-height:80px; overflow:auto; word-break:break-all;"
+              >
+                {{ edit_target.introduction }}
+              </div>
+            </v-col>
+          </v-row>
+          <v-divider class="my-4" />
+          <v-row align="center">
+            <v-col
+              cols="4"
+              class="d-flex align-center"
+            >
+              장르
+            </v-col>
+            <v-col
+              cols="8"
+              class="d-flex align-center"
+            >
+              <v-select
+                v-model="edit_form.genreId"
+                :items="genre_list"
+                item-text="genre"
+                item-value="id"
+                :loading="is_loading_genres"
+                :disabled="is_saving || is_loading_genres"
+                label="장르를 선택하세요"
+                dense
+                hide-details
+              />
+            </v-col>
+          </v-row>
+          <v-row align="center">
+            <v-col
+              cols="4"
+              class="d-flex align-center"
+            >
+              연재 요일
+            </v-col>
+            <v-col
+              cols="8"
+              class="d-flex align-center"
+            >
+              <v-row
+                dense
+                class="flex-grow-1"
+              >
+                <v-col
+                  v-for="opt in daysOfWeekOptions"
+                  :key="opt.value"
+                  cols="6"
+                  sm="4"
+                  md="3"
+                  class="py-0 my-0"
+                >
+                  <v-checkbox
+                    v-model="edit_form.publishedDaysOfWeek"
+                    :label="opt.text"
+                    :value="opt.value"
+                    :disabled="is_saving"
+                    dense
+                    hide-details
+                    class="ma-0 pa-0"
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+          <v-row align="center">
+            <v-col
+              cols="4"
+              class="d-flex align-center"
+            >
+              오리지널
+            </v-col>
+            <v-col
+              cols="8"
+              class="d-flex align-center"
+            >
+              <v-checkbox
+                v-model="edit_form.isOriginal"
+                :disabled="is_saving"
+                dense
+                hide-details
+                class="ma-0 pa-0"
+              />
+            </v-col>
+          </v-row>
+          <v-row align="center">
+            <v-col
+              cols="4"
+              class="d-flex align-center"
+            >
+              19금
+            </v-col>
+            <v-col
+              cols="8"
+              class="d-flex align-center"
+            >
+              <v-checkbox
+                v-model="edit_form.isAdult"
+                :disabled="is_saving"
+                dense
+                hide-details
+                class="ma-0 pa-0"
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            :disabled="is_saving"
+            @click="cancelEdit"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="#3bb9f1"
+            dark
+            depressed
+            :loading="is_saving"
+            :disabled="is_saving"
+            @click="saveEdit"
+          >
+            저장
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -130,7 +307,52 @@ export default {
       page: 1,
       total_page: 0,
       total_count: 0,
-      series_list: []
+      series_list: [],
+      // 수정 다이얼로그 상태/데이터
+      show_edit_dialog: false,
+      is_saving: false,
+      is_loading_genres: false,
+      genre_list: [],
+      edit_target: {},
+      edit_form: {
+        genreId: null,
+        isOriginal: false,
+        isAdult: false,
+        publishedDaysOfWeek: []
+      },
+      daysOfWeekOptions: [
+        { value: 'RANDOM', text: '랜덤' },
+        { value: 'SUN', text: '일' },
+        { value: 'MON', text: '월' },
+        { value: 'TUE', text: '화' },
+        { value: 'WED', text: '수' },
+        { value: 'THU', text: '목' },
+        { value: 'FRI', text: '금' },
+        { value: 'SAT', text: '토' }
+      ]
+    }
+  },
+
+  watch: {
+    'edit_form.publishedDaysOfWeek': {
+      handler(newVal, oldVal) {
+        if (!Array.isArray(newVal)) return;
+        const hasRandom = newVal.includes('RANDOM');
+        const hadRandom = Array.isArray(oldVal) && oldVal.includes('RANDOM');
+        const others = newVal.filter(v => v !== 'RANDOM');
+
+        // RANDOM과 특정 요일은 함께 설정될 수 없음
+        if (hasRandom && others.length > 0) {
+          if (hadRandom) {
+            // RANDOM 상태에서 다른 요일을 선택한 경우 → RANDOM 제거, 나머지만 유지
+            this.edit_form.publishedDaysOfWeek = others;
+          } else {
+            // 다른 요일이 선택된 상태에서 RANDOM을 선택한 경우 → RANDOM만 유지
+            this.edit_form.publishedDaysOfWeek = ['RANDOM'];
+          }
+        }
+      },
+      deep: true
     }
   },
 
@@ -147,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
 
@@ -176,6 +411,96 @@ export default {
     async next() {
       await this.getAudioContentSeries()
     },
+
+    openEditDialog(item) {
+      this.edit_target = item
+      this.show_edit_dialog = true
+      this.is_saving = false
+      this.loadGenresThenInit()
+    },
+
+    async loadGenresThenInit() {
+      try {
+        this.is_loading_genres = true
+        if (!this.genre_list || this.genre_list.length === 0) {
+          const res = await api.getAudioContentSeriesGenreList()
+          if (res.status === 200 && res.data.success === true) {
+            this.genre_list = res.data.data || []
+          } else {
+            this.notifyError(res.data.message || '장르 목록을 불러오지 못했습니다.')
+          }
+        }
+      } catch (e) {
+        this.notifyError('장르 목록을 불러오지 못했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading_genres = false
+        this.initEditForm()
+      }
+    },
+
+    initEditForm() {
+      const item = this.edit_target || {}
+      let genreId = item.genreId || null
+      if (!genreId && item.genre && this.genre_list && this.genre_list.length > 0) {
+        const found = this.genre_list.find(g => g.genre === item.genre)
+        if (found) genreId = found.id
+      }
+      // 초기 publishedDaysOfWeek 정규화 (RANDOM과 특정 요일 혼재 금지)
+      let published = Array.isArray(item.publishedDaysOfWeek) ? [...item.publishedDaysOfWeek] : []
+      if (published.includes('RANDOM')) {
+        const others = published.filter(v => v !== 'RANDOM')
+        published = others.length > 0 ? ['RANDOM'] : ['RANDOM']
+      }
+      this.edit_form = {
+        genreId: genreId,
+        isOriginal: typeof item.isOriginal === 'boolean' ? item.isOriginal : false,
+        isAdult: typeof item.isAdult === 'boolean' ? item.isAdult : false,
+        publishedDaysOfWeek: published
+      }
+    },
+
+    cancelEdit() {
+      this.show_edit_dialog = false
+      this.edit_target = {}
+      this.edit_form = {
+        genreId: null,
+        isOriginal: false,
+        isAdult: false,
+        publishedDaysOfWeek: []
+      }
+    },
+
+    async saveEdit() {
+      if (this.is_saving) return
+      if (!this.edit_form.genreId) {
+        this.notifyError('장르를 선택해 주세요.')
+        return
+      }
+      this.is_saving = true
+      try {
+        const days = Array.isArray(this.edit_form.publishedDaysOfWeek) ? this.edit_form.publishedDaysOfWeek : []
+        const payloadDays = days.includes('RANDOM') ? ['RANDOM'] : days
+        const request = {
+          seriesId: this.edit_target.id,
+          genreId: this.edit_form.genreId,
+          isOriginal: this.edit_form.isOriginal,
+          isAdult: this.edit_form.isAdult,
+          publishedDaysOfWeek: payloadDays
+        }
+        const res = await api.updateAudioContentSeries(request)
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess('수정되었습니다.')
+          this.show_edit_dialog = false
+          await this.getAudioContentSeries()
+        } else {
+          this.notifyError(res.data.message || '수정에 실패했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('수정에 실패했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_saving = false
+      }
+    },
   }
 }
 </script>