Merge pull request #198 from woowacourse-teams/develop

버전 1.1 릴리즈

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",

src/frontend/src/api/modules/report.js

@@ -0,0 +1,11 @@
+import ApiService from '@/api';
+
+const BASE_URL = '/report';
+
+const ReportService = {
+  getCategories() {
+    return ApiService.get(`${BASE_URL}/category`);
+  }
+};
+
+export default ReportService;

src/frontend/src/components/ReportButton.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <v-icon
+      @click.stop="onClickAlarmButton()"
+      color="red darken-4"
+      style="font-size:20px;"
+      >mdi-alarm-light-outline</v-icon
+    >
+    <v-dialog v-model="dialog" max-width="400">
+      <v-card>
+        <v-card-title class="text-h7 pl-3">
+          이 {{ getReportTypeText() }}을 신고하시겠어요?
+        </v-card-title>
+
+        <v-card-actions>
+          <v-row>
+            <v-col cols="12" align="center" justify="end">
+              <v-chip-group
+                active-class="deep-purple--text text--accent-4"
+                column
+                align="center"
+                justify="end"
+                v-model="choiceCategory"
+              >
+                <v-chip
+                  class="ma-1"
+                  style="font-size: 12px; padding: 5px"
+                  v-for="reportCategory in this.reportCategories"
+                  @click="invalidCategoryChoice = false"
+                  :key="reportCategory.id"
+                >
+                  {{ reportCategory.name }}
+                </v-chip>
+              </v-chip-group>
+
+              <div style="padding-left: 10px;">
+                <h5
+                  v-if="this.invalidCategoryChoice"
+                  style="color: red; font-weight: lighter"
+                  align="left"
+                >
+                  신고하시는 이유를 선택해 주세요
+                </h5>
+              </div>
+            </v-col>
+            <v-col cols="12">
+              <v-textarea
+                solo
+                auto-grow
+                hide-details
+                rows="1"
+                name="input-7-4"
+                label="상세한 내용을 적어주세요"
+                v-model="textContent"
+              />
+            </v-col>
+            <v-col cols="12" align="right" justify="end">
+              <v-btn color="#B2A4D4" text @click="dialog = false">아니요</v-btn>
+              <v-btn color="#B2A4D4" text @click="onReport">네, 할게요</v-btn>
+            </v-col>
+          </v-row>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+<script>
+import { REPORT_TYPE } from '@/utils/ReportType.js';
+import { mapMutations } from 'vuex';
+import { SHOW_SNACKBAR } from '@/store/shared/mutationTypes';
+
+export default {
+  name: 'ReportButton',
+  data() {
+    return {
+      dialog: false,
+      reportCategories: [
+        { id: 1, name: '광고 목적 게시' },
+        { id: 2, name: '모욕적인 표현' },
+        { id: 3, name: '불쾌한 표현' }
+      ],
+      choiceCategory: undefined,
+      invalidCategoryChoice: false,
+      textContent: ''
+    };
+  },
+  methods: {
+    ...mapMutations([SHOW_SNACKBAR]),
+    onReport() {
+      if (this.choiceCategory === undefined) {
+        this.invalidCategoryChoice = true;
+        return;
+      }
+      //todo : 여기에 신고 연산이 들어간다
+
+      this.dialog = false;
+      this.showSnackbar('신고가 접수되었습니다. 감사합니다.');
+    },
+    onClickAlarmButton() {
+      this.invalidCategoryChoice = false;
+      this.choiceCategory = undefined;
+      this.textContent = '';
+      this.dialog = true;
+    },
+    getReportTypeText() {
+      switch (this.reportType) {
+        case REPORT_TYPE.ARTICLE:
+          return '게시물';
+        case REPORT_TYPE.COMMENT:
+          return '댓글';
+        default:
+          return '게시물';
+      }
+    }
+  },
+  props: {
+    reportType: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    reportedId: {
+      type: Number,
+      required: true,
+      default: 0
+    }
+  }
+};
+</script>

src/frontend/src/components/Snackbar.vue

