refactor: vue-linkify로 리팩토링

woowacourse-teams · Sep 16, 2020 · 7c337b6 · 7c337b6
1 parent 0a268dd
commit 7c337b6
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 37 deletions.
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
@@ -16,11 +16,10 @@
     "register-service-worker": "^1.7.1",
     "request": "^2.88.2",
     "vue": "^2.6.11",
-    "vue-autolink": "0.0.11",
-    "vue-autolink-component": "^1.7.1",
     "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,8 +13,12 @@
           </v-flex>
         </v-layout>
       </v-card-title>
-      <v-card-text class="headline text-body-1 pb-0" style="color:rgb(0,0,0)">
-        <VueAutolinkComponent :message="this.article.content" />
+      <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>
 
       <v-card-actions>
@@ -79,8 +83,7 @@ import { REPORT_TYPE } from '@/utils/ReportType.js';
 
 import { mapActions } from 'vuex';
 import { LIKE_ARTICLE, UNLIKE_ARTICLE } from '@/store/shared/actionTypes';
-import VueAutolinkComponent from 'vue-autolink-component';
-import 'vue-autolink-component/dist/vue-autolink-component.css';
+import linkify from 'vue-linkify';
 
 export default {
   name: 'Card',
@@ -89,8 +92,10 @@ export default {
     EmotionImage,
     SubEmotionChips,
     ReportButton,
-    DetailCardMenu,
-    VueAutolinkComponent
+    DetailCardMenu
+  },
+  directives: {
+    linkified: linkify
   },
   methods: {
     ...mapActions([LIKE_ARTICLE, UNLIKE_ARTICLE]),