feat(admin-series): 시리즈 리스트에 연재요일 표시

- 변경 가능한 내용: 연재 요일, 오리지널, 19금, 장르

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,
+  getAudioContentSeriesList,
-    getAudioContentSeriesGenreList,
+  getAudioContentSeriesGenreList,
-    createAudioContentSeriesGenre,
+  createAudioContentSeriesGenre,
-    updateAudioContentSeriesGenre,
+  updateAudioContentSeriesGenre,
-    updateAudioContentSeriesGenreOrders,
+  updateAudioContentSeriesGenreOrders,
-    searchSeriesList
+  searchSeriesList,
-}
+  updateAudioContentSeries,
+  // series banner
+  getSeriesBannerList,
+  createSeriesBanner,
+  updateSeriesBanner,
+  deleteSeriesBanner,
+  updateSeriesBannerOrder
+};

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/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>