@@ -6,6 +6,8 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { mapMutations } from 'vuex';
+import { HIDE_SNACKBAR } from '@/store/shared/mutationTypes';
 
 export default {
   name: 'Snackbar',
@@ -14,10 +16,18 @@ export default {
   },
   watch: {
     isShow() {
-      this.showSnackbar(this.message);
+      if (this.isShow === true) {
+        this.showSnackbar(this.message);
+      }
+    },
+    snackbar() {
+      if (this.snackbar === false) {
+        this.hideSnackbar();
+      }
     }
   },
   methods: {
+    ...mapMutations([HIDE_SNACKBAR]),
     showSnackbar(msg) {
       this.snackbarMsg = msg;
       this.snackbar = true;

src/frontend/src/components/Tutorial.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-row justify="center">
+    <v-dialog v-model="dialog" persistent max-width="400">
+      <v-card>
+        <v-carousel :continuous="false" hide-delimiters height="auto">
+          <v-carousel-item
+            v-for="(item, i) in items"
+            :key="i"
+            reverse-transition="fade-transition"
+            transition="fade-transition"
+            eager
+            ><v-img :src="item.src" height="100%" eager />
+          </v-carousel-item>
+        </v-carousel>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="purple darken-5" text @click="closeTutorial()"
+            >시작해볼게요</v-btn
+          >
+          <v-spacer></v-spacer>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-row>
+</template>
+
+<script>
+export default {
+  props: ['dialog'],
+  data() {
+    return {
+      items: [
+        {
+          src: '/img/tutorial_1.png'
+        },
+        {
+          src: '/img/tutorial_2.png'
+        },
+        {
+          src: '/img/tutorial_3.png'
+        },
+        {
+          src: '/img/tutorial_4.png'
+        },
+        {
+          src: '/img/tutorial_5.png'
+        },
+        {
+          src: '/img/tutorial_6.png'
+        },
+        {
+          src: '/img/tutorial_7.png'
+        }
+      ]
+    };
+  },
+  methods: {
+    closeTutorial() {
+      localStorage.setItem('tutorial_check', 'yes');
+      this.dialog = false;
+    }
+  }
+};
+</script>

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

@@ -1,15 +1,24 @@
 <template>
   <v-container ma-0 pa-0>
-    <v-card class="mx-auto" max-width="400" v-on:click="onClickCard">
+    <v-card class="mx-auto" max-width="400">
       <v-card-title class="pa-2">
         <v-layout align-center="">
           <emotion-image :emotion="article.emotion" />
           <sub-emotion-chips :subEmotions="article.subEmotions" />
+          <v-flex justify-end>
+            <detail-card-menu
+              :articleId="this.article.id"
+              v-if="article.isMine"
+            />
+          </v-flex>
         </v-layout>
       </v-card-title>
-
-      <v-card-text class="headline text-body-1 pb-0" style="color:rgb(0,0,0)">
-        {{ 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>
@@ -49,6 +58,13 @@
                 >
                 <span class="subheading">{{ article.comments.length }}</span>
               </div>
+              <v-spacer />
+            </v-col>
+            <v-col align="right" justify="end" style="padding:0px" cols="2">
+              <report-button
+                :reportType="getReportType()"
+                :reportedId="article.id"
+              />
             </v-col>
           </v-row>
         </v-list-item>
@@ -61,23 +77,28 @@
 import CreatedDate from '@/components/CreatedDate';
 import EmotionImage from '@/components/card/EmotionImage';
 import SubEmotionChips from '@/components/card/SubEmotionChips';
+import ReportButton from '@/components/ReportButton';
+import DetailCardMenu from '@/components/card/DetailCardMenu';
+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',
   components: {
     CreatedDate,
     EmotionImage,
-    SubEmotionChips
+    SubEmotionChips,
+    ReportButton,
+    DetailCardMenu
+  },
+  directives: {
+    linkified: linkify
   },
   methods: {
     ...mapActions([LIKE_ARTICLE, UNLIKE_ARTICLE]),
-    onClickCard: function() {
-      this.$router.push({
-        path: this.$router.history.current.path + '/' + this.article.id
-      });
-    },
     toggleLike() {
       event.stopPropagation();
       if (this.article.isLikedByMe) {
@@ -91,6 +112,9 @@ export default {
           this.article.likesCount++;
         });
       }
+    },
+    getReportType() {
+      return REPORT_TYPE.ARTICLE;
     }
   },
   props: {

src/frontend/src/components/card/Cards.vue

@@ -1,7 +1,12 @@
 <template>
   <v-container pa-0>
     <v-row dense>
-      <v-col v-for="article in articles" :key="article.id" cols="12">
+      <v-col
+        v-for="article in articles"
+        :key="article.id"
+        cols="12"
+        v-on:click="onClickCard(article)"
+      >
         <card :article="article"></card>
       </v-col>
     </v-row>
@@ -13,6 +18,13 @@ import Card from '@/components/card/Card.vue';
 
 export default {
   name: 'Cards',
+  methods: {
+    onClickCard: function(article) {
+      this.$router.push({
+        path: this.$router.history.current.path + '/' + article.id
+      });
+    }
+  },
   components: {
     Card
   },