From c60407ea85884fef6c14cc06b7ff79fd15b15b26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?= <rlagkswn37@naver.com>
Date: Tue, 6 Aug 2024 10:16:03 +0900
Subject: [PATCH 1/3] =?UTF-8?q?[K5P-80]=20[fix]=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EA=B3=84?=
 =?UTF-8?q?=EC=95=BD=20=EC=A2=85=EB=A3=8C=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/component/table.scss          |  2 +-
 .../consent/modal/ConsentUpdateModal.vue      |  3 +
 .../contract/modal/ContractEndModal.vue       | 58 +++++++++++++++++++
 src/views/contract/ContractDetailView.vue     | 16 +++--
 src/views/item/ItemDetailView.vue             |  8 +--
 src/views/member/MemberDetailView.vue         |  5 +-
 6 files changed, 77 insertions(+), 15 deletions(-)
 create mode 100644 src/components/contract/modal/ContractEndModal.vue

diff --git a/src/assets/scss/component/table.scss b/src/assets/scss/component/table.scss
index 998b512..ad0ca34 100644
--- 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/consent/modal/ConsentUpdateModal.vue b/src/components/consent/modal/ConsentUpdateModal.vue
index 06ec937..823b4c4 100644
--- 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/modal/ContractEndModal.vue b/src/components/contract/modal/ContractEndModal.vue
new file mode 100644
index 0000000..adc151f
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/views/contract/ContractDetailView.vue b/src/views/contract/ContractDetailView.vue
index ed891f3..8f81df8 100644
--- a/src/views/contract/ContractDetailView.vue
+++ b/src/views/contract/ContractDetailView.vue
@@ -23,7 +23,9 @@
             v-if="canCreateInvoice()" />
           <ThemeIconBtnVue title="동의서 수정" icon="bi bi-pencil-square" :func="() => operationConsentEditModal(true)"
             v-if="canEditConsent()" />
-          <WarningBtnVue title="계약 종료" :func="() => editContractStatus(3)" v-if="contractDetailStore.data.contractStatus.id === 2"/>
+          <WarningBtnVue title="계약 종료" 
+            :func="() => operationContractEndModal(true)" 
+            v-if="contractDetailStore.data.contractStatus.id === 2"/>
           <SuccessBtnVue title="계약 재개" :func="() => editContractStatus(2)" v-if="contractDetailStore.data.contractStatus.id === 3"/>
         </div>
       </div>
@@ -38,6 +40,7 @@
     :close-modal="() => operateCreaeteInvoiceModal(false)" />
   <ConsentCreateModalVue :is-visible="consentModalVisible" :close-modal="() => operationConsentModal(false)" />
   <ConsentUpdateModalVue :is-visible="consentEditModalVisible" :close-modal="() => operationConsentEditModal(false)" />
+  <ContractEndModalVue :is-visible="contractEndModalVisible" :close-modal="() => operationContractEndModal(false)" />
 </template>
 
 <script>
@@ -53,6 +56,7 @@ import ConsentCreateModalVue from '@/components/consent/modal/ConsentCreateModal
 import ConsentUpdateModalVue from '@/components/consent/modal/ConsentUpdateModal.vue'
 import WarningBtnVue from '@/components/common/btn/WarningBtn.vue'
 import SuccessBtnVue from '@/components/common/btn/SuccessBtn.vue'
+import ContractEndModalVue from '@/components/contract/modal/ContractEndModal.vue'
 import { mapStores } from 'pinia'
 import { useContractCreateStore } from '@/stores/contract/contractCreate'
 import { useInvoiceListStore } from '@/stores/invoice/invoiceList'
