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

[fix] 추가 오류 수정
Billing-Wise · Aug 6, 2024 · 6d771df · 6d771df
2 parents 62488a2 + 5d62d9c
commit 6d771df
Show file tree

Hide file tree

Showing 39 changed files with 362 additions and 101 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/scss/component/table.scss b/src/assets/scss/component/table.scss
@@ -30,7 +30,7 @@
   }
 
   .table-column {
-    // width: 100px;
+    // width: 150px;
     font-weight: bold;
     padding: 25px 20px;
   }

diff --git a/src/components/common/TheNavBar.vue b/src/components/common/TheNavBar.vue
@@ -2,8 +2,14 @@
   <nav class="nav-bar">
     <img src="@/assets/images/name_white.png" alt="">
     <div class="nav-info">
-      <div class="nav-info-item">{{ authStore.data.clientName }}</div>
-      <div class="nav-info-item">{{ authStore.data.userName }} 님</div>
+      <div class="nav-info-item">
+        <i class="bi bi-building"></i>
+        <span>{{ authStore.data.clientName }}</span>
+      </div>
+      <div class="nav-info-item">
+        <i class="bi bi-person"></i>
+        <span>{{ authStore.data.userName }}님</span>
+      </div>
     </div>
   </nav>
 </template>
@@ -50,11 +56,16 @@ export default {
   .nav-info {
     @include flex-box(row, center, 20px);
 
-    .nav-info-item {
+    i {
       @include flex-box(row, center, 0px);
+    }
+
+    .nav-info-item {
+      @include flex-box(row, center, 7px);
       background-color: white;
       border-radius: 5px;
       padding: 5px 15px;
+      font-size: 18px;
       font-weight: bold;
     }
   }

diff --git a/src/components/common/info/TitleInfo.vue b/src/components/common/info/TitleInfo.vue
@@ -27,7 +27,8 @@ export default {
       @include flex-box(row, center, 0px);
       @include white-text(16px);
       background: $theme-color;
-      width: 110px;
+      min-width: 90px;
+      width: 90px;
       height: 100%;
       border-top-left-radius: 5px;
       border-bottom-left-radius: 5px;

diff --git a/src/components/common/input/InfoInput.vue b/src/components/common/input/InfoInput.vue
@@ -33,14 +33,15 @@ export default {
       @include flex-box(row, center, 0px);
       @include white-text(16px);
       background: $theme-color;
-      width: 140px;
+      min-width: 90px;
+      width: 90px;
       height: 100%;
       border-top-left-radius: 5px;
       border-bottom-left-radius: 5px;
     }
 
     input {
-      width: 100%;
+      flex-grow: 1;
       height: 100%;
       padding: 0px 10px;
       font-weight: bold;

diff --git a/src/components/common/input/NumberInput.vue b/src/components/common/input/NumberInput.vue
@@ -37,7 +37,8 @@ export default {
       @include flex-box(row, center, 0px);
       @include white-text(16px);
       background: $theme-color;
-      width: 140px;
+      min-width: 90px;
+      width: 90px;
       height: 100%;
     }
 

diff --git a/src/components/common/select/TitleSelect.vue b/src/components/common/select/TitleSelect.vue
@@ -66,7 +66,8 @@ export default {
     @include flex-box(row, center, 0px);
     @include white-text(16px);
     background: $theme-color;
-    width: 140px;
+    min-width: 90px;
+    width: 90px;
     height: 100%;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;

diff --git a/src/components/common/select/TitleUpSelect.vue b/src/components/common/select/TitleUpSelect.vue
@@ -67,7 +67,8 @@ export default {
     @include flex-box(row, center, 0px);
     @include white-text(16px);
     background: $theme-color;
-    width: 140px;
+    min-width: 90px;
+    width: 90px;
     height: 100%;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;

diff --git a/src/components/consent/modal/ConsentUpdateModal.vue b/src/components/consent/modal/ConsentUpdateModal.vue
@@ -82,6 +82,9 @@ export default {
       this.owner = this.consentDetailStore.data.owner;
       this.bank = this.consentDetailStore.data.bank;
       this.bankIdx = this.bankList.findIndex((bank) => bank.name === this.consentDetailStore.data.bank);
+      if (this.bankIdx === -1) {
+        this.bankIdx = 0
+      };
       this.number = this.consentDetailStore.data.number;
       this.imgSrc = this.consentDetailStore.data.signUrl;
     },

diff --git a/src/components/contract/ContractCreateInfo.vue b/src/components/contract/ContractCreateInfo.vue
@@ -1,26 +1,23 @@
 <template>
   <div class="contract-create">
-    <div @click="contractCreateStore.setStep(0)"
-    :class="{ 'info-box': true, 'active': contractCreateStore.step === 0 }">
+    <div @click="() => contractCreateStore.setSelectingMember(true)" class="info-box">
       <span class="title">회원 정보</span>
       <div class="double-info">
         <TitleInfoVue title="이름" :info="contractCreateStore.member.name" />
         <TitleInfoVue title="전화번호" :info="contractCreateStore.member.phone" />
       </div>
       <TitleInfoVue title="이메일" :info="contractCreateStore.member.email" />
     </div>
-    <div @click="contractCreateStore.setStep(1)"
-    :class="{ 'info-box': true, 'active': contractCreateStore.step === 1 }">
+    <div @click="() => contractCreateStore.setSelectingItem(true)" class="info-box">
       <span class="title">상품 정보</span>
       <TitleInfoVue title="이름" :info="contractCreateStore.item.name" />
-      <div class="double-info">
+      <div class="double-info" @click.stop>
         <NumberInputVue title="가격" unit="원" v-model="item.price"/>
         <NumberInputVue title="수량" unit="개" v-model="item.count"/>
       </div>
-      <TitleInfoVue title="총 금액" :info="`${contractCreateStore.item.price * contractCreateStore.item.count} 원`" />
+      <TitleInfoVue title="총 금액" :info="`${currentTotalPrice} 원`" />
     </div>
-    <div @click="contractCreateStore.setStep(2)"
-    :class="{ 'info-box': true, 'active': contractCreateStore.step === 2 }">
+    <div class="info-box">
       <span class="title">계약 정보</span>
       <div class="double-info">
         <NumberInputVue title="약정일" unit="일" v-model="contractCycle"/>
@@ -55,19 +52,21 @@ import { useContractCreateStore } from '@/stores/contract/contractCreate';
 import { mapStores } from 'pinia';
 import TitleInfoVue from '@/components/common/info/TitleInfo.vue';
 import NumberInputVue from '@/components/common/input/NumberInput.vue';
-import InfoInputVue from '@/components/common/input/InfoInput.vue';
 import TitleSelectVue from '@/components/common/select/TitleSelect.vue';
+import { formatNumber } from '@/utils/formatter';
 
 export default {
   name: 'ContractCreateInfoVue',
   components: {
     TitleInfoVue,
     NumberInputVue,
-    InfoInputVue,
     TitleSelectVue
   },
   computed: {
     ...mapStores(useContractCreateStore),
+    currentTotalPrice() {
+      return formatNumber(this.contractCreateStore.item.price * this.contractCreateStore.item.count)
+    },
     // 아이템 개수 및 가격 설정
     item: {
       get() {
@@ -144,6 +143,13 @@ export default {
   }
 }
 
+.info-box:last-child {
+  &:hover {
+    box-shadow: none;
+  }
+  cursor: auto;
+}
+
 .active {
   box-shadow: 0 0 20px rgba($theme-color, 1);
 }

diff --git a/src/components/contract/ContractEditInfo.vue b/src/components/contract/ContractEditInfo.vue
@@ -12,10 +12,10 @@
       <span class="title">상품 정보</span>
       <TitleInfoVue title="이름" :info="contractCreateStore.item.name" />
       <div class="double-info">
-        <InfoInputVue title="금액" type="number" v-model="item.price"/>
-        <InfoInputVue title="수량" type="number" v-model="item.count"/>
+        <NumberInputVue title="금액" unit="원" v-model="item.price"/>
+        <NumberInputVue title="수량" unit="개" v-model="item.count"/>
       </div>
-      <TitleInfoVue title="총 금액" :info="`${contractCreateStore.item.price * contractCreateStore.item.count} 원`" />
+      <TitleInfoVue title="총 금액" :info="`${currentTotalPrice} 원`" />
     </div>
     <div @click="contractCreateStore.setStep(2)"
     :class="{ 'info-box': true, 'active': contractCreateStore.step === 2 }">
@@ -50,24 +50,26 @@
 
 <script>
 import { useContractCreateStore } from '@/stores/contract/contractCreate';
+import { useContractDetailStore } from '@/stores/contract/contractDetail';
 import { mapStores } from 'pinia';
 import TitleInfoVue from '@/components/common/info/TitleInfo.vue';
 import NumberInputVue from '@/components/common/input/NumberInput.vue';
-import InfoInputVue from '@/components/common/input/InfoInput.vue';
 import TitleSelectVue from '@/components/common/select/TitleSelect.vue';
-import { useContractDetailStore } from '@/stores/contract/contractDetail';
+import { formatNumber } from '@/utils/formatter';
 
 export default {
   name: 'ContractEditInfoVue',
   components: {
     TitleInfoVue,
-    InfoInputVue,
     NumberInputVue,
     TitleSelectVue
   },
   computed: {
     ...mapStores(useContractCreateStore),
     ...mapStores(useContractDetailStore),
+    currentTotalPrice() {
+      return formatNumber(this.contractCreateStore.item.price * this.contractCreateStore.item.count)
+    },
     item: {
       get() {
         return this.contractCreateStore.item;

diff --git a/src/components/contract/ContractInfo.vue b/src/components/contract/ContractInfo.vue
@@ -12,23 +12,23 @@
       <span class="title">상품 정보</span>
       <TitleInfoVue title="이름" :info="contractDetailStore.data.item.name" />
       <div class="double-info">
-        <TitleInfoVue title="금액" :info="`${contractDetailStore.data.item.price}원`" />
+        <TitleInfoVue title="금액" :info="`${currentItemPrice}원`" />
         <TitleInfoVue title="수량" :info="`${contractDetailStore.data.item.amount} 개`"  />
       </div>
     </div>
     <div class="info-box">
       <span class="title">계약 정보</span>
       <div class="double-info">
         <TitleInfoVue title="계약ID" :info="String(contractDetailStore.data.id)" />
-        <TitleInfoVue title="총 금액" :info="`${contractDetailStore.data.chargeAmount} 원`" />
+        <TitleInfoVue title="총 금액" :info="`${currentTotalPrice} 원`" />
       </div>
       <div class="double-info">
         <TitleInfoVue title="약정일" :info="`매월 ${contractDetailStore.data.contractCycle} 일`" />
         <TitleInfoVue title="납부 기한" :info="`${contractDetailStore.data.paymentDueCycle} 일`" />
       </div>
       <div class="double-info">
-        <TitleInfoVue title="총 청구금" :info="`${contractDetailStore.data.totalChargeAmount}원`" />
-        <TitleInfoVue title="총 미납금" :info="`${contractDetailStore.data.totalUnpaidAmount}원`" />
+        <TitleInfoVue title="총 청구금" :info="`${currentTotalCharge}원`" />
+        <TitleInfoVue title="총 미납금" :info="`${currentTotalUnpaid}원`" />
       </div>
       <div class="double-info">
         <TitleInfoVue title="청구 생성" :info="contractDetailStore.data.invoiceType.name" />
@@ -49,7 +49,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useContractDetailStore } from '@/stores/contract/contractDetail';
-import { toDateFromDateTime } from '@/utils/formatter';
+import { formatNumber, toDateFromDateTime } from '@/utils/formatter';
 import { useConsentDetailStore } from '@/stores/contract/consentDetail';
 import TitleInfoVue from '../common/info/TitleInfo.vue';
 
@@ -61,6 +61,18 @@ export default {
   computed: {
     ...mapStores(useConsentDetailStore),
     ...mapStores(useContractDetailStore),
+    currentItemPrice() {
+      return formatNumber(this.contractDetailStore.data.item.price)
+    },  
+    currentTotalPrice() {
+      return formatNumber(this.contractDetailStore.data.chargeAmount)
+    },  
+    currentTotalCharge() {
+      return formatNumber(this.contractDetailStore.data.totalChargeAmount)
+    },  
+    currentTotalUnpaid() {
+      return formatNumber(this.contractDetailStore.data.totalUnpaidAmount)
+    },  
     subscription() {
       return this.contractDetailStore.data.subscription? '정기': '단기';
     },

diff --git a/src/components/contract/create/ContractChooseItem.vue b/src/components/contract/create/ContractChooseItem.vue
@@ -39,6 +39,6 @@ export default {
 
 .right-side {
   width: 800px;
-
+  height: 100%;
 }
 </style>
diff --git a/src/components/contract/modal/ContractEndModal.vue b/src/components/contract/modal/ContractEndModal.vue
@@ -0,0 +1,58 @@
+<template>
+  <transition name="fade">
+    <div v-if="isVisible" class="modal-overlay">
+      <div class="modal-content">
+        <ModalHeaderVue :title="title" :closeModal="closeModal"/>
+        <div class="modal-main">
+          <span class="content-text">진행 중인 계약입니다.</span>
+          <span class="content-text">정말로 종료하시겠습니까?</span>
+        </div>
+        <ModalFooterVue :title="title" :errorMsg="errorMsg" :func="endContractStatus"/>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import ModalHeaderVue from '../../common/modal/ModalHeader.vue';
+import ModalFooterVue from '../../common/modal/ModalFooter.vue';
+import { editContractStatus } from '@/utils/contract';
+
+export default {
+  name: 'ContractEndModalVue',
+  components: {
+    ModalHeaderVue,
+    ModalFooterVue,
+  },
+  props: {
+    'isVisible': Boolean,
+    'closeModal': Function,
+  },
+  data() {
+    return {
+      title: '계약 종료',
+      errorMsg: '',
+      name: '',
+      price: '',
+      description: '',
+    }
+  },
+  methods: {
+    // 계약 상태 종료
+    async endContractStatus() {
+      const result = await editContractStatus(this.$route.params.id, 3);
+      if (result.code === 200) {
+        this.closeModal();
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/component/modal.scss';
+  .content-text{
+    padding: 0px;
+    font-weight: bold;
+  }
+</style>
diff --git a/src/components/contract/modal/InvoiceCreateModal.vue b/src/components/contract/modal/InvoiceCreateModal.vue
@@ -6,7 +6,7 @@
         <div class="modal-main">
           <TitleSelectVue title="결제 수단" :selectedIdx="invoiceCreateStore.paymentTypeIdx"
             :keywordArr="invoiceCreateStore.paymentType" :choiceFunc="setPaymentType" />
-          <InfoInputVue title="청구금" v-model="chargeAmount" type="number" />
+          <NumberInputVue title="청구금" v-model="chargeAmount" unit="원" />
           <InfoInputVue title="결제일" type="date" v-model="contractDate" />
           <InfoInputVue title="납부기한" type="date" v-model="dueDate" />
         </div>
@@ -21,6 +21,7 @@ import ModalHeaderVue from '../../common/modal/ModalHeader.vue';
 import ModalFooterVue from '../../common/modal/ModalFooter.vue';
 import InfoInputVue from '@/components/common/input/InfoInput.vue';
 import TitleSelectVue from '@/components/common/select/TitleSelect.vue';
+import NumberInputVue from '@/components/common/input/NumberInput.vue';
 import { useInvoiceCreateStore } from '@/stores/invoice/invoiceCreate';
 import { useContractDetailStore } from '@/stores/contract/contractDetail';
 import { mapStores } from 'pinia';
@@ -32,7 +33,8 @@ export default {
     ModalHeaderVue,
     ModalFooterVue,
     InfoInputVue,
-    TitleSelectVue
+    TitleSelectVue,
+    NumberInputVue
   },
   props: {
     'isVisible': Boolean,