package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "core-js": "^3.6.5",
         "file-saver": "^2.0.5",
+        "lodash": "^4.17.21",
         "vue": "^2.6.11",
         "vue-excel-xlsx": "^1.2.2",
         "vue-router": "^3.2.0",
@@ -9025,8 +9026,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -22908,8 +22908,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
     },
     "lodash.debounce": {
       "version": "4.0.8",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "file-saver": "^2.0.5",
+    "lodash": "^4.17.21",
     "vue": "^2.6.11",
     "vue-excel-xlsx": "^1.2.2",
     "vue-router": "^3.2.0",

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/api/event.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 
 async function save(formData) {
-    return Vue.axios.post('/event', formData, {
+    return Vue.axios.post('/admin/event/banner', formData, {
         headers: {
             "Content-Type": "multipart/form-data",
         },
@@ -9,7 +9,7 @@ async function save(formData) {
 }
 
 async function modify(formData) {
-    return Vue.axios.put('/event', formData, {
+    return Vue.axios.put('/admin/event/banner', formData, {
         headers: {
             "Content-Type": "multipart/form-data",
         },
@@ -17,11 +17,11 @@ async function modify(formData) {
 }
 
 async function deleteEvent(id) {
-    return Vue.axios.delete("/event/" + id)
+    return Vue.axios.delete("/admin/event/banner/" + id)
 }
 
 async function getEvents() {
-    return Vue.axios.get("/event")
+    return Vue.axios.get("/admin/event/banner")
 }
 
 export {save, modify, deleteEvent, getEvents}

src/views/Content/ContentMainTopBanner.vue

@@ -69,7 +69,12 @@
       </template>
 
       <v-card>
-        <v-card-title>배너 등록</v-card-title>
+        <v-card-title v-if="is_modify === true">
+          배너 수정
+        </v-card-title>
+        <v-card-title v-else>
+          배너 등록
+        </v-card-title>
         <v-card-text>
           <v-row align="center">
             <v-col cols="4">
@@ -92,6 +97,10 @@
                   value="EVENT"
                   label="이벤트"
                 />
+                <v-radio
+                  value="SERIES"
+                  label="시리즈"
+                />
               </v-radio-group>
             </v-col>
           </v-row>
@@ -102,12 +111,19 @@
               크리에이터
             </v-col>
             <v-col cols="8">
-              <v-select
+              <v-combobox
-                v-model="banner.creator_id"
+                v-model="banner.creator_nickname"
                 :items="creators"
+                :loading="is_loading"
+                :search-input.sync="search_query_creator"
+                label="크리에이터를 검색하세요"
                 item-text="name"
                 item-value="value"
-                label="크리에이터 선택"
+                no-data-text="No results found"
+                hide-selected
+                clearable
+                @change="onSelect"
+                @update:search-input="onSearchUpdate"
               />
             </v-col>
           </v-row>
@@ -126,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">
@@ -234,7 +273,9 @@
 
 <script>
 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"
@@ -246,6 +287,7 @@ export default {
 
     data() {
         return {
+            is_selecting: false,
             is_loading: false,
             is_modify: false,
             show_write_dialog: false,
@@ -255,15 +297,36 @@ export default {
             banners: [],
             events: [],
             creators: [],
+            series: [],
+            search_query_creator: '',
+            search_query_series: '',
         }
     },
 
+    watch: {
+        search_query_creator() {
+            if (!this.is_selecting) {
+                this.debouncedSearch();
+            }
+        },
+
+      search_query_series() {
+        if (!this.is_selecting) {
+          this.debouncedSearchSeries();
+        }
+      }
+    },
+
     async created() {
-        await this.getCreatorAllList()
         await this.getEvents()
         await this.getBanners()
     },
 
+    mounted() {
+        this.debouncedSearch = debounce(this.searchCreator, 500);
+        this.debouncedSearchSeries = debounce(this.searchSeries, 500);
+    },
+
     methods: {
         imageAdd(payload) {
             const file = payload;
@@ -277,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) {
@@ -294,6 +361,8 @@ export default {
             this.is_modify = true
             this.selected_banner = banner
 
+            this.is_selecting = true; // 선택 중 플래그 활성화
+
             this.banner.id = banner.id
             this.banner.type = banner.type
             this.banner.thumbnail_image_url = banner.thumbnailImageUrl
@@ -301,9 +370,15 @@ 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
 
+            setTimeout(() => {
+              this.is_selecting = false; // 선택 상태 해제
+            }, 1000);
+
             this.show_write_dialog = true
         },
 
@@ -320,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)
@@ -366,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))
@@ -417,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 &&
@@ -485,34 +578,92 @@ export default {
             }
         },
 
-        async getCreatorAllList() {
+        async searchCreator() {
-            this.is_loading = true
+            if (this.search_query_creator === null || this.search_query_creator.length < 3) {
+                this.creators = [];
+                return;
+            }
+
+            this.is_loading = true;
 
             try {
-                const res = await memberApi.getCreatorAllList()
+                const res = await memberApi.searchCreator(this.search_query_creator, 1);
 
                 if (res.status === 200 && res.data.success === true) {
-                    this.creators = res.data.data.map((item) => {
+                    this.creators = res.data.data.items.map((item) => {
-                        return {name: item.nickname, value: item.id}
+                      return {name: item.nickname, value: item.id}
                     })
                 } else {
-                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+                    this.creators = []
-                    this.is_loading = false
                 }
             } catch (e) {
-                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+              this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-                this.is_loading = false
+              this.is_loading = false
             } finally {
-                this.is_loading = false
+              this.is_loading = false
             }
         },
 
+        onSelect(value) {
+            this.banner.creator_id = value.value
+            this.is_selecting = true; // 선택 중 플래그 활성화
+            setTimeout(() => {
+              this.is_selecting = false; // 선택 상태 해제
+            }, 0);
+        },
+
+        onSearchUpdate(value) {
+            if (!this.is_selecting) {
+              this.search_query_creator = value
+            }
+        },
+
+      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 {
                 const res = await eventApi.getEvents(1)
                 if (res.status === 200 && res.data.success === true) {
-                    this.events = res.data.data.eventList.map((item) => {
+                    this.events = res.data.data.map((item) => {
                         return {title: item.title, value: item.id}
                     })
                 } else {

src/views/Promotion/EventView.vue

@@ -343,7 +343,7 @@ export default {
       try {
         const res = await api.getEvents(this.page)
         if (res.status === 200 && res.data.success === true) {
-          this.events = res.data.data.eventList
+          this.events = res.data.data
         } else {
           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         }