From e79978ce45121bec80cfd3507e056b9a11e98651 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?= <rlagkswn37@naver.com>
Date: Sun, 4 Aug 2024 07:41:25 +0900
Subject: [PATCH 1/7] =?UTF-8?q?[K5P80]=20[fix]=20=EB=A9=98=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95=EC=82=AC?=
 =?UTF-8?q?=ED=95=AD=20=EB=B0=98=EC=98=81=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/component/table.scss             |  1 +
 src/components/common/ExcelUpload.vue            |  6 +++---
 src/components/common/TheNavBar.vue              | 16 ++++++++++------
 .../contract/table/ContractTableRow.vue          |  2 +-
 src/components/invoice/detail/InvoiceInfo.vue    |  2 +-
 .../invoice/detail/PaymentStatusBar.vue          | 13 +++++--------
 .../invoice/modal/InvoiceUpdateModal.vue         |  2 +-
 .../item/table/ItemContractTableRow.vue          |  2 +-
 .../member/table/MemberContractTableRow.vue      |  2 +-
 src/stores/auth.js                               |  9 ++++++++-
 src/stores/contract/contractBulk.js              |  3 ++-
 src/stores/contract/contractList.js              |  2 +-
 src/stores/invoice/invoiceList.js                |  2 +-
 src/stores/member/memberBulk.js                  |  3 ++-
 src/utils/item.js                                |  2 +-
 src/views/contract/ContractDetailView.vue        |  4 ++--
 src/views/invoice/InvoiceCreateView.vue          |  4 ++--
 17 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/src/assets/scss/component/table.scss b/src/assets/scss/component/table.scss
index 22fb911..4e3d688 100644
--- a/src/assets/scss/component/table.scss
+++ b/src/assets/scss/component/table.scss
@@ -14,6 +14,7 @@
   background: white;
   width: 100%;
   flex-grow: 1;
+  min-height: 500px;
   overflow:auto;
   border-radius: 5px;
 }
diff --git a/src/components/common/ExcelUpload.vue b/src/components/common/ExcelUpload.vue
index 640d853..61abfde 100644
--- a/src/components/common/ExcelUpload.vue
+++ b/src/components/common/ExcelUpload.vue
@@ -18,8 +18,8 @@
       <div class="error-box">{{ errorMsg }}</div>
     </footer>
   </div>
-  <a ref="hiddenLink" style="display: none;" :href="`/src/assets/excels/${store.download}`"
-    :download="store.download"></a>
+  <a ref="hiddenLink" style="display: none;" :href="store.download"
+    :download="store.fileName"></a>
 </template>
 
 <script>
@@ -52,6 +52,7 @@ export default {
       const link = this.$refs.hiddenLink;
       link.click();
     },
+    // 엑셀 파일 리드 후 사용자에게 데이터 표시
     readExel() {
       if (this.file === null) {
         this.errorMsg = '파일을 업로드해주세요.';
@@ -82,7 +83,6 @@ export default {
       };
 
       reader.readAsArrayBuffer(this.file);
-      console.log(this.store.uploadData)
     }
   },
   mounted() { 
diff --git a/src/components/common/TheNavBar.vue b/src/components/common/TheNavBar.vue
index 7dbeefa..779eb3d 100644
--- a/src/components/common/TheNavBar.vue
+++ b/src/components/common/TheNavBar.vue
@@ -2,14 +2,16 @@
   <nav class="nav-bar">
     <img src="@/assets/images/name_white.png" alt="">
     <div class="nav-info">
-      <div class="nav-info-item">{{ clientName }}</div>
-      <div class="nav-info-item">{{ userName }} 님</div>
+      <div class="nav-info-item">{{ authStore.clientName }}</div>
+      <div class="nav-info-item">{{ authStore.userName }} 님</div>
     </div>
   </nav>
 </template>
 
 <script>
+import { useAuthStore } from '@/stores/auth';
 import { mainAxios } from '@/utils/axios';
+import { mapStores } from 'pinia';
 
 export default {
   name: 'TheNavBarVue',
@@ -19,12 +21,14 @@ export default {
       userName: String,
     };
   },
+  computed: {
+    ...mapStores(useAuthStore)
+  },
   async mounted() {
     const result = await mainAxios.get('users/current');
-    this.clientName = result.data.clientName
-    this.userName = result.data.userName
-  },
-  method: {
+    if (result.code === 200) {
+      this.authStore.setUserData(result.data)
+    }
   },
 }
 </script>
