Merge pull request #254 from woowacourse-teams/develop

버전 1.4.0 릴리즈

build.gradle

@@ -45,6 +45,7 @@ dependencies {
     implementation 'org.springframework.boot:spring-boot-starter-web'
     implementation 'org.springframework.boot:spring-boot-starter-validation'
     implementation 'io.jsonwebtoken:jjwt:0.9.1'
+    implementation 'org.springframework.boot:spring-boot-starter-cache'
     compileOnly 'org.projectlombok:lombok'
     runtimeOnly 'com.h2database:h2'
     runtimeOnly 'mysql:mysql-connector-java'
@@ -79,7 +80,7 @@ jacocoTestCoverageVerification {
             limit {
                 counter = 'BRANCH'
                 value = 'COVEREDRATIO'
-                minimum = 0.00
+                minimum = 0.80
             }
         }
     }

src/frontend/src/api/modules/comment.js

@@ -9,6 +9,9 @@ const CommentService = {
       commentRequest
     );
   },
+  get(articleId) {
+    return ApiService.get(`${BASE_URL}/${articleId}/comments`);
+  },
   delete(params) {
     return ApiService.delete(
       `${BASE_URL}/${params.articleId}/comments/${params.commentId}`

src/frontend/src/components/EmotionFilter.vue

@@ -1,21 +1,17 @@
 <template>
   <v-card class="mx-auto rounded-lg" max-width="400">
     <v-row class="justify-center align-center">
-      <v-col
-        class="col-3"
-        style="font-size: 40px; text-align: center; line-height: 40px; padding: 10px 0px 12px 0px; "
-      >
-        <v-chip @click="selectAll()" :disabled="isSelectedAll()"
-          >모두 보기</v-chip
-        >
+      <v-col class="col-3 choice-all-text">
+        <v-chip @click="selectAll()">
+          {{ selectAllButtonText() }}
+        </v-chip>
       </v-col>
       <v-col
         v-for="emotion in emotions"
         :key="emotion.id"
         @click="toggleFeature(emotion)"
-        class="col-1"
-        :class="{ grayscale: !isSelected(emotion) }"
-        style="align: center; line-height: 40px; padding: 14px 0px 12px 0px;"
+        class="col-1 chip-text"
+        :class="{ grayscale: !isSelectedEmotion(emotion) }"
       >
         <v-img
           :src="emotion.imageResource"
@@ -46,11 +42,7 @@ export default {
       }
       this.allFilter = this.allFilter.sort();
       this.filter = this.allFilter.slice();
-
-      this.selectFilter({
-        emotionIds: this.filter.toString(),
-        isFiltered: !this.isSelectedAll()
-      });
+      this.applyFilter();
     });
   },
   computed: {
@@ -60,30 +52,37 @@ export default {
     ...mapActions([FETCH_EMOTIONS]),
     ...mapActions([SELECT_FILTER]),
     toggleFeature(emotion) {
-      if (this.isSelected(emotion)) {
+      if (this.isSelectedEmotion(emotion)) {
         const idx = this.filter.indexOf(emotion.id);
         this.filter.splice(idx, 1);
       } else {
         this.filter.push(emotion.id);
         this.filter = this.filter.sort();
       }
-      this.selectFilter({
-        emotionIds: this.filter.toString(),
-        isFiltered: !this.isSelectedAll()
-      });
+      this.applyFilter();
+    },
+    selectAll() {
+      if (this.isSelectedAll()) {
+        this.filter = [];
+      } else {
+        this.filter = this.allFilter.slice();
+      }
+      this.applyFilter();
     },
-    isSelected(emotion) {
+    isSelectedEmotion(emotion) {
       return this.filter.includes(emotion.id);
     },
     isSelectedAll() {
       return this.filter.length === this.allFilter.length;
     },
-    selectAll() {
-      this.filter = this.allFilter.slice();
+    applyFilter() {
       this.selectFilter({
         emotionIds: this.filter.toString(),
         isFiltered: !this.isSelectedAll()
       });
+    },
+    selectAllButtonText() {
+      return this.isSelectedAll() ? '전체 해제' : '전체 선택';
     }
   }
 };
@@ -94,4 +93,14 @@ export default {
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
 }
+.choice-all-text {
+  font-size: 40px;
+  text-align: center;
+  line-height: 40px;
+  padding: 10px 0px 12px 0px;
+}
+.chip-text {
+  line-height: 40px;
+  padding: 14px 0px 12px 0px;
+}
 </style>

src/frontend/src/components/ReportButton.vue

@@ -23,8 +23,7 @@
                 v-model="choiceCategory"
               >
                 <v-chip
-                  class="ma-1"
-                  style="font-size: 12px; padding: 5px"
+                  class="ma-1 report-category-text"
                   v-for="reportCategory in this.reportCategories"
                   @click="invalidCategoryChoice = false"
                   :key="reportCategory.id"
@@ -73,11 +72,14 @@
 </template>
 <script>
 import { REPORT_TARGET } from '@/utils/ReportTarget.js';
-import { SHOW_SNACKBAR } from '@/store/shared/mutationTypes';
 import {
   CREATE_REPORT,
   FETCH_REPORT_CATEGORIES
 } from '@/store/shared/actionTypes';
+import {
+  SHOW_SNACKBAR,
+  SHOW_REQUEST_LOGIN_MODAL
+} from '@/store/shared/mutationTypes';
 
 import { mapActions, mapGetters, mapMutations } from 'vuex';
 
@@ -88,17 +90,20 @@ export default {
       dialog: false,
       choiceCategory: undefined,
       invalidCategoryChoice: false,
-      textContent: ''
+      textContent: '',
+      token: localStorage.getItem('token')
     };
   },
   created() {
     this.fetchReportCategories();
   },
   computed: {
-    ...mapGetters(['reportCategories'])
+    ...mapGetters(['reportCategories']),
+    ...mapGetters(['reportTarget'])
   },
   methods: {
     ...mapMutations([SHOW_SNACKBAR]),
+    ...mapMutations([SHOW_REQUEST_LOGIN_MODAL]),
     ...mapActions([FETCH_REPORT_CATEGORIES]),
     ...mapActions([CREATE_REPORT]),
     onReport() {
@@ -111,8 +116,8 @@ export default {
     submitReport() {
       const reportCreateRequest = {
         content: this.textContent,
-        targetContentId: this.targetContentId,
-        reportTarget: this.reportTarget.toString(),
+        targetContentId: this.reportTarget.contentId,
+        reportTarget: this.reportTarget.target,
         reportCategoryId: this.reportCategories[this.choiceCategory].id
       };
       this.createReport(reportCreateRequest)
@@ -129,9 +134,17 @@ export default {
       this.choiceCategory = undefined;
       this.textContent = '';
       this.dialog = true;
+      this.checkLoginUser();
+      this.$emit('click');
+    },
+    checkLoginUser() {
+      if (this.token === null) {
+        this.dialog = false;
+        this.showRequestLoginModal();
+      }
     },
     getReportTargetText() {
-      switch (this.reportTarget) {
+      switch (this.reportTarget.target) {
         case REPORT_TARGET.ARTICLE:
           return '게시물';
         case REPORT_TARGET.COMMENT:
@@ -140,18 +153,6 @@ export default {
           return '게시물';
       }
     }
-  },
-  props: {
-    reportTarget: {
-      type: String,
-      required: true,
-      default: ''
-    },
-    targetContentId: {
-      type: Number,
-      required: true,
-      default: 0
-    }
   }
 };
 </script>
@@ -163,4 +164,8 @@ export default {
 .caption {
   font-weight: lighter;
 }
+.report-category-text {
+  font-size: 12px;
+  padding: 5px;
+}
 </style>

src/frontend/src/components/card/Card.vue

@@ -51,21 +51,20 @@
                 </div>
               </div>
               <div
-                v-if="article.isCommentAllowed && article.comments.length > 0"
+                v-if="article.isCommentAllowed && article.commentsSize > 0"
                 style="float:left;"
               >
                 <v-icon style="font-size:20px;" class="mr-1"
                   >mdi-comment-outline</v-icon
                 >
-                <span class="subheading">{{ article.comments.length }}</span>
+                <span class="subheading">{{ article.commentsSize }}</span>
               </div>
               <v-spacer />
             </v-col>
             <v-col align="right" justify="end" style="padding:0px" cols="2">
               <report-button
                 v-if="!article.isMine"
-                :reportTarget="getReportTarget()"
-                :targetContentId="article.id"
+                @click="changeReportTarget()"
               />
             </v-col>
           </v-row>
@@ -83,8 +82,9 @@ import ReportButton from '@/components/ReportButton';
 import DetailCardMenu from '@/components/card/DetailCardMenu';
 import { REPORT_TARGET } from '@/utils/ReportTarget.js';
 
-import { mapActions } from 'vuex';
+import { mapActions, mapMutations } from 'vuex';
 import { LIKE_ARTICLE, UNLIKE_ARTICLE } from '@/store/shared/actionTypes';
+import { SET_REPORT_TARGET } from '@/store/shared/mutationTypes';
 import linkify from 'vue-linkify';
 
 export default {
@@ -100,23 +100,21 @@ export default {
     linkified: linkify
   },
   methods: {
+    ...mapMutations([SET_REPORT_TARGET]),
     ...mapActions([LIKE_ARTICLE, UNLIKE_ARTICLE]),
     toggleLike() {
       event.stopPropagation();
       if (this.article.isLikedByMe) {
-        this.unlikeArticle(this.article.id).then(() => {
-          this.article.isLikedByMe = false;
-          this.article.likesCount--;
-        });
+        this.unlikeArticle(this.article);
       } else {
-        this.likeArticle(this.article.id).then(() => {
-          this.article.isLikedByMe = true;
-          this.article.likesCount++;
-        });
+        this.likeArticle(this.article);
       }
     },
-    getReportTarget() {
-      return REPORT_TARGET.ARTICLE;
+    changeReportTarget() {
+      this.setReportTarget({
+        target: REPORT_TARGET.ARTICLE,
+        contentId: this.article.id
+      });
     },
     clickCardContent() {
       this.$emit('clickCardContent');

src/frontend/src/components/comment/Comment.vue

@@ -55,11 +55,7 @@
         </div>
         <v-spacer />
         <div class="pb-2 pr-2">
-          <report-button
-            v-if="!comment.isMine"
-            :reportTarget="getReportTarget()"
-            :targetContentId="comment.id"
-          />
+          <report-button v-if="!comment.isMine" @click="changeReportTarget()" />
         </div>
       </v-flex>
     </v-card>
@@ -74,7 +70,10 @@ import ReportButton from '@/components/ReportButton';
 import { REPORT_TARGET } from '@/utils/ReportTarget.js';
 import { mapActions, mapGetters, mapMutations } from 'vuex';
 import { LIKE_COMMENT, UNLIKE_COMMENT } from '@/store/shared/actionTypes';
-import { ACTIVATE_RECOMMENT } from '@/store/shared/mutationTypes';
+import {
+  ACTIVATE_RECOMMENT,
+  SET_REPORT_TARGET
+} from '@/store/shared/mutationTypes';
 
 export default {
   name: 'Comment',
@@ -88,36 +87,22 @@ export default {
     CommentMenu,
     ReportButton
   },
-  props: {
-    comment: {
-      type: Object,
-      required: true
-    }
-  },
   methods: {
     ...mapMutations([ACTIVATE_RECOMMENT]),
+    ...mapMutations([SET_REPORT_TARGET]),
     ...mapActions([LIKE_COMMENT, UNLIKE_COMMENT]),
     toggleLike() {
       if (this.comment.isLikedByMe) {
-        this.unlikeComment({
-          articleId: this.article.id,
-          commentId: this.comment.id
-        }).then(() => {
-          this.comment.isLikedByMe = false;
-          this.comment.likesCount--;
-        });
+        this.unlikeComment(this.comment);
       } else {
-        this.likeComment({
-          articleId: this.article.id,
-          commentId: this.comment.id
-        }).then(() => {
-          this.comment.isLikedByMe = true;
-          this.comment.likesCount++;
-        });
+        this.likeComment(this.comment);
       }
     },
-    getReportTarget() {
-      return REPORT_TARGET.COMMENT;
+    changeReportTarget() {
+      this.setReportTarget({
+        target: REPORT_TARGET.COMMENT,
+        contentId: this.comment.id
+      });
     },
     specifyMemberToRecomment() {
       this.activateRecomment({
@@ -132,7 +117,13 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['article'])
+    ...mapGetters(['article', 'comments'])
+  },
+  props: {
+    comment: {
+      type: Object,
+      required: true
+    }
   }
 };
 </script>