콘텐츠 업로드 기능 추가

src/api/audio_content.js

@@ -15,12 +15,30 @@ async function searchAudioContent(searchWord, page){
     )
 }
 
-async function modifyAudioContent(request) {
+async function modifyAudioContent(formData) {
-    return Vue.axios.put("/creator-admin/audio-content", request)
+    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",
+        },
+    });
+}
+
+async function getAudioContentThemeList() {
+    return Vue.axios.get("/audio-content/theme")
 }
 
 export {
+    createAudioContent,
     getAudioContentList,
     searchAudioContent,
-    modifyAudioContent
+    modifyAudioContent,
+    getAudioContentThemeList
 }

src/views/Content/ContentList.vue

@@ -9,15 +9,26 @@
     <br>
 
     <v-container>
+      <v-row>
+        <v-col cols="10" />
+        <v-col>
+          <v-btn
+            block
+            color="#9970ff"
+            dark
+            depressed
+            @click="showWriteDialog"
+          >
+            콘텐츠 등록
+          </v-btn>
+        </v-col>
+      </v-row>
       <v-row>
         <v-col>
           <v-simple-table class="elevation-10">
             <template>
               <thead>
                 <tr>
-                  <th class="text-center">
-                    콘텐츠 번호
-                  </th>
                   <th class="text-center">
                     썸네일
                   </th>
@@ -61,13 +72,11 @@
                   v-for="item in audio_contents"
                   :key="item.audioContentId"
                 >
-                  <td>{{ item.audioContentId }}</td>
                   <td align="center">
                     <v-img
                       max-width="100"
                       max-height="100"
                       :src="item.coverImageUrl"
-                      class="rounded-circle"
                     />
                   </td>
                   <td>{{ item.title }}</td>
@@ -151,6 +160,23 @@
           <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"
+              accept="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">
@@ -182,7 +208,7 @@
           <v-card-text>
             <v-row>
               <v-col cols="4">
-                19금
+                연령제한
               </v-col>
               <v-col
                 cols="8"
@@ -211,17 +237,177 @@
               </v-col>
             </v-row>
           </v-card-text>
+          <v-card-actions v-show="!is_loading">
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="cancel"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="modify"
+            >
+              수정
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+
+    <v-row>
+      <v-dialog
+        v-model="show_create_dialog"
+        max-width="1000px"
+        persistent
+      >
+        <v-card>
+          <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"
+              accept="image/*"
+              @change="imageAdd"
+            />
+          </div>
+          <img
+            v-if="audio_content.cover_image_url"
+            :src="audio_content.cover_image_url"
+            alt=""
+            class="image-preview"
+          >
+          <div class="content-select">
+            <label for="content">
+              콘텐츠 등록
+            </label>
+            <v-file-input
+              id="content"
+              v-model="audio_content.content_file"
+              accept="audio/*"
+              @change="contentAdd"
+            />
+            <v-row
+              v-if="audio_content.content_file_name !== undefined"
+              align="center"
+            >
+              <v-col cols="4" />
+              <v-col cols="8">
+                <v-text-field
+                  v-model="audio_content.content_file_name"
+                  label=""
+                  disabled
+                />
+              </v-col>
+            </v-row>
+          </div>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                제목
+              </v-col>
+              <v-col cols="8">
+                <v-text-field
+                  v-model="audio_content.title"
+                  label="제목"
+                  required
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                내용
+              </v-col>
+              <v-col cols="8">
+                <v-text-field
+                  v-model="audio_content.detail"
+                  label="내용"
+                  required
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                태그
+              </v-col>
+              <v-col cols="8">
+                <v-text-field
+                  v-model="audio_content.tags"
+                  label="예 : #연애 #커버곡 #태그"
+                  required
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                테마
+              </v-col>
+              <v-col cols="8">
+                <v-select
+                  v-model="audio_content.theme_id"
+                  :items="themeList"
+                  item-text="name"
+                  item-value="value"
+                  label="테마 선택"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                가격
+              </v-col>
+              <v-col cols="8">
+                <v-text-field
+                  v-model="audio_content.price"
+                  label="가격"
+                  required
+                />
+              </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"
+                  v-model="audio_content.is_adult"
+                  type="checkbox"
+                >
+              </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_comment_available"
                   type="checkbox"
                 >
               </v-col>
@@ -239,9 +425,9 @@
             <v-btn
               color="blue darken-1"
               text
-              @click="modify"
+              @click="save"
             >
