From 647a0cfd66b0e33fc5476513188b9662afe4e9e3 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Wed, 23 Aug 2023 18:47:30 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BD=98=ED=85=90=EC=B8=A0=20=EC=97=85?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=20-=20=EC=BB=A4=EB=B2=84=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20multipart?=
 =?UTF-8?q?=20=EB=B0=A9=EC=8B=9D=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/audio_content.js          |  19 +-
 src/views/Content/ContentList.vue | 503 +++++++++++++++---------------
 2 files changed, 272 insertions(+), 250 deletions(-)

diff --git a/src/api/audio_content.js b/src/api/audio_content.js
index 81020bb..f24d1af 100644
--- a/src/api/audio_content.js
+++ b/src/api/audio_content.js
@@ -7,7 +7,7 @@ async function getAudioContentList(page) {
     )
 }
 
-async function searchAudioContent(searchWord, page){
+async function searchAudioContent(searchWord, page) {
     return Vue.axios.get(
         "/creator-admin/audio-content/search?search_word=" + searchWord +
         "&page=" + (page - 1) +
@@ -15,11 +15,24 @@ async function searchAudioContent(searchWord, page){
     )
 }
 
-async function modifyAudioContent(request) {
-    return Vue.axios.put("/creator-admin/audio-content", request)
+async function modifyAudioContent(formData) {
+    return Vue.axios.put("/creator-admin/audio-content", formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    })
+}
+
+async function createAudioContent(formData) {
+    return Vue.axios.post('/audio-content', formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
 }
 
 export {
+    createAudioContent,
     getAudioContentList,
     searchAudioContent,
     modifyAudioContent
diff --git a/src/views/Content/ContentList.vue b/src/views/Content/ContentList.vue
index 736204e..b110b23 100644
--- a/src/views/Content/ContentList.vue
+++ b/src/views/Content/ContentList.vue
@@ -15,9 +15,6 @@
             <template>
               <thead>
                 <tr>
-                  <th class="text-center">
-                    콘텐츠 번호
-                  </th>
                   <th class="text-center">
                     썸네일
                   </th>
@@ -61,7 +58,6 @@
                   v-for="item in audio_contents"
                   :key="item.audioContentId"
                 >
-                  <td>{{ item.audioContentId }}</td>
                   <td align="center">
                     <v-img
                       max-width="100"
@@ -151,6 +147,22 @@
           <v-card-title>
             콘텐츠 수정
           </v-card-title>
+          <div class="image-select">
+            <label for="image">
+              배너 이미지 등록
+            </label>
+            <v-file-input
+              id="image"
+              v-model="audio_content.cover_image"
+              @change="imageAdd"
+            />
+          </div>
+          <img
+            v-if="audio_content.cover_image_url"
+            :src="audio_content.cover_image_url"
+            alt=""
+            class="image-preview"
+          >
           <v-card-text>
             <v-row align="center">
               <v-col cols="4">
@@ -211,22 +223,6 @@
               </v-col>
             </v-row>
           </v-card-text>
-          <v-card-text>
-            <v-row>
-              <v-col cols="4">
-                기본 커버이미지로 변경
-              </v-col>
-              <v-col
-                cols="8"
-                align="left"
-              >
-                <input
-                  v-model="audio_content.is_default_cover_image"
-                  type="checkbox"
-                >
-              </v-col>
-            </v-row>
-          </v-card-text>
           <v-card-actions v-show="!is_loading">
             <v-spacer />
             <v-btn
@@ -285,236 +281,249 @@ import * as api from '@/api/audio_content'
 import VuetifyAudio from 'vuetify-audio'
 
 export default {
-    name: "AudioContentList",
+  name: "AudioContentList",
 
-    components: {VuetifyAudio},
+  components: {VuetifyAudio},
 
-    data() {
-        return {
-            is_loading: false,
-            show_modify_dialog: false,
-            show_delete_confirm_dialog: false,
-            page: 1,
-            total_page: 0,
-            search_word: '',
-            audio_content: {},
-            audio_contents: [],
-            curations: [],
-            selected_audio_content: {},
-            utm_source: '',
-            utm_medium: '',
-            utm_campaign: '',
-        }
-    },
-
-    async created() {
-        await this.getAudioContent()
-    },
-
-    methods: {
-        notifyError(message) {
-            this.$dialog.notify.error(message)
-        },
-
-        notifySuccess(message) {
-            this.$dialog.notify.success(message)
-        },
-
-        deleteConfirm(item) {
-            this.selected_audio_content = item
-            this.show_delete_confirm_dialog = true
-        },
-
-        deleteCancel() {
-            this.selected_audio_content = {}
-            this.show_delete_confirm_dialog = false
-        },
-
-        showModifyDialog(item) {
-            this.selected_audio_content = item
-
-            this.audio_content.id = item.audioContentId
-            this.audio_content.title = item.title
-            this.audio_content.detail = item.detail
-            this.audio_content.curation_id = item.curationId
-            this.audio_content.is_adult = item.isAdult
-            this.audio_content.is_comment_available = item.isCommentAvailable
-            this.audio_content.is_default_cover_image = false
-
-            console.log(this.audio_content)
-
-            this.show_modify_dialog = true
-        },
-
-        cancel() {
-            this.selected_audio_content = {}
-            this.audio_content = {}
-            this.show_modify_dialog = false
-            this.show_delete_confirm_dialog = false
-        },
-
-        async modify() {
-            if (
-                this.audio_content.title === null ||
-                this.audio_content.title === undefined ||
-                this.audio_content.title.trim().length <= 0
-            ) {
-                this.notifyError("제목을 입력하세요")
-                return
-            }
-
-            if (
-                this.audio_content.detail === null ||
-                this.audio_content.detail === undefined ||
-                this.audio_content.detail.trim().length <= 0
-            ) {
-                this.notifyError("내용을 입력하세요")
-                return
-            }
-
-            if (this.is_loading) return;
-
-            this.isLoading = true
-
-            try {
-                const request = {
-                    id: this.audio_content.id,
-                    isDefaultCoverImage: this.audio_content.is_default_cover_image
-                }
-
-                if (
-                    this.selected_audio_content.title !== this.audio_content.title &&
-                    this.audio_content.title.trim().length > 0
-                ) {
-                    request.title = this.audio_content.title
-                }
-
-                if (
-                    this.selected_audio_content.detail !== this.audio_content.detail &&
-                    this.audio_content.detail.trim().length > 0
-                ) {
-                    request.detail = this.audio_content.detail
-                }
-
-                if (this.selected_audio_content.curationId !== this.audio_content.curation_id) {
-                    request.curationId = this.audio_content.curation_id
-                }
-
-                if (this.selected_audio_content.isAdult !== this.audio_content.is_adult) {
-                    request.isAdult = this.audio_content.is_adult
-                }
-
-                if (this.selected_audio_content.isCommentAvailable !== this.audio_content.is_comment_available) {
-                    request.isCommentAvailable = this.audio_content.is_comment_available
-                }
-
-                console.log(request)
-                const res = await api.modifyAudioContent(request)
-                if (res.status === 200 && res.data.success === true) {
-                    this.cancel()
-                    this.notifySuccess('수정되었습니다.')
-
-                    this.audio_contents = []
-                    await this.getAudioContent()
-                } else {
-                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-                }
-            } catch (e) {
-                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-            } finally {
-                this.is_loading = false
-            }
-        },
-
-        async deleteAudioContent() {
-            if (this.is_loading) return;
-            this.is_loading = true
-
-            try {
-                let request = {id: this.selected_audio_content.audioContentId, isActive: false}
-
-                const res = await api.modifyAudioContent(request)
-                if (res.status === 200 && res.data.success === true) {
-                    this.cancel()
-                    this.notifySuccess('삭제되었습니다.')
-
-                    this.audio_contents = []
-                    await this.getAudioContent()
-                } else {
-                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-                }
-            } catch (e) {
-                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-            } finally {
-                this.is_loading = false
-            }
-        },
-
-        async next() {
-            if (this.search_word.length < 2) {
-                this.search_word = ''
-                await this.getAudioContent()
-            } else {
-                await this.searchAudioContent()
-            }
-        },
-
-        async getAudioContent() {
-            this.is_loading = true
-            try {
-                const res = await api.getAudioContentList(this.page)
-                if (res.status === 200 && res.data.success === true) {
-                    const data = res.data.data
-
-                    const total_page = Math.ceil(data.totalCount / 10)
-                    this.audio_contents = data.items
-
-                    if (total_page <= 0)
-                        this.total_page = 1
-                    else
-                        this.total_page = total_page
-                } else {
-                    this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-                }
-
-                this.is_loading = false
-            } catch (e) {
-                this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-                this.is_loading = false
-            }
-        },
-
-        async searchAudioContent() {
-            if (this.search_word.length === 0) {
-                await this.getAudioContent()
-            } else if (this.search_word.length < 2) {
-                this.notifyError('검색어를 2글자 이상 입력하세요.')
-            } else {
-                this.is_loading = true
-                try {
-                    const res = await api.searchAudioContent(this.search_word, this.page)
-                    if (res.status === 200 && res.data.success === true) {
-                        const data = res.data.data
-
-                        const total_page = Math.ceil(data.totalCount / 10)
-                        this.audio_contents = data.items
-
-                        if (total_page <= 0)
-                            this.total_page = 1
-                        else
-                            this.total_page = total_page
-                    } else {
-                        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-                    }
-
-                    this.is_loading = false
-                } catch (e) {
-                    this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
-                    this.is_loading = false
-                }
-            }
-        },
+  data() {
+    return {
+      is_loading: false,
+      show_create_dialog: false,
+      show_modify_dialog: false,
+      show_delete_confirm_dialog: false,
+      page: 1,
+      total_page: 0,
+      search_word: '',
+      audio_content: {},
+      audio_contents: [],
+      curations: [],
+      selected_audio_content: {},
+      utm_source: '',
+      utm_medium: '',
+      utm_campaign: '',
     }
+  },
+
+  async created() {
+    await this.getAudioContent()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    deleteConfirm(item) {
+      this.selected_audio_content = item
+      this.show_delete_confirm_dialog = true
+    },
+
+    deleteCancel() {
+      this.selected_audio_content = {}
+      this.show_delete_confirm_dialog = false
+    },
+
+    showModifyDialog(item) {
+      this.selected_audio_content = item
+
+      this.audio_content.id = item.audioContentId
+      this.audio_content.title = item.title
+      this.audio_content.detail = item.detail
+      this.audio_content.curation_id = item.curationId
+      this.audio_content.is_adult = item.isAdult
+      this.audio_content.is_comment_available = item.isCommentAvailable
+      this.audio_content.cover_image_url = item.coverImageUrl
+      console.log(this.audio_content)
+
+      this.show_modify_dialog = true
+    },
+
+    cancel() {
+      this.selected_audio_content = {}
+      this.audio_content = {}
+      this.show_modify_dialog = false
+      this.show_delete_confirm_dialog = false
+    },
+
+    imageAdd(payload) {
+      const file = payload;
+      if (file) {
+        this.audio_content.cover_image_url = URL.createObjectURL(file)
+        URL.revokeObjectURL(file)
+      } else {
+        this.audio_content.cover_image_url = null
+      }
+    },
+
+    async modify() {
+      if (
+        this.audio_content.title === null ||
+        this.audio_content.title === undefined ||
+        this.audio_content.title.trim().length <= 0
+      ) {
+        this.notifyError("제목을 입력하세요")
+        return
+      }
+
+      if (
+        this.audio_content.detail === null ||
+        this.audio_content.detail === undefined ||
+        this.audio_content.detail.trim().length <= 0
+      ) {
+        this.notifyError("내용을 입력하세요")
+        return
+      }
+
+      if (this.is_loading) return;
+
+      this.isLoading = true
+
+      try {
+        const formData = new FormData()
+        const request = {id: this.audio_content.id}
+
+        if (
+          this.selected_audio_content.title !== this.audio_content.title &&
+          this.audio_content.title.trim().length > 0
+        ) {
+          request.title = this.audio_content.title
+        }
+
+        if (
+          this.selected_audio_content.detail !== this.audio_content.detail &&
+          this.audio_content.detail.trim().length > 0
+        ) {
+          request.detail = this.audio_content.detail
+        }
+
+        if (this.selected_audio_content.curationId !== this.audio_content.curation_id) {
+          request.curationId = this.audio_content.curation_id
+        }
+
+        if (this.selected_audio_content.isAdult !== this.audio_content.is_adult) {
+          request.isAdult = this.audio_content.is_adult
+        }
+
+        if (this.selected_audio_content.isCommentAvailable !== this.audio_content.is_comment_available) {
+          request.isCommentAvailable = this.audio_content.is_comment_available
+        }
+
+        if (this.audio_content.cover_image !== null) {
+          formData.append("coverImage", this.audio_content.cover_image)
+        }
+
+        formData.append("request", JSON.stringify(request))
+
+        const res = await api.modifyAudioContent(formData)
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel()
+          this.notifySuccess('수정되었습니다.')
+
+          this.audio_contents = []
+          await this.getAudioContent()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async deleteAudioContent() {
+      if (this.is_loading) return;
+      this.is_loading = true
+
+      try {
+        let request = {id: this.selected_audio_content.audioContentId, isActive: false}
+
+        const res = await api.modifyAudioContent(request)
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel()
+          this.notifySuccess('삭제되었습니다.')
+
+          this.audio_contents = []
+          await this.getAudioContent()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async next() {
+      if (this.search_word.length < 2) {
+        this.search_word = ''
+        await this.getAudioContent()
+      } else {
+        await this.searchAudioContent()
+      }
+    },
+
+    async getAudioContent() {
+      this.is_loading = true
+      try {
+        const res = await api.getAudioContentList(this.page)
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+
+          const total_page = Math.ceil(data.totalCount / 10)
+          this.audio_contents = data.items
+
+          if (total_page <= 0)
+            this.total_page = 1
+          else
+            this.total_page = total_page
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+
+        this.is_loading = false
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      }
+    },
+
+    async searchAudioContent() {
+      if (this.search_word.length === 0) {
+        await this.getAudioContent()
+      } else if (this.search_word.length < 2) {
+        this.notifyError('검색어를 2글자 이상 입력하세요.')
+      } else {
+        this.is_loading = true
+        try {
+          const res = await api.searchAudioContent(this.search_word, this.page)
+          if (res.status === 200 && res.data.success === true) {
+            const data = res.data.data
+
+            const total_page = Math.ceil(data.totalCount / 10)
+            this.audio_contents = data.items
+
+            if (total_page <= 0)
+              this.total_page = 1
+            else
+              this.total_page = total_page
+          } else {
+            this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          }
+
+          this.is_loading = false
+        } catch (e) {
+          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+          this.is_loading = false
+        }
+      }
+    },
+  }
 }
 </script>