From ee2ef50f2aaa606078a1bcb2082b5fc52bb85c72 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Thu, 13 Nov 2025 11:53:31 +0900
Subject: [PATCH] =?UTF-8?q?feat(admin-series-banner):=20=EC=8B=9C=EB=A6=AC?=
 =?UTF-8?q?=EC=A6=88=20=EB=B0=B0=EB=84=88=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=A1=B0=ED=9A=8C,=20=EB=93=B1=EB=A1=9D,=20=EC=88=98=EC=A0=95,?=
 =?UTF-8?q?=20=EC=82=AD=EC=A0=9C,=20=EC=88=9C=EC=84=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/audio_content_series.js          |  81 +++-
 src/views/Series/ContentSeriesBanner.vue | 513 ++++++++++++++++++++++-
 2 files changed, 577 insertions(+), 17 deletions(-)

diff --git a/src/api/audio_content_series.js b/src/api/audio_content_series.js
index 8d940d6..5e11544 100644
--- a/src/api/audio_content_series.js
+++ b/src/api/audio_content_series.js
@@ -1,40 +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);
+  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,
-    updateAudioContentSeries
-}
+  getAudioContentSeriesList,
+  getAudioContentSeriesGenreList,
+  createAudioContentSeriesGenre,
+  updateAudioContentSeriesGenre,
+  updateAudioContentSeriesGenreOrders,
+  searchSeriesList,
+  updateAudioContentSeries,
+  // series banner
+  getSeriesBannerList,
+  createSeriesBanner,
+  updateSeriesBanner,
+  deleteSeriesBanner,
+  updateSeriesBannerOrder
+};
diff --git a/src/views/Series/ContentSeriesBanner.vue b/src/views/Series/ContentSeriesBanner.vue
index b41e2aa..f52d3a3 100644
--- a/src/views/Series/ContentSeriesBanner.vue
+++ b/src/views/Series/ContentSeriesBanner.vue
@@ -1,18 +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>