From 1cf633bd005f80b98b5063b35351a562ef6a3bec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?= <rlagkswn37@naver.com>
Date: Fri, 2 Aug 2024 11:11:54 +0900
Subject: [PATCH] =?UTF-8?q?[K5P-78]=20[fix]=20403,=20=ED=86=B5=EC=8B=A0?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=ED=99=94=EB=A9=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/btn/WhiteIconBtn.vue    | 30 +++++++++++
 .../static/InvoiceDoughnutChart.vue           |  2 +-
 src/components/static/ProgressBox.vue         | 28 ++++++----
 src/components/static/ThisMonthStatic.vue     | 32 +++++++----
 src/main.js                                   |  2 +-
 src/router/index.js                           | 27 +++++++---
 src/stores/error/errorHandle.js               | 25 +++++++++
 src/stores/{ => error}/loading.js             |  0
 src/utils/axios.js                            | 16 ++++--
 src/utils/contract.js                         |  4 +-
 src/utils/invoice.js                          |  2 +-
 src/views/MainView.vue                        | 30 +++++++++--
 src/views/auth/LoginView.vue                  |  3 +-
 src/views/contract/ContractDetailView.vue     | 10 ++--
 src/views/contract/ContractEditView.vue       |  6 +--
 src/views/error/AccessDeniedView.vue          | 47 ++++++++++++++++
 src/views/error/NoDataView.vue                | 35 ------------
 src/views/error/NotFoundView.vue              | 47 ++++++++--------
 src/views/error/ServerErrorView.vue           | 53 +++++++++++++++++++
 src/views/home/HomeView.vue                   |  3 ++
 src/views/invoice/InvoiceDetailView.vue       |  3 +-
 src/views/item/ItemDetailView.vue             | 14 +++--
 src/views/member/MemberDetailView.vue         | 14 +++--
 23 files changed, 317 insertions(+), 116 deletions(-)
 create mode 100644 src/components/common/btn/WhiteIconBtn.vue
 create mode 100644 src/stores/error/errorHandle.js
 rename src/stores/{ => error}/loading.js (100%)
 create mode 100644 src/views/error/AccessDeniedView.vue
 delete mode 100644 src/views/error/NoDataView.vue
 create mode 100644 src/views/error/ServerErrorView.vue

diff --git a/src/components/common/btn/WhiteIconBtn.vue b/src/components/common/btn/WhiteIconBtn.vue
new file mode 100644
index 0000000..fb21484
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/static/InvoiceDoughnutChart.vue b/src/components/static/InvoiceDoughnutChart.vue
index 5fc4d4a..25a0946 100644
--- a/src/components/static/InvoiceDoughnutChart.vue
+++ b/src/components/static/InvoiceDoughnutChart.vue
@@ -64,7 +64,7 @@ export default {
     }
   },
   // 생성시 통계 데이터 불러오기
-  async created() {
+  async mounted() {
     const result = await getAllStatic();
 
     if (result.code !== 200) {
diff --git a/src/components/static/ProgressBox.vue b/src/components/static/ProgressBox.vue
index b46fd92..1ec4583 100644
--- a/src/components/static/ProgressBox.vue
+++ b/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>
diff --git a/src/components/static/ThisMonthStatic.vue b/src/components/static/ThisMonthStatic.vue
index b1a0134..35981cc 100644
--- a/src/components/static/ThisMonthStatic.vue
+++ b/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>
diff --git a/src/main.js b/src/main.js
index 19144d7..e8b104b 100644
--- a/src/main.js
+++ b/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();
diff --git a/src/router/index.js b/src/router/index.js
index 1901201..5222e11 100644
--- a/src/router/index.js
+++ b/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,
diff --git a/src/stores/error/errorHandle.js b/src/stores/error/errorHandle.js
new file mode 100644
index 0000000..5b436ae
--- /dev/null
+++ b/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;
+    },
+  },
+})
\ No newline at end of file
diff --git a/src/stores/loading.js b/src/stores/error/loading.js
similarity index 100%
rename from src/stores/loading.js
rename to src/stores/error/loading.js
diff --git a/src/utils/axios.js b/src/utils/axios.js
index 074c096..9fed603 100644
--- a/src/utils/axios.js
+++ b/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,14 +29,16 @@ 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();
       // 만료된 엑세스 토큰
