Merge pull request #213 from woowacourse-teams/develop

버전 1.2 릴리즈
woowacourse-teams · Sep 25, 2020 · 66dc6a5 · 66dc6a5
2 parents f565f12 + a66e0b1
commit 66dc6a5
Show file tree

Hide file tree

Showing 56 changed files with 1,168 additions and 72 deletions.
diff --git a/src/docs/asciidoc/api-docs.adoc b/src/docs/asciidoc/api-docs.adoc
@@ -84,3 +84,34 @@ operation::analysis/articles[snippets='http-request,http-response,request-header
 === 댓글 분석 조회
 
 operation::analysis/comments[snippets='http-request,http-response,request-headers,response-fields']
+
+[[resources-likes]]
+== Likes
+
+[[resources-likes-article]]
+=== 게시글 공감
+
+operation::likes/article[snippets='http-request,http-response,path-parameters,request-headers,response-headers']
+
+[[resources-unlikes-article]]
+=== 게시글 공감 취소
+
+operation::unlikes/article[snippets='http-request,http-response,path-parameters,request-headers']
+
+[[resources-likes-comment]]
+=== 댓글 공감
+
+operation::likes/comment[snippets='http-request,http-response,path-parameters,request-headers,response-headers']
+
+[[resources-unlikes-comment]]
+=== 댓글 공감 취소
+
+operation::unlikes/comment[snippets='http-request,http-response,path-parameters,request-headers']
+
+[[resources-reports]]
+== Reports
+
+[[resources-reports-categories]]
+=== 신고 분류 전체 조회
+
+operation::reports/categories[snippets='http-request,http-response,request-headers,response-fields']
diff --git a/src/frontend/public/index.html b/src/frontend/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
     <meta content="IE=edge" http-equiv="X-UA-Compatible" />

diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
@@ -2,15 +2,18 @@
   <div>
     <router-view />
     <Snackbar />
+    <RequestLoginModal />
   </div>
 </template>
 
 <script>
 import Snackbar from './components/Snackbar';
+import RequestLoginModal from '@/components/RequestLoginModal.vue';
 export default {
   name: 'App',
   components: {
-    Snackbar
+    Snackbar,
+    RequestLoginModal
   }
 };
 </script>

diff --git a/src/frontend/src/api/modules/member.js b/src/frontend/src/api/modules/member.js
@@ -0,0 +1,11 @@
+import ApiService from '@/api';
+
+const BASE_URL = '/member';
+
+const Member = {
+  delete() {
+    return ApiService.delete(`${BASE_URL}`);
+  }
+};
+
+export default Member;
diff --git a/src/frontend/src/api/modules/report.js b/src/frontend/src/api/modules/report.js
@@ -1,10 +1,22 @@
 import ApiService from '@/api';
 
-const BASE_URL = '/report';
+const BASE_URL = '/reports';
 
 const ReportService = {
   getCategories() {
-    return ApiService.get(`${BASE_URL}/category`);
+    return ApiService.get(`/reports/categories`);
+  },
+  create(report) {
+    return ApiService.post(`${BASE_URL}`, report);
+  },
+  get(reportId) {
+    return ApiService.get(`${BASE_URL}/${reportId}`);
+  },
+  getAll(params) {
+    return ApiService.getWithParams(`${BASE_URL}`, params);
+  },
+  delete(reportId) {
+    return ApiService.delete(`${BASE_URL}/${reportId}`);
   }
 };
 

diff --git a/src/frontend/src/components/LogoutButton.vue b/src/frontend/src/components/LogoutButton.vue
@@ -30,9 +30,13 @@ export default {
   methods: {
     ...mapMutations([SHOW_SNACKBAR]),
     logout() {
-      localStorage.clear();
+      if (this.$router.currentRoute.name === 'Feed') {
+        this.$router.go();
+      } else {
+        this.$router.push('/feed').catch(() => {});
+      }
+      localStorage.removeItem('token');
       this.showSnackbar('성공적으로 로그아웃되었어요. 안녕히 가세요👋');
-      this.$router.replace({ name: 'SignIn' });
     }
   }
 };

diff --git a/src/frontend/src/components/ReportButton.vue b/src/frontend/src/components/ReportButton.vue
@@ -36,10 +36,17 @@
               <div style="padding-left: 10px;">
                 <h5
                   v-if="this.invalidCategoryChoice"
-                  style="color: red; font-weight: lighter"
+                  class="alertCaption"
                   align="left"
                 >
-                  신고하시는 이유를 선택해 주세요
+                  신고 분류를 선택해 주세요
+                </h5>
+                <h5
+                  v-if="this.choiceCategory !== undefined"
+                  class="caption"
+                  align="left"
+                >
+                  {{ reportCategories[this.choiceCategory].content }}
                 </h5>
               </div>
             </v-col>
@@ -66,26 +73,30 @@
 </template>
 <script>
 import { REPORT_TYPE } from '@/utils/ReportType.js';
-import { mapMutations } from 'vuex';
 import { SHOW_SNACKBAR } from '@/store/shared/mutationTypes';
+import { FETCH_REPORT_CATEGORIES } from '@/store/shared/actionTypes';
+
+import { mapMutations, mapActions, mapGetters } from 'vuex';
 
 export default {
   name: 'ReportButton',
   data() {
     return {
       dialog: false,
-      reportCategories: [
-        { id: 1, name: '광고 목적 게시' },
-        { id: 2, name: '모욕적인 표현' },
-        { id: 3, name: '불쾌한 표현' }
-      ],
       choiceCategory: undefined,
       invalidCategoryChoice: false,
       textContent: ''
     };
   },
+  created() {
+    this.fetchReportCategories();
+  },
+  computed: {
+    ...mapGetters(['reportCategories'])
+  },
   methods: {
     ...mapMutations([SHOW_SNACKBAR]),
+    ...mapActions([FETCH_REPORT_CATEGORIES]),
     onReport() {
       if (this.choiceCategory === undefined) {
         this.invalidCategoryChoice = true;
@@ -127,3 +138,12 @@ export default {
   }
 };
 </script>
+<style scoped>
+.alertCaption {
+  color: red;
+  font-weight: lighter;
+}
+.caption {
+  font-weight: lighter;
+}
+</style>
diff --git a/src/frontend/src/components/RequestLoginModal.vue b/src/frontend/src/components/RequestLoginModal.vue
@@ -0,0 +1,48 @@
+<template>
+  <v-container justify="center">
+    <v-dialog max-width="290" persistent v-model="isShowRequestLoginModal">
+      <v-card>
+        <v-card-title class="headline">
+          반가워요👋
+        </v-card-title>
+        <v-card-text>
+          새벽이 마음에 들었나요?<br />
+          소셜 로그인으로 간단하게 회원가입하고 모든 기능을 사용해보세요!
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn @click="goToFeed" color="grey darken-1" text>
+            돌아가기
+          </v-btn>
+          <v-btn @click="goToSignIn" color="deep-purple darken-1" text>
+            로그인
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex';
+import { HIDE_REQUEST_LOGIN_MODAL } from '@/store/shared/mutationTypes';
+export default {
+  name: 'Login',
+  computed: {
+    ...mapGetters(['isShowRequestLoginModal'])
+  },
+  methods: {
+    ...mapMutations([HIDE_REQUEST_LOGIN_MODAL]),
+    goToFeed() {
+      this.hideRequestLoginModal();
+      this.$router.push('/feed');
+    },
+    goToSignIn() {
+      this.hideRequestLoginModal();
+      this.$router.push('/signin');
+    }
+  }
+};
+</script>
+
+<style scoped></style>
diff --git a/src/frontend/src/components/SettingButton.vue b/src/frontend/src/components/SettingButton.vue
@@ -0,0 +1,91 @@
+<template>
+  <v-menu bottom left>
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn icon v-bind="attrs" v-on="on">
+        <v-icon>mdi-account-settings</v-icon>
+      </v-btn>
+    </template>
+
+    <v-list>
+      <v-list-item @click.stop="logoutDialog = true">
+        <v-list-item-title>로그아웃</v-list-item-title>
+        <v-dialog v-model="logoutDialog" max-width="290">
+          <v-card>
+            <v-card-title class="text-h6"
+              >정말 로그아웃 하시겠어요?
+            </v-card-title>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="#B2A4D4" text @click="logoutDialog = false"
+                >아니요
+              </v-btn>
+              <v-btn color="#B2A4D4" text @click="logout">네, 할게요</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-list-item>
+      <v-list-item @click.stop="dialog = true">
+        <v-list-item-title>탈퇴</v-list-item-title>
+        <v-dialog v-model="dialog" max-width="290">
+          <v-card>
+            <v-card-title class="text-h6">정말 떠나시는 거예요?😭</v-card-title>
+            <v-card-text>
+              * 탈퇴 시 작성하신 게시글은 자동으로 삭제되지 않습니다. <br />
+              * 개인정보(소셜 로그인 식별 번호)는 삭제되며, 추후 같은 소셜
+              로그인 아이디로 다시 가입하시더라도 작성하셨던 게시글을 열람이나
+              삭제할 수 없습니다.
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn color="#B2A4D4" text @click="dialog = false">아니요</v-btn>
+              <v-btn color="red darken-4" text @click="unregister"
+                >탈퇴하기
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+import { mapActions, mapMutations } from 'vuex';
+import { SHOW_SNACKBAR } from '@/store/shared/mutationTypes';
+import { DELETE_MEMBER } from '@/store/shared/actionTypes';
+
+export default {
+  data() {
+    return {
+      dialog: false,
+      logoutDialog: false
+    };
+  },
+  methods: {
+    ...mapActions([DELETE_MEMBER]),
+    ...mapMutations([SHOW_SNACKBAR]),
+    logout() {
+      if (this.$router.currentRoute.name === 'Feed') {
+        this.$router.go();
+      } else {
+        this.$router.push('/feed').catch(() => {});
+      }
+      localStorage.removeItem('token');
+      this.showSnackbar('성공적으로 로그아웃되었어요. 안녕히 가세요👋');
+    },
+    unregister() {
+      this.deleteMember()
+        .then(() => {
+          localStorage.clear();
+          this.showSnackbar('성공적으로 탈퇴되었어요. 안녕히 가세요👋');
+          this.$router.replace({ name: 'SignIn' });
+        })
+        .catch(() => {
+          location.href = '/error';
+        });
+    }
+  }
+};
+</script>
+
+<style></style>
diff --git a/src/frontend/src/components/Tutorial.vue b/src/frontend/src/components/Tutorial.vue
@@ -56,8 +56,8 @@ export default {
   },
   methods: {
     closeTutorial() {
+      this.$emit('closeTutorial');
       localStorage.setItem('tutorial_check', 'yes');
-      this.dialog = false;
     }
   }
 };

diff --git a/src/frontend/src/components/card/Card.vue b/src/frontend/src/components/card/Card.vue
@@ -15,9 +15,10 @@
       </v-card-title>
       <v-card-text
         class="headline text-body-1 pb-0"
-        style="color:rgb(0,0,0)"
+        style="color:rgb(0,0,0); min-height:10px"
         v-html="article.content.replace(/(?:\r\n|\r|\n)/g, '<br />')"
         v-linkified
+        @click="clickCardContent()"
       >
       </v-card-text>
 
@@ -62,6 +63,7 @@
             </v-col>
             <v-col align="right" justify="end" style="padding:0px" cols="2">
               <report-button
+                v-if="!article.isMine"
                 :reportType="getReportType()"
                 :reportedId="article.id"
               />
@@ -115,6 +117,9 @@ export default {
     },
     getReportType() {
       return REPORT_TYPE.ARTICLE;
+    },
+    clickCardContent() {
+      this.$emit('clickCardContent');
     }
   },
   props: {