시리즈 상세 페이지 - 콘텐츠 리스트/콘텐츠 삭제 기능 추가

src/api/audio_content_series.js

@@ -42,7 +42,7 @@ async function addingContentToTheSeries(seriesId, contentIdList) {
 }
 
 async function removeContentInTheSeries(seriesId, contentId) {
-    return Vue.axios.post(
+    return Vue.axios.put(
         "/creator-admin/audio-content/series/remove/content",
         {seriesId: seriesId, contentId: contentId}
     )

src/router/index.js

@@ -30,6 +30,11 @@ const routes = [
                 name: 'ContentSeriesList',
                 component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentSeriesList.vue')
             },
+            {
+                path: '/content/series/detail',
+                name: 'ContentSeriesDetail',
+                component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentSeriesDetail.vue')
+            },
             {
                 path: '/calculate/live',
                 name: 'CalculateLive',

src/views/Content/ContentCategoryList.vue

@@ -339,33 +339,6 @@ export default {
 
       page: 1,
       total_page: 0,
-
-      headers: [
-        {
-          text: '커버이미지',
-          align: 'center',
-          sortable: false,
-          value: 'image',
-        },
-        {
-          text: '제목',
-          align: 'center',
-          sortable: false,
-          value: 'title',
-        },
-        {
-          text: '19금',
-          align: 'center',
-          sortable: false,
-          value: 'isAdult',
-        },
-        {
-          text: '관리',
-          align: 'center',
-          sortable: false,
-          value: 'management'
-        },
-      ]
     }
   },
 

src/views/Content/ContentList.vue

@@ -617,20 +617,6 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
-
-    <v-dialog
-      v-model="is_loading"
-      max-width="400px"
-      persistent
-    >
-      <v-card>
-        <v-card-text>
-          <v-progress-circular
-            indeterminate
-          />
-        </v-card-text>
-      </v-card>
-    </v-dialog>
   </div>
 </template>
 

src/views/Content/ContentSeriesDetail.vue

@@ -0,0 +1,262 @@
+<template>
+  <div>
+    <v-container>
+      <v-row>
+        <v-col cols="4">
+          <v-card>
+            <v-img
+              :src="series_detail.coverImageUrl"
+              class="cover-image"
+            />
+            <v-card-text>
+              제목 : {{ series_detail.title }}
+            </v-card-text>
+            <v-card-text>
+              소개 : <vue-show-more-text
+                :text="series_detail.introduction"
+                :lines="2"
+              />
+            </v-card-text>
+            <v-card-text>
+              연재요일 : {{ series_detail.publishedDaysOfWeek }}
+            </v-card-text>
+            <v-card-text>
+              장르 : {{ series_detail.genre }}
+            </v-card-text>
+            <v-card-text>
+              키워드 : {{ series_detail.keywords }}
+            </v-card-text>
+            <v-card-text>
+              연령제한 : <span v-if="series_detail.isAdult">19세이상</span><span v-else>전체이용가</span>
+            </v-card-text>
+            <v-card-text>
+              완결여부 : {{ series_detail.state }}
+            </v-card-text>
+            <v-card-text v-show="series_detail.writer !== undefined && series_detail.writer !== null">
+              작가 : {{ series_detail.writer }}
+            </v-card-text>
+            <v-card-text v-show="series_detail.studio !== undefined && series_detail.studio !== null">
+              제작사 : {{ series_detail.studio }}
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <v-col cols="8">
+          <v-row>
+            <v-col cols="6" />
+            <v-col cols="3">
+              <v-btn
+                block
+                color="#3bb9f1"
+                dark
+                depressed
+              >
+                콘텐츠 추가
+              </v-btn>
+            </v-col>
+            <v-col cols="3">
+              <v-btn
+                block
+                color="#3bb9f1"
+                dark
+                depressed
+              >
+                콘텐츠 등록
+              </v-btn>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col v-if="series_content_list.length > 0">
+              <v-simple-table>
+                <template>
+                  <thead>
+                    <tr>
+                      <th class="text-center">
+                        썸네일
+                      </th>
+                      <th class="text-center">
+                        제목
+                      </th>
+                      <th class="text-center">
+                        19금
+                      </th>
+                      <th class="text-center">
+                        관리
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="content in series_content_list"
+                      :key="content.contentId"
+                    >
+                      <td align="center">
+                        <v-img
+                          max-width="100"
+                          max-height="100"
+                          :src="content.coverImage"
+                        />
+                      </td>
+                      <td align="center">
+                        {{ content.title }}
+                      </td>
+                      <td align="center">
+                        <div v-if="content.isAdult">
+                          O
+                        </div>
+                        <div v-else>
+                          X
+                        </div>
+                      </td>
+                      <td align="center">
+                        <v-btn
+                          color="#3bb9f1"
+                          @click="removeContentInSeries(content)"
+                        >
+                          삭제
+                        </v-btn>
+                      </td>
+                    </tr>
+                  </tbody>
+                </template>
+              </v-simple-table>
+            </v-col>
+            <v-col
+              v-else
+              class="no-series-content"
+            >
+              등록된 콘텐츠가 없습니다.
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <v-dialog
+      v-model="is_loading"
+      max-width="400px"
+      persistent
+    >
+      <v-card>
+        <v-card-text>
+          <v-progress-circular
+            indeterminate
+          />
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import * as api from '@/api/audio_content_series';
+
+import VueShowMoreText from 'vue-show-more-text'
+
+export default {
+  name: "ContentSeriesDetail",
+
+  components: {VueShowMoreText},
+
+  data() {
+    return {
+      is_loading: false,
+      series_id: 0,
+      series_detail: {},
+      series_content_list: [],
+      selected_series_content: null,
+      page: 1,
+      total_page: 0,
+    }
+  },
+
+  async created() {
+    this.series_id = this.$route.params.seriesId
+    await this.getSeriesDetail()
+    await this.getSeriesContentList()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    async getSeriesDetail() {
+      this.is_loading = true
+
+      try {
+        const res = await api.getSeriesDetail(this.series_id)
+        if (res.status === 200 && res.data.success === true) {
+          this.series_detail = res.data.data
+        } else {
+          this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+
+    async getSeriesContentList() {
+      try {
+        const res = await api.getSeriesContent(this.series_id, this.page)
+        if (res.status === 200 && res.data.success === true) {
+          const data = res.data.data
+          this.series_content_list = data.items
+
+          const total_page = Math.ceil(data.totalCount / 20)
+          if (total_page <= 0)
+            this.total_page = 1
+          else
+            this.total_page = total_page
+        } else {
+          this.notifyError(res.data.message || '콘텐츠를 불러오지 못했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+      }
+    },
+
+    async removeContentInSeries(content) {
+      this.is_loading = true
+
+      try {
+        const res = await api.removeContentInTheSeries(this.series_id, content.contentId)
+
+        if (res.status === 200 && res.data.success === true) {
+          this.page = 1
+          this.total_page = 0
+          this.series_content_list = []
+          this.notifySuccess('삭제되었습니다.')
+          await this.getSeriesContentList()
+        } else {
+          this.notifyError('콘텐츠를 삭제하지 못했습니다. 다시 시도해 주세요.')
+        }
+      } catch (e) {
+        this.notifyError('콘텐츠를 삭제하지 못했습니다. 다시 시도해 주세요.')
+      } finally {
+        this.is_loading = false
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.v-card__text {
+  text-align: left;
+}
+
+.cover-image {
+  aspect-ratio: 1/1.4;
+}
+
+.no-series-content {
+  height: 50vh;
+  margin-top: 100px;
+}
+</style>

src/views/Content/ContentSeriesList.vue

@@ -31,7 +31,11 @@
           <v-card>
             <v-card-title>
               <v-spacer />
-              <v-img :src="item.coverImageUrl" />
+              <v-img
+                :src="item.coverImageUrl"
+                class="cover-image"
+                @click="selectSeries(item)"
+              />
               <v-spacer />
             </v-card-title>
             <v-card-text class="series-title-container">
@@ -322,6 +326,20 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <v-dialog
+      v-model="is_loading"
+      max-width="400px"
+      persistent
+    >
+      <v-card>
+        <v-card-text>
+          <v-progress-circular
+            indeterminate
+          />
+        </v-card-text>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -334,7 +352,6 @@ export default {
   data() {
     return {
       is_loading: false,
-      is_modify: false,
       show_write_dialog: false,
       show_delete_confirm_dialog: false,
       series: {is_adult: false, published_days_of_week: []},
@@ -348,7 +365,7 @@ export default {
         {value: 'MON', str: '월'},
         {value: 'TUE', str: '화'},
         {value: 'WED', str: '수'},
-        {value: 'THR', str: '목'},
+        {value: 'THU', str: '목'},
         {value: 'FRI', str: '금'},
         {value: 'SAT', str: '토'},
       ],
@@ -464,6 +481,10 @@ export default {
       this.submit();
     },
 
+    selectSeries(series) {
+      this.$router.push({name: 'ContentSeriesDetail', params: {seriesId: series.seriesId}})
+    },
+
     async getSeriesGenreList() {
       this.is_loading = true
       try {
@@ -588,8 +609,6 @@ export default {
           request.studio = this.series.studio
         }
 
-        console.log(request)
-
         const formData = new FormData()
         formData.append("request", JSON.stringify(request))
 
@@ -681,4 +700,8 @@ export default {
   -webkit-line-clamp: 2;
   max-height: 2em;
 }
+
+.cover-image {
+  aspect-ratio: 1/1.4;
+}
 </style>