콘텐츠 배너 등록/수정

- 크리에이터 배너 등록시 크리에이터를 검색해서 등록할 수 있도록 수정

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/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">
@@ -102,12 +107,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>
@@ -234,6 +246,7 @@
 
 <script>
 import Draggable from "vuedraggable";
+import debounce from "lodash/debounce";
 
 import * as memberApi from "@/api/member";
 import * as eventApi from "@/api/event";
@@ -246,6 +259,7 @@ export default {
 
     data() {
         return {
+            is_selecting: false,
             is_loading: false,
             is_modify: false,
             show_write_dialog: false,
@@ -255,15 +269,27 @@ export default {
             banners: [],
             events: [],
             creators: [],
+            search_query_creator: '',
+        }
+    },
+
+    watch: {
+        search_query_creator() {
+            if (!this.is_selecting) {
+                this.debouncedSearch();
+            }
         }
     },
 
     async created() {
-        await this.getCreatorAllList()
         await this.getEvents()
         await this.getBanners()
     },
 
+    mounted() {
+        this.debouncedSearch = debounce(this.searchCreator, 500);
+    },
+
     methods: {
         imageAdd(payload) {
             const file = payload;
@@ -294,6 +320,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
@@ -304,6 +332,10 @@ export default {
             this.banner.link = banner.link
             this.banner.is_adult = banner.isAdult
 
+            setTimeout(() => {
+              this.is_selecting = false; // 선택 상태 해제
+            }, 1000);
+
             this.show_write_dialog = true
         },
 
@@ -485,25 +517,43 @@ 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
             }
         },
 
@@ -512,7 +562,7 @@ export default {
             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 {