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

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/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/ContentSeriesDetail.vue

@@ -41,7 +41,92 @@
           </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>
@@ -75,12 +160,19 @@ export default {
   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: {
@@ -96,7 +188,7 @@ export default {
       this.is_loading = true
 
       try {
-        const res = await api.getSeriesDetail(this.$route.params.seriesId)
+        const res = await api.getSeriesDetail(this.series_id)
         if (res.status === 200 && res.data.success === true) {
           this.series_detail = res.data.data
         } else {
@@ -108,6 +200,48 @@ export default {
         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>
@@ -120,4 +254,9 @@ export default {
 .cover-image {
   aspect-ratio: 1/1.4;
 }
+
+.no-series-content {
+  height: 50vh;
+  margin-top: 100px;
+}
 </style>