From 1f5506dbc46f958029bcf14554d9058ce4a5c811 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Mon, 17 Feb 2025 23:09:12 +0900
Subject: [PATCH] =?UTF-8?q?=ED=81=90=EB=A0=88=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20-=20=EB=93=9C=EB=9E=98=EA=B7=B8?=
 =?UTF-8?q?=20=EC=95=A4=20=EB=93=9C=EB=A1=AD=EC=9C=BC=EB=A1=9C=20=EC=88=9C?=
 =?UTF-8?q?=EC=84=9C=EB=B3=80=EA=B2=BD=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/audio_content.js                    | 16 +++++++---
 src/views/Content/ContentCurationDetail.vue | 34 ++++++++++++++++++---
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/api/audio_content.js b/src/api/audio_content.js
index aeb8bc8..c5db580 100644
--- a/src/api/audio_content.js
+++ b/src/api/audio_content.js
@@ -7,7 +7,7 @@ async function getAudioContentList(status, page) {
     )
 }
 
-async function searchAudioContent(searchWord, page){
+async function searchAudioContent(searchWord, page) {
     return Vue.axios.get(
         "/admin/audio-content/search?search_word=" + searchWord +
         "&page=" + (page - 1) +
@@ -79,20 +79,27 @@ async function searchSeriesItem(curationId, searchWord) {
     return Vue.axios.get("/admin/audio-content/curation/search/series?curationId=" + curationId + "&searchWord=" + searchWord)
 }
 
-async function addItemToCuration(curationId, itemIdList){
+async function addItemToCuration(curationId, itemIdList) {
     return Vue.axios.post(
         "/admin/audio-content/curation/add/item",
         {curationId: curationId, itemIdList: itemIdList}
     )
 }
 
-async function removeItemInCuration(curationId, itemId){
+async function removeItemInCuration(curationId, itemId) {
     return Vue.axios.put(
         "/admin/audio-content/curation/remove/item",
         {curationId: curationId, itemId: itemId}
     )
 }
 
+async function updateItemInCurationOrders(curationId, itemIds) {
+    return Vue.axios.put(
+        "/admin/audio-content/curation/orders/item",
+        {curationId: curationId, itemIds: itemIds}
+    )
+}
+
 export {
     getAudioContentList,
     searchAudioContent,
@@ -111,5 +118,6 @@ export {
     searchSeriesItem,
     searchContentItem,
     addItemToCuration,
-    removeItemInCuration
+    removeItemInCuration,
+    updateItemInCurationOrders
 }
diff --git a/src/views/Content/ContentCurationDetail.vue b/src/views/Content/ContentCurationDetail.vue
index 1d89fcb..03275c5 100644
--- a/src/views/Content/ContentCurationDetail.vue
+++ b/src/views/Content/ContentCurationDetail.vue
@@ -94,7 +94,11 @@
                   </th>
                 </tr>
               </thead>
-              <tbody>
+              <draggable
+                v-model="items"
+                tag="tbody"
+                @end="onDropCallback(items)"
+              >
                 <tr
                   v-for="item in items"
                   :key="item.id"
@@ -115,7 +119,7 @@
                   </td>
                   <td style="max-width: 200px !important; word-break:break-all; height: auto;">
                     <vue-show-more-text
-                      :text="item.detail"
+                      :text="item.desc"
                       :lines="3"
                     />
                   </td>
@@ -137,7 +141,7 @@
                     </v-btn>
                   </td>
                 </tr>
-              </tbody>
+              </draggable>
             </template>
           </v-simple-table>
         </v-col>
@@ -402,13 +406,14 @@
 </template>
 
 <script>
+import Draggable from 'vuedraggable';
 import * as api from "@/api/audio_content"
 import VueShowMoreText from 'vue-show-more-text'
 
 export default {
   name: 'ContentCurationDetail',
 
-  components: {VueShowMoreText},
+  components: {VueShowMoreText, Draggable},
 
   data() {
     return {
@@ -487,6 +492,26 @@ export default {
       this.search_item_list.push(item)
     },
 
+    async onDropCallback(items) {
+      const ids = items.map((item) => {
+        return item.id
+      })
+
+      try {
+        this.is_loading = true
+        const res = await api.updateItemInCurationOrders(this.curation_id, ids)
+        if (res.status === 200 && res.data.success === true) {
+          this.notifySuccess(res.data.message)
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
     async searchContentItem() {
       if (this.search_word.length < 2) {
         this.notifyError('검색어를 2글자 이상 입력하세요.')
@@ -586,6 +611,7 @@ export default {
         const res = await api.getCurationItems(this.curation_id)
         if (res.status === 200 && res.data.success === true) {
           this.items = res.data.data
+          console.log(this.items)
         } else {
           this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
         }