Merge pull request #30 from Billing-Wise/dev

[release] 1.0.1
Billing-Wise · Aug 5, 2024 · d80e302 · d80e302
2 parents 663b5d3 + 62488a2
commit d80e302
Show file tree

Hide file tree

Showing 60 changed files with 954 additions and 348 deletions.
diff --git 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": {

diff --git 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
@@ -14,6 +14,7 @@
   background: white;
   width: 100%;
   flex-grow: 1;
+  min-height: 700px;
   overflow:auto;
   border-radius: 5px;
 }

diff --git 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/auth/AuthLoading.vue 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>
diff --git 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
@@ -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.data.clientName }}</div>
+      <div class="nav-info-item">{{ authStore.data.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,36 +21,42 @@ export default {
       userName: String,
     };
   },
-  async mounted() {
-    const result = await mainAxios.get('users/current');
-    this.clientName = result.data.clientName
-    this.userName = result.data.userName
+  computed: {
+    ...mapStores(useAuthStore)
   },
-  method: {
+  async mounted() {
+    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>
diff --git 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
@@ -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>
diff --git a/src/components/common/info/TitleInfo.vue b/src/components/common/info/TitleInfo.vue
@@ -12,15 +12,14 @@ export default {
   name: 'TitleInfoVue',
   props: {
     'title' : String,
-    'info': String,
+    'info': [String, Number],
   },
 }
 </script>
 
 <style lang='scss' scoped>
   .info-input {
     @include flex-box(row, center, 0px);
-    background-color: white;
     width: 100%;
     height: 40px;
 
@@ -38,11 +37,12 @@ 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;
       border-bottom-right-radius: 5px;
+      background-color: white;
     }
   }
 </style>
diff --git 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/input/NumberInput.vue 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>
diff --git 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;
   }
 }
 
@@ -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
@@ -104,6 +104,6 @@ export default {
     @include flex-box(column, center, 10px);
     @include select-list;
     top: calc(100% + 10px);
-    width:90%
+    width:90%;
   }
 </style>