큐레이션 상세

- 리스트에서 제목 혹은 설명을 터치하면 상세페이지로 이동
- 상세페이지: 제목, 19금여부, 내용을 표시

src/router/index.js

@@ -80,6 +80,11 @@ const routes = [
                 name: 'ContentCuration',
                 component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentCuration.vue')
             },
+            {
+                path: '/content/curation/detail',
+                name: 'ContentCurationDetail',
+                component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentCurationDetail.vue')
+            },
             {
                 path: '/content/series/list',
                 name: 'ContentSeriesList',

src/views/Content/ContentCuration.vue

@@ -59,10 +59,14 @@
                   v-for="(item, index) in props.items"
                   :key="index"
                 >
-                  <td>
+                  <td
+                    @click="handleItemClick(item)"
+                  >
                     {{ item.title }}
                   </td>
-                  <td>
+                  <td
+                    @click="handleItemClick(item)"
+                  >
                     {{ item.description }}
                   </td>
                   <td>
@@ -353,6 +357,22 @@ export default {
             this.show_write_dialog = false
         },
 
+        handleItemClick(item) {
+            console.log(item)
+            this.$router.push(
+              {
+                name: 'ContentCurationDetail',
+                params: {
+                  curation_id: item.id,
+                  title: item.title,
+                  description: item.description,
+                  is_series: item.isSeries,
+                  is_adult: item.isAdult
+                }
+              }
+            )
+        },
+
         validate() {
             if (
               this.curation.tab_id === null ||

src/views/Content/ContentCurationDetail.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>{{ curation_title }}</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col
+          cols="4"
+          align="right"
+        >
+          19금 :
+        </v-col>
+        <v-col
+          cols="8"
+          align="left"
+        >
+          <div v-if="is_adult">
+            O
+          </div>
+          <div v-else>
+            X
+          </div>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col
+          cols="4"
+          align="right"
+        >
+          내용 :
+        </v-col>
+        <v-col
+          cols="8"
+          align="left"
+        >
+          <vue-show-more-text
+            :style="{ padding: '0' }"
+            :text="curation_description"
+            :lines="2"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import * as api from "@/api/audio_content"
+import VueShowMoreText from 'vue-show-more-text'
+
+export default {
+  name: 'ContentCurationDetail',
+
+  components: {VueShowMoreText},
+
+  data() {
+    return {
+      is_loading: false,
+      curation_id: 0,
+      curation_title: '',
+      curation_description: '',
+      is_series: false,
+      is_adult: false,
+
+      show_write_dialog: false,
+      show_delete_confirm_dialog: false,
+    }
+  },
+
+  async created() {
+    this.curation_id = this.$route.params.curation_id
+    this.curation_title = this.$route.params.title
+    this.curation_description = this.$route.params.description
+    this.is_series = this.$route.params.is_series
+    this.is_adult = this.$route.params.is_adult
+  },
+}
+</script>
+
+<style scoped>
+
+</style>