Merge pull request #6 from Billing-Wise/K5P-51/feat/상품및회원컴포넌트

[feat] 공통 컴포넌트 개발

src/assets/scss/common.scss

@@ -1,11 +1,13 @@
 $light-theme-color: rgba(130, 112, 190, 0.7);
 $theme-color: #8270BE;
 $input-color: #6C7F98;
+$back-color: #EBEBEB;
 
 $base-shadow : 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 
 $nav-bar-height : 60px;
 $side-bar-width : 150px;
+$mobile-header-height : 100px;
 
 @mixin flex-box($direction, $align, $gap) {
   display: flex;
@@ -15,13 +17,10 @@ $side-bar-width : 150px;
   gap: $gap;
 }
 
-@mixin base-button($width, $font-size) {
-  width: $width;
+@mixin base-button() {
   box-shadow: 0 5px 10px rgba(0,0,0,0.16), 0 5px 10px rgba(0,0,0,0.23);
   box-sizing: border-box;
-  padding: 10px;
   border-radius: 10px;
-  font-size: $font-size;
   font-weight: bold;
   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
   cursor: pointer;
@@ -33,6 +32,14 @@ $side-bar-width : 150px;
   }
 }
 
+@mixin base-icon() {
+  cursor: pointer;
+  transition: opacity 0.5s;
+  &:hover {
+    opacity: 0.5;
+  }
+}
+
 @mixin base-input($width, $font-size) {
   box-sizing: border-box;
   width: $width;

src/components/auth/AuthBtnInput.vue

@@ -38,10 +38,13 @@
 
     .main-box {
       input {
-        @include base-input(70%, 16px)
+        @include base-input(70%, 16px);
       }
       button {
-        @include base-button(25%, 16px);
+        @include base-button();
+        padding: 10px;
+        width: 25%;
+        font-size: 16px;
         background-color: $theme-color;
         border: none;
         color : white;

src/components/auth/AuthButton.vue

@@ -14,7 +14,8 @@ export default {
 
 <style lang="scss" scoped>
   .auth-button {
-    @include base-button(100%, 18px);
+    @include base-button();
+    padding: 10px;
     width: 100%;
     font-size: 18px;
     background-color: $theme-color;

src/components/common/PaginationBar.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="pagination-bar">
+    <div class="spacer"></div>
+    <PageChoiceVue :store="store"/>
+    <SizeChoice :store="store"/>
+  </div>
+
+</template>
+
+<script>
+import PageChoiceVue from './pagination/PageChoice.vue'
+import SizeChoice from './pagination/SizeChoice.vue';
+
+export default {
+  name: 'PaginationBarVue',
+  components:{
+    SizeChoice,
+    PageChoiceVue
+  },
+  props: {
+    store: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+    page: 1,
+    size: 10
+  }},
+  computed: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .pagination-bar {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    width: 100%;
+  }
+</style>

src/components/common/TheNavBar.vue

@@ -20,9 +20,11 @@ export default {
     };
   },
   async mounted() {
-    const result = await mainAxios.get('users/current');
-    this.clientName = result.data.clientName
-    this.userName = result.data.userName
+    // const result = await mainAxios.get('users/current');
+    // this.clientName = result.data.clientName
+    // this.userName = result.data.userName
+    this.clientName = "KOSA"
+    this.userName = "홍길동"
   },
   method: {
   },

src/components/common/btn/ThemeIconBtn.vue

@@ -0,0 +1,31 @@
+<template>
+  <Button class="icon-btn" @click="func">
+    <span>{{ title }}</span>
+    <i :class="icon"></i>
+  </Button>
+</template>
+
+<script>
+export default {
+  name: 'ColorIconBtnVue',
+  props: {
+    title: String,
+    icon: String,
+    func: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .icon-btn {
+    @include flex-box(row, center, 10px);
+    @include base-button();
+    padding: 7px 15px;
+    background-color: $theme-color;
+    color: white;
+    border: none;
+    i {
+      font-size: 22px
+    }
+  }
+</style>

src/components/common/input/SearchInput.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="search-input" @keydown.enter="search">
+    <input 
+      type="text" 
+      :placeholder="title"
+      :value="modelValue" 
+      @input="$emit('update:modelValue', $event.target.value)">
+    <i class="bi bi-search" @click="search"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SearchInputtVue',
+  props: {
+    'title' : String,
+    'modelValue': String,
+    'search': Function
+  },
+  emits: ['update:modelValue']
+
+}
+</script>
+
+<style lang='scss' scoped>
+  .search-input {
+    @include flex-box(row, center, 10px);
+    background-color: white;
+    width: 300px;
+    padding: 5px 15px;
+    border-radius: 20px;
+    border: $theme-color solid 2px;
+    input {
+      width: 100%;
+      border: none;
+      font-weight: bold;
+      &:focus {
+        outline: none;
+      }
+    }
+    i {
+      font-size: 20px;
+      @include base-icon;
+    }
+
+  }
+</style>

src/components/common/pagination/PageChoice.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="page-choice">
+    <div class="btn-box">
+      <div class="move-icon" @click="this.store.setPage(0)">&lt;&lt;</div>
+      <div class="move-icon" @click="this.store.setPage(store.page - 1)">&lt;</div>
+    </div>
+    <div class="number-box">
+      <div 
+        v-for="page in nowPageNumbers" 
+        @click="setPage(page)"
+        :key="page" 
+        :class="{ 'active': store.page === page }"
+        class="page-number">
+        <span>{{ page + 1 }}</span>
+      </div>
+    </div>
+    <div class="btn-box">
+      <div class="move-icon" @click="this.store.setPage(store.page + 1)">></div>
+      <div class="move-icon" @click="this.store.setPage(store.maxPage)">>></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name : "PageChoiceVue",
+  props: {
+    store: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    nowMaxPage() {
+      return this.store.page + 2 < this.store.maxPage ? this.store.page + 2 : this.store.maxPage;
+    },
+    nowLeastPage() {
+      return this.store.page - 2 > 0 ? this.store.page - 2 : 0;
+    },
+    nowPageNumbers() {
+      const pages = [];
+      for (let i = this.nowLeastPage; i <= this.nowMaxPage; i++) {
+        pages.push(i);
+      }
+      return pages;
+    }
+  },
+  methods: {
+    setPage(page) {
+      this.store.setPage(page);  
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-choice {
+  @include flex-box(row, center, 20px);
+  .btn-box {
+    @include flex-box(row, center, 10px) 
+  }
+  .number-box {
+    @include flex-box(row, center, 15px)
+  }
+}
+
+.move-icon {
+  @include flex-box(row, center, 0px);
+  @include base-icon;
+  width: 32px;
+  height: 32px;
+  background-color: $theme-color;
+  border-radius: 50%;
+  font-size: 14px;
+  font-weight: bold;
+  color : white;
+}
+
+.page-number {
+  @include flex-box(row, center, 0px);
+  @include base-icon;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.active {
+  width: 28px;
+  height: 28px;
+  background-color: $theme-color;
+  border-radius: 50%;
+  font-size: 18px !important;///
+  color : white;
+}
+</style>