콘텐츠 수정 - 태그 수정 추가

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>소다라이브</title>
+    <title>보이스온 크리에이터 관리자</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>

src/App.vue

@@ -7,7 +7,7 @@
       dark
     >
       <v-spacer />
-      <v-toolbar-title>소다라이브 크리에이터</v-toolbar-title>
+      <v-toolbar-title>보이스온 크리에이터 관리자</v-toolbar-title>
       <v-spacer />
     </v-app-bar>
 
@@ -39,11 +39,12 @@
   }
 }
 
-html::-webkit-scrollbar, body::-webkit-scrollbar {
+.noscroll {
   overflow-y: hidden;
 }
 
-html, body {
+.noscroll::-webkit-scrollbar {
   overflow-y: hidden;
+  display: none;
 }
 </style>

src/api/audio_content_series.js

@@ -5,7 +5,7 @@ async function getGenreList() {
 }
 
 async function getSeriesList(page) {
-    return Vue.axios.get("/creator-admin/audio-content/series?page=" + (page - 1) + "&size=10");
+    return Vue.axios.get("/creator-admin/audio-content/series?page=" + (page - 1) + "&size=20");
 }
 
 async function createSeries(formData) {

src/router/index.js

@@ -82,6 +82,12 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
     if (to.path !== '/login') {
+        if (to.path === '/content/series/list') {
+            document.documentElement.classList.add('noscroll'); // html에 클래스 추가
+        } else {
+            document.documentElement.classList.remove('noscroll');
+        }
+
         const isAuthenticated = store.getters['accountStore/isAuthenticated']
         if (isAuthenticated) {
             next();

src/views/Content/ContentList.vue

@@ -14,7 +14,7 @@
         <v-col>
           <v-btn
             block
-            color="#9970ff"
+            color="#3bb9f1"
             dark
             depressed
             @click="showWriteDialog"
@@ -227,6 +227,20 @@
               </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">
@@ -273,6 +287,22 @@
               </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_point_available"
+                  type="checkbox"
+                >
+              </v-col>
+            </v-row>
+          </v-card-text>
           <v-card-actions v-show="!is_loading">
             <v-spacer />
             <v-btn
@@ -454,7 +484,7 @@
                   label="가격"
                   required
                 />
-                ※ 유료 콘텐츠 가격을 입력하면 해당 콘텐츠의 미리듣기 시간을 설정할 수 있습니다.<br>미리듣기 시간은 최소 30초 이상 설정해야 합니다.
+                ※ 유료 콘텐츠 가격을 입력하면 해당 콘텐츠의 미리듣기 시간을 설정할 수 있습니다.<br>미리듣기 시간은 최소 15초 이상 설정해야 합니다.
               </v-col>
             </v-row>
           </v-card-text>
@@ -534,18 +564,52 @@
             </v-row>
           </v-card-text>
           <v-card-text v-show="audio_content.price > 0 && is_limited_edition === false">
-            <v-row>
+            <v-row align="center">
               <v-col cols="4">
-                대여만 가능
+                소장 설정
               </v-col>
-              <v-col
-                cols="8"
-                align="left"
-              >
-                <input
-                  v-model="audio_content.is_only_rental"
-                  type="checkbox"
+              <v-col cols="8">
+                <v-radio-group
+                  v-model="audio_content.purchase_option"
+                  row
                 >
+                  <v-radio
+                    value="BOTH"
+                    label="소장/대여"
+                  />
+                  <v-radio
+                    value="BUY_ONLY"
+                    label="소장만"
+                  />
+                  <v-radio
+                    value="RENT_ONLY"
+                    label="대여만"
+                  />
+                  <v-spacer />
+                </v-radio-group>
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-card-text v-show="audio_content.price >= 50">
+            <v-row align="center">
+              <v-col cols="4">
+                콘텐츠 내용 전체 오픈 설정
+              </v-col>
+              <v-col cols="8">
+                <v-radio-group
+                  v-model="audio_content.is_full_detail_visible"
+                  row
+                >
+                  <v-radio
+                    :value="false"
+                    label="구매한 사람만"
+                  />
+                  <v-radio
+                    :value="true"
+                    label="전체"
+                  />
+                  <v-spacer />
+                </v-radio-group>
               </v-col>
             </v-row>
           </v-card-text>
@@ -581,6 +645,22 @@
               </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_point_available"
+                  type="checkbox"
+                >
+              </v-col>
+            </v-row>
+          </v-card-text>
           <v-card-actions v-show="!is_loading">
             <v-spacer />
             <v-btn
@@ -666,15 +746,15 @@ export default {
       audio_content: {
         price: 0,
         is_adult: false,
+        is_point_available: false,
         is_generate_preview: false,
         is_comment_available: true,
+        is_full_detail_visible: true,
+        purchase_option: 'BOTH',
       },
       audio_contents: [],
       themeList: [],
       selected_audio_content: {},
-      utm_source: '',
-      utm_medium: '',
-      utm_campaign: '',
     }
   },
 
@@ -715,8 +795,10 @@ export default {
       this.audio_content.detail = item.detail
       this.audio_content.price = item.price
       this.audio_content.is_adult = item.isAdult
+      this.audio_content.is_point_available = item.isPointAvailable
       this.audio_content.is_comment_available = item.isCommentAvailable
       this.audio_content.cover_image_url = item.coverImageUrl
+      this.audio_content.tags = item.tags
       this.show_modify_dialog = true
     },
 
@@ -725,7 +807,10 @@ export default {
       this.audio_content = {
         price: 0,
         is_adult: false,
+        is_point_available: false,
         is_comment_available: true,
+        is_full_detail_visible: true,
+        purchase_option: 'BOTH',
       }
       this.reservation_time = ''
       this.reservation_time = ''
@@ -833,12 +918,14 @@ export default {
           themeId: this.audio_content.theme_id,
           isAdult: this.audio_content.is_adult,
           isGeneratePreview: this.audio_content.price > 0 ? this.audio_content.is_generate_preview : false,
-          isOnlyRental: this.audio_content.is_only_rental,
-          isCommentAvailable: this.audio_content.is_comment_available
+          purchaseOption: this.audio_content.purchase_option,
+          isPointAvailable: this.audio_content.is_point_available,
+          isCommentAvailable: this.audio_content.is_comment_available,
+          isFullDetailVisible: this.audio_content.is_full_detail_visible
         }
 
         if (this.audio_content.limited > 0) {
-          request.isOnlyRental = false
+          request.purchaseOption = 'BUY_ONLY'
         }
 
         if (this.audio_content.price > 0 && this.is_limited_edition === true) {
@@ -870,7 +957,7 @@ export default {
             !this.isValidTimeFormat(previewStartTime) ||
             !this.isValidTimeFormat(previewEndTime)
           ) {
-            this.notifyError("미리 듣기 시간 형식은 00:30:00 과 같아야 합니다")
+            this.notifyError("미리 듣기 시간 형식은 00:00:15 과 같아야 합니다")
             this.is_loading = false
             return
           }
@@ -882,8 +969,8 @@ export default {
           const totalSeconds2 = h2 * 3600 + m2 * 60 + s2;
           const timeDifference = totalSeconds2 - totalSeconds1;
 
-          if (timeDifference < 30) {
-            this.notifyError("미리 듣기의 최소 시간은 30초 입니다.")
+          if (timeDifference < 15) {
+            this.notifyError("미리 듣기의 최소 시간은 15초 입니다.")
             this.is_loading = false
             return
           }
@@ -974,6 +1061,10 @@ export default {
           request.isAdult = this.audio_content.is_adult
         }
 
+        if (this.selected_audio_content.isPointAvailable !== this.audio_content.is_point_available) {
+          request.isPointAvailable = this.audio_content.is_point_available
+        }
+
         if (this.selected_audio_content.isCommentAvailable !== this.audio_content.is_comment_available) {
           request.isCommentAvailable = this.audio_content.is_comment_available
         }
@@ -982,6 +1073,10 @@ export default {
           request.price = this.audio_content.price
         }
 
+        if (this.audio_content.tags !== this.selected_audio_content.tags) {
+          request.tags = this.audio_content.tags
+        }
+
         if (this.audio_content.cover_image !== null) {
           formData.append("coverImage", this.audio_content.cover_image)
         }

src/views/Content/ContentSeriesList.vue

@@ -35,7 +35,7 @@
           <v-col
             v-for="(item, i) in series_list"
             :key="i"
-            cols="3"
+            cols="2"
           >
             <v-card>
               <v-card-title>
@@ -696,10 +696,15 @@ export default {
 
 <style scoped>
 .scroll_container {
+  margin-top: 30px;
   height: 100vh;
   overflow-y: auto;
 }
 
+.scroll_container > .row {
+  padding-bottom: 280px;
+}
+
 .image-select label {
   display: inline-block;
   padding: 10px 20px;
@@ -737,6 +742,6 @@ export default {
 }
 
 .cover-image {
-  aspect-ratio: 1/1.4;
+  aspect-ratio: 1/1.3;
 }
 </style>