-              수정
+              등록
             </v-btn>
           </v-card-actions>
         </v-card>
@@ -292,14 +478,19 @@ export default {
   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_content: {
+        price: 0,
+        is_adult: false,
+        is_comment_available: true,
+      },
       audio_contents: [],
-            curations: [],
+      themeList: [],
       selected_audio_content: {},
       utm_source: '',
       utm_medium: '',
@@ -308,6 +499,7 @@ export default {
   },
 
   async created() {
+    await this.getAudioContentThemeList()
     await this.getAudioContent()
   },
 
@@ -330,17 +522,20 @@ export default {
       this.show_delete_confirm_dialog = false
     },
 
+    showWriteDialog() {
+      this.show_create_dialog = true
+      this.audio_content.price = '0'
+    },
+
     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
+      this.audio_content.cover_image_url = item.coverImageUrl
-
       console.log(this.audio_content)
 
       this.show_modify_dialog = true
@@ -348,11 +543,122 @@ export default {
 
     cancel() {
       this.selected_audio_content = {}
-            this.audio_content = {}
+      this.audio_content = {
+        price: 0,
+        is_adult: false,
+        is_comment_available: true,
+      }
+      this.show_create_dialog = false
       this.show_modify_dialog = false
       this.show_delete_confirm_dialog = false
     },
 
+    contentAdd(payload) {
+      const file = payload;
+      if (file) {
+        this.audio_content.content_file_name = file.name
+        URL.revokeObjectURL(file)
+      } else {
+        this.audio_content.content_file_name = null
+      }
+    },
+
+    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 getAudioContentThemeList() {
+      this.is_loading = true
+      try {
+        const res = await api.getAudioContentThemeList()
+        if (res.status === 200 && res.data.success === true) {
+          this.themeList = res.data.data.map((item) => {
+            return {name: item.theme, value: item.id}
+          })
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+
+        this.is_loading = false
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      }
+    },
+
+    async save() {
+      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.audio_content.theme_id === null ||
+        this.audio_content.theme_id === undefined ||
+        this.audio_content.theme_id <= 0
+      ) {
+        this.notifyError("테마를 선택하세요")
+        return
+      }
+
+      if (this.is_loading) return;
+
+      this.isLoading = true
+
+      try {
+        const formData = new FormData()
+        const request = {
+          title: this.audio_content.title,
+          detail: this.audio_content.detail,
+          tags: this.audio_content.tags,
+          price: this.audio_content.price,
+          themeId: this.audio_content.theme_id,
+          isAdult: this.audio_content.is_adult,
+          isCommentAvailable: this.audio_content.is_comment_available,
+        }
+
+        formData.append("coverImage", this.audio_content.cover_image)
+        formData.append("contentFile", this.audio_content.content_file)
+        formData.append("request", JSON.stringify(request))
+
+        const res = await api.createAudioContent(formData)
+        if (res.status === 200 && res.data.success === true) {
+          this.cancel()
+          this.notifySuccess("등록한 콘텐츠가 업로드 중입니다.\n" +
+            "콘텐츠 등록이 완료되면 알림을 보내드립니다.\n" +
+            "이 페이지를 나가도 콘텐츠는 자동으로 등록됩니다.")
+
+          this.audio_contents = []
+          await this.getAudioContent()
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
     async modify() {
       if (
         this.audio_content.title === null ||
@@ -377,10 +683,8 @@ export default {
       this.isLoading = true
 
       try {
-                const request = {
+        const formData = new FormData()
-                    id: this.audio_content.id,
+        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 &&
@@ -408,8 +712,13 @@ export default {
           request.isCommentAvailable = this.audio_content.is_comment_available
         }
 
-                console.log(request)
+        if (this.audio_content.cover_image !== null) {
-                const res = await api.modifyAudioContent(request)
+          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('수정되었습니다.')
@@ -519,5 +828,43 @@ export default {
 </script>
 
 <style scoped>
+.content-select label {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #232d4a;
+  color: #fff;
+  vertical-align: middle;
+  font-size: 15px;
+  cursor: pointer;
+  border-radius: 5px;
+  margin-top: 30px;
+}
 
+.image-select label {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #232d4a;
+  color: #fff;
+  vertical-align: middle;
+  font-size: 15px;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.v-file-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+}
+
+.image-preview {
+  max-width: 100%;
+  max-height: 250px;
+  width: 250px;
+  object-fit: cover;
+  margin-top: 10px;
+}
 </style>