Merge pull request #24 from Billing-Wise/K5P-78/fix/오류화면추가

[fix] 오류화면추가

src/assets/scss/common.scss

@@ -65,6 +65,13 @@ $mobile-header-height : 100px;
   font-size: $font-size;
 }
 
+@mixin root-container {
+  background: $back-color;
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+  overflow: auto;
+}
 
 
 

src/components/common/Loading.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="loading">
+    <img src="@/assets/images/loading.gif" alt="loading">
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.loading {
+  @include flex-box(row, center, 0px);
+  position: absolute;
+  background: rgba(255, 255, 255, 0.8);
+  top: $nav-bar-height;
+  left: $side-bar-width;
+  width: calc(100% - $side-bar-width);
+  height: calc(100% - $nav-bar-height);
+  z-index: 9999;
+
+  img {
+    width: 160px;
+  }
+}
+</style>

src/components/common/TheNavBar.vue

@@ -33,11 +33,11 @@ export default {
   .nav-bar {
     @include flex-box(row, space-between, 0px);
     background-color: $theme-color;
-    position: fixed;
+    position: absolute;
     top: 0px;
     left: 0px;
     height: $nav-bar-height;
-    width: 100vw;
+    width: 100%;
     padding: 0px 20px;
     z-index: 2;
     .nav-info {

src/components/common/TheSideBar.vue

@@ -40,11 +40,11 @@ export default {
 
 <style lang="scss" scoped>
   .side-bar {
-    position: fixed;
+    position: absolute;
     left: 0;
-    top:60px;
+    top: $nav-bar-height;
     width: $side-bar-width;
-    height: calc(100vh - $nav-bar-height);;
+    height: calc(100% - $nav-bar-height);;
     box-shadow: 3px 0px 4px 0px rgb(0, 0, 0, 0.25);
     z-index: 1;
     @include flex-box(column, space-between, 0px);

src/components/contract/create/ContractChooseInfo.vue

@@ -109,6 +109,7 @@ export default {
 
 .right-side {
   background-color: white;
+  max-width: 800px;
   padding: 50px;
   border-radius: 10px;
   box-shadow: $base-shadow;

src/components/invoice/detail/InvoiceInfo.vue

@@ -18,7 +18,6 @@
     </div>
     <div class="info-box">
       <span class="title">계약 정보</span>
-
       <div class="double-info">
         <TitleInfoVue title="계약ID" :info="String(invoiceDetailStore.data.contractId)" />
         <TitleInfoVue title="청구ID" :info="String(invoiceDetailStore.data.invoiceId)" />
@@ -46,7 +45,6 @@
 <script>
 import { mapStores } from 'pinia';
 import { toDateFromDateTime } from '@/utils/formatter';
-import { getInvoice } from '@/utils/invoice';
 import TitleInfoVue from '../../common/info/TitleInfo.vue';
 import { useInvoiceDetailStore } from '@/stores/invoice/invoiceDetail';
 
@@ -73,21 +71,12 @@ export default {
       return toDateFromDateTime(this.invoiceDetailStore.data.updatedAt);
     },
   },
-  async created() {
-    this.invoiceDetailStore.$reset();
-    const result = await getInvoice(this.$route.params.id);
-
-    if (result.code !== 200) {
-      // 예외 처리
-    }
-  }
-
 }
 </script>
 
 <style lang="scss" scoped>
 .invoice-info {
-  @include flex-box(column, space-between, 20px);
+  @include flex-box(column, center, 20px);
   width: 100%;
   height: 100%;
 }

src/components/item/ItemInfo.vue

@@ -39,8 +39,8 @@ export default {
   @include flex-box(column, center, 20px);
   width: 100%;
   img {
-    width: 320px;
-    height: 320px;
+    width: 250px;
+    height: 250px;
     object-fit: cover;
     border: $theme-color solid 3px;
     border-radius: 10px;

src/main.js

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

src/router/index.js

@@ -10,7 +10,7 @@ const router = createRouter({
       component: () => import('@/views/MainView.vue'),
       meta: { 
         requiresAuth: true,
-        nonMember: false,  
+        forMember: false,  
       },
       children: [
         {
@@ -93,6 +93,11 @@ const router = createRouter({
           name:'settingPayment',
           component: () => import('@/views/setting/SettingPaymentView.vue')
         },
+        {
+          path : '/no-data',
+          name: 'noData',
+          component: () => import('@/views/error/NoDataView.vue')
+        }
       ]
     },
     {
@@ -101,7 +106,7 @@ const router = createRouter({
       component: () => import('@/views/auth/AuthView.vue'),
       meta: { 
         requiresAuth: false,
-        nonMember: false, 
+        forMember: false, 
       },
       children: [
         {
@@ -122,7 +127,7 @@ const router = createRouter({
       component: () => import('@/views/MobileView.vue'),
       meta: { 
         requiresAuth: false,
-        nonMember: true,
+        forMember: true,
       },
       children: [
         {
@@ -257,6 +262,23 @@ const router = createRouter({
         },
       ]
     },
+    {
+      path: "/notFound",
+      name: "notFound",
+      meta: { 
+        requiresAuth: false,
+        forMember: true,
+      },
+      component: () => import('@/views/error/NotFoundView.vue')
+    },
+    {
+      path: "/:pathMatch(.*)*",
+      redirect: "/notFound",
+      meta: { 
+        requiresAuth: false,
+        forMember: true,
+      },
+    }
   ]
 });
 
@@ -265,7 +287,7 @@ router.beforeEach((to, from, next) => {
 
   if (to.meta.requiresAuth && !authStore.isLoggedIn) {
     next('/login');
-  } else if (!to.meta.nonMember && !to.meta.requiresAuth && authStore.isLoggedIn) {
+  } else if (!to.meta.forMember && !to.meta.requiresAuth && authStore.isLoggedIn) {
     next('');
   } else {
     next();

src/stores/loading.js

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+
+export const useLoadingStore = defineStore('loading', {
+  state() {
+    return {
+      isLoading: false,
+    }
+  },
+  actions: {
+    setIsLoading(value) {
+      this.isLoading = value;
+    }
+  },
+})

src/utils/axios.js

@@ -28,6 +28,7 @@ const mainAxios = axios.create({
   withCredentials: true
 })
 
+
 mainAxios.interceptors.response.use(
   (response) => {
     return response.data;
@@ -37,12 +38,13 @@ mainAxios.interceptors.response.use(
     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 {
+    // 그 외의 예외
       return error.response.data;
     }
   }

src/utils/contract.js

@@ -3,11 +3,13 @@ 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";
 
 const contractListStore = useContractListStore();
 const contractDetailStore = useContractDetailStore();
 const constractCreateStore = useContractCreateStore();
 const contractBulkStore = useContractBulkStore();
+const loadingStore = useLoadingStore();
 
 // 계약 목록 조회
 async function getContractList() {
@@ -37,13 +39,17 @@ async function getContract(contractId) {
 
   if (result.code === 200) {
     contractDetailStore.setData(result.data);
+  } if (result.code === 404) {
+
   }
 
   return result;
 }
 
 // 계약 생성
 async function createContract() {
+  loadingStore.setIsLoading(true);
+
   const data = {
     "memberId": constractCreateStore.member.id,
     "itemId": constractCreateStore.item.id,
@@ -59,11 +65,15 @@ async function createContract() {
 
   const result = await mainAxios.post('contracts', data);
 
+  loadingStore.setIsLoading(false);
+
   return result;
 }
 
 // 계약 대량 등록
 async function createContractBulk(file) {
+  loadingStore.setIsLoading(true);
+
   const formData = new FormData();
   formData.append('file', file, 'file');
 
@@ -77,11 +87,15 @@ async function createContractBulk(file) {
     }
   }
 
+  loadingStore.setIsLoading(false);
+
   return result;
 }
 
 // 계약 수정
 async function editContract(contractId) {
+  loadingStore.setIsLoading(true);
+
   const data = {
     "itemPrice": constractCreateStore.item.price,
     "itemAmount": constractCreateStore.item.count,
@@ -93,10 +107,10 @@ async function editContract(contractId) {
     "paymentDueCycle": constractCreateStore.paymentDueCycle
   }
 
-  console.log(data)
-
   const result = await mainAxios.put(`contracts/${contractId}`, data);
 
+  loadingStore.setIsLoading(false);
+
   return result;
 }
 

src/utils/invoice.js

@@ -2,15 +2,21 @@ 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";
 
 const invoiceListStore = useInvoiceListStore();
 const invoiceDetailStore = useInvoiceDetailStore();
 const invoiceCreateStore = useInvoiceCreateStore();
+const loadingStore = useLoadingStore();
+
 
 // 청구서 전송
 async function sendInvoice(invoiceId) {
+  loadingStore.setIsLoading(true);
   const result = await mainAxios.get(`invoices/${invoiceId}/send`);
 
+  loadingStore.setIsLoading(false);
+
   return result;
 }
 

src/utils/item.js

@@ -3,6 +3,8 @@ import { fileAxios, mainAxios } from "./axios";
 
 const itemStore = useItemStore();
 
+
+
 // 아이템 목록 조회
 async function getItemList() {