[S03P31A503-109] feature/FE/meetinganalysis : Add meeting analysis de…

…sign

frontend/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.21.0",
+    "chart.js": "^2.9.4",
     "core-js": "^3.6.5",
     "firebase": "^8.0.1",
     "html2canvas": "^1.0.0-rc.7",
@@ -20,6 +21,7 @@
     "sweetalert2": "^10.8.1",
     "v-calendar": "^2.0.1",
     "vue": "^2.6.11",
+    "vue-chartjs": "^3.5.1",
     "vue-circular-count-down-timer": "^1.0.4",
     "vue-cookies": "^1.7.4",
     "vue-moment": "^4.1.0",

frontend/src/components/Info.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="myinfo">
-    <h1 id="title">회원가입</h1>
+    <h1 id="title" v-if="$route.name === 'RegisterPage'">회원가입</h1>
+    <h1 id="title" v-if="$route.name === 'ProfilePage'">프로필</h1>
     <div class="d-flex flex-column form">
       <div class="row no-gutters">
         <div class="col-sm-4 infotitle">
@@ -84,9 +85,17 @@
         <button
           class="btn btn-lg btn-yellow"
           @click="clickSignup"
+          v-if="$route.name === 'RegisterPage'"
         >
           가입하기
         </button>
+        <button
+          class="btn btn-lg btn-yellow"
+          @click="clickSignup"
+          v-if="$route.name === 'ProfilePage'"
+        >
+          수정하기
+        </button>
       </div>
     </div>
 
@@ -169,7 +178,11 @@ export default {
           headers: {'X-AUTH-TOKEN' : this.$store.state.token}
         })
           .then(() => {
-            this.$router.push('/')
+            if (this.$route.name === 'RegisterPage') {
+              this.$router.push('/')
+            } else if (this.$route.name === 'ProfilePage') {
+              this.$router.push({ name: 'MyPage'})
+            }
           })
           .catch((err) => {
             console.log(err)

frontend/src/components/mypage/AlcoholTypeChart.js

@@ -0,0 +1,20 @@
+import { Doughnut } from "vue-chartjs";
+
+export default {
+  extends: Doughnut,
+  props: {
+    data: Object
+  },
+  mounted() {
+    this.renderChart(this.data, {
+      borderWidth: "10px",
+      hoverBackgroundColor: "red",
+      hoverBorderWidth: "10px",
+      legend: {
+        labels: {
+            fontColor: "#FEFEFE"
+        }
+    },
+    });
+  }
+};

frontend/src/components/mypage/Analysis.vue

@@ -1,15 +1,59 @@
 <template>
-  <div>
-
+  <div class="mx-auto mt-3">
+    <div class="row no-gutters">
+      <div class="col-5">
+        <h3 class="analysis-title">최근 음주 통계</h3>
+        <div v-if="recentData">
+          <recent class="analysis" :data="recentData"></recent>
+        </div>
+      </div>
+      <div class="col-5 offset-2">
+        <h3 class="analysis-title">주종 통계</h3>
+        <div v-if="alcoholTypeData">
+          <alcohol-type class="analysis" :data="alcoholTypeData"></alcohol-type>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapActions, mapState } from 'vuex';
+import Recent from "@/components/mypage/RecentChart.js";
+import AlcoholType from "@/components/mypage/AlcoholTypeChart.js";
+
 export default {
-  name: 'Analysis'
+  name: 'Analysis',
+  components: {
+    Recent,
+    AlcoholType
+  },
+  computed: {
+    ...mapState(['user']),
+    ...mapState('mypageStore', ['recentData', 'alcoholTypeData'])
+  },
+  watch: {
+    user() {
+      this.fetchAnalysisData();
+    }
+  },
+  methods: {
+    ...mapActions('mypageStore', ['fetchAnalysisData'])
+  },
+  created() {
+    this.fetchAnalysisData();
+  }
 }
 </script>
 
 <style scoped>
+.analysis-title {
+  color: white !important;
+}
 
+.analysis {
+  max-width: 25vw;
+  margin-left: auto;
+  margin-right: auto;
+}
 </style>

frontend/src/components/mypage/Calendar.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="p-3 container">
+    <div>
       <vc-calendar
         class="custom-calendar"
         :attributes='attributes'