[feat, fix] 상품 목록 조회 화면 구성 완료

src/assets/scss/component/modal.scss

@@ -0,0 +1,11 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/assets/scss/component/table.scss

@@ -0,0 +1,3 @@
+@mixin base-table() {
+  width: 100%;
+}

src/components/common/TheNavBar.vue

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

src/components/common/btn/ThemeIconBtn.vue

@@ -1,8 +1,8 @@
 <template>
-  <Button class="icon-btn" @click="func">
+  <button class="icon-btn" @click="func">
     <span>{{ title }}</span>
     <i :class="icon"></i>
-  </Button>
+  </button>
 </template>
 
 <script>

src/components/common/pagination/PageChoice.vue

@@ -1,8 +1,8 @@
 <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>
+      <i class="bi bi-chevron-double-left move-icon" @click="this.store.setPage(0)"></i>
+      <i class="bi bi-chevron-left move-icon" @click="this.store.setPage(store.page - 1)"></i>
     </div>
     <div class="number-box">
       <div 
@@ -11,12 +11,12 @@
         :key="page" 
         :class="{ 'active': store.page === page }"
         class="page-number">
-        <span>{{ page + 1 }}</span>
+        {{ page + 1 }}
       </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>
+      <i class="bi bi-chevron-right move-icon" @click="this.store.setPage(store.page + 1)"></i>
+      <i class="bi bi-chevron-double-right move-icon" @click="this.store.setPage(store.maxPage)"></i>
     </div>
   </div>
 </template>
