Merge pull request #194 from woowacourse-teams/feature/189-autolink

#189 게시글 본문의 웹 링크를 클릭하면 해당 사이트로 이동하도록 하기
woowacourse-teams · Sep 17, 2020 · df63069 · df63069
2 parents 1bdb447 + 7c337b6
commit df63069
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -19,6 +19,7 @@
     "vue-axios": "^2.1.5",
     "vue-chartjs": "^3.5.0",
     "vue-infinite-loading": "^2.4.5",
+    "vue-linkify": "^1.0.1",
     "vue-moment": "^4.1.0",
     "vue-router": "^3.2.0",
     "vuetify": "^2.2.11",

diff --git a/src/frontend/src/components/card/Card.vue b/src/frontend/src/components/card/Card.vue
@@ -13,11 +13,11 @@
           </v-flex>
         </v-layout>
       </v-card-title>
-
       <v-card-text
         class="headline text-body-1 pb-0"
         style="color:rgb(0,0,0)"
         v-html="article.content.replace(/(?:\r\n|\r|\n)/g, '<br />')"
+        v-linkified
       >
       </v-card-text>
 
@@ -83,6 +83,7 @@ import { REPORT_TYPE } from '@/utils/ReportType.js';
 
 import { mapActions } from 'vuex';
 import { LIKE_ARTICLE, UNLIKE_ARTICLE } from '@/store/shared/actionTypes';
+import linkify from 'vue-linkify';
 
 export default {
   name: 'Card',
@@ -93,6 +94,9 @@ export default {
     ReportButton,
     DetailCardMenu
   },
+  directives: {
+    linkified: linkify
+  },
   methods: {
     ...mapActions([LIKE_ARTICLE, UNLIKE_ARTICLE]),
     toggleLike() {