콘텐츠

- 내용, 태그를 3줄로 표시
- show more를 터치하면 전체내용 표시

package-lock.json

@@ -13,6 +13,7 @@
         "vue": "^2.6.11",
         "vue-excel-xlsx": "^1.2.2",
         "vue-router": "^3.2.0",
+        "vue-show-more-text": "^2.0.2",
         "vue2-editor": "^2.10.3",
         "vuedraggable": "^2.24.3",
         "vuejs-datetimepicker": "^1.1.13",
@@ -14602,6 +14603,15 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
       "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
     },
+    "node_modules/vue-show-more-text": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vue-show-more-text/-/vue-show-more-text-2.0.2.tgz",
+      "integrity": "sha512-x/WuikWAx8Hm4gpZx6KHtJYiXDordGdSoXrd34lTiJeAnlT8Y7Yc0FfGBNdUv6mXncuET3LiRwwNz+X5gI+oiw==",
+      "dependencies": {
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -27443,6 +27453,15 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
       "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
     },
+    "vue-show-more-text": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vue-show-more-text/-/vue-show-more-text-2.0.2.tgz",
+      "integrity": "sha512-x/WuikWAx8Hm4gpZx6KHtJYiXDordGdSoXrd34lTiJeAnlT8Y7Yc0FfGBNdUv6mXncuET3LiRwwNz+X5gI+oiw==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

package.json

@@ -15,6 +15,7 @@
     "vue": "^2.6.11",
     "vue-excel-xlsx": "^1.2.2",
     "vue-router": "^3.2.0",
+    "vue-show-more-text": "^2.0.2",
     "vue2-editor": "^2.10.3",
     "vuedraggable": "^2.24.3",
     "vuejs-datetimepicker": "^1.1.13",

src/views/Content/ContentList.vue

@@ -122,13 +122,19 @@
                   </td>
                   <td>{{ item.title }}</td>
                   <td style="max-width: 350px !important; word-break:break-all; height: auto;">
-                    {{ item.detail }}
+                    <vue-show-more-text
+                      :text="item.detail"
+                      :lines="3"
+                    />
                   </td>
                   <td>{{ item.curationTitle || '없음' }}</td>
                   <td>{{ item.creatorNickname }}</td>
                   <td>{{ item.theme }}</td>
                   <td style="max-width: 200px !important; word-break:break-all; height: auto;">
-                    {{ item.tags }}
+                    <vue-show-more-text
+                      :text="item.tags"
+                      :lines="3"
+                    />
                   </td>
                   <td v-if="item.price > 0">
                     {{ item.price }} 코인
@@ -369,11 +375,12 @@ import * as api from '@/api/audio_content'
 import * as dynamicLink from "@/api/firebase_dynamic_link";
 
 import VuetifyAudio from 'vuetify-audio'
+import VueShowMoreText from 'vue-show-more-text'
 
 export default {
   name: "AudioContentList",
 
-  components: {VuetifyAudio},
+  components: {VuetifyAudio, VueShowMoreText},
 
   data() {
     return {