From f558c9260eb2d45a5c650c34451f2c7bc6cd91c2 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Thu, 16 Jan 2025 14:54:15 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BD=98=ED=85=90=EC=B8=A0=20=EB=B0=B0?=
 =?UTF-8?q?=EB=84=88=20=EB=93=B1=EB=A1=9D/=EC=88=98=EC=A0=95=20-=20?=
 =?UTF-8?q?=ED=81=AC=EB=A6=AC=EC=97=90=EC=9D=B4=ED=84=B0=20=EB=B0=B0?=
 =?UTF-8?q?=EB=84=88=20=EB=93=B1=EB=A1=9D=EC=8B=9C=20=ED=81=AC=EB=A6=AC?=
 =?UTF-8?q?=EC=97=90=EC=9D=B4=ED=84=B0=EB=A5=BC=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=ED=95=B4=EC=84=9C=20=EB=93=B1=EB=A1=9D=ED=95=A0=20=EC=88=98=20?=
 =?UTF-8?q?=EC=9E=88=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                          |  7 +-
 package.json                               |  1 +
 src/views/Content/ContentMainTopBanner.vue | 82 +++++++++++++++++-----
 3 files changed, 70 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1b68638..a3759ea 100644
--- a/package-lock.json
+++ b/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==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "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==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
diff --git a/package.json b/package.json
index a4fb6b2..8707b7b 100644
--- a/package.json
+++ b/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",
diff --git a/src/views/Content/ContentMainTopBanner.vue b/src/views/Content/ContentMainTopBanner.vue
index 0b3ab7f..236f852 100644
--- a/src/views/Content/ContentMainTopBanner.vue
+++ b/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-model="banner.creator_id"
+              <v-combobox
+                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() {
-            this.is_loading = true
+        async searchCreator() {
+            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) => {
-                        return {name: item.nickname, value: item.id}
+                    this.creators = res.data.data.items.map((item) => {
+                      return {name: item.nickname, value: item.id}
                     })
                 } else {
-                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-                    this.is_loading = false
+                    this.creators = []
                 }
             } catch (e) {
-                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-                this.is_loading = false
+              this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+              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 {