@@ -75,8 +79,9 @@ export default {
     InvoiceCreateModalVue,
     ConsentCreateModalVue,
     ConsentUpdateModalVue,
+    ContractEndModalVue,
     WarningBtnVue,
-    SuccessBtnVue
+    SuccessBtnVue,
   },
   data() {
     return {
@@ -85,6 +90,7 @@ export default {
       creaeteInvoiceModalVisible: false,
       consentModalVisible: false,
       consentEditModalVisible: false,
+      contractEndModalVisible: false,
     }
   },
   computed: {
@@ -92,9 +98,6 @@ export default {
     ...mapStores(useContractCreateStore),
     ...mapStores(useInvoiceListStore),
     ...mapStores(useConsentDetailStore),
-    contractstatus() {
-      const stats = this.contractDetailStore.data.contrac
-    },
     contractStatsClass() {
       const id = this.contractDetailStore.data.contractStatus.id
       if (id === 1) {
@@ -119,6 +122,9 @@ export default {
     operationConsentEditModal(value) {
       this.consentEditModalVisible = value
     },
+    operationContractEndModal(value) {
+      this.contractEndModalVisible = value
+    },
     routeContractEdit() {
       this.$router.push(`/contract/${this.$route.params.id}/edit`)
     },
diff --git a/src/views/item/ItemDetailView.vue b/src/views/item/ItemDetailView.vue
index 5895ef5..8b2723c 100644
--- a/src/views/item/ItemDetailView.vue
+++ b/src/views/item/ItemDetailView.vue
@@ -80,7 +80,7 @@ export default {
       this.contractListStore.setFilter('itemId', this.$route.params.id);
       const result = await getContractList();
       if (result.code !== 200) {
-        console.log(result);
+        // 예외 처리
       }
     },
     setupWatchers() {
@@ -102,10 +102,8 @@ export default {
 
     this.contractListStore.$reset();
 
-    const result2 = await this.getContractList();
-    if (result2.code !== 200 && result2.code !== 400) {
-      return;
-    }
+    await this.getContractList();
+
 
     this.setupWatchers();
   }
diff --git a/src/views/member/MemberDetailView.vue b/src/views/member/MemberDetailView.vue
index 17c1adb..0c16cc3 100644
--- a/src/views/member/MemberDetailView.vue
+++ b/src/views/member/MemberDetailView.vue
@@ -103,10 +103,7 @@ export default {
 
     this.contractListStore.$reset();
     
-    const result2 = await this.getContractList();
-    if (result2.code !== 200 && result2.code !== 400) {
-      return;
-    }
+    await this.getContractList();
 
     this.setupWatchers();
   }

From 5dba65f843c3364d98fbee94b4554f82867a4b76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?= <rlagkswn37@naver.com>
Date: Tue, 6 Aug 2024 13:28:49 +0900
Subject: [PATCH 2/3] =?UTF-8?q?[K5P-80]=20=EC=B6=94=EA=B0=80=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=83=9D=EC=84=B1,=20=EA=B8=88=EC=95=A1=20?=
 =?UTF-8?q?=ED=86=B5=ED=99=94=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/TheNavBar.vue           | 17 +++++--
 src/components/common/info/TitleInfo.vue      |  3 +-
 src/components/common/input/InfoInput.vue     |  5 +-
 src/components/common/input/NumberInput.vue   |  3 +-
 src/components/common/select/TitleSelect.vue  |  3 +-
 .../common/select/TitleUpSelect.vue           |  3 +-
 .../contract/ContractCreateInfo.vue           | 26 ++++++----
 src/components/contract/ContractEditInfo.vue  | 14 ++---
 src/components/contract/ContractInfo.vue      | 22 ++++++--
 .../contract/create/ContractChooseItem.vue    |  2 +-
 .../contract/modal/InvoiceCreateModal.vue     |  6 ++-
 .../contract/modal/ItemSelectModal.vue        | 51 +++++++++++++++++++
 .../contract/modal/MemberSelectModal.vue      | 50 ++++++++++++++++++
 .../table/ContractInvoiceTableRow.vue         |  7 ++-
 .../contract/table/ContractTableRow.vue       |  7 ++-
 .../contract/table/ItemSelectTable.vue        |  2 +-
 .../contract/table/ItemSelectTableRow.vue     |  8 ++-
 .../contract/table/MemberSelectTableRow.vue   |  3 +-
 src/components/invoice/detail/InvoiceInfo.vue | 12 +++--
 src/components/invoice/detail/PaymentInfo.vue |  7 ++-
 .../invoice/table/InvoiceCreateTableRow.vue   |  6 ++-
 .../invoice/table/InvoiceTableRow.vue         |  7 ++-
 src/components/item/ItemInfo.vue              |  7 ++-
 src/components/item/modal/ItemCreateModal.vue |  4 +-
 .../item/table/ItemContractTableRow.vue       |  7 ++-
 src/components/item/table/ItemTableRow.vue    |  7 ++-
 src/components/member/MemberInfo.vue          | 12 +++--
 .../member/table/MemberContractTableRow.vue   |  7 ++-
 .../setting/SettingItemTableRow.vue           |  7 ++-
 src/stores/contract/contractCreate.js         |  8 +++
 src/views/contract/ContractCreateView.vue     | 38 ++++++--------
 src/views/invoice/InvoiceCreateView.vue       |  6 ++-
 32 files changed, 283 insertions(+), 84 deletions(-)
 create mode 100644 src/components/contract/modal/ItemSelectModal.vue
 create mode 100644 src/components/contract/modal/MemberSelectModal.vue

diff --git a/src/components/common/TheNavBar.vue b/src/components/common/TheNavBar.vue
index 7c5396b..a4b65b3 100644
--- 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
index 91750d7..72755b6 100644
--- 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
index b0c805c..5f530b8 100644
--- 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
index 3caa0d6..41969ec 100644
--- 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
index b0909b8..c4b952a 100644
--- 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
index 9719d29..8bd9609 100644
--- 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/contract/ContractCreateInfo.vue b/src/components/contract/ContractCreateInfo.vue
index a39546f..65dc8f7 100644
--- a/src/components/contract/ContractCreateInfo.vue
+++ b/src/components/contract/ContractCreateInfo.vue
@@ -1,7 +1,6 @@
 <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" />
@@ -9,18 +8,16 @@
       </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
index 0951138..2bf3914 100644
--- 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
index 058077e..07f4e81 100644
--- a/src/components/contract/ContractInfo.vue
+++ b/src/components/contract/ContractInfo.vue
@@ -12,7 +12,7 @@
       <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>
@@ -20,15 +20,15 @@
       <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
index d0882fb..5316c19 100644
--- 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/InvoiceCreateModal.vue b/src/components/contract/modal/InvoiceCreateModal.vue
index f1e1487..7f77459 100644
--- 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,
diff --git a/src/components/contract/modal/ItemSelectModal.vue b/src/components/contract/modal/ItemSelectModal.vue
new file mode 100644
index 0000000..4cc650e
--- /dev/null
+++ b/src/components/contract/modal/ItemSelectModal.vue
@@ -0,0 +1,51 @@
+<template>
+  <transition name="fade">
+    <div v-if="isVisible" class="modal-overlay">
+      <div class="modal-content">
+        <ModalHeaderVue :title="title" :closeModal="closeModal" />
+        <div class="right-side-header">
+          <ItemSearchVue />
+        </div>
+        <ItemSelectTableVue />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import ModalHeaderVue from '../../common/modal/ModalHeader.vue';
+import ItemSelectTableVue from '@/components/contract/table/ItemSelectTable.vue'
+import ItemSearchVue from '@/components/item/ItemSearch.vue'
+
+export default {
+  name: 'InvoiceCreateModalVue',
+  components: {
+    ModalHeaderVue,
+
+    ItemSelectTableVue,
+    ItemSearchVue,
+  },
+  props: {
+    'isVisible': Boolean,
+    'closeModal': Function,
+  },
+  data() {
+    return {
+      title: '상품 선택',
+      errorMsg: '',
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/component/modal.scss';
+
+.modal-content {
+  width: 800px;
+}
+
+.modal-content {
+  padding-bottom: 30px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/contract/modal/MemberSelectModal.vue b/src/components/contract/modal/MemberSelectModal.vue
new file mode 100644
index 0000000..ea76474
--- /dev/null
+++ b/src/components/contract/modal/MemberSelectModal.vue
@@ -0,0 +1,50 @@
+<template>
+  <transition name="fade">
+    <div v-if="isVisible" class="modal-overlay">
+      <div class="modal-content">
+        <ModalHeaderVue :title="title" :closeModal="closeModal" />
+        <div class="right-side-header">
+          <MemberSearchVue />
+        </div>
+        <MemberSelectTableVue />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import ModalHeaderVue from '../../common/modal/ModalHeader.vue';
+import MemberSelectTableVue from '@/components/contract/table/MemberSelectTable.vue'
+import MemberSearchVue from '@/components/member/MemberSearch.vue'
+
+export default {
+  name: 'MemberSelectModalVue',
+  components: {
+    ModalHeaderVue,
+    MemberSelectTableVue,
+    MemberSearchVue,
+  },
+  props: {
+    'isVisible': Boolean,
+    'closeModal': Function,
+  },
+  data() {
+    return {
+      title: '회원 선택',
+      errorMsg: '',
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/component/modal.scss';
+
+.modal-content {
+  width: 800px;
+}
+
+.modal-content {
+  padding-bottom: 30px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/contract/table/ContractInvoiceTableRow.vue b/src/components/contract/table/ContractInvoiceTableRow.vue
index b9ef0d1..594b198 100644
--- a/src/components/contract/table/ContractInvoiceTableRow.vue
+++ b/src/components/contract/table/ContractInvoiceTableRow.vue
@@ -1,7 +1,7 @@
 <template>
   <tr class="table-row" @click="routeInvoiceDetail">
     <td class="table-column"><span>{{ invoiceData.invoiceId }}</span></td>
-    <td class="table-column"><span>{{ invoiceData.chargeAmount }} 원</span></td>
+    <td class="table-column"><span>{{ currentChargeAmount }} 원</span></td>
     <td class="table-column"><span>{{ contractDate }}</span></td>
     <td class="table-column"><span>{{ dueDate }}</span></td>
     <td class="table-column">
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { toDateFromDateTime } from '@/utils/formatter';
+import { formatNumber, toDateFromDateTime } from '@/utils/formatter';
 
 export default {
   name: 'ContractInvoiceTableRowVue',
@@ -26,6 +26,9 @@ export default {
     }
   },
   computed: {
+    currentChargeAmount() {
+      return formatNumber(this.invoiceData.chargeAmount);
+    },
     contractDate() {
       return toDateFromDateTime(this.invoiceData.contractDate)
     },
diff --git a/src/components/contract/table/ContractTableRow.vue b/src/components/contract/table/ContractTableRow.vue
index b11e279..a4ad9ae 100644
--- a/src/components/contract/table/ContractTableRow.vue
+++ b/src/components/contract/table/ContractTableRow.vue
@@ -3,7 +3,7 @@
     <td class="table-column"><span>{{ contractData.id }}</span></td>
     <td class="table-column"><span>{{ contractData.itemName }}</span></td>
     <td class="table-column"><span>{{ contractData.memberName }}</span></td>
-    <td class="table-column"><span>{{ contractData.chargeAmount }} 원</span></td>
+    <td class="table-column"><span>{{ currentChargeAmount }} 원</span></td>
     <td class="table-column"><span>매월 {{ contractData.contractCycle }}일</span></td>
     <td class="table-column"><span>{{ contractData.subscription ? '구독' : '단기' }}</span></td>
     <td class="table-column"><span>{{ contractData.invoiceType.name }}</span></td>
@@ -21,6 +21,8 @@
 </template>
 
 <script>
+import { formatNumber } from '@/utils/formatter';
+
 export default {
   name: 'ContractTableRowVue',
   props: {
@@ -32,6 +34,9 @@ export default {
     }
   },
   computed: {
+    currentChargeAmount() {
+      return formatNumber(this.contractData.chargeAmount);
+    },
     contractStatsClass() {
       const id = this.contractData.contractStatus.id
       if (id === 1) {
diff --git a/src/components/contract/table/ItemSelectTable.vue b/src/components/contract/table/ItemSelectTable.vue
index 8dca555..5e5482b 100644
--- a/src/components/contract/table/ItemSelectTable.vue
+++ b/src/components/contract/table/ItemSelectTable.vue
@@ -15,10 +15,10 @@
 <script>
 import TableHaederVue from '@/components/common/table/TableHaeder.vue';
 import PaginationBarVue from '@/components/common/PaginationBar.vue';
+import ItemSelectTableRowVue from './ItemSelectTableRow.vue';
 import { mapActions, mapStores } from 'pinia';
 import { useItemStore } from '@/stores/item';
 import { getItemList } from '@/utils/item';
-import ItemSelectTableRowVue from './ItemSelectTableRow.vue';
 
 
 export default {
diff --git a/src/components/contract/table/ItemSelectTableRow.vue b/src/components/contract/table/ItemSelectTableRow.vue
index 6114140..7c7d4be 100644
--- a/src/components/contract/table/ItemSelectTableRow.vue
+++ b/src/components/contract/table/ItemSelectTableRow.vue
@@ -3,12 +3,13 @@
     <td class="table-column"><span>{{ itemData.id }}</span></td>
     <td class="table-column"><img :src="itemData.imageUrl" alt="item-image" class="item-image"></td>
     <td class="table-column"><span>{{ itemData.name }}</span></td>
-    <td class="table-column"><span>{{ itemData.price }}원</span></td>
+    <td class="table-column"><span>{{ currentPrice }}원</span></td>
   </tr>
 </template>
 
 <script>
 import { useContractCreateStore } from '@/stores/contract/contractCreate';
+import { formatNumber } from '@/utils/formatter';
 import { mapActions, mapStores } from 'pinia';
 
 export default {
@@ -18,6 +19,9 @@ export default {
   },
   computed: {
     ...mapStores(useContractCreateStore),
+    currentPrice() {
+      return formatNumber(this.itemData.price)
+    },
     isChoosed() {
       return this.itemData.id === this.contractCreateStore.item.id;
     }
@@ -26,6 +30,8 @@ export default {
     ...mapActions(useContractCreateStore, ['setItem']),
     chooseItem() {
       this.contractCreateStore.setItem(this.itemData);  
+      this.contractCreateStore.setSelectingItem(false);
+
     }
   } 
 }
diff --git a/src/components/contract/table/MemberSelectTableRow.vue b/src/components/contract/table/MemberSelectTableRow.vue
index ac1e075..167ba0b 100644
--- a/src/components/contract/table/MemberSelectTableRow.vue
+++ b/src/components/contract/table/MemberSelectTableRow.vue
@@ -25,7 +25,8 @@ export default {
   methods: {
     ...mapActions(useContractCreateStore, ['setMember']),
     chooseMember() {
-      this.contractCreateStore.setMember(this.memberData);  
+      this.contractCreateStore.setMember(this.memberData);
+      this.contractCreateStore.setSelectingMember(false);  
     }
   } 
 }
diff --git a/src/components/invoice/detail/InvoiceInfo.vue b/src/components/invoice/detail/InvoiceInfo.vue
index f483857..778fa5d 100644
--- a/src/components/invoice/detail/InvoiceInfo.vue
+++ b/src/components/invoice/detail/InvoiceInfo.vue
@@ -12,7 +12,7 @@
       <span class="title">상품 정보</span>
       <TitleInfoVue title="이름" :info="invoiceDetailStore.data.item.name" />
       <div class="double-info">
-        <TitleInfoVue title="금액" :info="`${invoiceDetailStore.data.item.price}원`" />
+        <TitleInfoVue title="금액" :info="`${currentPrice}원`" />
         <TitleInfoVue title="수량" :info="`${invoiceDetailStore.data.item.amount} 개`"  />
       </div>
     </div>
@@ -28,7 +28,7 @@
       </div>
       <div class="double-info">
         <TitleInfoVue title="구독 여부" :info="subscription" />
-        <TitleInfoVue title="청구액" :info="`${invoiceDetailStore.data.chargeAmount} 원`" />
+        <TitleInfoVue title="청구액" :info="`${currentInvoice} 원`" />
       </div>
       <div class="double-info">
         <TitleInfoVue title="결제일" :info="contractDate" />
@@ -44,7 +44,7 @@
 
 <script>
 import { mapStores } from 'pinia';
-import { toDateFromDateTime } from '@/utils/formatter';
+import { formatNumber, toDateFromDateTime } from '@/utils/formatter';
 import TitleInfoVue from '../../common/info/TitleInfo.vue';
 import { useInvoiceDetailStore } from '@/stores/invoice/invoiceDetail';
 
@@ -55,6 +55,12 @@ export default {
   },
   computed: {
     ...mapStores(useInvoiceDetailStore),
+    currentPrice() {
+      return formatNumber(this.invoiceDetailStore.data.chargeAmount);
+    },
+    currentInvoice() {
+      return formatNumber(this.invoiceDetailStore.data.chargeAmount);
+    },
     subscription() {
       return this.invoiceDetailStore.data.isSubscription? '정기': '단기';
     },
diff --git a/src/components/invoice/detail/PaymentInfo.vue b/src/components/invoice/detail/PaymentInfo.vue
index 4538b8a..b2f9fe7 100644
--- a/src/components/invoice/detail/PaymentInfo.vue
+++ b/src/components/invoice/detail/PaymentInfo.vue
@@ -9,7 +9,7 @@
         <TitleInfoVue title="납부일" :info="createAt"/>
         <TitleInfoVue title="납부 수단" :info="paymentMethod"/>
       </div>
-      <TitleInfoVue title="납부금" :info="`${paymentStore.data.payAmount}원`"/>
+      <TitleInfoVue title="납부금" :info="`${currentPayAmount}원`"/>
     </div>
     <div class="info-box" v-show="paymentStore.data.paymentMethod === 'CARD'">
       <div class="double-info">
@@ -33,7 +33,7 @@ import { usePaymentStore } from '@/stores/invoice/payment';
 import { getPayment } from '@/utils/payement';
 import { mapStores } from 'pinia';
 import TitleInfoVue from '../../common/info/TitleInfo.vue';
-import { toDateFromDateTime } from '@/utils/formatter';
+import { formatNumber, toDateFromDateTime } from '@/utils/formatter';
 
 export default {
   name: 'PaymentInfoVue',
@@ -42,6 +42,9 @@ export default {
   },
   computed: {
     ...mapStores(usePaymentStore),
+    currentPayAmount() {
+      return formatNumber(this.paymentStore.data.payAmount);
+    },
     paymentMethod() {
       if (this.paymentStore.data.paymentMethod === 'CARD') {
         return '카드';
diff --git a/src/components/invoice/table/InvoiceCreateTableRow.vue b/src/components/invoice/table/InvoiceCreateTableRow.vue
index d0c83ba..430b9b0 100644
--- a/src/components/invoice/table/InvoiceCreateTableRow.vue
+++ b/src/components/invoice/table/InvoiceCreateTableRow.vue
@@ -3,7 +3,7 @@
     <td class="table-column"><span>{{ contractData.id }}</span></td>
     <td class="table-column"><span>{{ contractData.itemName }}</span></td>
     <td class="table-column"><span>{{ contractData.memberName }}</span></td>
-    <td class="table-column"><span>{{ contractData.chargeAmount }} 원</span></td>
+    <td class="table-column"><span>{{ currentChargeAmount }} 원</span></td>
     <td class="table-column"><span>매월 {{ contractData.contractCycle }}일</span></td>
     <td class="table-column"><span>{{ contractData.subscription ? '구독' : '단기' }}</span></td>
     <td class="table-column"><span>{{ contractData.invoiceType.name }}</span></td>
@@ -17,6 +17,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useInvoiceCreateStore } from '@/stores/invoice/invoiceCreate';
+import { formatNumber } from '@/utils/formatter';
 
 export default {
   name: 'InvoiceCreateTableRowVue',
@@ -30,6 +31,9 @@ export default {
   },
   computed: {
     ...mapStores(useInvoiceCreateStore),
+    currentChargeAmount() {
+      return formatNumber(this.contractData.chargeAmount);
+    },
     upPaidStatusClass() {
       const count = this.contractData.totalUnpaidCount;
       return count > 0 ? 'warning' : 'success';
diff --git a/src/components/invoice/table/InvoiceTableRow.vue b/src/components/invoice/table/InvoiceTableRow.vue
index f852f24..502711d 100644
--- a/src/components/invoice/table/InvoiceTableRow.vue
+++ b/src/components/invoice/table/InvoiceTableRow.vue
@@ -4,7 +4,7 @@
     <td class="table-column"><span>{{ invoiceData.contractId }}</span></td>
     <td class="table-column"><span>{{ invoiceData.itemName }}</span></td>
     <td class="table-column"><span>{{ invoiceData.memberName }}</span></td>
-    <td class="table-column"><span>{{ invoiceData.chargeAmount }} 원</span></td>
+    <td class="table-column"><span>{{ currentChargeAmount }} 원</span></td>
     <td class="table-column"><span>{{ contractDate }}</span></td>
     <td class="table-column"><span>{{ dueDate }}</span></td>
     <td class="table-column"><span>{{ createdAt }}</span></td>
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { toDateFromDateTime } from '@/utils/formatter';
+import { formatNumber, toDateFromDateTime } from '@/utils/formatter';
 
 export default {
   name: 'InvoiceTableRowVue',
@@ -31,6 +31,9 @@ export default {
     }
   },
   computed: {
+    currentChargeAmount() {
+      return formatNumber(this.invoiceData.chargeAmount)
+    },
     contractDate() {
       return toDateFromDateTime(this.invoiceData.contractDate)
     },
diff --git a/src/components/item/ItemInfo.vue b/src/components/item/ItemInfo.vue
index 9a1022d..387f9fc 100644
--- a/src/components/item/ItemInfo.vue
+++ b/src/components/item/ItemInfo.vue
@@ -2,7 +2,7 @@
     <div class="info-container">
       <img :src="itemStore.currentItem.imageUrl" alt="item-image">
       <TitleInfoVue title="상품명" :info="itemStore.currentItem.name"/>
-      <TitleInfoVue title="가격" :info="`${itemStore.currentItem.price}원`"/>
+      <TitleInfoVue title="가격" :info="`${currentPrice}원`"/>
       <TitleInfoVue title="생성일" :info="createdAtDate"/>
       <TitleInfoVue title="수정일" :info="updatedAtDate"/>
       <DescriptionInfoVue :infoValue="itemStore.currentItem.description"/>
@@ -12,7 +12,7 @@
 <script>
 import { useItemStore } from '@/stores/item';
 import { mapStores } from 'pinia';
-import { toDateFromDateTime } from '@/utils/formatter';
+import { formatNumber, toDateFromDateTime } from '@/utils/formatter';
 import TitleInfoVue from '@/components/common/info/TitleInfo.vue';
 import DescriptionInfoVue from '../common/info/DescriptionInfo.vue';
 
@@ -24,6 +24,9 @@ export default {
   },
   computed: {
     ...mapStores(useItemStore),
+    currentPrice() {
+      return formatNumber(this.itemStore.currentItem.price);
+    },
     createdAtDate() {
       return toDateFromDateTime(this.itemStore.currentItem.createdAt)
     },
diff --git a/src/components/item/modal/ItemCreateModal.vue b/src/components/item/modal/ItemCreateModal.vue
index fefb407..49a9c7c 100644
--- a/src/components/item/modal/ItemCreateModal.vue
+++ b/src/components/item/modal/ItemCreateModal.vue
@@ -10,7 +10,7 @@
           </div>
           <input type="file" ref="fileInput" @change="onImageChange" accept="image/*" style="display: none;" />
           <InfoInputVue title="상품명" v-model="name"/>
-          <InfoInputVue title="가격" v-model="price"/>
+          <NumberInputVue title="가격" unit="원" v-model="price"/>
           <TextAreaInputVue rows=5 title="상세설명을 입력하세요." v-model="description"/>
         </div>
         <ModalFooterVue :title="title" :errorMsg="errorMsg" :func="() => createItem()"/>
@@ -24,6 +24,7 @@ import ModalHeaderVue from '../../common/modal/ModalHeader.vue';
 import ModalFooterVue from '../../common/modal/ModalFooter.vue';
 import InfoInputVue from '../../common/input/InfoInput.vue';
 import TextAreaInputVue from '../../common/input/TextAreaInput.vue';
+import NumberInputVue from '@/components/common/input/NumberInput.vue';
 import { createItem } from '@/utils/item';
 
 export default {
@@ -33,6 +34,7 @@ export default {
     ModalFooterVue,
     InfoInputVue,
     TextAreaInputVue,
+    NumberInputVue
   },
   props: {
     'isVisible': Boolean,
diff --git a/src/components/item/table/ItemContractTableRow.vue b/src/components/item/table/ItemContractTableRow.vue
index b4d77bd..1814332 100644
--- a/src/components/item/table/ItemContractTableRow.vue
+++ b/src/components/item/table/ItemContractTableRow.vue
@@ -2,7 +2,7 @@
   <tr class="table-row" @click="routeContractDetail">
     <td class="table-column"><span>{{ contractData.id }}</span></td>
     <td class="table-column"><span>{{ contractData.memberName }}</span></td>
-    <td class="table-column"><span>{{ contractData.chargeAmount }} 원</span></td>
+    <td class="table-column"><span>{{ currentChargeAmount }} 원</span></td>
     <td class="table-column"><span>매월 {{ contractData.contractCycle }}일</span></td>
     <td class="table-column"><span>{{ contractData.subscription? '구독' : '단기' }}</span></td>
     <td class="table-column"><span>{{ contractData.invoiceType.name }}</span></td>
@@ -18,6 +18,8 @@
 </template>
 
 <script>
+import { formatNumber } from '@/utils/formatter';
+
 export default {
   name: 'ItemContractTableRowVue',
   props: {
@@ -29,6 +31,9 @@ export default {
     }
   },
   computed: {
+    currentChargeAmount() {
+      return formatNumber(this.contractData.chargeAmount);
+    },
     contractStatsClass() {
       const id = this.contractData.contractStatus.id
       if (id === 1) {
diff --git a/src/components/item/table/ItemTableRow.vue b/src/components/item/table/ItemTableRow.vue
index 65e94ae..58a9f08 100644
--- a/src/components/item/table/ItemTableRow.vue
+++ b/src/components/item/table/ItemTableRow.vue
@@ -3,7 +3,7 @@
     <td class="table-column"><span>{{ itemData.id }}</span></td>
     <td class="table-column"><img :src="itemData.imageUrl" alt="item-image" class="item-image"></td>
     <td class="table-column"><span>{{ itemData.name }}</span></td>
-    <td class="table-column"><span>{{ itemData.price }}원</span></td>
+    <td class="table-column"><span>{{ currentPrice }}원</span></td>
     <td class="table-column"><span>{{ itemData.contractCount }}건</span></td>
     <td class="table-column"><span>{{ createdAtDate }}</span></td>
     <td class="table-column"><span>{{ updatedAtDate }}</span></td>
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { toDateFromDateTime } from '@/utils/formatter';
+import { formatNumber, toDateFromDateTime } from '@/utils/formatter';
 
 export default {
   name: 'ItemTableRowVue',
@@ -19,6 +19,9 @@ export default {
     itemData: Object
   },
   computed: {
+    currentPrice() {
+      return formatNumber(this.itemData.price);
+    },
     createdAtDate() {
       return toDateFromDateTime(this.itemData.createdAt)
     },
diff --git a/src/components/member/MemberInfo.vue b/src/components/member/MemberInfo.vue
index 917a45e..c90065e 100644
--- a/src/components/member/MemberInfo.vue
+++ b/src/components/member/MemberInfo.vue
@@ -5,8 +5,8 @@
     <IconInfoVue icon="bi bi-telephone-fill" :info="memberStore.currentMember.phone"/>
     <TitleInfoVue title="계약건" :info="`${memberStore.currentMember.contractCount} 건`"/>
     <TitleInfoVue title="미납건" :info="`${memberStore.currentMember.unPaidCount} 건`"/>
-    <TitleInfoVue title="총 청구액" :info="`${memberStore.currentMember.totalInvoiceAmount}원`"/>
-    <TitleInfoVue title="총 미납액" :info="`${memberStore.currentMember.totalUnpaidAmount}원`"/>
+    <TitleInfoVue title="총 청구액" :info="`${totalInvoiceAmount}원`"/>
+    <TitleInfoVue title="총 미납액" :info="`${totalUnpaidAmount}원`"/>
     <TitleInfoVue title="등록일" :info="createdAtDate"/>
     <TitleInfoVue title="수정일" :info="updatedAtDate"/>
     <DescriptionInfoVue :infoValue="memberStore.currentMember.description"/>
@@ -16,7 +16,7 @@
 <script>
 import { mapStores } from 'pinia';
 import { useMemberStore } from '@/stores/member/member';
-import { toDateFromDateTime } from '@/utils/formatter';
+import { formatNumber, toDateFromDateTime } from '@/utils/formatter';
 import IconInfoVue from '../common/info/IconInfo.vue';
 import TitleInfoVue from '@/components/common/info/TitleInfo.vue';
 import DescriptionInfoVue from '../common/info/DescriptionInfo.vue';
@@ -30,6 +30,12 @@ components: {
 },
 computed: {
   ...mapStores(useMemberStore),
+  totalInvoiceAmount() {
+    return formatNumber(this.memberStore.currentMember.totalInvoiceAmount);
+  },
+  totalUnpaidAmount() {
+    return formatNumber(this.memberStore.currentMember.totalInvoiceAmount);
+  },
   createdAtDate() {
     return toDateFromDateTime(this.memberStore.currentMember.createdAt)
   },
diff --git a/src/components/member/table/MemberContractTableRow.vue b/src/components/member/table/MemberContractTableRow.vue
index c9b0428..06faf69 100644
--- a/src/components/member/table/MemberContractTableRow.vue
+++ b/src/components/member/table/MemberContractTableRow.vue
@@ -2,7 +2,7 @@
   <tr class="table-row" @click="routeContractDetail">
     <td class="table-column"><span>{{ contractData.id }}</span></td>
     <td class="table-column"><span>{{ contractData.itemName }}</span></td>
-    <td class="table-column"><span>{{ contractData.chargeAmount }} 원</span></td>
+    <td class="table-column"><span>{{ currentChargeAmount }} 원</span></td>
     <td class="table-column"><span>매월 {{ contractData.contractCycle }}일</span></td>
     <td class="table-column"><span>{{ contractData.subscription? '구독' : '단기' }}</span></td>
     <td class="table-column"><span>{{ contractData.invoiceType.name }}</span></td>
@@ -18,6 +18,8 @@
 </template>
 
 <script>
+import { formatNumber } from '@/utils/formatter';
+
 export default {
   name: 'MemberContractTableRowVue',
   props: {
@@ -29,6 +31,9 @@ export default {
     }
   },
   computed: {
+    currentChargeAmount() {
+      return formatNumber(this.contractData.chargeAmount);
+    },
     contractStatsClass() {
       const id = this.contractData.contractStatus.id
       if (id === 1) {
diff --git a/src/components/setting/SettingItemTableRow.vue b/src/components/setting/SettingItemTableRow.vue
index 20d538a..981b8fe 100644
--- a/src/components/setting/SettingItemTableRow.vue
+++ b/src/components/setting/SettingItemTableRow.vue
@@ -3,7 +3,7 @@
     <td class="table-column"><span>{{ itemData.id }}</span></td>
     <td class="table-column"><img :src="itemData.imageUrl" alt="item-image" class="item-image"></td>
     <td class="table-column"><span>{{ itemData.name }}</span></td>
-    <td class="table-column"><span>{{ itemData.price }}원</span></td>
+    <td class="table-column"><span>{{ currentPrice }}원</span></td>
     <td class="table-column"><span>{{ itemData.contractCount }}건</span></td>
     <td class="table-column"><span>{{ createdAtDate }}</span></td>
     <td class="table-column"><span>{{ updatedAtDate }}</span></td>
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { toDateFromDateTime } from '@/utils/formatter';
+import { formatNumber, toDateFromDateTime } from '@/utils/formatter';
 
 export default {
   name: 'SettingItemTableRow',
@@ -31,6 +31,9 @@ export default {
     }
   },
   computed: {
+    currentPrice() {
+      return formatNumber(this.itemData.price);
+    },
     createdAtDate() {
       return toDateFromDateTime(this.itemData.createdAt)
     },
diff --git a/src/stores/contract/contractCreate.js b/src/stores/contract/contractCreate.js
index a82c88c..4ff1a4c 100644
--- a/src/stores/contract/contractCreate.js
+++ b/src/stores/contract/contractCreate.js
@@ -4,6 +4,8 @@ export const useContractCreateStore = defineStore('contractCreate', {
   state() {
     return {
       dataPassed: false,
+      selectingItem: false,
+      selectingMember: false,
       step: 0,
       member: {
         id: '',
@@ -41,6 +43,12 @@ export const useContractCreateStore = defineStore('contractCreate', {
     }
   },
   actions: {
+    setSelectingItem(value) {
+      this.selectingItem = value;
+    },
+    setSelectingMember(value) {
+      this.selectingMember = value;
+    },
     setDataPassed(value) {
       this.dataPassed = value
     },
diff --git a/src/views/contract/ContractCreateView.vue b/src/views/contract/ContractCreateView.vue
index 458ba97..17a9f2f 100644
--- a/src/views/contract/ContractCreateView.vue
+++ b/src/views/contract/ContractCreateView.vue
@@ -3,32 +3,26 @@
     <div class="left-side">
       <ContractCreateInfoVue />
       <div class="warning-msg">{{ warningMsg }}</div>
-      <div class="btn-box" v-if="contractCreateStore.step === 0">
-        <WarningWideBtnVue title="취소" :func="routeContratList" />
-        <ThemeWideBtnVue title="다음" :func="() => changeStep(1)" />
-      </div>
-      <div class="btn-box" v-if="contractCreateStore.step === 1">
-        <ThemeWideBtnVue title="이전" :func="() => changeStep(0)" />
-        <ThemeWideBtnVue title="다음" :func="() => changeStep(2)" />
-      </div>
-      <div class="btn-box" v-if="contractCreateStore.step === 2">
-        <ThemeWideBtnVue title="이전" :func="() => changeStep(1)" />
+      <div class="btn-box">
+        <WarningWideBtnVue title="취소" :func="routeContract" />
         <SuccessWideBtnVue title="완료" :func="createContract" />
       </div>
     </div>
-    <ContractChooseMemberVue v-if="contractCreateStore.step === 0" />
-    <ContractChooseItemVue v-if="contractCreateStore.step === 1" />
   </div>
+  <ItemSelectModalVue 
+    :isVisible="contractCreateStore.selectingItem"
+    :close-modal="() => contractCreateStore.setSelectingItem(false)"/>
+  <MemberSelectModalVue 
+    :isVisible="contractCreateStore.selectingMember"
+    :close-modal="() => contractCreateStore.setSelectingMember(false)"/>
 </template>
 
 <script>
 import WarningWideBtnVue from '@/components/common/btn/WarningWideBtn.vue'
-import ThemeWideBtnVue from '@/components/common/btn/ThemeWideBtn.vue'
 import SuccessWideBtnVue from '@/components/common/btn/SuccessWideBtn.vue'
 import ContractCreateInfoVue from '@/components/contract/ContractCreateInfo.vue'
-import ContractChooseMemberVue from '@/components/contract/create/ContractChooseMember.vue'
-import ContractChooseItemVue from '@/components/contract/create/ContractChooseItem.vue'
-import ContractChooseInfoVue from '@/components/contract/create/ContractChooseInfo.vue'
+import ItemSelectModalVue from '@/components/contract/modal/ItemSelectModal.vue'
+import MemberSelectModalVue from '@/components/contract/modal/MemberSelectModal.vue'
 import { mapStores } from 'pinia'
 import { useContractCreateStore } from '@/stores/contract/contractCreate'
 import { createContract } from '@/utils/contract'
@@ -38,16 +32,14 @@ export default {
   name: 'ContractCreateView',
   components: {
     WarningWideBtnVue,
-    ThemeWideBtnVue,
     SuccessWideBtnVue,
     ContractCreateInfoVue,
-    ContractChooseMemberVue,
-    ContractChooseItemVue,
-    ContractChooseInfoVue
+    ItemSelectModalVue,
+    MemberSelectModalVue
   },
   data() {
     return {
-      warningMsg: ''
+      warningMsg: '',
     }
   },
   computed: {
@@ -57,8 +49,8 @@ export default {
     routeContratList() {
       this.$router.push({ name: 'contract' });
     },
-    changeStep(step) {
-      this.contractCreateStore.setStep(step);
+    routeContract() {
+      this.$router.push({name:'contract'});
     },
     async createContract() {
       const result = await createContract();
diff --git a/src/views/invoice/InvoiceCreateView.vue b/src/views/invoice/InvoiceCreateView.vue
index 395d2aa..7585d67 100644
--- a/src/views/invoice/InvoiceCreateView.vue
+++ b/src/views/invoice/InvoiceCreateView.vue
@@ -5,7 +5,7 @@
         <TitleInfoVue title="계약ID" :info="invoiceCreateStore.data.contractId" />
         <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>
@@ -24,6 +24,7 @@
 
 <script>
 import InfoInputVue from '@/components/common/input/InfoInput.vue';
+import NumberInputVue from '@/components/common/input/NumberInput.vue';
 import TitleSelectVue from '@/components/common/select/TitleSelect.vue';
 import PaginationBarVue from '@/components/common/PaginationBar.vue';
 import InvoiceCreateTableVue from '@/components/invoice/table/InvoiceCreateTable.vue';
@@ -45,7 +46,8 @@ export default {
     TitleSelectVue,
     InvoiceCreateTableVue,
     ThemeBtnVue,
-    WarningBtnVue
+    WarningBtnVue,
+    NumberInputVue
   },
   data() {
     return {

From 206f1be76c013793ebab2b30b2840a6ae6153c3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?= <rlagkswn37@naver.com>
Date: Tue, 6 Aug 2024 13:29:44 +0900
Subject: [PATCH 3/3] =?UTF-8?q?[K5P-80]=20[fix]=20=EB=B2=84=EC=A0=84=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9ecbdc3..be65912 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "billing-wise",
-  "version": "0.0.0",
+  "version": "1.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "billing-wise",
-      "version": "0.0.0",
+      "version": "1.0.1",
       "dependencies": {
         "axios": "^1.7.2",
         "billing-wise": "file:",
diff --git a/package.json b/package.json
index 42267eb..a4b9df0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "billing-wise",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "type": "module",
   "scripts": {