diff --git a/src/components/contract/table/ContractTableRow.vue b/src/components/contract/table/ContractTableRow.vue
index d0d88fe..0f10471 100644
--- a/src/components/contract/table/ContractTableRow.vue
+++ b/src/components/contract/table/ContractTableRow.vue
@@ -46,7 +46,7 @@ export default {
     },
     upPaidStatus() {
       const count = this.contractData.totalUnpaidCount;
-      return count > 0 ? `미납 ${count}건` : '완납';
+      return count > 0 ? `미납 ${count}건` : '없음';
     },
   },
   methods: {
diff --git a/src/components/invoice/detail/InvoiceInfo.vue b/src/components/invoice/detail/InvoiceInfo.vue
index 2d2afb4..f483857 100644
--- a/src/components/invoice/detail/InvoiceInfo.vue
+++ b/src/components/invoice/detail/InvoiceInfo.vue
@@ -31,7 +31,7 @@
         <TitleInfoVue title="청구액" :info="`${invoiceDetailStore.data.chargeAmount} 원`" />
       </div>
       <div class="double-info">
-        <TitleInfoVue title="약정일" :info="contractDate" />
+        <TitleInfoVue title="결제일" :info="contractDate" />
         <TitleInfoVue title="납부 기한" :info="dueDate" />
       </div>
       <div class="double-info">
diff --git a/src/components/invoice/detail/PaymentStatusBar.vue b/src/components/invoice/detail/PaymentStatusBar.vue
index 24c7fe7..1ab215d 100644
--- a/src/components/invoice/detail/PaymentStatusBar.vue
+++ b/src/components/invoice/detail/PaymentStatusBar.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="payment-status-bar">
-    <div :class="{ 'bar-item': true, 'waiting-bar': invoiceDetailStore.data.paymentStatus.id === 3 }">
+    <div :class="{ 'bar-item': true, 'theme-bar': invoiceDetailStore.data.paymentStatus.id === 3 }">
       수납 대기
     </div>
-    <div :class="{ 'bar-item': true, 'success-bar': invoiceDetailStore.data.paymentStatus.id === 2 }">
+    <div :class="{ 'bar-item': true, 'theme-bar': invoiceDetailStore.data.paymentStatus.id === 2 }">
       수납 완료
     </div>
     <div :class="{ 'bar-item': true, 'warning-bar': invoiceDetailStore.data.paymentStatus.id === 1 }">
@@ -40,7 +40,6 @@ export default {
     height: 100%;
     font-size: 20px;
     font-weight: bold;
-    color: white;
   }
 
   .bar-item:first-child {
@@ -52,15 +51,13 @@ export default {
   }
 }
 
-.waiting-bar {
-  background-color: $theme-color;
-}
-
-.success-bar {
+.theme-bar {
   background-color: $theme-color;
+  color: white;
 }
 
 .warning-bar {
   background-color: $warning-color;
+  color: white;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/invoice/modal/InvoiceUpdateModal.vue b/src/components/invoice/modal/InvoiceUpdateModal.vue
index f786fc9..ccb6444 100644
--- a/src/components/invoice/modal/InvoiceUpdateModal.vue
+++ b/src/components/invoice/modal/InvoiceUpdateModal.vue
@@ -7,7 +7,7 @@
           <TitleSelectVue title="결제 수단" :selectedIdx="paymentTypeIdx" :keywordArr="paymentType"
             :choiceFunc="setPaymentType" />
           <InfoInputVue title="청구금" v-model="chargeAmount" type="number" />
-          <InfoInputVue title="약정일" type="date" v-model="contractDate" />
+          <InfoInputVue title="결제일" type="date" v-model="contractDate" />
           <InfoInputVue title="납부기한" type="date" v-model="dueDate" />
         </div>
         <ModalFooterVue :title="title" :errorMsg="errorMsg" :func="() => updateInvoice()" />
diff --git a/src/components/item/table/ItemContractTableRow.vue b/src/components/item/table/ItemContractTableRow.vue
index 7fdbec1..b4d77bd 100644
--- a/src/components/item/table/ItemContractTableRow.vue
+++ b/src/components/item/table/ItemContractTableRow.vue
@@ -45,7 +45,7 @@ export default {
     },
     upPaidStatus() {
       const count = this.contractData.totalUnpaidCount;
-      return count > 0 ? `미납 ${count}건` : '완납';
+      return count > 0 ? `미납 ${count}건` : '없음';
     },
   },
   methods: {
diff --git a/src/components/member/table/MemberContractTableRow.vue b/src/components/member/table/MemberContractTableRow.vue
index 821f2c0..c9b0428 100644
--- a/src/components/member/table/MemberContractTableRow.vue
+++ b/src/components/member/table/MemberContractTableRow.vue
@@ -45,7 +45,7 @@ export default {
     },
     upPaidStatus() {
       const count = this.contractData.totalUnpaidCount;
-      return count > 0 ? `미납 ${count}건` : '완납';
+      return count > 0 ? `미납 ${count}건` : '없음';
     },
   },
   methods: {
diff --git a/src/stores/auth.js b/src/stores/auth.js
index d71b8f5..33e79fd 100644
--- a/src/stores/auth.js
+++ b/src/stores/auth.js
@@ -5,17 +5,24 @@ import { defineStore } from 'pinia'
 export const useAuthStore = defineStore('auth', {
   state() {
     return {
-      isLoggedIn: false
+      isLoggedIn: false,
+      clientName: '',
+      userName: ''
     }
   },
   actions: {
     login() {
+      this.$reset();
       this.isLoggedIn = true;
     },
     logout() {
       authAxios.post('auth/logout');
       this.isLoggedIn = false;
       router.push({name: 'login'})
+    },
+    setUserData(data) {
+      this.clientName = data.clientName
+      this.userName = data.userName
     }
   },
   persist: {
diff --git a/src/stores/contract/contractBulk.js b/src/stores/contract/contractBulk.js
index 88c5178..e5fa195 100644
--- a/src/stores/contract/contractBulk.js
+++ b/src/stores/contract/contractBulk.js
@@ -4,7 +4,8 @@ export const useContractBulkStore = defineStore('contractBulk', {
   state() {
     return {
       exampleImg: 'example_contract.png',
-      download: '계약등록.xlsx',
+      download: 'https://t5-bucket.s3.ap-northeast-2.amazonaws.com/excel/%EA%B3%84%EC%95%BD%EB%93%B1%EB%A1%9D.xlsx',
+      fileName: '계약등록.xlsx',
       file: null,
       uploadData: null,
       errorList: [],
diff --git a/src/stores/contract/contractList.js b/src/stores/contract/contractList.js
index e2bf4d5..1321409 100644
--- a/src/stores/contract/contractList.js
+++ b/src/stores/contract/contractList.js
@@ -18,7 +18,7 @@ export const useContractListStore = defineStore('contractList', {
         { data: 'invoiceType', name: '청구 생성',},
         { data: 'contractStatus', name: '계약 상태',},
         { data: 'paymentType', name: '결제 수단',},
-        { data: 'totalUnpaidCount', name: '미납 여부',}
+        { data: 'totalUnpaidCount', name: '미납 건수',}
       ],
       filters: [
         {data: 'itemId', value: null},
diff --git a/src/stores/invoice/invoiceList.js b/src/stores/invoice/invoiceList.js
index d2ddb37..5e72c08 100644
--- a/src/stores/invoice/invoiceList.js
+++ b/src/stores/invoice/invoiceList.js
@@ -14,7 +14,7 @@ export const useInvoiceListStore = defineStore('invoiceList', {
         { data: 'itemName', name: '상품명', notSortable: true},
         { data: 'memberName', name: '회원명', notSortable: true},
         { data: 'chargeAmount', name: '금액',},
-        { data: 'contractDate', name: '약정일',},
+        { data: 'contractDate', name: '결제일',},
         { data: 'dueDate', name: '납부 기한',},
         { data: 'createdAt', name: '생성일',},
         { data: 'paymentType', name: '결제 수단',},
diff --git a/src/stores/member/memberBulk.js b/src/stores/member/memberBulk.js
index b7b9618..7c62e89 100644
--- a/src/stores/member/memberBulk.js
+++ b/src/stores/member/memberBulk.js
@@ -4,7 +4,8 @@ export const useMemberBulkStore = defineStore('memberBulk', {
   state() {
     return {
       exampleImg: 'example_member.png',
-      download: '회원등록.xlsx',
+      download: 'https://t5-bucket.s3.ap-northeast-2.amazonaws.com/excel/%ED%9A%8C%EC%9B%90%EB%93%B1%EB%A1%9D.xlsx',
+      fileName: '회원등록.xlsx',
       file: null,
       uploadData: null,
       errorList: [],
diff --git a/src/utils/item.js b/src/utils/item.js
index 98584cd..cfcf68b 100644
--- a/src/utils/item.js
+++ b/src/utils/item.js
@@ -10,7 +10,7 @@ async function getItemList() {
 
   let url = `items?page=${itemStore.page}&size=${itemStore.size}`;
   if (itemStore.search.value) {
-    url += `&${itemStore.search.keyword}=${itemStore.search.valu}`
+    url += `&${itemStore.search.keyword}=${itemStore.search.value}`
   }
 
   itemStore.columns.forEach(column => {
diff --git a/src/views/contract/ContractDetailView.vue b/src/views/contract/ContractDetailView.vue
index 1859e43..97d93ff 100644
--- a/src/views/contract/ContractDetailView.vue
+++ b/src/views/contract/ContractDetailView.vue
@@ -125,7 +125,7 @@ export default {
   @include flex-box(row, space-between, 100px);
   @include root-container;
   height: auto;
-  padding: 60px 130px;
+  padding: 30px 130px;
 }
 
 .left-side {
@@ -146,7 +146,7 @@ export default {
 
 .right-side {
   @include flex-box(column, space-between, 20px);
-  position: relative;
+  // position: relative;
   width: 100%;
   height: 100%;
 
diff --git a/src/views/invoice/InvoiceCreateView.vue b/src/views/invoice/InvoiceCreateView.vue
index 0548724..18ff742 100644
--- a/src/views/invoice/InvoiceCreateView.vue
+++ b/src/views/invoice/InvoiceCreateView.vue
@@ -5,7 +5,7 @@
       <TitleSelectVue title="결제 수단" :selectedIdx="invoiceCreateStore.paymentTypeIdx" :keywordArr="invoiceCreateStore.paymentType"
       :choiceFunc="setPaymentType" />
       <InfoInputVue title="청구금" v-model="chargeAmount" type="number" />
-      <InfoInputVue title="약정일" type="date" v-model="contractDate" />
+      <InfoInputVue title="결제일" type="date" v-model="contractDate" />
       <InfoInputVue title="납부기한" type="date" v-model="dueDate" />
     </div>
     <div class="table-box">
@@ -15,7 +15,7 @@
     <div class="btn-box">
       <WarningBtnVue title="취소" :func="routeInvoice"/>
       <span>{{ warningMsg }}</span>
-      <ThemeBtnVue title="계약 등록" :func="createInvoice"/>
+      <ThemeBtnVue title="청구 등록" :func="createInvoice"/>
     </div>
   </div>
 </template>

From 3630a6350b8620682923a31faa6d2d3f43306e7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?= <rlagkswn37@naver.com>
Date: Sun, 4 Aug 2024 07:42:30 +0900
Subject: [PATCH 2/7] =?UTF-8?q?[K5P-80]=20[fix]=20=EB=A9=98=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95=EC=82=AC?=
 =?UTF-8?q?=ED=95=AD=20=EB=B0=98=EC=98=812?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/input/NumberInput.vue   |  62 ++++++++++
 src/components/common/select/TitleSelect.vue  |   2 +-
 .../common/select/TitleUpSelect.vue           | 109 ++++++++++++++++++
 .../consent/modal/ConsentCreateModal.vue      |  27 ++++-
 .../consent/modal/ConsentUpdateModal.vue      |  26 ++++-
 .../contract/ContractCreateInfo.vue           |  80 +++++++++++--
 src/components/contract/ContractEditInfo.vue  |  64 ++++++++--
 .../contract/create/ContractChooseInfo.vue    |  24 ----
 .../contract/create/ContractChooseItem.vue    |   8 +-
 src/views/contract/ContractCreateView.vue     |   2 +-
 src/views/contract/ContractEditView.vue       |   3 +-
 11 files changed, 349 insertions(+), 58 deletions(-)
 create mode 100644 src/components/common/input/NumberInput.vue
 create mode 100644 src/components/common/select/TitleUpSelect.vue

diff --git a/src/components/common/input/NumberInput.vue b/src/components/common/input/NumberInput.vue
new file mode 100644
index 0000000..3caa0d6
--- /dev/null
+++ b/src/components/common/input/NumberInput.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="info-input">
+    <div class="title-box">
+      {{ title }}
+    </div>
+    <input 
+      type= "number"
+      :value="modelValue" 
+      @input="$emit('update:modelValue', $event.target.value)">
+    <span>{{ unit }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NumberInputVue',
+  props: {
+    'title' : String,
+    'unit': String,
+    'modelValue': Number,
+  },
+  emits: ['update:modelValue']
+
+}
+</script>
+
+<style lang='scss' scoped>
+  .info-input {
+    @include flex-box(row, center, 0px);
+    background-color: white;
+    width: 100%;
+    height: 40px;
+    border-radius: 5px;
+    border: $theme-color solid;
+
+    .title-box {
+      @include flex-box(row, center, 0px);
+      @include white-text(16px);
+      background: $theme-color;
+      width: 140px;
+      height: 100%;
+    }
+
+    input {
+      width: 100%;
+      height: 100%;
+      padding-left: 10px;
+      font-weight: bold;
+      font-size: 14px;
+      border: none;
+      &:focus {
+        outline: none;
+      }
+    }
+
+    span {
+      padding-right: 10px;
+      font-weight: bold;
+    }
+
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/common/select/TitleSelect.vue b/src/components/common/select/TitleSelect.vue
index 4c7bc60..a62076f 100644
--- a/src/components/common/select/TitleSelect.vue
+++ b/src/components/common/select/TitleSelect.vue
@@ -104,6 +104,6 @@ export default {
     @include flex-box(column, center, 10px);
     @include select-list;
     top: calc(100% + 10px);
-    width:90%
+    width:90%;
   }
 </style>
\ No newline at end of file
diff --git a/src/components/common/select/TitleUpSelect.vue b/src/components/common/select/TitleUpSelect.vue
new file mode 100644
index 0000000..9719d29
--- /dev/null
+++ b/src/components/common/select/TitleUpSelect.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="title-select">
+    <div class="title-box">
+      {{ title }}
+    </div>
+    <div class="select-box">
+      <button class="select-btn" @click="opreateSelect">
+        <span>{{ keywordArr[selectedIdx].name }}</span>
+        <i class="bi bi-caret-up-fill"></i>
+      </button>
+      <transition name="fade">
+        <ul class="select-list" v-if="selectVisible">
+          <li v-for="(value, key) in keywordArr" :key="key" @click="() => selectKeyword(key)">{{ value.name }}</li>
+        </ul>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TitleUpSelecttVue',
+  props: {
+    title: String,
+    selectedIdx: Number,
+    keywordArr: Array,
+    choiceFunc: Function,
+  },
+  data() {
+    return {
+      selectVisible: false,
+    }
+  },
+  methods: {
+    opreateSelect() {
+      this.selectVisible = !this.selectVisible;
+    },
+    selectKeyword(idx) {
+      this.choiceFunc(idx);
+      this.selectVisible = false;
+    },
+    handleClickOutside(event) {
+      if (!event.target.closest('.select-btn, .select-btn, .select-items')) {
+        this.selectVisible = false;
+      }
+    },
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside);
+  },
+  unmounted() {
+    document.removeEventListener('click', this.handleClickOutside);
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+@import '@/assets/scss/component/select.scss';
+
+.title-select {
+  @include flex-box(row, center, 0px);
+  background-color: white;
+  width: 100%;
+  height: 40px;
+
+  .title-box {
+    @include flex-box(row, center, 0px);
+    @include white-text(16px);
+    background: $theme-color;
+    width: 140px;
+    height: 100%;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+
+  .select-box {
+    width: 100%;
+    height: 100%;
+    padding: 0px 5px;
+    font-weight: bold;
+    font-size: 14px;
+    border: $theme-color solid;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+}
+
+.select-box {
+    position: relative;
+    width: 100%;
+  }
+
+  .select-btn {
+    @include flex-box(row, space-between, 10px);
+    @include base-icon();
+    width: 100%;
+    padding: 7px 15px;
+    background: none;
+    border: none;
+    font-weight: bold
+  }
+
+  .select-list {
+    @include flex-box(column, center, 10px);
+    @include select-list;
+    bottom: calc(100%);
+    width:90%;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/consent/modal/ConsentCreateModal.vue b/src/components/consent/modal/ConsentCreateModal.vue
index 201f662..b16a207 100644
--- a/src/components/consent/modal/ConsentCreateModal.vue
+++ b/src/components/consent/modal/ConsentCreateModal.vue
@@ -11,7 +11,12 @@
           <input type="file" ref="fileInput" @change="onImageChange" accept="image/*" style="display: none;" />
           <span class="file-guide">※ 동의 서명 이미지 파일을 등록해주세요</span>
           <InfoInputVue title="계좌 소유주" v-model="owner" />
-          <InfoInputVue title="은행" v-model="bank" />
+          <TitleUpSelectVue 
+            title="은행"
+            :selectedIdx="bankIdx"
+            :keywordArr="bankList"
+            :choiceFunc="selectBank"
+          />
           <InfoInputVue title="계좌 번호" v-model="number" />
         </div>
         <ModalFooterVue :title="title" :errorMsg="errorMsg" :func="createConsent" />
@@ -24,6 +29,8 @@
 import ModalHeaderVue from '@/components/common/modal/ModalHeader.vue';
 import ModalFooterVue from '@/components/common/modal/ModalFooter.vue';
 import InfoInputVue from '@/components/common/input/InfoInput.vue';
+import TitleSelectVue from '@/components/common/select/TitleSelect.vue';
+import TitleUpSelectVue from '@/components/common/select/TitleUpSelect.vue';
 import { createConsent } from '@/utils/consent';
 import { mapStores } from 'pinia';
 import { useContractDetailStore } from '@/stores/contract/contractDetail';
@@ -34,6 +41,8 @@ export default {
     ModalHeaderVue,
     ModalFooterVue,
     InfoInputVue,
+    TitleSelectVue,
+    TitleUpSelectVue
   },
   props: {
     'isVisible': Boolean,
@@ -47,7 +56,16 @@ export default {
       bank: '',
       number: '',
       imgFile: null,
-      imgSrc: null
+      imgSrc: null,
+      bankIdx: 0,
+      bankList: [
+        { value: 'KB', name: '국민은행' },
+        { value: 'SH', name: '신한은행' },
+        { value: 'WR', name: '우리은행' },
+        { value: 'HN', name: '하나은행' },
+        { value: 'NH', name: '농협은행' },
+        { value: 'IBK', name: '기업은행' },
+      ]
     }
   },
   computed: {
@@ -58,6 +76,11 @@ export default {
     triggerFileInput() {
       this.$refs.fileInput.click();
     },
+    // 은행 선택
+    selectBank(idx) {
+      this.bankIdx = idx;
+      this.bank = this.bankList[this.bankIdx].name;
+    },
     // 이미지 등록
     onImageChange(event) {
       const file = event.target.files[0];
diff --git a/src/components/consent/modal/ConsentUpdateModal.vue b/src/components/consent/modal/ConsentUpdateModal.vue
index 4490a03..06ec937 100644
--- a/src/components/consent/modal/ConsentUpdateModal.vue
+++ b/src/components/consent/modal/ConsentUpdateModal.vue
@@ -11,7 +11,12 @@
           <input type="file" ref="fileInput" @change="onImageChange" accept="image/*" style="display: none;" />
           <span class="file-guide">※ 동의 서명 이미지 파일을 등록해주세요</span>
           <InfoInputVue title="계좌 소유주" v-model="owner" />
-          <InfoInputVue title="은행" v-model="bank" />
+          <TitleUpSelectVue 
+            title="은행"
+            :selectedIdx="bankIdx"
+            :keywordArr="bankList"
+            :choiceFunc="selectBank"
+          />
           <InfoInputVue title="계좌 번호" v-model="number" />
         </div>
         <ModalFooterVue :title="title" :errorMsg="errorMsg" :func="createConsent" />
@@ -24,6 +29,7 @@
 import ModalHeaderVue from '@/components/common/modal/ModalHeader.vue';
 import ModalFooterVue from '@/components/common/modal/ModalFooter.vue';
 import InfoInputVue from '@/components/common/input/InfoInput.vue';
+import TitleUpSelectVue from '@/components/common/select/TitleUpSelect.vue';
 import { editConsent, editConsentImage } from '@/utils/consent';
 import { mapStores } from 'pinia';
 import { useContractDetailStore } from '@/stores/contract/contractDetail';
@@ -35,6 +41,7 @@ export default {
     ModalHeaderVue,
     ModalFooterVue,
     InfoInputVue,
+    TitleUpSelectVue
   },
   props: {
     'isVisible': Boolean,
@@ -48,7 +55,16 @@ export default {
       bank: '',
       number: '',
       imgFile: null,
-      imgSrc: null
+      imgSrc: null,
+      bankIdx: 0,
+      bankList: [
+        { value: 'KB', name: '국민은행' },
+        { value: 'SH', name: '신한은행' },
+        { value: 'WR', name: '우리은행' },
+        { value: 'HN', name: '하나은행' },
+        { value: 'NH', name: '농협은행' },
+        { value: 'IBK', name: '기업은행' },
+      ]
     }
   },
   computed: {
@@ -65,9 +81,15 @@ export default {
     async showData() {
       this.owner = this.consentDetailStore.data.owner;
       this.bank = this.consentDetailStore.data.bank;
+      this.bankIdx = this.bankList.findIndex((bank) => bank.name === this.consentDetailStore.data.bank);
       this.number = this.consentDetailStore.data.number;
       this.imgSrc = this.consentDetailStore.data.signUrl;
     },
+    // 은행 선택
+    selectBank(idx) {
+      this.bankIdx = idx;
+      this.bank = this.bankList[this.bankIdx].name;
+    },
     // 이미지 업로드
     triggerFileInput() {
       this.$refs.fileInput.click();
diff --git a/src/components/contract/ContractCreateInfo.vue b/src/components/contract/ContractCreateInfo.vue
index 55df5ba..a39546f 100644
--- a/src/components/contract/ContractCreateInfo.vue
+++ b/src/components/contract/ContractCreateInfo.vue
@@ -14,8 +14,8 @@
       <span class="title">상품 정보</span>
       <TitleInfoVue title="이름" :info="contractCreateStore.item.name" />
       <div class="double-info">
-        <TitleInfoVue title="금액" :info="`${contractCreateStore.item.price} 원`" />
-        <TitleInfoVue title="수량" :info="`${contractCreateStore.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} 원`" />
     </div>
@@ -23,16 +23,28 @@
     :class="{ 'info-box': true, 'active': contractCreateStore.step === 2 }">
       <span class="title">계약 정보</span>
       <div class="double-info">
-        <TitleInfoVue title="약정일" :info="`매월 ${contractCreateStore.contractCycle} 일`" />
-        <TitleInfoVue title="납부 기한" :info="`${contractCreateStore.paymentDueCycle} 일`" />
+        <NumberInputVue title="약정일" unit="일" v-model="contractCycle"/>
+        <NumberInputVue title="납부 기한" unit="일" v-model="paymentDueCycle"/>
       </div>
       <div class="double-info">
-        <TitleInfoVue title="구독 여부" :info="contractCreateStore.isSubscriptionName" />
-        <TitleInfoVue title="청구 생성" :info="contractCreateStore.invoiceTypeName" />
+        <TitleSelectVue title="구독 여부" 
+            :selectedIdx="contractCreateStore.isSubscriptionIdx" 
+            :keywordArr="contractCreateStore.isSubscription"
+            :choiceFunc="setSubscription" />
+          <TitleSelectVue title="청구 생성" 
+            :selectedIdx="contractCreateStore.invoiceTypeIdx" 
+            :keywordArr="contractCreateStore.invoiceType"
+            :choiceFunc="setInvoiceType" />
       </div>
       <div class="double-info">
-        <TitleInfoVue title="결제 수단" :info="contractCreateStore.paymentTypeName" />
-        <TitleInfoVue title="간편 동의" :info="contractCreateStore.isEasyConsentName" />
+        <TitleSelectVue title="결제 수단" 
+            :selectedIdx="contractCreateStore.paymentTypeIdx" 
+            :keywordArr="contractCreateStore.paymentType"
+            :choiceFunc="setPaymentType" />
+          <TitleSelectVue title="간편 동의" 
+            :selectedIdx="contractCreateStore.isEasyConsentIdx" 
+            :keywordArr="contractCreateStore.isEasyConsent"
+            :choiceFunc="setEasyConsent"/>
       </div>
     </div>
   </div>
@@ -41,15 +53,63 @@
 <script>
 import { useContractCreateStore } from '@/stores/contract/contractCreate';
 import { mapStores } from 'pinia';
-import TitleInfoVue from '../common/info/TitleInfo.vue';
+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';
 
 export default {
   name: 'ContractCreateInfoVue',
   components: {
-    TitleInfoVue
+    TitleInfoVue,
+    NumberInputVue,
+    InfoInputVue,
+    TitleSelectVue
   },
   computed: {
     ...mapStores(useContractCreateStore),
+    // 아이템 개수 및 가격 설정
+    item: {
+      get() {
+        return this.contractCreateStore.item;
+      },
+      set(value) {
+        this.contractCreateStore.item.price = value.price;
+        this.contractCreateStore.item.count = value.count;
+      }
+    },
+    // 약정일 설정
+    contractCycle: {
+      get() {
+        return this.contractCreateStore.contractCycle;
+      },
+      set(value) {
+        this.contractCreateStore.contractCycle = value;
+      }
+    },
+    // 납부기한 설정
+    paymentDueCycle: {
+      get() {
+        return this.contractCreateStore.paymentDueCycle;
+      },
+      set(value) {
+        this.contractCreateStore.paymentDueCycle = value;
+      }
+    },
+  },
+  methods: {
+    setSubscription(idx) {
+      this.contractCreateStore.setIsSubscription(idx);
+    },
+    setInvoiceType(idx) {
+      this.contractCreateStore.setInvoiceType(idx);
+    },
+    setPaymentType(idx) {
+      this.contractCreateStore.setPaymentType(idx);
+    },
+    setEasyConsent(idx) {
+      this.contractCreateStore.setIsEasyConsent(idx);
+    }
   },
 }
 </script>
diff --git a/src/components/contract/ContractEditInfo.vue b/src/components/contract/ContractEditInfo.vue
index 5878e3e..e510b5e 100644
--- a/src/components/contract/ContractEditInfo.vue
+++ b/src/components/contract/ContractEditInfo.vue
@@ -21,16 +21,28 @@
     :class="{ 'info-box': true, 'active': contractCreateStore.step === 2 }">
       <span class="title">계약 정보</span>
       <div class="double-info">
-        <TitleInfoVue title="약정일" :info="`매월 ${contractCreateStore.contractCycle} 일`" />
-        <TitleInfoVue title="납부 기한" :info="`${contractCreateStore.paymentDueCycle} 일`" />
+        <NumberInputVue title="약정일" unit="일" v-model="contractCycle"/>
+        <NumberInputVue title="납부 기한" unit="일" v-model="paymentDueCycle"/>
       </div>
       <div class="double-info">
-        <TitleInfoVue title="구독 여부" :info="contractCreateStore.isSubscriptionName" />
-        <TitleInfoVue title="청구 생성" :info="contractCreateStore.invoiceTypeName" />
+        <TitleSelectVue title="구독 여부" 
+            :selectedIdx="contractCreateStore.isSubscriptionIdx" 
+            :keywordArr="contractCreateStore.isSubscription"
+            :choiceFunc="setSubscription" />
+          <TitleSelectVue title="청구 생성" 
+            :selectedIdx="contractCreateStore.invoiceTypeIdx" 
+            :keywordArr="contractCreateStore.invoiceType"
+            :choiceFunc="setInvoiceType" />
       </div>
       <div class="double-info">
-        <TitleInfoVue title="결제 수단" :info="contractCreateStore.paymentTypeName" />
-        <TitleInfoVue title="간편 동의" :info="contractCreateStore.isEasyConsentName" />
+        <TitleSelectVue title="결제 수단" 
+            :selectedIdx="contractCreateStore.paymentTypeIdx" 
+            :keywordArr="contractCreateStore.paymentType"
+            :choiceFunc="setPaymentType" />
+          <TitleSelectVue title="간편 동의" 
+            :selectedIdx="contractCreateStore.isEasyConsentIdx" 
+            :keywordArr="contractCreateStore.isEasyConsent"
+            :choiceFunc="setEasyConsent"/>
       </div>
     </div>
   </div>
@@ -39,14 +51,18 @@
 <script>
 import { useContractCreateStore } from '@/stores/contract/contractCreate';
 import { mapStores } from 'pinia';
-import TitleInfoVue from '../common/info/TitleInfo.vue';
-import InfoInputVue from '../common/input/InfoInput.vue';
+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';
 
 export default {
   name: 'ContractEditInfoVue',
   components: {
     TitleInfoVue,
-    InfoInputVue
+    InfoInputVue,
+    NumberInputVue,
+    TitleSelectVue
   },
   computed: {
     ...mapStores(useContractCreateStore),
@@ -58,6 +74,36 @@ export default {
         this.contractCreateStore.item.price = value.price;
         this.contractCreateStore.item.count = value.count;
       }
+    },
+    contractCycle: {
+      get() {
+        return this.contractCreateStore.contractCycle;
+      },
+      set(value) {
+        this.contractCreateStore.contractCycle = value;
+      }
+    },
+    paymentDueCycle: {
+      get() {
+        return this.contractCreateStore.paymentDueCycle;
+      },
+      set(value) {
+        this.contractCreateStore.paymentDueCycle = value;
+      }
+    },
+  },
+  methods: {
+    setSubscription(idx) {
+      this.contractCreateStore.setIsSubscription(idx);
+    },
+    setInvoiceType(idx) {
+      this.contractCreateStore.setInvoiceType(idx);
+    },
+    setPaymentType(idx) {
+      this.contractCreateStore.setPaymentType(idx);
+    },
+    setEasyConsent(idx) {
+      this.contractCreateStore.setIsEasyConsent(idx);
     }
   },
 }
diff --git a/src/components/contract/create/ContractChooseInfo.vue b/src/components/contract/create/ContractChooseInfo.vue
index 560b504..454c99b 100644
--- a/src/components/contract/create/ContractChooseInfo.vue
+++ b/src/components/contract/create/ContractChooseInfo.vue
@@ -44,30 +44,6 @@ export default {
     TitleSelectVue,
     InfoInputVue,
   },
-  data() {
-    return {
-      isSubscriptionIdx: 0,
-      isSubscription: [
-        { name: '정기', value: 'true' },
-        { name: '단기', value: 'false' },
-      ],
-      invoiceTypeIdx: 0,
-      invoiceType: [
-        { name: '자동 청구', value: 1 },
-        { name: '수동 청구', value: 2 },
-      ],
-      paymentTypeIdx: 0,
-      paymentType: [
-        { name: '납부자 결제', value: 1 },
-        { name: '실시간 CMS', value: 2 },
-      ],
-      isEasyConsentIdx: 0,
-      isEasyConsent: [
-        { name: '미사용', value: false },
-        { name: '사용', value: true },
-      ]
-    }
-  },
   computed: {
     ...mapStores(useContractCreateStore),
     contractCycle: {
diff --git a/src/components/contract/create/ContractChooseItem.vue b/src/components/contract/create/ContractChooseItem.vue
index a63c194..d77b3b5 100644
--- a/src/components/contract/create/ContractChooseItem.vue
+++ b/src/components/contract/create/ContractChooseItem.vue
@@ -2,10 +2,6 @@
   <div class="right-side">
     <div class="right-side-header">
       <ItemSearchVue />
-      <div class="input-box">
-        <InfoInputVue title="가격" type="number" v-model="item.price"/>
-        <InfoInputVue title="수량" type="number" v-model="item.count"/>
-      </div>
     </div>
     <ItemSelectTableVue />
   </div>
@@ -13,17 +9,15 @@
 
 <script>
 import { useContractCreateStore } from '@/stores/contract/contractCreate';
+import { mapStores } from 'pinia';
 import ItemSelectTableVue from '@/components/contract/table/ItemSelectTable.vue'
 import ItemSearchVue from '@/components/item/ItemSearch.vue'
-import InfoInputVue from '@/components/common/input/InfoInput.vue'
-import { mapStores } from 'pinia';
 
 export default {
   name: 'ContractChooseItemVue',
   components: {
     ItemSelectTableVue,
     ItemSearchVue,
-    InfoInputVue,
   },
   computed: {
     ...mapStores(useContractCreateStore),
diff --git a/src/views/contract/ContractCreateView.vue b/src/views/contract/ContractCreateView.vue
index 94a3efb..a66404b 100644
--- a/src/views/contract/ContractCreateView.vue
+++ b/src/views/contract/ContractCreateView.vue
@@ -18,7 +18,6 @@
     </div>
     <ContractChooseMemberVue v-if="contractCreateStore.step === 0" />
     <ContractChooseItemVue v-if="contractCreateStore.step === 1" />
-    <ContractChooseInfoVue v-if="contractCreateStore.step === 2" />
   </div>
 </template>
 
@@ -96,6 +95,7 @@ export default {
   border-radius: 10px;
   box-shadow: $base-shadow;
   background-color: white;
+  transition: all 0.5s;
 
   .btn-box {
     @include flex-box(row, center, 60px);
diff --git a/src/views/contract/ContractEditView.vue b/src/views/contract/ContractEditView.vue
index 2e98a73..f482ad1 100644
--- a/src/views/contract/ContractEditView.vue
+++ b/src/views/contract/ContractEditView.vue
@@ -3,12 +3,11 @@
     <div class="left-side">
       <ContractEditInfoVue />
       <div class="warning-msg">{{ warningMsg }}</div>
-      <div class="btn-box" v-if="contractCreateStore.step === 2">
+      <div class="btn-box">
         <WarningWideBtnVue title="취소" :func="routeContratDetail" />
         <SuccessWideBtnVue title="완료" :func="editContract" />
       </div>
     </div>
-    <ContractChooseInfoVue v-if="contractCreateStore.step === 2" />
   </div>
 </template>
 

From 1a1fe5f38fe3ebcafb1f444f3b97e569c402be78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?= <rlagkswn37@naver.com>
Date: Sun, 4 Aug 2024 13:26:09 +0900
Subject: [PATCH 3/7] =?UTF-8?q?[K5P-80]=20[fix]=20=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/common.scss                   |  8 +-
 src/assets/scss/component/table.scss          |  2 +-
 src/components/auth/AuthLoading.vue           | 26 ++++++
 src/components/common/TheNavBar.vue           | 52 ++++++------
 src/components/common/TheSideBar.vue          |  7 +-
 src/components/common/btn/SuccessBtn.vue      | 28 +++++++
 src/components/common/info/TitleInfo.vue      |  4 +-
 src/components/common/input/InfoInput.vue     |  2 +-
 src/components/common/select/TitleSelect.vue  |  2 +-
 src/components/contract/ContractEditInfo.vue  |  5 ++
 src/components/contract/ContractInfo.vue      | 13 ++-
 .../contract/table/ContractTableRow.vue       | 25 +++---
 .../invoice/table/InvoiceCreateTableRow.vue   | 11 ++-
 .../item/table/ItemContractTable.vue          |  5 ++
 src/components/static/InvoiceAreaChart.vue    |  4 +-
 .../static/InvoiceDoughnutChart.vue           | 13 +--
 src/components/static/ProgressBox.vue         |  4 -
 src/components/static/ThisMonthStatic.vue     | 14 ----
 .../static/modal/NonMemberLinkModal.vue       | 46 +++++++++++
 src/stores/auth.js                            | 14 +++-
 src/stores/contract/contractDetail.js         | 63 +++++++-------
 src/utils/contract.js                         | 22 ++++-
 src/views/MainView.vue                        | 15 ++--
 src/views/auth/AuthView.vue                   |  9 ++
 src/views/auth/SignupView.vue                 |  9 ++
 src/views/contract/ContractDetailView.vue     | 82 +++++++++++++++++--
 src/views/home/HomeView.vue                   | 82 ++++++++++++-------
 src/views/item/ItemDetailView.vue             | 14 ++--
 src/views/item/ItemListView.vue               | 36 ++++----
 29 files changed, 439 insertions(+), 178 deletions(-)
 create mode 100644 src/components/auth/AuthLoading.vue
 create mode 100644 src/components/common/btn/SuccessBtn.vue
 create mode 100644 src/components/static/modal/NonMemberLinkModal.vue

diff --git a/src/assets/scss/common.scss b/src/assets/scss/common.scss
index 30b37ff..835d2ff 100644
--- a/src/assets/scss/common.scss
+++ b/src/assets/scss/common.scss
@@ -1,7 +1,7 @@
 $light-theme-color: rgba(130, 112, 190, 0.7);
 $theme-color: rgb(130, 112, 190);
 $input-color: #6C7F98;
-$back-color: #EBEBEB;
+$back-color: rgb(235, 235, 235, 0.5);
 $success-color: rgb(44, 128, 206);
 $waiting-color: #DFD93B;
 $warning-color: rgb(255, 99, 71);
@@ -66,11 +66,9 @@ $mobile-header-height : 100px;
 }
 
 @mixin root-container {
-  background: $back-color;
-  width: 100%;
+  min-width: 100%;
   min-height: 100%;
-  height: 100%;
-  overflow: auto;
+  box-sizing: border-box;
 }
 
 
diff --git a/src/assets/scss/component/table.scss b/src/assets/scss/component/table.scss
index 4e3d688..998b512 100644
--- a/src/assets/scss/component/table.scss
+++ b/src/assets/scss/component/table.scss
@@ -14,7 +14,7 @@
   background: white;
   width: 100%;
   flex-grow: 1;
-  min-height: 500px;
+  min-height: 700px;
   overflow:auto;
   border-radius: 5px;
 }
diff --git a/src/components/auth/AuthLoading.vue b/src/components/auth/AuthLoading.vue
new file mode 100644
index 0000000..0a7c0c8
--- /dev/null
+++ b/src/components/auth/AuthLoading.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="loading">
+    <img src="@/assets/images/loading.gif" alt="loading">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AuthLoadingVue'
+}
+</script>
+
+<style lang="scss" scoped>
+.loading {
+  @include flex-box(row, center, 0px);
+  position: fixed;
+  background: rgba(255, 255, 255, 0.8);
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+
+  img {
+    width: 160px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/TheNavBar.vue b/src/components/common/TheNavBar.vue
index 779eb3d..7c5396b 100644
--- a/src/components/common/TheNavBar.vue
+++ b/src/components/common/TheNavBar.vue
@@ -2,8 +2,8 @@
   <nav class="nav-bar">
     <img src="@/assets/images/name_white.png" alt="">
     <div class="nav-info">
-      <div class="nav-info-item">{{ authStore.clientName }}</div>
-      <div class="nav-info-item">{{ authStore.userName }} 님</div>
+      <div class="nav-info-item">{{ authStore.data.clientName }}</div>
+      <div class="nav-info-item">{{ authStore.data.userName }} 님</div>
     </div>
   </nav>
 </template>
@@ -25,34 +25,38 @@ export default {
     ...mapStores(useAuthStore)
   },
   async mounted() {
-    const result = await mainAxios.get('users/current');
-    if (result.code === 200) {
-      this.authStore.setUserData(result.data)
+    if (!this.authStore.data.clientId) {
+      const result = await mainAxios.get('users/current');
+      if (result.code === 200) {
+        this.authStore.setUserData(result.data);
+      }
     }
   },
 }
 </script>
 
 <style lang="scss" scoped>
-  .nav-bar {
-    @include flex-box(row, space-between, 0px);
-    background-color: $theme-color;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    height: $nav-bar-height;
-    width: 100%;
-    padding: 0px 20px;
-    z-index: 2;
-    .nav-info {
-      @include flex-box(row, center, 20px);
-      .nav-info-item {
-        @include flex-box(row, center, 0px);
-        background-color: white;
-        border-radius: 5px;
-        padding: 5px 15px;
-        font-weight: bold;
-      }
+.nav-bar {
+  @include flex-box(row, space-between, 0px);
+  background-color: $theme-color;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  height: $nav-bar-height;
+  width: 100vw;
+  padding: 0px 20px;
+  z-index: 1001;
+
+  .nav-info {
+    @include flex-box(row, center, 20px);
+
+    .nav-info-item {
+      @include flex-box(row, center, 0px);
+      background-color: white;
+      border-radius: 5px;
+      padding: 5px 15px;
+      font-weight: bold;
     }
   }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/common/TheSideBar.vue b/src/components/common/TheSideBar.vue
index 828fd82..156d75c 100644
--- a/src/components/common/TheSideBar.vue
+++ b/src/components/common/TheSideBar.vue
@@ -40,13 +40,14 @@ export default {
 
 <style lang="scss" scoped>
   .side-bar {
-    position: absolute;
+    position: fixed;
     left: 0;
     top: $nav-bar-height;
     width: $side-bar-width;
-    height: calc(100% - $nav-bar-height);;
+    height: calc(100vh - $nav-bar-height);
     box-shadow: 3px 0px 4px 0px rgb(0, 0, 0, 0.25);
-    z-index: 1;
+    background-color: white;
+    z-index: 1000;
     @include flex-box(column, space-between, 0px);
     .side-bar-list {
       width: 100%;
diff --git a/src/components/common/btn/SuccessBtn.vue b/src/components/common/btn/SuccessBtn.vue
new file mode 100644
index 0000000..f7e053d
--- /dev/null
+++ b/src/components/common/btn/SuccessBtn.vue
@@ -0,0 +1,28 @@
+<template>
+  <button class="theme-btn" @click="func">
+    <span>{{ title }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'SuccessBtnVue',
+  props: {
+    title: String,
+    func: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .theme-btn {
+    @include flex-box(row, center, 10px);
+    @include base-button();
+    padding: 10px 20px;
+    background-color: $success-color;
+    color: white;
+    border: none;
+    font-size: 18px;
+    font-weight: bold;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/common/info/TitleInfo.vue b/src/components/common/info/TitleInfo.vue
index ed55880..d001c3f 100644
--- a/src/components/common/info/TitleInfo.vue
+++ b/src/components/common/info/TitleInfo.vue
@@ -12,7 +12,7 @@ export default {
   name: 'TitleInfoVue',
   props: {
     'title' : String,
-    'info': String,
+    'info': [String, Number],
   },
 }
 </script>
@@ -20,7 +20,6 @@ export default {
 <style lang='scss' scoped>
   .info-input {
     @include flex-box(row, center, 0px);
-    background-color: white;
     width: 100%;
     height: 40px;
 
@@ -43,6 +42,7 @@ export default {
       border: $theme-color solid;
       border-top-right-radius: 5px;
       border-bottom-right-radius: 5px;
+      background-color: white;
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/common/input/InfoInput.vue b/src/components/common/input/InfoInput.vue
index 4ac74fd..b0c805c 100644
--- a/src/components/common/input/InfoInput.vue
+++ b/src/components/common/input/InfoInput.vue
@@ -26,7 +26,6 @@ export default {
 <style lang='scss' scoped>
   .info-input {
     @include flex-box(row, center, 0px);
-    background-color: white;
     width: 100%;
     height: 40px;
 
@@ -49,6 +48,7 @@ export default {
       border: $theme-color solid;
       border-top-right-radius: 5px;
       border-bottom-right-radius: 5px;
+      background-color: white;
       &:focus {
         outline: none;
       }
diff --git a/src/components/common/select/TitleSelect.vue b/src/components/common/select/TitleSelect.vue
index a62076f..49e8d0c 100644
--- a/src/components/common/select/TitleSelect.vue
+++ b/src/components/common/select/TitleSelect.vue
@@ -59,7 +59,6 @@ export default {
 
 .title-select {
   @include flex-box(row, center, 0px);
-  background-color: white;
   width: 100%;
   height: 40px;
 
@@ -82,6 +81,7 @@ export default {
     border: $theme-color solid;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
+    background-color: white;
   }
 }
 
diff --git a/src/components/contract/ContractEditInfo.vue b/src/components/contract/ContractEditInfo.vue
index e510b5e..0951138 100644
--- a/src/components/contract/ContractEditInfo.vue
+++ b/src/components/contract/ContractEditInfo.vue
@@ -55,6 +55,7 @@ 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';
 
 export default {
   name: 'ContractEditInfoVue',
@@ -66,6 +67,7 @@ export default {
   },
   computed: {
     ...mapStores(useContractCreateStore),
+    ...mapStores(useContractDetailStore),
     item: {
       get() {
         return this.contractCreateStore.item;
@@ -106,6 +108,9 @@ export default {
       this.contractCreateStore.setIsEasyConsent(idx);
     }
   },
+  created() {
+    this.contractCreateStore.setAllDataFromDetailStore(this.contractDetailStore.data)
+  }
 }
 </script>
 
diff --git a/src/components/contract/ContractInfo.vue b/src/components/contract/ContractInfo.vue
index 3797bda..058077e 100644
--- a/src/components/contract/ContractInfo.vue
+++ b/src/components/contract/ContractInfo.vue
@@ -36,7 +36,7 @@
       </div>
       <div class="double-info">
         <TitleInfoVue title="구독 여부" :info="subscription" />
-        <TitleInfoVue title="간편 동의" :info="easyConsent" />
+        <TitleInfoVue title="동의서 등록" :info="isConsentExist" />
       </div>
       <div class="double-info">
         <TitleInfoVue title="생성일" :info="createdAt" />
@@ -50,6 +50,7 @@
 import { mapStores } from 'pinia';
 import { useContractDetailStore } from '@/stores/contract/contractDetail';
 import { toDateFromDateTime } from '@/utils/formatter';
+import { useConsentDetailStore } from '@/stores/contract/consentDetail';
 import TitleInfoVue from '../common/info/TitleInfo.vue';
 
 export default {
@@ -58,6 +59,7 @@ export default {
     TitleInfoVue
   },
   computed: {
+    ...mapStores(useConsentDetailStore),
     ...mapStores(useContractDetailStore),
     subscription() {
       return this.contractDetailStore.data.subscription? '정기': '단기';
@@ -71,6 +73,15 @@ export default {
     updatedAt() {
       return toDateFromDateTime(this.contractDetailStore.data.updatedAt);
     },
+    isConsentExist() {
+      if (this.contractDetailStore.data.paymentType.id === 1) {
+        return '불필요';
+      } else if (this.consentDetailStore.isExist) {
+        return '등록 완료';
+      } else {
+        return '등록 대기'
+      }
+    }
   },
 }
 </script>
diff --git a/src/components/contract/table/ContractTableRow.vue b/src/components/contract/table/ContractTableRow.vue
index 0f10471..b11e279 100644
--- a/src/components/contract/table/ContractTableRow.vue
+++ b/src/components/contract/table/ContractTableRow.vue
@@ -5,7 +5,7 @@
     <td class="table-column"><span>{{ contractData.memberName }}</span></td>
     <td class="table-column"><span>{{ contractData.chargeAmount }} 원</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.subscription ? '구독' : '단기' }}</span></td>
     <td class="table-column"><span>{{ contractData.invoiceType.name }}</span></td>
     <td class="table-column">
       <div class="contract-status">
@@ -14,7 +14,9 @@
       </div>
     </td>
     <td class="table-column"><span>{{ contractData.paymentType.name }}</span></td>
-    <td class="table-column"><div class="status-sticker" :class="upPaidStatusClass">{{ upPaidStatus }}</div></td>
+    <td class="table-column">
+      <div class="status-sticker" :class="upPaidStatusClass">{{ upPaidStatus }}</div>
+    </td>
   </tr>
 </template>
 
@@ -26,7 +28,7 @@ export default {
   },
   data() {
     return {
-      contractStatusClass : ['pending', 'progress', 'end']
+      contractStatusClass: ['pending', 'progress', 'end']
     }
   },
   computed: {
@@ -62,6 +64,7 @@ export default {
 
 .contract-status {
   @include flex-box(row, start, 10px);
+
   div {
     width: 10px;
     height: 10px;
@@ -70,14 +73,14 @@ export default {
 }
 
 .waiting {
-    background-color: $waiting-color;
-  }
+  background-color: $waiting-color;
+}
 
-  .success {
-    background-color: $success-color;
-  }
+.success {
+  background-color: $success-color;
+}
 
-  .warning {
-    background-color: $warning-color;
-  }
+.warning {
+  background-color: $warning-color;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/invoice/table/InvoiceCreateTableRow.vue b/src/components/invoice/table/InvoiceCreateTableRow.vue
index 977b60a..d0c83ba 100644
--- a/src/components/invoice/table/InvoiceCreateTableRow.vue
+++ b/src/components/invoice/table/InvoiceCreateTableRow.vue
@@ -1,5 +1,5 @@
 <template>
-  <tr class="table-row" @click="selectContact">
+  <tr :class="{'table-row': true, 'choosed-row':isChoosed}" @click="selectContact">
     <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>
@@ -38,10 +38,13 @@ export default {
       const count = this.contractData.totalUnpaidCount;
       return count > 0 ? `미납 ${count}건` : '완납';
     },
+    isChoosed() {
+      return this.contractData.id === this.invoiceCreateStore.data.contractId;
+    }
   },
   methods: {
     selectContact() {
-      this.invoiceCreateStore.setContract(this.contractData)
+      this.invoiceCreateStore.setContract(this.contractData);
     }
   }
 }
@@ -57,4 +60,8 @@ export default {
 .warning {
   background-color: $warning-color;
 }
+
+.choosed-row {
+  background-color: $back-color;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/item/table/ItemContractTable.vue b/src/components/item/table/ItemContractTable.vue
index 74b1d31..dee63bb 100644
--- a/src/components/item/table/ItemContractTable.vue
+++ b/src/components/item/table/ItemContractTable.vue
@@ -6,6 +6,11 @@
     </thead>
     <tbody>
       <ItemContractTableRowVue v-for="(contract, idx) in contractListStore.contractList" :key="idx" :contractData="contract" />
+      <ItemContractTableRowVue v-for="(contract, idx) in contractListStore.contractList" :key="idx" :contractData="contract" />
+      <ItemContractTableRowVue v-for="(contract, idx) in contractListStore.contractList" :key="idx" :contractData="contract" />
+      <ItemContractTableRowVue v-for="(contract, idx) in contractListStore.contractList" :key="idx" :contractData="contract" />
+      <ItemContractTableRowVue v-for="(contract, idx) in contractListStore.contractList" :key="idx" :contractData="contract" />
+      <ItemContractTableRowVue v-for="(contract, idx) in contractListStore.contractList" :key="idx" :contractData="contract" />
     </tbody>
   </table>
 </template>
diff --git a/src/components/static/InvoiceAreaChart.vue b/src/components/static/InvoiceAreaChart.vue
index 3773747..59f29a6 100644
--- a/src/components/static/InvoiceAreaChart.vue
+++ b/src/components/static/InvoiceAreaChart.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="static-box">
     <div class="title-box">연간 청구 상태 변화</div>
-    <LineChart :chartData="invoiceData" :width="1000" />
+    <LineChart :chartData="invoiceData" :width="900" />
     <div class="year-box">
       <i class="bi bi-caret-left-fill" @click="minusYear"></i>
       <span>{{ year }}년</span>
@@ -122,7 +122,7 @@ export default {
 <style lang="scss" scoped>
 @import "@/assets/scss/component/static-box.scss";
 .static-box {
-  width: 100%
+  height: 100%
 }
 
 .year-box {
diff --git a/src/components/static/InvoiceDoughnutChart.vue b/src/components/static/InvoiceDoughnutChart.vue
index 25a0946..1ad98e5 100644
--- a/src/components/static/InvoiceDoughnutChart.vue
+++ b/src/components/static/InvoiceDoughnutChart.vue
@@ -95,13 +95,16 @@ export default {
 <style lang="scss" scoped>
 @import "@/assets/scss/component/static-box.scss";
 
+.static-box {
+  height: 100%
+}
 
 
-  .info-box {
-    @include flex-box(row, space-between, 50px);
-    height: 100%;
-    padding: 30px 0px;
-  }
+.info-box {
+  @include flex-box(row, space-between, 50px);
+  height: 100%;
+  padding: 30px 0px;
+}
 
 
 
diff --git a/src/components/static/ProgressBox.vue b/src/components/static/ProgressBox.vue
index 1ec4583..1953f02 100644
--- a/src/components/static/ProgressBox.vue
+++ b/src/components/static/ProgressBox.vue
@@ -65,10 +65,6 @@ export default {
 <style lang="scss" scoped>
 
 @import "@/assets/scss/component/static-box.scss";
-.static-box {
-  flex-grow: 1;
-}
-
 .progress {
   height: 40px;
   width: 250px;
diff --git a/src/components/static/ThisMonthStatic.vue b/src/components/static/ThisMonthStatic.vue
index 35981cc..0a6780c 100644
--- a/src/components/static/ThisMonthStatic.vue
+++ b/src/components/static/ThisMonthStatic.vue
@@ -84,20 +84,6 @@ export default {
 <style lang="scss" scoped>
 @import "@/assets/scss/component/static-box.scss";
 
-.progress {
-  height: 40px;
-  width: 250px;
-  border: $theme-color 3px solid;
-  background-color: white;
-  box-shadow: $base-shadow;
-
-  .progress-bar {
-    background-color: $theme-color;
-    font-size: 15px;
-    font-weight: bold;
-  }
-}
-
 .info-box {
   @include flex-box(row, center, 30px);
   width: 100%;
diff --git a/src/components/static/modal/NonMemberLinkModal.vue b/src/components/static/modal/NonMemberLinkModal.vue
new file mode 100644
index 0000000..177e0cd
--- /dev/null
+++ b/src/components/static/modal/NonMemberLinkModal.vue
@@ -0,0 +1,46 @@
+<template>
+  <transition name="fade">
+    <div v-if="isVisible" class="modal-overlay">
+      <div class="modal-content">
+        <ModalHeaderVue title="비회원 접속 링크" :closeModal="closeModal"/>
+        <div class="modal-main">
+          <span class="content-text">{{ link }}</span>
+        </div>
+        <ModalFooterVue title="닫기" :func="closeModal"/>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import ModalHeaderVue from '../../common/modal/ModalHeader.vue';
+import ModalFooterVue from '@/components/common/modal/ModalFooter.vue';
+import { mapStores } from 'pinia';
+import { useAuthStore } from '@/stores/auth';
+
+export default {
+  name: 'NonMemberLinkModalVue',
+  components: {
+    ModalHeaderVue,
+    ModalFooterVue
+  },
+  props: {
+    'isVisible': Boolean,
+    'closeModal': Function,
+  },
+  computed: {
+    ...mapStores(useAuthStore),
+    link() {
+      return `https://billingwise.site/m/consent/non-member/${this.authStore.data.clientId}`
+    }
+  }
+}
+</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/stores/auth.js b/src/stores/auth.js
index 33e79fd..0df91eb 100644
--- a/src/stores/auth.js
+++ b/src/stores/auth.js
@@ -6,8 +6,15 @@ export const useAuthStore = defineStore('auth', {
   state() {
     return {
       isLoggedIn: false,
-      clientName: '',
-      userName: ''
+      data: {
+        clientId: 0,
+        clientName : '',
+        clientPhone : '',
+        userEmail : '',
+        userId : 0,
+        userName : '홍길동',
+        userPhone : '01011111111'
+      },
     }
   },
   actions: {
@@ -21,8 +28,7 @@ export const useAuthStore = defineStore('auth', {
       router.push({name: 'login'})
     },
     setUserData(data) {
-      this.clientName = data.clientName
-      this.userName = data.userName
+      this.data = data
     }
   },
   persist: {
diff --git a/src/stores/contract/contractDetail.js b/src/stores/contract/contractDetail.js
index c7b0cb7..d378192 100644
--- a/src/stores/contract/contractDetail.js
+++ b/src/stores/contract/contractDetail.js
@@ -4,42 +4,49 @@ export const useContractDetailStore = defineStore('contractDetail', {
   state() {
     return {
       data: {
-        "id": null,
-        "member": {
-            "id": null,
-            "name": null,
-            "phone": null,
-            "email": null
+        id: null,
+        member: {
+          id: null,
+          name: null,
+          phone: null,
+          email: null
         },
-        "item": {
-            "id": null,
-            "name": null,
-            "price": null,
-            "amount": null
+        item: {
+          id: null,
+          name: null,
+          price: null,
+          amount: null
         },
-        "chargeAmount": null,
-        "totalChargeAmount": null,
-        "totalUnpaidAmount": null,
-        "invoiceType": {
-            "id": null,
-            "name": null
+        chargeAmount: null,
+        totalChargeAmount: null,
+        totalUnpaidAmount: null,
+        invoiceType: {
+          id: null,
+          name: null
         },
-        "paymentType": {
-            "id": null,
-            "name": null
+        paymentType: {
+          id: null,
+          name: null
         },
-        "contractCycle": null,
-        "paymentDueCycle": null,
-        "createdAt": null,
-        "updatedAt": null,
-        "subscription": null,
-        "easyConsent": null
+        contractStatus: {
+          id: null,
+          name: null
+        },
+        contractCycle: null,
+        paymentDueCycle: null,
+        createdAt: null,
+        updatedAt: null,
+        subscription: null,
+        easyConsent: null
       }
     }
   },
   actions: {
     setData(data) {
-      this.data = data;
+      this.data = data
     },
+    setContractStatus(data) {
+      this.data.contractStatus = data
+    }
   }
-})
\ No newline at end of file
+})
diff --git a/src/utils/contract.js b/src/utils/contract.js
index 863a63d..3c2bc31 100644
--- a/src/utils/contract.js
+++ b/src/utils/contract.js
@@ -119,4 +119,24 @@ async function deleteContract(contractId) {
   return result;
 }
 
-export {getContractList, getContract, createContract, createContractBulk, editContract, deleteContract}
\ No newline at end of file
+// 계약 상태 변경
+async function editContractStatus(contractId, statusId) {
+  const result = await mainAxios.put(`contracts/${contractId}/status`, statusId);
+
+  if (result.code === 200) {
+    let contractName = null;
+
+    if (statusId === 3) {
+      contractName = '종료'
+    } else if (statusId === 2) {
+      contractName = '진행'
+    }
+    
+    const data = { id: statusId, name: contractName };
+    contractDetailStore.setContractStatus(data);
+  }
+
+  return result;
+}
+
+export {getContractList, getContract, createContract, createContractBulk, editContract, deleteContract, editContractStatus}
\ No newline at end of file
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index e9ee385..9a7d956 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main-view" :style="{ width: width + 'px', height: height + 'px'}">
+  <div class="main-view">
     <TheNavBarVue/>
     <TheSideBarVue/>
     <div class="main-content">
@@ -61,15 +61,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .main-view {
-    position:relative;
-  }
   .main-content {
-    position: absolute;
-    top: $nav-bar-height;
-    left: $side-bar-width;
+    background: $back-color;
+    padding-top: $nav-bar-height;
+    padding-left: $side-bar-width;
+    width: 100vw;
+    height: 100vh;
     overflow: auto;
-    width: calc(100% - $side-bar-width);
-    height: calc(100% - $nav-bar-height);
   }
 </style>
\ No newline at end of file
diff --git a/src/views/auth/AuthView.vue b/src/views/auth/AuthView.vue
index 514c03a..2af9ad0 100644
--- a/src/views/auth/AuthView.vue
+++ b/src/views/auth/AuthView.vue
@@ -4,17 +4,26 @@
       <router-view/>
     </div>
     <logo-side-vue/>
+    <AuthLoadingVue v-if="loadingStore.isLoading"/>
   </div>
+
 </template>
 
 <script>
+import AuthLoadingVue from '@/components/auth/AuthLoading.vue';
 import LogoSideVue from '@/components/auth/LogoSide.vue'
+import { useLoadingStore } from '@/stores/error/loading';
+import { mapStores } from 'pinia';
 
 export default {
   name: 'AuthView',
   components: {
     LogoSideVue,
+    AuthLoadingVue
   },
+  computed: {
+    ...mapStores(useLoadingStore)
+  }
 }
 </script>
 
diff --git a/src/views/auth/SignupView.vue b/src/views/auth/SignupView.vue
index 68cd0ae..4805705 100644
--- a/src/views/auth/SignupView.vue
+++ b/src/views/auth/SignupView.vue
@@ -63,8 +63,10 @@
 import AuthBtnInputVue from '@/components/auth/AuthBtnInput.vue';
 import AuthButtonVue from '@/components/auth/AuthButton.vue'
 import AuthInputVue from '@/components/auth/AuthInput.vue'
+import { useLoadingStore } from '@/stores/error/loading';
 import { InputValue, ValidationTimer } from '@/utils/auth';
 import { authAxios } from '@/utils/axios';
+import { mapStores } from 'pinia';
 
 export default {
   name: 'LoginView',
@@ -122,6 +124,9 @@ export default {
       this.clientCode.errorMsg = '';
     }
   },
+  computed: {
+    ...mapStores(useLoadingStore),
+  },
   methods: {
     // 메서드 : 이메일 중복 검사
     async emailDuplicationCheck() {
@@ -141,7 +146,9 @@ export default {
       // 전송 로직
       if (!this.emailCodeSend) {
         const data = { "email": this.email.value };
+        this.loadingStore.setIsLoading(true);
         const result = await authAxios.post('auth/email/code', data);
+        this.loadingStore.setIsLoading(false);
         if (result.code === 200) {
           this.emailCodeSend = true;
           this.emailCodeTimer = new ValidationTimer(this.emailCode);
@@ -166,7 +173,9 @@ export default {
       // 전송 로직
       if (!this.phoneCodeSend) {
       const data = { 'phone': this.phone.value };
+      this.loadingStore.setIsLoading(true);
       const result = await authAxios.post('auth/phone/code', data);
+      this.loadingStore.setIsLoading(false);
       if (result.code === 200) {
         this.phoneCodeSend = true;
         this.phoneCodeTimer = new ValidationTimer(this.phoneCode);
diff --git a/src/views/contract/ContractDetailView.vue b/src/views/contract/ContractDetailView.vue
index 97d93ff..1361795 100644
--- a/src/views/contract/ContractDetailView.vue
+++ b/src/views/contract/ContractDetailView.vue
@@ -9,7 +9,13 @@
     </div>
     <div class="right-side">
       <div class="right-header">
-        <span class="contract-title">현재 계약 관련 청구</span>
+        <div class="haeder-left">
+          <div class="contract-status">
+            <span>{{ contractDetailStore.data.contractStatus.name }}</span>
+            <div :class="contractStatsClass"></div>
+          </div>
+          <span class="contract-title">현재 계약 관련 청구</span>
+        </div>
         <div class="right-btn-box">
           <ThemeIconBtnVue title="동의서 등록" icon="bi bi-plus-square" :func="() => operationConsentModal(true)"
             v-if="!canCreateInvoice()" />
@@ -17,6 +23,8 @@
             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"/>
+          <SuccessBtnVue title="계약 재개" :func="() => editContractStatus(2)" v-if="contractDetailStore.data.contractStatus.id === 3"/>
         </div>
       </div>
       <div class="table-box">
@@ -26,7 +34,7 @@
     </div>
   </div>
   <ContractDeleteModalVue :is-visible="deleteModalVisible" :close-modal="() => operateDeleteModal(false)" />
-    <InvoiceCreateModalVue :is-visible="creaeteInvoiceModalVisible"
+  <InvoiceCreateModalVue :is-visible="creaeteInvoiceModalVisible"
     :close-modal="() => operateCreaeteInvoiceModal(false)" />
   <ConsentCreateModalVue :is-visible="consentModalVisible" :close-modal="() => operationConsentModal(false)" />
   <ConsentUpdateModalVue :is-visible="consentEditModalVisible" :close-modal="() => operationConsentEditModal(false)" />
@@ -43,13 +51,15 @@ import ThemeIconBtnVue from '@/components/common/btn/ThemeIconBtn.vue'
 import InvoiceCreateModalVue from '@/components/contract/modal/InvoiceCreateModal.vue'
 import ConsentCreateModalVue from '@/components/consent/modal/ConsentCreateModal.vue'
 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 { mapStores } from 'pinia'
 import { useContractCreateStore } from '@/stores/contract/contractCreate'
 import { useInvoiceListStore } from '@/stores/invoice/invoiceList'
 import { useConsentDetailStore } from '@/stores/contract/consentDetail'
 import { useContractDetailStore } from '@/stores/contract/contractDetail'
 import { getConsent } from '@/utils/consent'
-import { getContract } from '@/utils/contract'
+import { editContractStatus, getContract } from '@/utils/contract'
 
 
 export default {
@@ -64,7 +74,9 @@ export default {
     ThemeIconBtnVue,
     InvoiceCreateModalVue,
     ConsentCreateModalVue,
-    ConsentUpdateModalVue
+    ConsentUpdateModalVue,
+    WarningBtnVue,
+    SuccessBtnVue
   },
   data() {
     return {
@@ -79,7 +91,20 @@ export default {
     ...mapStores(useContractDetailStore),
     ...mapStores(useContractCreateStore),
     ...mapStores(useInvoiceListStore),
-    ...mapStores(useConsentDetailStore)
+    ...mapStores(useConsentDetailStore),
+    contractstatus() {
+      const stats = this.contractDetailStore.data.contrac
+    },
+    contractStatsClass() {
+      const id = this.contractDetailStore.data.contractStatus.id
+      if (id === 1) {
+        return 'waiting';
+      } else if (id === 2) {
+        return 'success';
+      } else {
+        return 'warning';
+      }
+    },
   },
   methods: {
     operateDeleteModal(value) {
@@ -103,6 +128,13 @@ export default {
     canEditConsent() {
       return this.contractDetailStore.data.paymentType.id === 2 && this.consentDetailStore.isExist;
     },
+    // 계약 상태 변경
+    async editContractStatus(statusId) {
+      const result = await editContractStatus(this.$route.params.id, statusId);
+      if (result.code !== 200) {
+        // 예외 처리
+      }
+    }
   },
   async created() {
     this.consentDetailStore.$reset();
@@ -124,7 +156,7 @@ export default {
 .root-container {
   @include flex-box(row, space-between, 100px);
   @include root-container;
-  height: auto;
+  height: 100%;
   padding: 30px 130px;
 }
 
@@ -154,10 +186,30 @@ export default {
     @include flex-box(row, space-between, 20px);
     width: 100%;
 
-    .contract-title {
-      left: 50%;
-      font-size: 24px;
+    .haeder-left {
+      @include flex-box(row, start, 15px);
       font-weight: bold;
+
+      .contract-title {
+        left: 50%;
+        font-size: 22px;
+
+      }
+
+      .contract-status {
+        @include flex-box(row, start, 5px);
+        padding: 5px 7px;
+        background: white;
+        border-radius: 20px;
+        border: solid 2px $theme-color;
+
+        div {
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+        }
+      }
+
     }
 
     .right-btn-box {
@@ -165,4 +217,16 @@ export default {
     }
   }
 }
+
+.waiting {
+  background-color: $waiting-color;
+}
+
+.success {
+  background-color: $success-color;
+}
+
+.warning {
+  background-color: $warning-color;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/home/HomeView.vue b/src/views/home/HomeView.vue
index 43932c6..b9cf70e 100644
--- a/src/views/home/HomeView.vue
+++ b/src/views/home/HomeView.vue
@@ -1,22 +1,26 @@
 <template>
   <div class="root-container">
-    <div class="inner-container">
-      <div class="left-container">
-        <div class="left-header">
+    <div class="main-container">
+      <div class="top-container">
+        <div class="top-left">
           <ThisMonthStatic />
           <ProgressBoxVue />
         </div>
-        <InvoiceAreaChartVue />
-      </div>
-      <div class="right-container">
         <div class="btn-container">
-          <ThemeWideBtnVue title="CSV 다운로드" :func="downloadCsvData"/>
-          <ThemeWideBtnVue title="엑셀 다운로드" :func="downloadExcelData"/>
+          <div class="btn-row">
+            <ExcelBtnVue title="CSV" :func="downloadCsvData" />
+            <ExcelBtnVue title="엑셀" :func="downloadExcelData" />
+          </div>
+          <ThemeWideBtnVue title="비회원 접속 링크" @click="() => operationLinkModal(true)"/>
         </div>
+      </div>
+      <div class="bottom-container">
+        <InvoiceAreaChartVue />
         <InvoiceDoughnutChartVue />
       </div>
     </div>
   </div>
+  <NonMemberLinkModalVue :is-visible="linkModalVisible" :close-modal="() => operationLinkModal(false)" />
 </template>
 
 <script>
@@ -29,6 +33,8 @@ import ThisMonthStatic from '@/components/static/ThisMonthStatic.vue';
 import InvoiceDoughnutChartVue from '@/components/static/InvoiceDoughnutChart.vue';
 import InvoiceAreaChartVue from '@/components/static/InvoiceAreaChart.vue';
 import ThemeWideBtnVue from '@/components/common/btn/ThemeWideBtn.vue';
+import ExcelBtnVue from '@/components/common/btn/ExcelBtn.vue';
+import NonMemberLinkModalVue from '@/components/static/modal/NonMemberLinkModal.vue';
 
 export default {
   name: 'HomeView',
@@ -38,11 +44,22 @@ export default {
     InvoiceDoughnutChartVue,
     InvoiceAreaChartVue,
     ThemeWideBtnVue,
+    ExcelBtnVue,
+    NonMemberLinkModalVue
+  },
+  data() {
+    return {
+      linkModalVisible: false
+    }
   },
   computed: {
-    ...mapStores(useStaticStore)
+    ...mapStores(useStaticStore),
   },
   methods: {
+    // 모달창 제어
+    operationLinkModal(value) {
+      this.linkModalVisible = value
+    },
     // 엑셀 파일 다운로드
     async downloadExcelData() {
       const result = await getAllStatic();
@@ -51,7 +68,7 @@ export default {
       const worksheet = XLSX.utils.json_to_sheet(data);
       const workbook = XLSX.utils.book_new();
       XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
-      
+
       XLSX.writeFile(workbook, "data.xlsx");
     },
     // CSV 파일 다운로드
@@ -81,38 +98,41 @@ export default {
 
 <style lang="scss" scoped>
 .root-container {
-  @include flex-box(row, center, 0px);
+  @include flex-box(column, center, 0px);
   @include root-container;
   height: auto;
-  padding: 30px 50px
-}
+  width: fit-content;
+  padding: 30px 50px;
 
-.inner-container {
-  @include flex-box(row, space-between, 0px);
-  width: 1620px;
-  height: 850px
+  .main-container {
+    @include flex-box(column, center, 50px);
+    width: 1400px;
+  }
 }
 
-.left-container {
-  @include flex-box(column, space-between, 40px);
-  width: 1100px;
-  min-width: 1100px;
-  height: 100%;
+.top-container {
+  @include flex-box(row, space-between, 40px);
+  width: 100%;
 
-  .left-header {
+  .top-left {
     @include flex-box(row, space-between, 30px);
-    width: 100%;
+    min-width: 1000px;
   }
-}
-
-.right-container {
-  @include flex-box(column, space-between, 30px);
-  height: 100%;
 
   .btn-container {
     @include flex-box(column, center, 20px);
-    flex-grow: 1;
-    width: 100%;
+    width: 250px;
+
+    .btn-row {
+      @include flex-box(row, space-between, 20px);
+      width: 100%;
+    }
   }
 }
+
+.bottom-container {
+  @include flex-box(row, space-between, 30px);
+  width: 100%;
+  height: 600px;
+}
 </style>
diff --git a/src/views/item/ItemDetailView.vue b/src/views/item/ItemDetailView.vue
index b9d9e23..6db11fb 100644
--- a/src/views/item/ItemDetailView.vue
+++ b/src/views/item/ItemDetailView.vue
@@ -29,6 +29,7 @@ import { getItem } from '@/utils/item';
 import { mapActions, mapStores } from 'pinia';
 import { useContractListStore } from '@/stores/contract/contractList';
 import { getContractList } from '@/utils/contract';
+import { useContractCreateStore } from '@/stores/contract/contractCreate';
 import ItemInfoVue from '@/components/item/ItemInfo.vue';
 import SuccessWideBtnVue from '@/components/common/btn/SuccessWideBtn.vue';
 import WarningWideBtnVue from '@/components/common/btn/WarningWideBtn.vue';
@@ -37,7 +38,6 @@ import ItemDeleteModalVue from '@/components/item/modal/ItemDeleteModal.vue';
 import PaginationBarVue from '@/components/common/PaginationBar.vue';
 import ItemContractTableVue from '@/components/item/table/ItemContractTable.vue';
 import ThemeIconBtnVue from '@/components/common/btn/ThemeIconBtn.vue';
-import { useContractCreateStore } from '@/stores/contract/contractCreate';
 
 export default {
   name: 'ItemDetailView',
@@ -116,16 +116,18 @@ export default {
 @import "../../assets/scss/component/table.scss";
 
 .root-container {
-  @include flex-box(row, space-between, 20px);
+  @include flex-box(row, center, 60px);
   @include root-container;
   height: 100%;
+  width: fit-content;
   padding: 20px 50px
 }
 
 .left-side {
-  @include flex-box(column, space-between, 0px);
-  width: 400px;
-  height: 100%;
+  @include flex-box(column, space-between, 30px);
+  width: 330px;
+  min-height: 100%;
+  height: auto;
   padding: 40px 30px;
   border-radius: 10px;
   box-shadow: $base-shadow;
@@ -140,7 +142,7 @@ export default {
 .right-side {
   @include flex-box(column, space-between, 20px);
   position: relative;
-  width: 100%;
+  width: 1200px;
   height: 100%;
 
   .right-header {
diff --git a/src/views/item/ItemListView.vue b/src/views/item/ItemListView.vue
index 9ca3808..f68ea94 100644
--- a/src/views/item/ItemListView.vue
+++ b/src/views/item/ItemListView.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="root-container">
-    <div class="top-btn-box">
-      <ThemeIconBtnVue title="상품 등록" icon="bi bi-plus-square" :func="() => operateModal(true)"/>
-      <ItemSearchVue/>
-    </div>
-    <div class="table-box">
-      <ItemTableVue/>
-      <PaginationBarVue :store="itemStore"/>
+    <div class="main-container">
+      <div class="top-btn-box">
+        <ThemeIconBtnVue title="상품 등록" icon="bi bi-plus-square" :func="() => operateModal(true)" />
+        <ItemSearchVue />
+      </div>
+      <div class="table-box">
+        <ItemTableVue />
+        <PaginationBarVue :store="itemStore" />
+      </div>
     </div>
   </div>
-  <ItemCreateModalVue 
-    :isVisible="modalVisible" 
-    :closeModal="() => operateModal(false)"/>
+  <ItemCreateModalVue :isVisible="modalVisible" :closeModal="() => operateModal(false)" />
 </template>
 
 <script>
@@ -26,7 +26,7 @@ import { mapStores } from 'pinia';
 import { getItemList } from '@/utils/item';
 
 export default {
-  name : 'ItemListView',
+  name: 'ItemListView',
   components: {
     ThemeIconBtnVue,
     PaginationBarVue,
@@ -51,7 +51,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(useItemStore, ['setPage','setItemList']),
+    ...mapActions(useItemStore, ['setPage', 'setItemList']),
     // 메서드 - 상품 목록 조회
     async getItemList() {
       const result = await getItemList();
@@ -81,9 +81,17 @@ export default {
 @import "../../assets/scss/component/table.scss";
 
 .root-container {
-  @include flex-box(column, space-between, 20px);
+  @include flex-box(column, center, 0px);
   @include root-container;
-  padding: 30px 40px
+  padding: 30px 40px;
+  width: fit-content;
+  height: 100%;
+
+  .main-container {
+    @include flex-box(column, center, 30px);
+    width: 1200px;
+    height: 100%;
+  }
 }
 
 .top-btn-box {

From 165f3a8d9e98afe458855d90649b5ca55b28eabd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?= <rlagkswn37@naver.com>
Date: Sun, 4 Aug 2024 14:04:45 +0900
Subject: [PATCH 4/7] =?UTF-8?q?[K5P-80]=20[fix]=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EB=B9=84=EC=9C=A8=20=EC=A1=B0=EC=A0=95=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/item/ItemInfo.vue        |  1 +
 src/views/contract/ContractListView.vue | 35 ++++++++-----
 src/views/invoice/InvoiceCreateView.vue | 65 +++++++++++++++----------
 src/views/invoice/InvoiceDetailView.vue |  3 +-
 src/views/invoice/InvoiceListView.vue   | 30 ++++++++----
 src/views/item/ItemDetailView.vue       |  4 +-
 src/views/member/MemberDetailView.vue   | 11 +++--
 src/views/member/MemberListView.vue     | 41 +++++++++-------
 8 files changed, 115 insertions(+), 75 deletions(-)

diff --git a/src/components/item/ItemInfo.vue b/src/components/item/ItemInfo.vue
index 1a2cbeb..9a1022d 100644
--- a/src/components/item/ItemInfo.vue
+++ b/src/components/item/ItemInfo.vue
@@ -38,6 +38,7 @@ export default {
 .info-container {
   @include flex-box(column, center, 20px);
   width: 100%;
+
   img {
     width: 250px;
     height: 250px;
diff --git a/src/views/contract/ContractListView.vue b/src/views/contract/ContractListView.vue
index c473671..9ae7a36 100644
--- a/src/views/contract/ContractListView.vue
+++ b/src/views/contract/ContractListView.vue
@@ -1,14 +1,16 @@
 <template>
   <div class="root-container">
-    <div class="top-btn-box">
-      <div class="btn-box">
-        <ThemeIconBtnVue title="계약 등록" icon="bi bi-plus-square" :func="routeCreate"/>
-        <ExcelBtnVue title="대량 등록" :func="routeCreateBulk"/>
+    <div class="main-container">
+      <div class="top-btn-box">
+        <div class="btn-box">
+          <ThemeIconBtnVue title="계약 등록" icon="bi bi-plus-square" :func="routeCreate" />
+          <ExcelBtnVue title="대량 등록" :func="routeCreateBulk" />
+        </div>
+      </div>
+      <div class="table-box">
+        <ContractTableVue />
+        <PaginationBarVue :store="contractListStore" />
       </div>
-    </div>
-    <div class="table-box">
-      <ContractTableVue/>
-      <PaginationBarVue :store="contractListStore"/>
     </div>
   </div>
 </template>
@@ -39,10 +41,10 @@ export default {
   },
   methods: {
     routeCreate() {
-      this.$router.push({name: 'contractCreate'});
+      this.$router.push({ name: 'contractCreate' });
     },
-    routeCreateBulk(){
-      this.$router.push({name: 'contractCreateBulk'});
+    routeCreateBulk() {
+      this.$router.push({ name: 'contractCreateBulk' });
     },
     async getContractList() {
       const result = await getContractList();
@@ -75,16 +77,23 @@ export default {
 .root-container {
   @include flex-box(column, space-between, 20px);
   @include root-container;
+  width: fit-content;
   height: 100%;
-  padding: 30px 40px
+  padding: 30px 40px;
+
+  .main-container {
+    @include flex-box(column, center, 30px);
+    width: 1600px;
+    height: 100%;
+  }
 }
 
 .top-btn-box {
   @include flex-box(row, space-between, 0px);
   width: 100%;
+
   .btn-box {
     @include flex-box(row, space-between, 20px);
   }
 }
-
 </style>
diff --git a/src/views/invoice/InvoiceCreateView.vue b/src/views/invoice/InvoiceCreateView.vue
index 18ff742..395d2aa 100644
--- a/src/views/invoice/InvoiceCreateView.vue
+++ b/src/views/invoice/InvoiceCreateView.vue
@@ -1,21 +1,23 @@
 <template>
   <div class="root-container">
-    <div class="btn-box">
-      <TitleInfoVue title="계약ID" :info="invoiceCreateStore.data.contractId"/>
-      <TitleSelectVue title="결제 수단" :selectedIdx="invoiceCreateStore.paymentTypeIdx" :keywordArr="invoiceCreateStore.paymentType"
-      :choiceFunc="setPaymentType" />
-      <InfoInputVue title="청구금" v-model="chargeAmount" type="number" />
-      <InfoInputVue title="결제일" type="date" v-model="contractDate" />
-      <InfoInputVue title="납부기한" type="date" v-model="dueDate" />
-    </div>
-    <div class="table-box">
-      <InvoiceCreateTableVue />
-      <PaginationBarVue :store="contractListStore" />
-    </div>
-    <div class="btn-box">
-      <WarningBtnVue title="취소" :func="routeInvoice"/>
-      <span>{{ warningMsg }}</span>
-      <ThemeBtnVue title="청구 등록" :func="createInvoice"/>
+    <div class="main-container">
+      <div class="btn-box">
+        <TitleInfoVue title="계약ID" :info="invoiceCreateStore.data.contractId" />
+        <TitleSelectVue title="결제 수단" :selectedIdx="invoiceCreateStore.paymentTypeIdx"
+          :keywordArr="invoiceCreateStore.paymentType" :choiceFunc="setPaymentType" />
+        <InfoInputVue title="청구금" v-model="chargeAmount" type="number" />
+        <InfoInputVue title="결제일" type="date" v-model="contractDate" />
+        <InfoInputVue title="납부기한" type="date" v-model="dueDate" />
+      </div>
+      <div class="table-box">
+        <InvoiceCreateTableVue />
+        <PaginationBarVue :store="contractListStore" />
+      </div>
+      <div class="btn-box">
+        <WarningBtnVue title="취소" :func="routeInvoice" />
+        <span>{{ warningMsg }}</span>
+        <ThemeBtnVue title="청구 등록" :func="createInvoice" />
+      </div>
     </div>
   </div>
 </template>
@@ -47,7 +49,7 @@ export default {
   },
   data() {
     return {
-      warningMsg:''
+      warningMsg: ''
     }
   },
   computed: {
@@ -80,11 +82,11 @@ export default {
   },
   methods: {
     routeInvoice() {
-      this.$router.push({name: 'invoice'})
+      this.$router.push({ name: 'invoice' })
     },
     async createInvoice() {
       const result = await createInvoice();
-      
+
       if (result.code === 200) {
         this.$router.push(`/invoice/${result.data}`);
       } else {
@@ -126,16 +128,25 @@ export default {
 .root-container {
   @include flex-box(column, space-between, 30px);
   @include root-container;
-  padding: 30px 40px
+  padding: 30px 40px;
+  height: 100%;
+  width: fit-content;
+
+  .main-container {
+    @include flex-box(column, center, 30px);
+    width: 1400px;
+    height: 100%;
+  }
 }
 
 .btn-box {
-    @include flex-box(row, space-between, 20px);
-    width: 100%;
-    span {
-      font-size: 18px;
-      font-weight: bold;
-      color: $warning-color
-    }
+  @include flex-box(row, space-between, 20px);
+  width: 100%;
+
+  span {
+    font-size: 18px;
+    font-weight: bold;
+    color: $warning-color
   }
+}
 </style>
diff --git a/src/views/invoice/InvoiceDetailView.vue b/src/views/invoice/InvoiceDetailView.vue
index e89461d..2a5bc33 100644
--- a/src/views/invoice/InvoiceDetailView.vue
+++ b/src/views/invoice/InvoiceDetailView.vue
@@ -102,8 +102,7 @@ export default {
 .left-side {
   @include flex-box(column, center, 20px);
   box-sizing: border-box;
-  min-width: 700px;
-  width: 40%;
+  width: 650px;
   min-height: 100%;
   padding: 40px 50px;
   border-radius: 10px;
diff --git a/src/views/invoice/InvoiceListView.vue b/src/views/invoice/InvoiceListView.vue
index 27e5f53..b2a0d94 100644
--- a/src/views/invoice/InvoiceListView.vue
+++ b/src/views/invoice/InvoiceListView.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="root-container">
-    <div class="top-btn-box">
-      <div class="btn-box">
-        <ThemeIconBtnVue title="청구 수동 생성" icon="bi bi-plus-square" :func="routeCreate"/>
+    <div class="main-container">
+      <div class="top-btn-box">
+        <div class="btn-box">
+          <ThemeIconBtnVue title="청구 수동 생성" icon="bi bi-plus-square" :func="routeCreate" />
+        </div>
+      </div>
+      <div class="table-box">
+        <InvoiceTableVue />
+        <PaginationBarVue :store="invoiceListStore" />
       </div>
-    </div>
-    <div class="table-box">
-      <InvoiceTableVue/>
-      <PaginationBarVue :store="invoiceListStore"/>
     </div>
   </div>
 </template>
@@ -32,7 +34,7 @@ export default {
   },
   methods: {
     routeCreate() {
-      this.$router.push({name: 'invoiceCreate'})
+      this.$router.push({ name: 'invoiceCreate' })
     },
     async getInvoiceList() {
       const result = await getInvoiceList();
@@ -65,15 +67,23 @@ export default {
 .root-container {
   @include flex-box(column, space-between, 20px);
   @include root-container;
-  padding: 30px 40px
+  width: fit-content;
+  height: 100%;
+  padding: 30px 40px;
+
+  .main-container {
+    @include flex-box(column, center, 30px);
+    width: 1600px;
+    height: 100%;
+  }
 }
 
 .top-btn-box {
   @include flex-box(row, space-between, 0px);
   width: 100%;
+
   .btn-box {
     @include flex-box(row, space-between, 20px);
   }
 }
-
 </style>
diff --git a/src/views/item/ItemDetailView.vue b/src/views/item/ItemDetailView.vue
index 6db11fb..f9ff296 100644
--- a/src/views/item/ItemDetailView.vue
+++ b/src/views/item/ItemDetailView.vue
@@ -114,13 +114,14 @@ export default {
 
 <style lang="scss" scoped>
 @import "../../assets/scss/component/table.scss";
+$root-margin: 20px;
 
 .root-container {
   @include flex-box(row, center, 60px);
   @include root-container;
   height: 100%;
   width: fit-content;
-  padding: 20px 50px
+  padding: $root-margin 50px
 }
 
 .left-side {
@@ -128,6 +129,7 @@ export default {
   width: 330px;
   min-height: 100%;
   height: auto;
+  margin: $root-margin 0;
   padding: 40px 30px;
   border-radius: 10px;
   box-shadow: $base-shadow;
diff --git a/src/views/member/MemberDetailView.vue b/src/views/member/MemberDetailView.vue
index 371b401..d29ee2d 100644
--- a/src/views/member/MemberDetailView.vue
+++ b/src/views/member/MemberDetailView.vue
@@ -117,16 +117,17 @@ export default {
 @import "../../assets/scss/component/table.scss";
 
 .root-container {
-  @include flex-box(row, space-between, 20px);
+  @include flex-box(row, center, 60px);
   @include root-container;
   height: 100%;
   padding: 20px 30px
 }
 
 .left-side {
-  @include flex-box(column, space-between, 0px);
-  width: 400px;
-  height: 100%;
+  @include flex-box(column, space-between, 20px);
+  width: 350px;
+  min-height: 100%;
+  height: auto;
   padding: 20px 30px;
   border-radius: 10px;
   box-shadow: $base-shadow;
@@ -141,7 +142,7 @@ export default {
 .right-side {
   @include flex-box(column, space-between, 20px);
   position: relative;
-  width: 100%;
+  width: 1200px;
   height: 100%;
 
   .right-header {
diff --git a/src/views/member/MemberListView.vue b/src/views/member/MemberListView.vue
index e1a645b..81369c2 100644
--- a/src/views/member/MemberListView.vue
+++ b/src/views/member/MemberListView.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="root-container">
-    <div class="top-btn-box">
-      <div class="btn-box">
-        <ThemeIconBtnVue title="회원 등록" icon="bi bi-plus-square" :func="() => operateModal(true)"/>
-        <ExcelBtnVue title="대량 등록" :func="directCreateBulk"/>
+    <div class="main-container">
+      <div class="top-btn-box">
+        <div class="btn-box">
+          <ThemeIconBtnVue title="회원 등록" icon="bi bi-plus-square" :func="() => operateModal(true)" />
+          <ExcelBtnVue title="대량 등록" :func="directCreateBulk" />
+        </div>
+        <MemberSearchVue />
+      </div>
+      <div class="table-box">
+        <MemberTableVue />
+        <PaginationBarVue :store="memberStore" />
       </div>
-      <MemberSearchVue/>
-    </div>
-    <div class="table-box">
-      <MemberTableVue/>
-      <PaginationBarVue :store="memberStore"/>
     </div>
   </div>
-  <MemberCreateModalVue 
-    :isVisible="modalVisible" 
-    :closeModal="() => operateModal(false)"/>
+  <MemberCreateModalVue :isVisible="modalVisible" :closeModal="() => operateModal(false)" />
 </template>
 
 <script>
@@ -57,7 +57,7 @@ export default {
       this.modalVisible = value;
     },
     directCreateBulk() {
-      this.$router.push({name: 'memberBulk'});
+      this.$router.push({ name: 'memberBulk' });
     },
     setupWatchers() {
       this.$watch('memberStore.size', this.getMemberList);
@@ -77,19 +77,26 @@ export default {
 @import "../../assets/scss/component/table.scss";
 
 .root-container {
-  @include flex-box(column, space-between, 20px);
+  @include flex-box(column, center, 20px);
+  @include root-container;
   background: $back-color;
-  width: 100%;
+  width: fit-content;
   height: 100%;
-  padding: 30px 40px
+  padding: 30px 40px;
+
+  .main-container {
+    @include flex-box(column, center, 30px);
+    width: 1200px;
+    height: 100%;
+  }
 }
 
 .top-btn-box {
   @include flex-box(row, space-between, 0px);
   width: 100%;
+
   .btn-box {
     @include flex-box(row, space-between, 20px);
   }
 }
-
 </style>

From 51b8555a3821403325164b91df8b874dd22e8aba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?= <rlagkswn37@naver.com>
Date: Sun, 4 Aug 2024 23:23:24 +0900
Subject: [PATCH 5/7] =?UTF-8?q?[K5P-80]=20[fix]=20=EC=86=8C=EA=B7=9C?=
 =?UTF-8?q?=EB=AA=A8=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/info/TitleInfo.vue        |  2 +-
 src/components/common/select/TitleSelect.vue    |  2 +-
 src/components/item/table/ItemContractTable.vue |  5 -----
 src/views/contract/ContractDetailView.vue       | 10 ++++------
 src/views/invoice/InvoiceDetailView.vue         |  2 +-
 src/views/item/ItemDetailView.vue               |  2 +-
 src/views/member/MemberDetailView.vue           |  2 +-
 7 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/components/common/info/TitleInfo.vue b/src/components/common/info/TitleInfo.vue
index d001c3f..91750d7 100644
--- a/src/components/common/info/TitleInfo.vue
+++ b/src/components/common/info/TitleInfo.vue
@@ -37,7 +37,7 @@ export default {
       @include flex-box(row, start, 0px);
       flex-grow: 1;
       height: 100%;
-      padding: 0px 20px;
+      padding: 0px 10px;
       font-weight: bold;
       border: $theme-color solid;
       border-top-right-radius: 5px;
diff --git a/src/components/common/select/TitleSelect.vue b/src/components/common/select/TitleSelect.vue
index 49e8d0c..b0909b8 100644
--- a/src/components/common/select/TitleSelect.vue
+++ b/src/components/common/select/TitleSelect.vue
@@ -94,7 +94,7 @@ export default {
     @include flex-box(row, space-between, 10px);
     @include base-icon();
     width: 100%;
-    padding: 7px 15px;
+    padding: 7px 0px;
     background: none;
     border: none;
     font-weight: bold
diff --git a/src/components/item/table/ItemContractTable.vue b/src/components/item/table/ItemContractTable.vue
index dee63bb..74b1d31 100644
--- a/src/components/item/table/ItemContractTable.vue
+++ b/src/components/item/table/ItemContractTable.vue
@@ -6,11 +6,6 @@
     </thead>
     <tbody>
       <ItemContractTableRowVue v-for="(contract, idx) in contractListStore.contractList" :key="idx" :contractData="contract" />
-      <ItemContractTableRowVue v-for="(contract, idx) in contractListStore.contractList" :key="idx" :contractData="contract" />
-      <ItemContractTableRowVue v-for="(contract, idx) in contractListStore.contractList" :key="idx" :contractData="contract" />
-      <ItemContractTableRowVue v-for="(contract, idx) in contractListStore.contractList" :key="idx" :contractData="contract" />
-      <ItemContractTableRowVue v-for="(contract, idx) in contractListStore.contractList" :key="idx" :contractData="contract" />
-      <ItemContractTableRowVue v-for="(contract, idx) in contractListStore.contractList" :key="idx" :contractData="contract" />
     </tbody>
   </table>
 </template>
diff --git a/src/views/contract/ContractDetailView.vue b/src/views/contract/ContractDetailView.vue
index 1361795..ed891f3 100644
--- a/src/views/contract/ContractDetailView.vue
+++ b/src/views/contract/ContractDetailView.vue
@@ -154,16 +154,15 @@ export default {
 @import "../../assets/scss/component/table.scss";
 
 .root-container {
-  @include flex-box(row, space-between, 100px);
+  @include flex-box(row, center, 60px);
   @include root-container;
   height: 100%;
-  padding: 30px 130px;
+  padding: 30px 50px;
 }
 
 .left-side {
   @include flex-box(column, space-between, 20px);
-  min-width: 700px;
-  width: 40%;
+  width: 650px;
   min-height: 100%;
   padding: 40px 50px;
   border-radius: 10px;
@@ -178,8 +177,7 @@ export default {
 
 .right-side {
   @include flex-box(column, space-between, 20px);
-  // position: relative;
-  width: 100%;
+  width: 900px;
   height: 100%;
 
   .right-header {
diff --git a/src/views/invoice/InvoiceDetailView.vue b/src/views/invoice/InvoiceDetailView.vue
index 2a5bc33..f1f32af 100644
--- a/src/views/invoice/InvoiceDetailView.vue
+++ b/src/views/invoice/InvoiceDetailView.vue
@@ -8,7 +8,7 @@
       <PaymentInfoVue/>
       <div class="btn-box" v-if="invoiceDetailStore.data.paymentStatus.id !== 2">
         <ThemeWideBtnVue title="청구서 발송" 
-        v-if="invoiceDetailStore.data.paymentType.id === 1"
+          v-if="invoiceDetailStore.data.paymentType.id === 1 || invoiceDetailStore.data.paymentStatus.id === 1"
           :func="sendInvoice" />
         <SuccessWideBtnVue title="수정" :func="() => operateEditModal(true)"/>
         <WarningWideBtnVue title="삭제" :func="() => operateDeleteModal(true)"/>
diff --git a/src/views/item/ItemDetailView.vue b/src/views/item/ItemDetailView.vue
index f9ff296..5895ef5 100644
--- a/src/views/item/ItemDetailView.vue
+++ b/src/views/item/ItemDetailView.vue
@@ -144,7 +144,7 @@ $root-margin: 20px;
 .right-side {
   @include flex-box(column, space-between, 20px);
   position: relative;
-  width: 1200px;
+  width: 1400px;
   height: 100%;
 
   .right-header {
diff --git a/src/views/member/MemberDetailView.vue b/src/views/member/MemberDetailView.vue
index d29ee2d..17c1adb 100644
--- a/src/views/member/MemberDetailView.vue
+++ b/src/views/member/MemberDetailView.vue
@@ -142,7 +142,7 @@ export default {
 .right-side {
   @include flex-box(column, space-between, 20px);
   position: relative;
-  width: 1200px;
+  width: 1400px;
   height: 100%;
 
   .right-header {

From e035ff0d8e61d6f9ee81d6881d7aecd5e780aedb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?= <rlagkswn37@naver.com>
Date: Mon, 5 Aug 2024 03:21:34 +0900
Subject: [PATCH 6/7] =?UTF-8?q?[K5P-80]=20[fix]=20=ED=85=8C=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=94=20=ED=81=AC=EA=B8=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/contract/choose-box.scss           |  3 +--
 .../contract/create/ContractChooseItem.vue         |  3 ++-
 .../contract/create/ContractChooseMember.vue       |  1 +
 .../contract/modal/InvoiceCreateModal.vue          |  2 +-
 src/stores/contract/contractCreate.js              | 14 ++++++++++++--
 src/views/contract/ContractCreateView.vue          |  3 +--
 6 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/assets/scss/contract/choose-box.scss b/src/assets/scss/contract/choose-box.scss
index 0604f44..b3e1fdb 100644
--- a/src/assets/scss/contract/choose-box.scss
+++ b/src/assets/scss/contract/choose-box.scss
@@ -1,8 +1,7 @@
 .right-side {
   @include flex-box(column, space-between, 20px);
   position: relative;
-  width: 100%;
-  min-width: 800px;
+  height: 100%;
 }
 
 .right-side-header {
diff --git a/src/components/contract/create/ContractChooseItem.vue b/src/components/contract/create/ContractChooseItem.vue
index d77b3b5..d0882fb 100644
--- a/src/components/contract/create/ContractChooseItem.vue
+++ b/src/components/contract/create/ContractChooseItem.vue
@@ -38,6 +38,7 @@ export default {
 @import '@/assets/scss/contract/choose-box.scss';
 
 .right-side {
-  height: 100%;
+  width: 800px;
+
 }
 </style>
diff --git a/src/components/contract/create/ContractChooseMember.vue b/src/components/contract/create/ContractChooseMember.vue
index 5aac439..bd38ff4 100644
--- a/src/components/contract/create/ContractChooseMember.vue
+++ b/src/components/contract/create/ContractChooseMember.vue
@@ -24,6 +24,7 @@ export default {
 @import '@/assets/scss/contract/choose-box.scss';
 
 .right-side {
+  width: 800px;
   height: 100%;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/contract/modal/InvoiceCreateModal.vue b/src/components/contract/modal/InvoiceCreateModal.vue
index ac77d32..f1e1487 100644
--- a/src/components/contract/modal/InvoiceCreateModal.vue
+++ b/src/components/contract/modal/InvoiceCreateModal.vue
@@ -7,7 +7,7 @@
           <TitleSelectVue title="결제 수단" :selectedIdx="invoiceCreateStore.paymentTypeIdx"
             :keywordArr="invoiceCreateStore.paymentType" :choiceFunc="setPaymentType" />
           <InfoInputVue title="청구금" v-model="chargeAmount" type="number" />
-          <InfoInputVue title="약정일" type="date" v-model="contractDate" />
+          <InfoInputVue title="결제일" type="date" v-model="contractDate" />
           <InfoInputVue title="납부기한" type="date" v-model="dueDate" />
         </div>
         <ModalFooterVue :title="title" :errorMsg="errorMsg" :func="createInvoice" />
diff --git a/src/stores/contract/contractCreate.js b/src/stores/contract/contractCreate.js
index 802b415..a82c88c 100644
--- a/src/stores/contract/contractCreate.js
+++ b/src/stores/contract/contractCreate.js
@@ -36,8 +36,7 @@ export const useContractCreateStore = defineStore('contractCreate', {
       ],
       isEasyConsentIdx: 0,
       isEasyConsent: [
-        { name: '미사용', value: false },
-        { name: '사용', value: true },
+        { name: '불필요', value: false },
       ]
     }
   },
@@ -74,6 +73,17 @@ export const useContractCreateStore = defineStore('contractCreate', {
     },
     setPaymentType(idx) {
       this.paymentTypeIdx = idx;
+      if (idx === 0) {
+        this.isEasyConsentIdx = 0;
+        this.isEasyConsent = [
+          { name: '불필요', value: false },
+        ]
+      } else {
+        this.isEasyConsent = [
+          { name: '미사용', value: false },
+          { name: '사용', value: true },
+        ]
+      }
     },
     setIsEasyConsent(idx) {
       this.isEasyConsentIdx = idx
diff --git a/src/views/contract/ContractCreateView.vue b/src/views/contract/ContractCreateView.vue
index a66404b..458ba97 100644
--- a/src/views/contract/ContractCreateView.vue
+++ b/src/views/contract/ContractCreateView.vue
@@ -88,8 +88,7 @@ export default {
 
 .left-side {
   @include flex-box(column, space-between, 20px);
-  min-width: 700px;
-  width: 40%;
+  width: 700px;
   height: 100%;
   padding: 40px 50px;
   border-radius: 10px;

From 62488a20450c73b83bbb4a9a6e4f5ff3a72408f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?=
 <114633442+Koneweekk@users.noreply.github.com>
Date: Mon, 5 Aug 2024 11:02:17 +0900
Subject: [PATCH 7/7] =?UTF-8?q?[release]=20package.json=20=EB=B2=84?=
 =?UTF-8?q?=EC=A0=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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": {