콘텐츠 배너 등록/수정 - 시리즈 연결 추가

src/api/audio_content_series.js

@@ -20,10 +20,15 @@ async function updateAudioContentSeriesGenreOrders(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)
+}
+
 export {
     getAudioContentSeriesList,
     getAudioContentSeriesGenreList,
     createAudioContentSeriesGenre,
     updateAudioContentSeriesGenre,
-    updateAudioContentSeriesGenreOrders
+    updateAudioContentSeriesGenreOrders,
+    searchSeriesList
 }

src/views/Content/ContentMainTopBanner.vue

@@ -97,6 +97,10 @@
                   value="EVENT"
                   label="이벤트"
                 />
+                <v-radio
+                  value="SERIES"
+                  label="시리즈"
+                />
               </v-radio-group>
             </v-col>
           </v-row>
@@ -138,6 +142,29 @@
             </v-col>
           </v-row>
         </v-card-text>
+        <v-card-text v-else-if="banner.type === 'SERIES'">
+          <v-row align="center">
+            <v-col cols="4">
+              시리즈
+            </v-col>
+            <v-col cols="8">
+              <v-combobox
+                v-model="banner.series_title"
+                :items="series"
+                :loading="is_loading"
+                :search-input.sync="search_query_series"
+                label="시리즈를 검색하세요"
+                item-text="name"
+                item-value="value"
+                no-data-text="No results found"
+                hide-selected
+                clearable
+                @change="onSelectSeries"
+                @update:search-input="onSearchSeriesUpdate"
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
         <v-card-text v-else>
           <v-row align="center">
             <v-col cols="4">
@@ -248,6 +275,7 @@
 import Draggable from "vuedraggable";
 import debounce from "lodash/debounce";
 
+import * as seriesApi from "@/api/audio_content_series"
 import * as memberApi from "@/api/member";
 import * as eventApi from "@/api/event";
 import * as api from "@/api/audio_content"
@@ -269,7 +297,9 @@ export default {
             banners: [],
             events: [],
             creators: [],
+            series: [],
             search_query_creator: '',
+            search_query_series: '',
         }
     },
 
@@ -278,7 +308,13 @@ export default {
             if (!this.is_selecting) {
                 this.debouncedSearch();
             }
+        },
+
+      search_query_series() {
+        if (!this.is_selecting) {
+          this.debouncedSearchSeries();
         }
+      }
     },
 
     async created() {
@@ -288,6 +324,7 @@ export default {
 
     mounted() {
         this.debouncedSearch = debounce(this.searchCreator, 500);
+        this.debouncedSearchSeries = debounce(this.searchSeries, 500);
     },
 
     methods: {
@@ -303,9 +340,13 @@ export default {
 
         cancel() {
             this.is_modify = false
+            this.is_selecting = false
             this.show_write_dialog = false
+            this.show_delete_confirm_dialog = false
             this.banner = {type: 'CREATOR'}
             this.selected_banner = {}
+            this.search_query_creator = ''
+            this.search_query_series = ''
         },
 
         notifyError(message) {
@@ -329,6 +370,8 @@ export default {
             this.banner.event_thumbnail_image = banner.eventThumbnailImage
             this.banner.creator_id = banner.creatorId
             this.banner.creator_nickname = banner.creatorNickname
+            this.banner.series_id = banner.seriesId
+            this.banner.series_title = banner.seriesTitle
             this.banner.link = banner.link
             this.banner.is_adult = banner.isAdult
 
@@ -352,6 +395,13 @@ export default {
                 return false;
             }
 
+            if (
+              this.banner.type === 'SERIES' &&
+              (this.banner.series_id === null || this.banner.series_id === undefined)) {
+              this.notifyError("시리즈를 선택하세요")
+              return false;
+            }
+
             if (
                 this.banner.type === 'LINK' &&
                 (this.banner.link === null || this.banner.link === undefined || this.banner.link.trim().length <= 0)
@@ -398,6 +448,8 @@ export default {
                     request.eventId = this.banner.event_id
                 } else if (this.banner.type === 'LINK') {
                     request.link = this.banner.link
+                } else if (this.banner.type === 'SERIES') {
+                  request.seriesId = this.banner.series_id
                 }
 
                 formData.append("request", JSON.stringify(request))
@@ -449,6 +501,15 @@ export default {
                     request.creatorId = this.banner.creator_id
                 }
 
+                if (
+                  this.selected_banner.series_id !== this.banner.series_id &&
+                  this.banner.series_id !== null &&
+                  this.banner.series_id !== undefined
+                ) {
+                  request.type = this.banner.type
+                  request.seriesId = this.banner.series_id
+                }
+
                 if (
                     this.selected_banner.link !== this.banner.link &&
                     this.banner.link !== null &&
@@ -557,6 +618,46 @@ export default {
             }
         },
 
+      async searchSeries() {
+        if (this.search_query_series === null || this.search_query_series.length < 3) {
+          this.series = [];
+          return;
+        }
+
+        this.is_loading = true;
+
+        try {
+          const res = await seriesApi.searchSeriesList(this.search_query_series);
+
+          if (res.status === 200 && res.data.success === true) {
+            this.series = res.data.data.map((item) => {
+              return {name: item.title, value: item.id}
+            })
+          } else {
+            this.series = []
+          }
+        } catch (e) {
+          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.is_loading = false
+        } finally {
+          this.is_loading = false
+        }
+      },
+
+        onSelectSeries(value) {
+          this.banner.series_id = value.value
+          this.is_selecting = true; // 선택 중 플래그 활성화
+          setTimeout(() => {
+            this.is_selecting = false; // 선택 상태 해제
+          }, 0);
+        },
+
+        onSearchSeriesUpdate(value) {
+          if (!this.is_selecting) {
+            this.search_query_series = value
+          }
+        },
+
         async getEvents() {
             this.is_loading = true
             try {