[K5P-78] [fix] 403, 통신오류 화면 추가

src/components/common/btn/WhiteIconBtn.vue

@@ -0,0 +1,30 @@
+<template>
+  <button class="icon-btn" @click="func">
+    <span>{{ title }}</span>
+    <i :class="icon"></i>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'ColorIconBtnVue',
+  props: {
+    title: String,
+    icon: String,
+    func: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .icon-btn {
+    @include flex-box(row, center, 10px);
+    @include base-button();
+    padding: 7px 15px;
+    background-color: white;
+    border: none;
+    i {
+      font-size: 22px
+    }
+  }
+</style>

src/components/static/InvoiceDoughnutChart.vue

@@ -64,7 +64,7 @@ export default {
     }
   },
   // 생성시 통계 데이터 불러오기
-  async created() {
+  async mounted() {
     const result = await getAllStatic();
 
     if (result.code !== 200) {

src/components/static/ProgressBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="static-box">
     <div class="title-box">
-      {{ staticStore.thisMonthData.month }}월 납부 상태
+      {{ month }}월 납부 상태
     </div>
     <div class="info-box">
       <div class="data-box">
@@ -28,28 +28,36 @@ import { formatNumber } from '@/utils/formatter';
 
 export default {
   name: 'ProgressBoxvue',
+  data() {
+    return {
+      today: new Date()
+    }
+  },
   computed: {
     ...mapStores(useStaticStore),
     // 납부금 통화 표시
     totalCollected() {
-      return formatNumber(this.staticStore.thisMonthData.totalCollected);
+      return this.staticStore.thisMonthData? formatNumber(this.staticStore.thisMonthData.totalCollected) : 0;
     },
     // 미납금 통화 표시
     outstanding() {
       return formatNumber(this.staticStore.thisMonthData.outstanding);
     },
+    year() {
+      return this.today.getFullYear();
+    },
+    month() {
+      return this.today.getMonth();
+    }
   },
   async mounted() {
     // 이번 달 데이터 불러오기
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = today.getMonth();
-
     const result = await getThisMonthStatic(
-      month === 0 ? year - 1 : year,
-      month === 0 ? 12 : month);
-
-    this.staticStore.setThisMonthData(result.data[0]);
+      this.month === 0 ? this.year - 1 : this.year,
+      this.month === 0 ? 12 : this.month);
+    if (result.code === 200 && result.data[0]) {
+      this.staticStore.setThisMonthData(result.data[0]);
+    }
   }
 }
 </script>

src/components/static/ThisMonthStatic.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="static-box">
     <div class="title-box">
-      {{ staticStore.thisMonthData.month }}월 청구 상태
+      {{ month }}월 청구 상태
     </div>
     <div class="info-box">
       <div class="data-box">
@@ -40,31 +40,43 @@ import { formatNumber } from '@/utils/formatter';
 
 export default {
   name: 'ThisMonthStaticvue',
+  data() {
+    return {
+      today: new Date()
+    }
+  },
   computed: {
     ...mapStores(useStaticStore),
     // 이번 달 청구액 통화 표시
     thisMonthTotal() {
       return formatNumber(this.staticStore.thisMonthData.totalInvoiced);
     },
+    year() {
+      return this.today.getFullYear();
+    },
+    month() {
+      return this.today.getMonth();
+    }
   },
   async mounted() {
     // 지난 달 데이터 불러오기
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = today.getMonth();
 
     const prevMonthResult = await getThisMonthStatic(
-      month - 1 === 0 ? year - 1 : year,
-      month - 1 === 0 ? 12 : month - 1);
+      this.month - 1 === 0 ? this.year - 1 : this.year,
+      this.month - 1 === 0 ? 12 : this.month - 1);
 
-    this.staticStore.setPrevMonthData(prevMonthResult.data[0]);
+    if (prevMonthResult.code === 200 && prevMonthResult.data[0]) {
+      this.staticStore.setPrevMonthData(prevMonthResult.data[0]);
+    }
 
     // 지난 해 데이터 불러오기
     const prevYearResult = await getThisMonthStatic(
-      month === 0 ? year - 2 : year - 1,
-      month === 0 ? 12 : month - 1);
+      this.month === 0 ? this.year - 2 : this.year - 1,
+      this.month === 0 ? 12 : this.month - 1);
 
-    this.staticStore.setPrevYearData(prevYearResult.data[0]);
+    if (prevYearResult.code === 200 && prevYearResult.data[0]) {
+      this.staticStore.setPrevYearData(prevYearResult.data[0]);
+    }
   }
 }
 </script>