@@ -43,6 +46,13 @@ mainAxios.interceptors.response.use(
       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;
diff --git a/src/utils/contract.js b/src/utils/contract.js
index 0b4a8c2..863a63d 100644
--- a/src/utils/contract.js
+++ b/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;
diff --git a/src/utils/invoice.js b/src/utils/invoice.js
index 1875a32..c573358 100644
--- a/src/utils/invoice.js
+++ b/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();
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 98d8d88..e9ee385 100644
--- a/src/views/MainView.vue
+++ b/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>
diff --git a/src/views/auth/LoginView.vue b/src/views/auth/LoginView.vue
index 380481d..e1af83c 100644
--- a/src/views/auth/LoginView.vue
+++ b/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>
 
diff --git a/src/views/contract/ContractDetailView.vue b/src/views/contract/ContractDetailView.vue
index a1f786a..1859e43 100644
--- a/src/views/contract/ContractDetailView.vue
+++ b/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>
diff --git a/src/views/contract/ContractEditView.vue b/src/views/contract/ContractEditView.vue
index 9e14cbf..2e98a73 100644
--- a/src/views/contract/ContractEditView.vue
+++ b/src/views/contract/ContractEditView.vue
@@ -56,12 +56,10 @@ export default {
     this.contractCreateStore.setStep(2);
     if (this.contractDetailStore.data.id !== Number(this.$route.params.id)) {
       const result = await getContract(this.$route.params.id);
-      if (result.code === 404) {
-        this.$router.push({ name: 'noData' });
-        return;
+      if (result.code === 200) {
+        this.contractCreateStore.setAllDataFromDetailStore(this.contractDetailStore.data);
       }
     }
-    this.contractCreateStore.setAllDataFromDetailStore(this.contractDetailStore.data);
   }
 }
 </script>
diff --git a/src/views/error/AccessDeniedView.vue b/src/views/error/AccessDeniedView.vue
new file mode 100644
index 0000000..1e40416
--- /dev/null
+++ b/src/views/error/AccessDeniedView.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="root-container">
+    <i class="bi bi-x-circle-fill"></i>
+    <span>접근 권한이 없는 페이지입니다.</span>
+    <div class="btn-box">
+      <WhiteIconBtnVue title="뒤로 가기" icon="bi bi-caret-left-fill" :func="goBack"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import WhiteIconBtnVue from '@/components/common/btn/WhiteIconBtn.vue';
+
+export default {
+  name: 'AccessDeniedView',
+  components: {
+    WhiteIconBtnVue
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.root-container {
+  @include flex-box(column, center, 20px);
+  width: 100vw;
+  height: 100vh;
+  i {
+    font-size: 120px;
+    color: $theme-color
+  }
+
+  span {
+    font-weight: bold;
+    font-size: 18px;
+  }
+}
+
+.btn-box {
+  @include flex-box(row, center, 40px);
+  margin-top: 20px
+}
+</style>
\ No newline at end of file
diff --git a/src/views/error/NoDataView.vue b/src/views/error/NoDataView.vue
deleted file mode 100644
index a3ebe30..0000000
--- a/src/views/error/NoDataView.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div class="root-container">
-    <img src="@/assets/images/warn.png" alt="warning">
-    <div class="main-container">
-      <span>존재하지 않는 데이터입니다.</span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'NoDataView',
-}
-</script>
-
-<style lang="scss" scoped>
-  .root-container {
-    @include flex-box(column, center, 40px);
-    @include root-container;
-    img {
-      width: 150px;
-    }
-    .main-container {
-      @include flex-box(row, center, 20px);
-      span {
-        font-weight: bold;
-        font-size: 18px;
-      }
-      i {
-        @include base-icon;
-        font-size: 24px;
-      }
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/src/views/error/NotFoundView.vue b/src/views/error/NotFoundView.vue
index de241ee..e0573c4 100644
--- a/src/views/error/NotFoundView.vue
+++ b/src/views/error/NotFoundView.vue
@@ -1,16 +1,21 @@
 <template>
   <div class="root-container">
     <img src="@/assets/images/warn.png" alt="warning">
-    <div class="main-container">
-      <i class="bi bi-arrow-left-square-fill" @click="goBack"></i>
-      <span>요청하신 페이지를 찾을 수 없습니다.</span>
+    <span>요청하신 페이지를 찾을 수 없습니다.</span>
+    <div class="btn-box">
+      <WhiteIconBtnVue title="뒤로 가기" icon="bi bi-caret-left-fill" :func="goBack"/>
     </div>
   </div>
 </template>
 
 <script>
+import WhiteIconBtnVue from '@/components/common/btn/WhiteIconBtn.vue';
+
 export default {
   name: 'NotFoundView',
+  components: {
+    WhiteIconBtnVue
+  },
   methods: {
     goBack() {
       this.$router.go(-1);
@@ -20,23 +25,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .root-container {
-    @include flex-box(column, center, 40px);
-    width: 100vw;
-    height: 100vh;
-    img {
-      width: 150px;
-    }
-    .main-container {
-      @include flex-box(row, center, 20px);
-      span {
-        font-weight: bold;
-        font-size: 18px;
-      }
-      i {
-        @include base-icon;
-        font-size: 24px;
-      }
-    }
+.root-container {
+  @include flex-box(column, center, 20px);
+  width: 100vw;
+  height: 100vh;
+  img {
+    width: 150px;
   }
+
+
+  span {
+    font-weight: bold;
+    font-size: 18px;
+  }
+}
+
+.btn-box {
+  @include flex-box(row, center, 40px);
+  margin-top: 20px
+}
 </style>
\ No newline at end of file
diff --git a/src/views/error/ServerErrorView.vue b/src/views/error/ServerErrorView.vue
new file mode 100644
index 0000000..9e7eb2a
--- /dev/null
+++ b/src/views/error/ServerErrorView.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="root-container">
+    <i class="bi bi-exclamation-diamond-fill"></i>
+    <span>서버와의 통신에 오류가 발생하였습니다.</span>
+    <div class="btn-box">
+      <WhiteIconBtnVue title="뒤로 가기" icon="bi bi-caret-left-fill" :func="goBack"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import WhiteIconBtnVue from '@/components/common/btn/WhiteIconBtn.vue';
+import { useErrorHandleStore } from '@/stores/error/errorHandle';
+import { mapStores } from 'pinia';
+
+export default {
+  name: 'ServerErrorView',
+  components: {
+    WhiteIconBtnVue
+  },
+  computed: {
+    ...mapStores(useErrorHandleStore),
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+      this.errorHandleStore.$reset();
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.root-container {
+  @include flex-box(column, center, 20px);
+  width: 100vw;
+  height: 100vh;
+  i {
+    font-size: 120px;
+    color: $theme-color
+  }
+
+  span {
+    font-weight: bold;
+    font-size: 18px;
+  }
+}
+
+.btn-box {
+  @include flex-box(row, center, 40px);
+  margin-top: 20px
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home/HomeView.vue b/src/views/home/HomeView.vue
index 0164948..43932c6 100644
--- a/src/views/home/HomeView.vue
+++ b/src/views/home/HomeView.vue
@@ -72,6 +72,9 @@ export default {
       link.click();
       document.body.removeChild(link);
     }
+  },
+  created() {
+    this.staticStore.$reset();
   }
 }
 </script>
diff --git a/src/views/invoice/InvoiceDetailView.vue b/src/views/invoice/InvoiceDetailView.vue
index f37cba6..e89461d 100644
--- a/src/views/invoice/InvoiceDetailView.vue
+++ b/src/views/invoice/InvoiceDetailView.vue
@@ -84,8 +84,7 @@ export default {
   async created() {
     this.invoiceDetailStore.$reset();
     const result = await getInvoice(this.$route.params.id);
-    if (result.code === 404) {
-      this.$router.push({ name: 'noData' });
+    if (result.code !== 200 && result.code !== 400) {
       return;
     }
   }
diff --git a/src/views/item/ItemDetailView.vue b/src/views/item/ItemDetailView.vue
index 500fd59..b9d9e23 100644
--- a/src/views/item/ItemDetailView.vue
+++ b/src/views/item/ItemDetailView.vue
@@ -95,12 +95,18 @@ export default {
     }
   },
   async mounted() {
-    const result = await getItem(this.$route.params.id);
-    if (result.code === 404) {
-      this.$router.push({name: 'noData'});
+    const result1 = await getItem(this.$route.params.id);
+    if (result1.code !== 200 && result1.code !== 400) {
+      return;
     }
+
     this.contractListStore.$reset();
-    await this.getContractList();
+
+    const result2 = await this.getContractList();
+    if (result2.code !== 200 && result2.code !== 400) {
+      return;
+    }
+
     this.setupWatchers();
   }
 }
diff --git a/src/views/member/MemberDetailView.vue b/src/views/member/MemberDetailView.vue
index 4902709..371b401 100644
--- a/src/views/member/MemberDetailView.vue
+++ b/src/views/member/MemberDetailView.vue
@@ -96,12 +96,18 @@ export default {
     }
   },
   async mounted() {
-    const result = await getMember(this.$route.params.id);
-    if (result.code === 404) {
-      this.$router.push({name: 'noData'});
+    const result1 = await getMember(this.$route.params.id);
+    if (result1.code !== 200 && result1.code !== 400) {
+      return;
     }
+
     this.contractListStore.$reset();
-    await this.getContractList();
+    
+    const result2 = await this.getContractList();
+    if (result2.code !== 200 && result2.code !== 400) {
+      return;
+    }
+
     this.setupWatchers();
   }
 }