시리즈 상세페이지 추가

src/views/Content/ContentSeriesDetail.vue

@@ -0,0 +1,123 @@
+<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-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_detail: {},
+    }
+  },
+
+  async created() {
+    await this.getSeriesDetail()
+  },
+
+  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.$route.params.seriesId)
+        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
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.v-card__text {
+  text-align: left;
+}
+
+.cover-image {
+  aspect-ratio: 1/1.4;
+}
+</style>