View 이동시 Loading 추가

src/App.vue

@@ -9,11 +9,19 @@
         <router-view></router-view>
       </v-container>
     </v-content>
+    <v-overlay
+      :value="isPageLoading"
+    >
+      <v-progress-circular
+        indeterminate
+        size="64"
+      ></v-progress-circular>
+    </v-overlay>
   </v-app>
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { mapState, mapGetters, mapActions } from 'vuex';
 
 import NavigationBar from '@/components/NavigationBar.vue';
 import NavigationDrawer from '@/components/NavigationDrawer.vue';
@@ -27,6 +35,9 @@ export default {
   },
 
   computed: {
+    ...mapState([
+      'isPageLoading',
+    ]),
     ...mapGetters([
       'isLogin',
     ]),

src/router/index.js

@@ -27,6 +27,8 @@ const router = new VueRouter({
 });
 
 router.beforeEach(async (to, from, next) => {
+  Store.commit('setPageStartLoading');
+
   const res = await fetch(APISetting.endpoints.auth.check, APISetting.settings.get);
   if (res.status === 200) {
     const json = await res.json();
@@ -38,4 +40,8 @@ router.beforeEach(async (to, from, next) => {
   next();
 });
 
+router.afterEach(() => {
+  Store.commit('setPageFinishLoading');
+});
+
 export default router;

src/store/index.js

@@ -5,6 +5,7 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
+    isPageLoading: false,
     isNavDrawerVisible: true,
     loginUser: null,
   },
@@ -12,6 +13,12 @@ export default new Vuex.Store({
     isLogin: state => (state.loginUser !== null),
   },
   mutations: {
+    setPageStartLoading(state) {
+      state.isPageLoading = true;
+    },
+    setPageFinishLoading(state) {
+      state.isPageLoading = false;
+    },
     toggleNavDrawer(state) {
       state.isNavDrawerVisible = !state.isNavDrawerVisible;
     },