콘텐츠 업로드 기능 추가

src/api/audio_content.js

@@ -31,9 +31,14 @@ async function createAudioContent(formData) {
     });
 }
 
+async function getAudioContentThemeList() {
+    return Vue.axios.get("/audio-content/theme")
+}
+
 export {
     createAudioContent,
     getAudioContentList,
     searchAudioContent,
-    modifyAudioContent
+    modifyAudioContent,
+    getAudioContentThemeList
 }

src/views/Content/ContentList.vue

@@ -9,6 +9,20 @@
     <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">
@@ -63,7 +77,6 @@
                       max-width="100"
                       max-height="100"
                       :src="item.coverImageUrl"
-                      class="rounded-circle"
                     />
                   </td>
                   <td>{{ item.title }}</td>
@@ -149,11 +162,12 @@
           </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>
@@ -194,7 +208,7 @@
           <v-card-text>
             <v-row>
               <v-col cols="4">
-                19금
+                연령제한
               </v-col>
               <v-col
                 cols="8"
@@ -244,6 +258,182 @@
       </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_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>
+            </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="save"
+            >
+              등록
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+
     <v-dialog
       v-model="show_delete_confirm_dialog"
       max-width="400px"
@@ -294,9 +484,13 @@ export default {
       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: '',
@@ -305,6 +499,7 @@ export default {
   },
 
   async created() {
+    await this.getAudioContentThemeList()
     await this.getAudioContent()
   },
 
@@ -327,13 +522,17 @@ 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.cover_image_url = item.coverImageUrl
@@ -344,11 +543,26 @@ 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) {
@@ -359,6 +573,92 @@ export default {
       }
     },
 
+    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 ||
@@ -528,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>