@@ -55,25 +55,22 @@ export default {
 
 <style lang="scss" scoped>
 .page-choice {
-  @include flex-box(row, center, 20px);
+  @include flex-box(row, center, 40px);
   .btn-box {
     @include flex-box(row, center, 10px) 
   }
   .number-box {
-    @include flex-box(row, center, 15px)
+    @include flex-box(row, center, 30px)
   }
 }
 
 .move-icon {
   @include flex-box(row, center, 0px);
   @include base-icon;
-  width: 32px;
-  height: 32px;
-  background-color: $theme-color;
+  color: $theme-color;
   border-radius: 50%;
-  font-size: 14px;
+  font-size: 28px;
   font-weight: bold;
-  color : white;
 }
 
 .page-number {
@@ -84,11 +81,11 @@ export default {
 }
 
 .active {
-  width: 28px;
-  height: 28px;
+  width: 34px;
+  height: 34px;
   background-color: $theme-color;
   border-radius: 50%;
-  font-size: 18px !important;///
+  font-size: 16px !important;///
   color : white;
 }
 </style>

src/components/common/pagination/SizeChoice.vue

@@ -66,7 +66,7 @@ export default {
 
 .size-box {
   @include flex-box(row, center, 5px);
-  padding: 3px 7px;
+  padding: 3px 10px;
   border-radius: 10px;
   box-shadow: 0px 1px 5px 1px rgb(0, 0, 0, 0.3);
   transition: all 0.5s;

src/components/common/table/TableHaeder.vue

@@ -0,0 +1,54 @@
+<template>
+  <tr class="table-header">
+    <th v-for="(column, key) in store.columns" :key="key">
+      <div class="column-item">
+        <span>{{column.name}}</span>
+        <i :class="column.sort? sortIcon[column.sort] : nonSortIcon" @click="changeSort(column)"></i>
+      </div>
+    </th> 
+  </tr>
+</template>
+
+<script>
+export default {
+  name: 'TableHaederVue',
+  props: {
+    store: {
+      type: Object,
+      required: true
+    }
+  },
+  data(){
+    return {
+      nonSortIcon : 'bi bi-arrow-down-up',
+      sortIcon : {
+        'asc' : 'bi bi-sort-numeric-down sort-active',
+        'desc' : 'bi bi-sort-numeric-down-alt sort-active'
+      }
+    }
+  },
+  methods: {
+    changeSort(column) {
+      if (column.sort == 'asc') {
+        this.store.setColumnSort(column.data, 'desc');
+      } else if (column.sort == 'desc') {
+        this.store.setColumnSort(column.data, null);
+      } else {
+        this.store.setColumnSort(column.data, 'asc');
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .column-item {
+    @include white-text(16px);
+    @include flex-box(row, space-between, 0px);
+    background: $theme-color;
+    padding: 5px 20px;
+    i {
+      @include base-icon;
+    }
+  }
+</style>

src/components/item/ItemModal.vue

@@ -0,0 +1,23 @@
+<template>
+  <div v-if="isVisible" class="modal-overlay" @click.self="closeModal">
+    <div class="modal-content">
+      <slot></slot>
+      <button @click="closeModal">Close</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isVisible: Boolean,
+    closeModal: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/component/modal.scss';
+
+
+</style>

src/components/item/ItemTable.vue

@@ -0,0 +1,40 @@
+<template>
+
+  <table class="item-table">
+    <thead>
+      <TableHaederVue :store="itemStore"/>
+    </thead>
+    <tbody>
+      <ItemTableRowVue v-for="(value, key) in itemStore.itemList" :key="key" :itemData="value"/>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import { mapActions, mapStores } from 'pinia';
+import { useItemStore } from '@/stores/item';
+import TableHaederVue from '../common/table/TableHaeder.vue';
+import ItemTableRowVue from './ItemTableRow.vue';
+
+export default {
+  name: 'ItemTableVue',
+  components: {
+    TableHaederVue,
+    ItemTableRowVue
+  },  
+  computed: {
+    ...mapStores(useItemStore),
+  },
+  methods: {
+    ...mapActions(useItemStore, ['setColumnSort'])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/component/table.scss";
+.item-table {
+  @include base-table();
+
+}
+</style>

src/components/item/ItemTableRow.vue

@@ -0,0 +1,52 @@
+<template>
+  <tr class="item-row"> 
+    <td class="item-column"><span>{{ itemData.id }}</span></td>
+    <td class="item-column"><img :src="itemData.imageUrl" alt="item-image" class="item-image"></td>
+    <td class="item-column"><span>{{ itemData.name }}</span></td>
+    <td class="item-column"><span>{{ itemData.price }}원</span></td>
+    <td class="item-column"><span>{{ itemData.contractCount }}건</span></td>
+    <td class="item-column"><span>{{ createdAtDate }}</span></td>
+    <td class="item-column"><span>{{ updatedAtDate }}</span></td>
+  </tr>
+</template>
+
+<script>
+import { toDateFromDateTime } from '@/utils/date';
+
+export default {
+  name: 'ItemTableRowVue',
+  props: {
+    itemData: Object
+  },
+  computed: {
+    createdAtDate() {
+      return toDateFromDateTime(this.itemData.createdAt)
+    },
+    updatedAtDate() {
+      return toDateFromDateTime(this.itemData.updatedAt)
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+  .item-row {
+    transition: all 0.5s;
+    cursor: pointer;
+    &:hover {
+      background-color: $back-color;
+      opacity: 0.5;
+    }
+  }
+
+  .item-column {
+    font-weight: bold;
+    padding: 10px 20px;
+  }
+
+  .item-image {
+    width: 120px;
+    height: 120px;
+    object-fit: contain;
+  }
+</style>

src/stores/item.js

@@ -5,19 +5,40 @@ export const useItemStore = defineStore('item', {
     return {
       page : 0,
       size : 10,
-      maxPage: 10,
+      maxPage: 0,
       itemList : [],
-      currentItem: {}
+      currentItem: {},
+      columns: [
+        {data: 'id', name:'상품번호', sort:null},
+        {data:'imageUrl', name:'상품 이미지', sort:null},
+        {data: 'name', name:'상품명', sort:null},
+        {data: 'price', name:'가격', sort:null},
+        {data: 'contractCount', name:'계약 건수', sort:null},
+        {data: 'createdAt', name:'생성일', sort:null},
+        {data: 'updatedAt', name:'수정일', sort:null}
+      ]
     }
   },
   actions: {
     setSize(number) {
       this.size = number;
     },
+    setMaxPage(number) {
+      this.maxPage = number;
+    },
     setPage(number) {
       if (number <= this.maxPage && number >= 0) {
         this.page = number;
       }
+    },
+    setItemList(itemList) {
+      this.itemList = itemList;
+    },
+    setColumnSort(columnData, sortValue) {
+      const column = this.columns.find(col => col.data === columnData);
+      if (column) {
+        column.sort = sortValue;
+      }
     }
   },
 })

src/utils/axios.js

@@ -12,10 +12,10 @@ const authAxios = axios.create({
 
 authAxios.interceptors.response.use(
   (response) => {
-    return response.data;
+    return response;
   },
   (error) => {
-    return error.response.data;
+    return error.response;
   }
 );
 
@@ -62,7 +62,7 @@ authAxios.interceptors.response.use(
     return response.data;
   },
   (error) => {
-    return error.response.data;
+    return error.response;
   }
 );
 

src/utils/date.js

@@ -0,0 +1,10 @@
+function toDateFromDateTime(dateTime) {
+  const date = new Date(dateTime);
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+
+  return `${year}.${month < 10? "0" + month : month}.${day < 10? "0"+ day : day}`
+}
+
+export {toDateFromDateTime}

src/views/MobileView.vue

@@ -60,5 +60,7 @@ export default {
     position: absolute;
     top: $mobile-header-height;
     width: 100%;
+    height: calc(100vh - $mobile-header-height);
+    width: 100%;
   }
 </style>