src/main.js

@@ -9,7 +9,7 @@ import piniaPersist from 'pinia-plugin-persist'
 
 import App from './App.vue'
 import router from './router'
-import { useLoadingStore } from './stores/loading'
+import { useLoadingStore } from './stores/error/loading'
 
 const app = createApp(App)
 const pinia = createPinia();

src/router/index.js

@@ -93,11 +93,6 @@ const router = createRouter({
           name:'settingPayment',
           component: () => import('@/views/setting/SettingPaymentView.vue')
         },
-        {
-          path : '/no-data',
-          name: 'noData',
-          component: () => import('@/views/error/NoDataView.vue')
-        }
       ]
     },
     {
@@ -263,7 +258,25 @@ const router = createRouter({
       ]
     },
     {
-      path: "/notFound",
+      path: "/server-error",
+      name: "serverError",
+      meta: { 
+        requiresAuth: false,
+        forMember: true,
+      },
+      component: () => import('@/views/error/ServerErrorView.vue')
+    },
+    {
+      path: "/access-denied",
+      name: "accessDenied",
+      meta: { 
+        requiresAuth: false,
+        forMember: true,
+      },
+      component: () => import('@/views/error/AccessDeniedView.vue')
+    },
+    {
+      path: "/not-found",
       name: "notFound",
       meta: { 
         requiresAuth: false,
@@ -273,7 +286,7 @@ const router = createRouter({
     },
     {
       path: "/:pathMatch(.*)*",
-      redirect: "/notFound",
+      redirect: "/not-found",
       meta: { 
         requiresAuth: false,
         forMember: true,

src/stores/error/errorHandle.js

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+
+export const useErrorHandleStore = defineStore('errorHandle', {
+  state() {
+    return {
+      notFound: false,
+      notAuthorized: false,
+      serverError: false,
+    }
+  },
+  actions: {
+    // 404 에러 상태를 설정하는 액션
+    setNotFound(value) {
+      this.notFound = value;
+    },
+    // 권한 없음 에러 상태를 설정하는 액션
+    setNotAuthorized(value) {
+      this.notAuthorized = value;
+    },
+    // 서버 에러 상태를 설정하는 액션
+    setServerError(value) {
+      this.serverError = value;
+    },
+  },
+})

src/utils/axios.js

@@ -1,4 +1,5 @@
 import { useAuthStore } from '@/stores/auth';
+import { useErrorHandleStore } from '@/stores/error/errorHandle';
 import axios from 'axios';
 
 // 인증, 인가 관련 API
@@ -28,21 +29,30 @@ const mainAxios = axios.create({
   withCredentials: true
 })
 
-
 mainAxios.interceptors.response.use(
   (response) => {
     return response.data;
   },
   async (error) => {
-    // 잘못된 토큰
-    if (error.response.data.code === 401) {
+    if (error.code === 'ERR_NETWORK'  ) {
+      const errorHandleStore = useErrorHandleStore();
+      errorHandleStore.setServerError(true);
+      // 잘못된 토큰
+    } else if (error.response.data.code === 401) {
       const authStore = useAuthStore();
       authStore.logout();
       // 만료된 엑세스 토큰
     } else if (error.response.data.code === 419) {
       await mainAxios.post('auth/reissue')
       return await mainAxios(error.config);
       // 존재하지 않는 데이터
+    } else if (error.response.data.code === 404) {
+      const errorHandleStore = useErrorHandleStore();
+      errorHandleStore.setNotFound(true);
+      // 권한이 없는 접근
+    } else if (error.response.data.code === 403) {
+      const errorHandleStore = useErrorHandleStore();
+      errorHandleStore.setNotAuthorized(true);
     } else {
     // 그 외의 예외
       return error.response.data;

src/utils/contract.js

@@ -3,7 +3,7 @@ import { fileAxios, mainAxios } from "./axios";
 import { useContractCreateStore } from "@/stores/contract/contractCreate";
 import { useContractDetailStore } from "@/stores/contract/contractDetail";
 import { useContractBulkStore } from "@/stores/contract/contractBulk";
-import { useLoadingStore } from "@/stores/loading";
+import { useLoadingStore } from "@/stores/error/loading";
 
 const contractListStore = useContractListStore();
 const contractDetailStore = useContractDetailStore();
@@ -39,8 +39,6 @@ async function getContract(contractId) {
 
   if (result.code === 200) {
     contractDetailStore.setData(result.data);
-  } if (result.code === 404) {
-
   }
 
   return result;

src/utils/invoice.js

@@ -2,7 +2,7 @@ import { useInvoiceListStore } from "@/stores/invoice/invoiceList";
 import { mainAxios } from "./axios";
 import { useInvoiceDetailStore } from "@/stores/invoice/invoiceDetail";
 import { useInvoiceCreateStore } from "@/stores/invoice/invoiceCreate";
-import { useLoadingStore } from "@/stores/loading";
+import { useLoadingStore } from "@/stores/error/loading";
 
 const invoiceListStore = useInvoiceListStore();
 const invoiceDetailStore = useInvoiceDetailStore();

src/views/MainView.vue

@@ -13,14 +13,12 @@
 import TheNavBarVue from "@/components/common/TheNavBar.vue";
 import TheSideBarVue from "@/components/common/TheSideBar.vue";
 import LoadingVue from "@/components/common/Loading.vue";
-import { useLoadingStore } from "@/stores/loading";
+import { useLoadingStore } from "@/stores/error/loading";
 import { mapStores } from "pinia";
+import { useErrorHandleStore } from "@/stores/error/errorHandle";
 
 export default {
   name: 'MainView',
-  watch: {
-
-  },
   data() {
     return {
       width: window.innerWidth,
@@ -34,6 +32,30 @@ export default {
   },
   computed: {
     ...mapStores(useLoadingStore),
+    ...mapStores(useErrorHandleStore),
+  },
+  watch: {
+    'errorHandleStore.notFound'(newValue) {
+      // 404 에러 발생
+      if (newValue) {
+        this.$router.replace({name: 'notFound'});
+        this.errorHandleStore.$reset();
+      }
+    },
+    'errorHandleStore.notAuthorized'(newValue) {
+      // 403 에러 발생
+      if (newValue) {
+        this.$router.replace({name: 'accessDenied'});
+        this.errorHandleStore.$reset();
+      }
+    },
+    'errorHandleStore.serverError'(newValue) {
+      // 서버 에러 발생
+      if (newValue) {
+        this.$router.push({name: 'serverError'});
+        this.errorHandleStore.$reset();
+      }
+    }
   }
 }
 </script>

src/views/auth/LoginView.vue

@@ -48,7 +48,6 @@ export default {
       };
 
       const result = await authAxios.post('auth/login', data)
-      console.log(result)
 
       if (result.code == 200) {
         this.authStore.login();
@@ -61,7 +60,7 @@ export default {
     signup() {
       this.$router.push({ name: 'signup' })
     }
-  }
+  },
 }
 </script>
 

src/views/contract/ContractDetailView.vue

@@ -106,12 +106,14 @@ export default {
   },
   async created() {
     this.consentDetailStore.$reset();
-    const result = await getContract(this.$route.params.id);
-    if (result.code === 404) {
-      this.$router.push({name: 'noData'});
+    const result1 = await getContract(this.$route.params.id);
+    if (result1.code !== 200 && result1.code !== 400) {
+      return;
+    }
+    const result2 = await getConsent(this.contractDetailStore.data.member.id);
+    if (result2.code !== 200 && result2.code !== 400) {
       return;
     }
-    await getConsent(this.contractDetailStore.data.member.id);
   }
 }
 </script>