From 919efd48cf9f31173226a467ea817343f9ef084b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=A0=ED=99=98?= <witty_man@naver.com>
Date: Sun, 15 Nov 2020 02:03:54 +0900
Subject: [PATCH] [S03P31A503-109] feature/FE/meetinganalysis : Add meeting
 analysis design

---
 frontend/package-lock.json                    | 158 +++++++++++-------
 frontend/package.json                         |   2 +
 frontend/src/components/Info.vue              |  17 +-
 .../src/components/mypage/AlcoholTypeChart.js |  20 +++
 frontend/src/components/mypage/Analysis.vue   |  50 +++++-
 frontend/src/components/mypage/Calendar.vue   |   2 +-
 frontend/src/components/mypage/RecentChart.js |  47 ++++++
 frontend/src/router/index.js                  |   6 +
 frontend/src/store/index.js                   |   4 +-
 frontend/src/store/modules/mypageStore.js     | 118 +++++++++++++
 frontend/src/views/MyPage.vue                 |  62 +++++--
 frontend/src/views/ProfilePage.vue            |  29 ++++
 12 files changed, 432 insertions(+), 83 deletions(-)
 create mode 100644 frontend/src/components/mypage/AlcoholTypeChart.js
 create mode 100644 frontend/src/components/mypage/RecentChart.js
 create mode 100644 frontend/src/store/modules/mypageStore.js
 create mode 100644 frontend/src/views/ProfilePage.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ab70113..f5ff879 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1607,6 +1607,14 @@
         "@types/node": "*"
       }
     },
+    "@types/chart.js": {
+      "version": "2.9.27",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.27.tgz",
+      "integrity": "sha512-b3ho2RpPLWzLzOXKkFwpvlRDEVWQrCknu2/p90mLY5v2DO8owk0OwWkv4MqAC91kJL52bQGXkVw/De+N/0/1+A==",
+      "requires": {
+        "moment": "^2.10.2"
+      }
+    },
     "@types/connect": {
       "version": "3.4.33",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz",
@@ -2116,37 +2124,6 @@
         "webpack-merge": "^4.2.2"
       },
       "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
         "debug": {
           "version": "4.2.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
@@ -2155,30 +2132,6 @@
           "requires": {
             "ms": "2.1.2"
           }
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-rc.1",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-rc.1.tgz",
-          "integrity": "sha512-yR+BS90EOXTNieasf8ce9J3TFCpm2DGqoqdbtiwQ33hon3FyIznLX7sKavAq1VmfBnOeV6It0Htg4aniv8ph1g==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -3582,6 +3535,32 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.js": {
+      "version": "2.9.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
+      "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -3865,7 +3844,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       },
@@ -3873,8 +3851,7 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-          "dev": true
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
         }
       }
     },
@@ -16190,6 +16167,14 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
     },
+    "vue-chartjs": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-3.5.1.tgz",
+      "integrity": "sha512-foocQbJ7FtveICxb4EV5QuVpo6d8CmZFmAopBppDIGKY+esJV8IJgwmEW0RexQhxqXaL/E1xNURsgFFYyKzS/g==",
+      "requires": {
+        "@types/chart.js": "^2.7.55"
+      }
+    },
     "vue-circular-count-down-timer": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/vue-circular-count-down-timer/-/vue-circular-count-down-timer-1.0.4.tgz",
