(10.5) 404 페이지 및 세부 오류 수정

src/api/AxiosInstanceController.js

@@ -35,7 +35,7 @@ function setInterceptors (instance) {
           accountsApi.refreshToken()
         } else {
           accountsApi.logout()
-          console.logt('토큰 만료, 재로그인 필요')
+          console.log('토큰 만료, 재로그인 필요')
           userStore.commit('dialogOpen', 'login')
         }
       } else if (error.response.status === 400) {

src/components/Error/NotFound.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="d-flex justify-center" style="height:calc(99vh - 84px)">
+          <img style="width:78%; max-width:500px;" src="@/assets/error/404.svg">
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/components/MyPage/Notifications.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <v-container
+      v-for="post in posts"
+      :key="post.id"
+      :to="{
+        name: post.category_set.app + 'Detail',
+        params: {
+          subtopic: post.category_set.slug,
+          postId: post.id,
+        },
+      }"
+    >
+      <v-row class="ml-10 mt-8">
+        <v-col cols="1" class="mr-5">
+          <v-avatar class="profile" color="grey" size="50">
+            <v-img
+              src="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"
+            ></v-img>
+          </v-avatar>
+        </v-col>
+        <v-col cols="10">
+          <v-row
+            align="center"
+            justify="start"
+            style="color: #a6a6a6; font-size: 12px"
+          >
+            <!-- {{ post.category_set.name }} -->
+          </v-row>
+          <v-row>
+            <v-col cols="9" class="px-0">{{ post.title.substr(0, 40) }}</v-col>
+            <v-col
+              cols="3"
+              class="text-right pr-0"
+              style="color: #a6a6a6; font-size: 12px"
+            >
+              <v-icon dense size="14" color="#A6A6A6">mdi-eye</v-icon>
+              {{ post.hit }}
+              <v-icon dense size="14" color="#A6A6A6" class="ml-2"
+                >mdi-fire</v-icon
+              >
+              {{ post.postlike_n }}
+              <v-icon dense size="14" color="#A6A6A6" class="ml-2">
+                mdi-message-processing-outline
+              </v-icon>
+              {{ post.comment_n }}
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+      <v-row><v-divider class="mx-8"></v-divider> </v-row>
+    </v-container>
+  </div>
+</template>
+<script>
+
+import postApi from '@/api/modules/post'
+import accountApi from '@/api/modules/accounts'
+
+import { mapState } from 'vuex'
+
+export default {
+  data: () => ({
+    posts: []
+  }),
+
+  computed: {
+    ...mapState('userStore', ['user'])
+  },
+
+  async created () {
+    await accountApi.getMyDetail()
+    postApi.getPostsByUser(this, this.user.username)
+  }
+}
+</script>

src/router/index.js

@@ -15,6 +15,9 @@ import PitAPat from '@/components/PitAPat/PitAPat.vue'
 import MyPage from '@/components/MyPage/MyPage.vue'
 import Profile from '@/components/MyPage/Profile.vue'
 import MyPosts from '@/components/MyPage/MyPosts.vue'
+import Notifications from '@/components/MyPage/Notifications.vue'
+
+import NotFound from '@/components/Error/NotFound.vue'
 
 Vue.use(Router)
 
@@ -23,6 +26,17 @@ export default new Router({
   routes: [
     { path: '/', component: MainHome, name: 'home' },
 
+    {
+      path: '*',
+      redirect: '/404'
+    },
+
+    {
+      path: '/404',
+      name: 'notFound',
+      component: NotFound
+    },
+
     {
       path: '/social',
       component: Social,
@@ -91,8 +105,10 @@ export default new Router({
       props: true,
       children: [
         { path: 'profile', component: Profile },
-        { path: 'posts', component: MyPosts }
+        { path: 'posts', component: MyPosts },
+        { path: 'notifications', component: Notifications }
       ]
     }
+
   ]
 })