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/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,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>

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>