diff --git a/src/assets/scss/component/modal.scss b/src/assets/scss/component/modal.scss new file mode 100644 index 0000000..729c956 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/assets/scss/component/table.scss b/src/assets/scss/component/table.scss new file mode 100644 index 0000000..eae2cb0 --- /dev/null +++ b/src/assets/scss/component/table.scss @@ -0,0 +1,3 @@ +@mixin base-table() { + width: 100%; +} \ No newline at end of file diff --git a/src/components/common/TheNavBar.vue b/src/components/common/TheNavBar.vue index 88bbdee..c09af11 100644 --- a/src/components/common/TheNavBar.vue +++ b/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: { }, diff --git a/src/components/common/btn/ThemeIconBtn.vue b/src/components/common/btn/ThemeIconBtn.vue index 5098946..a40dc0e 100644 --- a/src/components/common/btn/ThemeIconBtn.vue +++ b/src/components/common/btn/ThemeIconBtn.vue @@ -1,8 +1,8 @@ + + \ No newline at end of file diff --git a/src/components/item/ItemModal.vue b/src/components/item/ItemModal.vue new file mode 100644 index 0000000..1a861d9 --- /dev/null +++ b/src/components/item/ItemModal.vue @@ -0,0 +1,23 @@ + + + + + \ No newline at end of file diff --git a/src/components/item/ItemTable.vue b/src/components/item/ItemTable.vue new file mode 100644 index 0000000..c8dd4bc --- /dev/null +++ b/src/components/item/ItemTable.vue @@ -0,0 +1,40 @@ + + + + + \ No newline at end of file diff --git a/src/components/item/ItemTableRow.vue b/src/components/item/ItemTableRow.vue new file mode 100644 index 0000000..aa0a10f --- /dev/null +++ b/src/components/item/ItemTableRow.vue @@ -0,0 +1,52 @@ + + + + + \ No newline at end of file diff --git a/src/stores/item.js b/src/stores/item.js index 5c59fda..db612fa 100644 --- a/src/stores/item.js +++ b/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; + } } }, }) \ No newline at end of file diff --git a/src/utils/axios.js b/src/utils/axios.js index 35b1479..fb4b37b 100644 --- a/src/utils/axios.js +++ b/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; } ); diff --git a/src/utils/date.js b/src/utils/date.js new file mode 100644 index 0000000..3214683 --- /dev/null +++ b/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} \ No newline at end of file diff --git a/src/views/MobileView.vue b/src/views/MobileView.vue index fd5bce0..e6642e7 100644 --- a/src/views/MobileView.vue +++ b/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%; } \ No newline at end of file diff --git a/src/views/auth/LoginView.vue b/src/views/auth/LoginView.vue index af40048..7119441 100644 --- a/src/views/auth/LoginView.vue +++ b/src/views/auth/LoginView.vue @@ -42,21 +42,20 @@ export default { }, methods: { async login() { - // const data = { - // "email": this.email, - // "password": this.password - // }; + const data = { + "email": this.email, + "password": this.password + }; - // const result = await authAxios.post('auth/login', data) + const result = await authAxios.post('auth/login', data) - // if (result.code == 200) { - // this.authStore.login(); - // } else { - // this.invalidMsg = result.message; - // this.invalidInput = true; - // } - this.authStore.login(); - this.$router.push({ name: 'home' }); + if (result.code == 200) { + this.authStore.login(); + this.$router.push({ name: 'home' }) + } else { + this.invalidMsg = result.message; + this.invalidInput = true; + } }, signup() { this.$router.push({ name: 'signup' }) diff --git a/src/views/auth/SignupView.vue b/src/views/auth/SignupView.vue index 1c99db2..68cd0ae 100644 --- a/src/views/auth/SignupView.vue +++ b/src/views/auth/SignupView.vue @@ -231,7 +231,7 @@ export default { "phone" : this.phone.value } const result = await authAxios.post('auth/register', data); - console.log(result); + if (result.code === 200) { // --- 회원가입 성공 모달 출력 --- this.$router.push({name: 'login'}); diff --git a/src/views/item/ItemListView.vue b/src/views/item/ItemListView.vue index 40bd634..d43c0af 100644 --- a/src/views/item/ItemListView.vue +++ b/src/views/item/ItemListView.vue @@ -2,10 +2,10 @@
- +
-
300
+
@@ -15,7 +15,9 @@ import ThemeIconBtnVue from '@/components/common/btn/ThemeIconBtn.vue'; import SearchInputVue from '@/components/common/input/SearchInput.vue'; import PaginationBarVue from '@/components/common/PaginationBar.vue'; +import ItemTableVue from '@/components/item/ItemTable.vue'; import { useItemStore } from '@/stores/item'; +import { mainAxios } from '@/utils/axios'; import { mapActions } from 'pinia'; import { mapStores } from 'pinia'; @@ -24,7 +26,8 @@ export default { components: { ThemeIconBtnVue, SearchInputVue, - PaginationBarVue + PaginationBarVue, + ItemTableVue, }, data() { return { @@ -34,12 +37,29 @@ export default { computed: { ...mapStores(useItemStore) }, + watch: { + 'itemStore.size': 'getData', + 'itemStore.page': 'getData', + 'itemStore.columns': { + handler: 'getData', + deep: true + } + }, methods: { - ...mapActions(useItemStore, ['setPage']), + ...mapActions(useItemStore, ['setPage','setItemList']), // 조회 api 함수 - 로직 수정하면 됩니다. - getData(page, size) { - console.log(page, size) - } + async getData() { + let url = `items?page=${this.itemStore.page}&size=${this.itemStore.size}&name=${this.itemName}`; + this.itemStore.columns.forEach(column => { + if (column.sort != null) url += `&sort=${column.data},${column.sort}` + }); + const result = await mainAxios.get(url); + this.itemStore.setMaxPage(result.data.totalPages - 1); + this.itemStore.setItemList(result.data.content); + }, + }, + async mounted() { + this.getData(); } } @@ -49,6 +69,7 @@ export default { @include flex-box(column, space-between, 20px); background: $back-color; width: 100%; + min-height:100%; height: 100%; padding: 30px 40px } @@ -58,8 +79,11 @@ export default { } .table-box { @include flex-box(column, space-between, 20px); + box-shadow: $base-shadow; background: white; width: 100%; + padding: 20px 30px; + border-radius: 5px; flex-grow: 1; }