@@ -16282,6 +16267,63 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-rc.1.tgz",
+      "integrity": "sha512-yR+BS90EOXTNieasf8ce9J3TFCpm2DGqoqdbtiwQ33hon3FyIznLX7sKavAq1VmfBnOeV6It0Htg4aniv8ph1g==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "vue-moment": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-4.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e311796..81fa7ab 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/components/Info.vue b/frontend/src/components/Info.vue
index b845d27..0eaffc7 100644
--- a/frontend/src/components/Info.vue
+++ b/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)
diff --git a/frontend/src/components/mypage/AlcoholTypeChart.js b/frontend/src/components/mypage/AlcoholTypeChart.js
new file mode 100644
index 0000000..e99b6d9
--- /dev/null
+++ b/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"
+        }
+    },
+    });
+  }
+};
\ No newline at end of file
diff --git a/frontend/src/components/mypage/Analysis.vue b/frontend/src/components/mypage/Analysis.vue
index b339318..6496d0c 100644
--- a/frontend/src/components/mypage/Analysis.vue
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/components/mypage/Calendar.vue b/frontend/src/components/mypage/Calendar.vue
index 72ffc55..2cf2023 100644
--- a/frontend/src/components/mypage/Calendar.vue
+++ b/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'
diff --git a/frontend/src/components/mypage/RecentChart.js b/frontend/src/components/mypage/RecentChart.js
new file mode 100644
index 0000000..263443f
--- /dev/null
+++ b/frontend/src/components/mypage/RecentChart.js
@@ -0,0 +1,47 @@
+import { Bar } from "vue-chartjs";
+
+export default {
+  extends: Bar,
+  props: {
+    data: Object
+  },
+  mounted() {
+    this.renderChart(this.data, 
+      {
+        scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero: true,
+              fontColor: "#FEFEFE"
+            },
+            gridLines: {
+              display: true
+            }
+          }],
+          xAxes: [{
+            ticks: {
+              beginAtZero: true,
+              fontColor: "#FEFEFE"
+            },
+            gridLines: {
+              display: false
+            }
+          }]
+        },
+        legend: {
+          display: false,
+        },
+        tooltips: {
+          enabled: true,
+          mode: 'single',
+          callbacks: {
+            label: function(tooltipItems) {
+              return tooltipItems.yLabel;
+            }
+          }
+        },
+        responsive: true,
+        maintainAspectRatio: true,
+      })
+  }
+};
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index eff001e..617a652 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -4,6 +4,7 @@ import store from "../store";
 
 import HomePage from '@/views/HomePage';
 import RegisterPage from '@/views/RegisterPage';
+import ProfilePage from '@/views/ProfilePage';
 import MeetingPage from '@/views/MeetingPage';
 // MyPage
 import MyPage from '@/views/MyPage';
@@ -23,6 +24,11 @@ const routes = [
     name: 'RegisterPage',
     component: RegisterPage,
   },
+  {
+    path: '/profile',
+    name: 'ProfilePage',
+    component: ProfilePage,
+  },
   {
     path: '/meet/:sessionId',
     name: 'MeetingPage',
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 8d127bd..45e2481 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -9,6 +9,8 @@ import cookies from 'vue-cookies';
 
 import SERVER from '@/api/api';
 import meetingStore from '@/store/modules/meetingStore';
+import mypageStore from '@/store/modules/mypageStore';
+
 
 Vue.use(Vuex);
 
@@ -48,7 +50,6 @@ export default new Vuex.Store({
     },
     setUser(state, payload) {
       state.user = payload;
-      console.log(state.user);
     },
     setId(state, payload) {
       state.id = payload;
@@ -105,5 +106,6 @@ export default new Vuex.Store({
   },
   modules: {
     meetingStore: meetingStore,
+    mypageStore: mypageStore,
   },
 });
diff --git a/frontend/src/store/modules/mypageStore.js b/frontend/src/store/modules/mypageStore.js
new file mode 100644
index 0000000..eb05546
--- /dev/null
+++ b/frontend/src/store/modules/mypageStore.js
@@ -0,0 +1,118 @@
+import SERVER from '@/api/api';
+import axios from 'axios';
+
+const mypageStore = {
+  namespaced: true,
+  state: {
+    recentData: null,
+    alcoholTypeData: null
+  },
+  getters: {
+
+  },
+  mutations: {
+    SET_RECENT_DATA(state, value) {
+      state.recentData = value
+    },
+    SET_ALCOHOL_TYPE_DATA(state, value) {
+      state.alcoholTypeData = value
+    }
+  },
+  actions: {
+    fetchAnalysisData({ commit, rootState, rootGetters }) {
+      if (rootState.user) {
+        axios.get(SERVER.URL + SERVER.ROUTES.user + `/${rootState.user.id}/statistics`, rootGetters.config)
+          .then(res => {
+            // recent
+            const recentData = {
+              labels: [],
+              datasets: [
+                {
+                  xAxisID: 0,
+                  yAxisID: 0,
+                  label: '최근 음주 통계',
+                  backgroundColor: '#58b04a',
+                  data: []
+                }
+              ]
+            }
+            res.data.recordStatistics10days.forEach(day => {
+              recentData.labels.push(day.date)
+              let totalValue = 0;
+              day.userRecord.forEach(record => {
+                totalValue = totalValue + record.liquorLimit
+              })
+              recentData.datasets[0].data.push(totalValue);
+            })
+            commit('SET_RECENT_DATA', recentData)
+  
+            // alcoholType
+            const alcoholTypeData = {
+              hoverBackgroundColor: "red",
+              hoverBorderWidth: 10,
+              labels: [],
+              datasets: [
+                {
+                  label: "주종 통계",
+                  backgroundColor: [],
+                  data: []
+                }
+              ]
+            }
+
+            let typeData = res.data.recordStatistics;
+            let drinkColors = ['#CB997E', '#02323A', '#988148', '#8D9365', '#f194ff', '#BF5B04'];
+            if (typeData.length > 5) {
+              for (let i = 0; i < 5; i++) {
+                if (typeData[i].liquorName.includes('소주')) {
+                  alcoholTypeData.datasets[0].backgroundColor.push('#58b04a');
+                } else if (typeData[i].liquorName.includes('맥주')) {
+                  alcoholTypeData.datasets[0].backgroundColor.push('#e3bc3b');
+                } else if (typeData[i].liquorName.includes('와인')) {
+                  alcoholTypeData.datasets[0].backgroundColor.push('#940620');
+                } else if (typeData[i].liquorName.includes('막걸리')) {
+                  alcoholTypeData.datasets[0].backgroundColor.push('#e3e0cf');
+                } else {
+                  alcoholTypeData.datasets[0].backgroundColor.push(drinkColors[i]);
+                }
+                alcoholTypeData.labels.push(typeData[i].liquorName);
+                alcoholTypeData.datasets[0].data.push(typeData[i].liquorLimit)
+              }
+              
+              let etcCount = 0
+              for (let i = 5; i < typeData.length; i++) {
+                etcCount += typeData[i].liquorLimit
+              }
+              alcoholTypeData.labels.push('기타');
+              alcoholTypeData.datasets[0].data.push(etcCount);
+              alcoholTypeData.datasets[0].backgroundColor.push('##878787');
+              commit('SET_ALCOHOL_TYPE_DATA', alcoholTypeData)
+  
+            } else {
+              for (let j = 0; j < typeData.length - 1; j++) {
+                if (typeData[j].liquorName.includes('소주')) {
+                  alcoholTypeData.datasets[0].backgroundColor.push('#58b04a');
+                } else if (typeData[j].liquorName.includes('맥주')) {
+                  alcoholTypeData.datasets[0].backgroundColor.push('#e3bc3b');
+                } else if (typeData[j].liquorName.includes('와인')) {
+                  alcoholTypeData.datasets[0].backgroundColor.push('#940620');
+                } else if (typeData[j].liquorName.includes('막걸리')) {
+                  alcoholTypeData.datasets[0].backgroundColor.push('#e3e0cf');
+                } else {
+                  alcoholTypeData.datasets[0].backgroundColor.push(drinkColors[j]);
+                }
+                alcoholTypeData.labels.push(typeData[j].liquorName)
+                alcoholTypeData.datasets[0].data.push(typeData[j].liquorLimit)
+              }
+              commit('SET_ALCOHOL_TYPE_DATA', alcoholTypeData)
+            }
+          })
+          .catch(err => {
+            console.log(err.response.data)
+          })
+      }
+    }
+  }
+}
+
+export default mypageStore
\ No newline at end of file
diff --git a/frontend/src/views/MyPage.vue b/frontend/src/views/MyPage.vue
index 28fab74..fa70573 100644
--- a/frontend/src/views/MyPage.vue
+++ b/frontend/src/views/MyPage.vue
@@ -1,26 +1,23 @@
 <template>
-  <div>
-    <div class="d-flex m-auto profile">
+  <div class="container">
+    <div class="d-flex mx-auto profile">
       <img src="@/assets/images/host.png" alt="프로필" />
     </div>
-    <div class="d-flex">
-      <div class="box margin-left">
-        <router-link 
-          class="link"
-          :to="{ name: 'Calendar' }"
-        >음주 달력</router-link>
+    <p class="mb-0 mx-auto text-white">{{ user.name }}</p>
+    <div class="d-flex justify-content-between">
+      <div :class="{ 'box-selected': ($route.name === 'Calendar'), 'box': ($route.name !== 'Calendar')}" @click="clickCalendar">
+        <h3 class="mb-0">음주 달력</h3>
       </div>
-      <div class="name d-flex justify-content-center">
-        <p class="m-0 d-flex align-items-center">{{ user.name }}</p>
+      <div class="name d-flex justify-content-center" v-if="user">
+        <button class="btn px-2 edit-profile" @click="clickEditProfile">
+          프로필 수정
+        </button>
       </div>
-      <div class="box">
-        <router-link 
-          class="link"
-          :to="{ name: 'Analysis' }"
-        >음주 분석</router-link>
+      <div :class="{ 'box-selected': ($route.name === 'Analysis'), 'box': ($route.name !== 'Analysis')}" @click="clickAnalysis">
+        <h3 class="mb-0">음주 분석</h3>
       </div>
     </div>
-    <router-view></router-view>
+    <router-view class="mt-5"></router-view>
   </div>  
 </template>
 
@@ -32,10 +29,22 @@ export default {
     ...mapState(['user'])
   },
   methods: {
-    ...mapActions(['getMyInfo'])
+    ...mapActions(['getMyInfo']),
+    clickEditProfile() {
+      this.$router.push({ name: 'ProfilePage'})
+    },
+    clickCalendar() {
+      this.$router.push({ name: 'Calendar'})
+    },
+    clickAnalysis() {
+      this.$router.push({ name: 'Analysis'})
+    }
   },
   created() {
-    this.getMyInfo
+    this.getMyInfo();
+  },
+  mounted() {
+    this.$router.push({ name: 'Calendar'})
   }
 }
 </script>
@@ -48,6 +57,17 @@ export default {
 .box {
   background-color: #FFFF00;
   width: 30vw;
+  cursor: pointer;
+  padding-top: 1vh;
+  padding-bottom: 1vh;
+}
+
+.box-selected {
+  background-color: #ffd000;
+  width: 30vw;
+  cursor: pointer;
+  padding-top: 1vh;
+  padding-bottom: 1vh;
 }
 
 .name {
@@ -75,4 +95,10 @@ img {
   color: black !important;
   text-decoration: none;
 }
+
+.edit-profile {
+  /* background-color: #b7e3a4; */
+  border: 1px solid white;
+  color: white;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/ProfilePage.vue b/frontend/src/views/ProfilePage.vue
new file mode 100644
index 0000000..c7bdc8d
--- /dev/null
+++ b/frontend/src/views/ProfilePage.vue
@@ -0,0 +1,29 @@
+<template>
+  <div id="wrapregister">
+    <info :username="user.name" :useremail="user.email" :userdrinks="user.drinks" />
+  </div>
+</template>
+
+<script>
+import Info from "@/components/Info.vue";
+import { mapState } from 'vuex';
+export default {
+  name: 'ProfilePage',
+  components: {
+    Info,
+  },
+  computed: {
+    ...mapState(['user'])
+  },
+}
+</script>
+
+<style scoped>
+#wrapregister {
+  background-color: rgba(255, 255, 255, 0.1);
+  margin: auto;
+  width: 60%;
+  height: 70%;
+  border-radius: 25px;
+}
+</style>
\ No newline at end of file