diff --git a/index.html b/index.html index f7b05732..5b03499b 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,9 @@ - + - - - + + + DailyOn @@ -11,3 +11,5 @@ + + diff --git a/src/App.vue b/src/App.vue index 9726054e..7b3db4a7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,7 +4,13 @@ import { computed, provide, ref } from 'vue' import HeaderComponent from '@/components/HeaderComponent.vue' import FooterComponent from '@/components/FooterComponent.vue' import { debounce } from 'lodash' - +declare global { + interface Window { + Kakao: any + } +} +const KAKAO_KEY = import.meta.env.VITE_KAKAO_KEY +window.Kakao.init(KAKAO_KEY) let isScrollEnd = ref(false) const route = useRoute() const displayHeader = computed(() => !route.path.startsWith('/order-success')) @@ -42,4 +48,4 @@ provide('isScrollEnd', isScrollEnd) display: flex; justify-content: center; } - \ No newline at end of file + diff --git a/src/apis/product/ProductClient.ts b/src/apis/product/ProductClient.ts index 1e1336d5..a746596b 100644 --- a/src/apis/product/ProductClient.ts +++ b/src/apis/product/ProductClient.ts @@ -3,6 +3,7 @@ import { defaultAxiosInstance } from '@/apis/utils' import type { ReadCacheProductListResponse, ReadProductDetailResponse, + ReadProductSearchResponse, ReadProductSliceResponse } from '@/apis/product/ProductDto' import { openInternalServerErrorNotification } from '@/utils/Toast' @@ -11,6 +12,32 @@ import { warningModal } from '@/utils/Modal' const PRODUCT_SERVICE_PREFIX: string = '/product-service' const PRODUCT_PREFIX: string = '/products' +export const searchProducts = async (query: string): Promise => { + try { + const { data } = await defaultAxiosInstance.get( + `${PRODUCT_SERVICE_PREFIX}${PRODUCT_PREFIX}/search`, + { + params: { query: query } + } + ) + return data + } catch (error) { + if (error instanceof AxiosError) { + if (error.response) { + if (error.response.status >= 400 && error.response.status < 500) { + await warningModal('알림', error.response.data.message) + console.error(`Client Error=${error.response.data.message}`) + } + if (error.response.status >= 500) { + openInternalServerErrorNotification() + console.error('Internal Server Error') + } + } + } + throw error + } +} + export const getProductSlice = async ( brandId: number | null, categoryId: number | null, diff --git a/src/apis/product/ProductDto.ts b/src/apis/product/ProductDto.ts index d23a6e37..57b58b85 100644 --- a/src/apis/product/ProductDto.ts +++ b/src/apis/product/ProductDto.ts @@ -3,6 +3,10 @@ export interface ReadProductSliceResponse { productResponses: ReadProductResponse[] } +export interface ReadProductSearchResponse { + productResponses: ReadProductResponse[] +} + export interface ExtendedReadProductResponse extends ReadProductResponse { categoryId: number } diff --git a/src/components/HeaderComponent.vue b/src/components/HeaderComponent.vue index 8f6b8869..c37c34b3 100644 --- a/src/components/HeaderComponent.vue +++ b/src/components/HeaderComponent.vue @@ -17,7 +17,6 @@ const notificationStore = useNotificationStore() const { notifications, unreadNotificationCount } = storeToRefs(notificationStore) const memberStore = useMemberStore() -// const { } = storeToRefs(memberStore) const categoryStore = useCategoryStore() const brandStore = useBrandStore() @@ -46,7 +45,7 @@ const routeSearch = () => { if (searchQuery.value === null) { infoModal('알림', '검색 키워드를 입력해주세요.') } else { - window.location.href = `/product-list?query=${searchQuery.value}` + window.location.href = `/product-search?query=${searchQuery.value}` searchQuery.value = null } } @@ -275,4 +274,4 @@ onMounted(async () => { \ No newline at end of file + diff --git a/src/components/SpinnerComponent.vue b/src/components/SpinnerComponent.vue new file mode 100644 index 00000000..4e2353ab --- /dev/null +++ b/src/components/SpinnerComponent.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/router/index.ts b/src/router/index.ts index 0c020b4b..34353963 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -26,6 +26,11 @@ const router = createRouter({ name: 'productList', component: () => import('@/views/ProductListView.vue') }, + { + path: '/product-search', + name: 'productSearch', + component: () => import('@/views/ProductSearchView.vue') + }, { path: '/products/:id', name: 'productDetails', @@ -223,8 +228,8 @@ router.beforeEach((to, from, next) => { }) const isLoggedIn = () => { - const token = localStorage.getItem('accessToken') - return !!token + const token = localStorage.getItem('accessToken') + return !!token } export default router diff --git a/src/stores/order/OrderStore.ts b/src/stores/order/OrderStore.ts new file mode 100644 index 00000000..744a89d6 --- /dev/null +++ b/src/stores/order/OrderStore.ts @@ -0,0 +1,22 @@ +import { defineStore } from 'pinia' +import { ref } from 'vue' +import type { OrderSheet } from '@/apis/order/orderDto' + +export const useOrderStore = defineStore( + 'order', + () => { + const order = ref() + + const setOrder = (orderInfo: any) => { + order.value = orderInfo + } + return { order, setOrder } + }, + { + persist: { + key: 'order', + storage: sessionStorage, + paths: ['order'] + } + } +) diff --git a/src/views/OrderResultView.vue b/src/views/OrderResultView.vue index 2e569f1f..0356b988 100644 --- a/src/views/OrderResultView.vue +++ b/src/views/OrderResultView.vue @@ -3,15 +3,41 @@ import { Result, Button } from 'ant-design-vue' import { useRoute } from 'vue-router' import { ref, onMounted } from 'vue' import { useProductStore } from '@/stores/product/ProductStore' +import { useMemberStore } from '@/stores/member/MemberStore' +import { useOrderStore } from '@/stores/order/OrderStore' import { getMember } from '@/apis/member/member' import router from '@/router' +import { storeToRefs } from 'pinia' + +const baseImgUrl = import.meta.env.VITE_STATIC_IMG_URL +const memberStore = useMemberStore() +const orderStore = useOrderStore() const productStore = useProductStore() const route = useRoute() const orderId = ref(route.params.orderId) +const { order } = storeToRefs(orderStore) +const { orderType } = storeToRefs(productStore) onMounted(async () => { - productStore.deletePinia() + // productStore.deletePinia() await getMember() }) +const kakao = () => { + console.log(baseImgUrl + order.value.imgUrl) + window.Kakao.Link.sendCustom({ + templateId: 103359, + templateArgs: { + nickname: memberStore.nickname, + productsName: order.value.productName, + receiver: order.value.receiver, + postCode: order.value.postCode, + roadAddress: order.value.roadAddress, + detailAddress: order.value.detailAddress, + imgUrl: baseImgUrl + order.value.imgUrl + '?w=480&h=480&q=95&f=jpg', + productPrice: order.value.totalOrderPrice, + productId: order.value.productId + } + }) +} diff --git a/src/views/OrderView.vue b/src/views/OrderView.vue index 396d6171..b400cc31 100644 --- a/src/views/OrderView.vue +++ b/src/views/OrderView.vue @@ -12,9 +12,11 @@ import { storeToRefs } from 'pinia' import { useProductStore } from '@/stores/product/ProductStore' import { useMemberStore } from '@/stores/member/MemberStore' import { useNotificationStore } from '@/stores/notification/NotificationStore' +import { useOrderStore } from '@/stores/order/OrderStore' import router from '@/router' import { warningModal } from '@/utils/Modal' const productStore = useProductStore() +const orderStore = useOrderStore() const { products, orderType, giftInfo, referralCode, auctionId } = storeToRefs(productStore) const { point } = storeToRefs(useMemberStore()) @@ -37,7 +39,6 @@ const totalDiscountAmount = computed((): number => { return prev + (current.discountAmount ? current.discountAmount : 0) }, 0) }) - const usedPoints = ref(0) const usePoints = async () => { usedPoints.value = Math.min(Number(point.value), totalOrderPrice.value) @@ -112,7 +113,17 @@ const doOrder = async () => { auctionId: auctionId.value } redirectUrl.value = await order(orderSheet) - + const orderInfo = { + productName: products.value[0].productName, + imgUrl: products.value[0].imgUrl, + receiver: deliveryInfo.value.receiver, + postCode: deliveryInfo.value.postCode, + roadAddress: deliveryInfo.value.roadAddress, + detailAddress: deliveryInfo.value.detailAddress, + productPrice: totalOrderPrice.value, + productId: products.value[0].productId + } + orderStore.setOrder(orderInfo) if (redirectUrl.value) { const width = 500 const height = 500 diff --git a/src/views/ProductListView.vue b/src/views/ProductListView.vue index 010c16cb..d31ea827 100644 --- a/src/views/ProductListView.vue +++ b/src/views/ProductListView.vue @@ -36,10 +36,6 @@ const initData = async () => { categoryId.value = Number(route.query.category) } - if (route.query.query) { - query.value = String(route.query.query) - } - const response: ReadProductSliceResponse = await getProductSlice( brandId.value, categoryId.value, @@ -643,4 +639,4 @@ const getProductMaxDiscountPercentage = (product: ReadProductResponse) => { width: 10vw; height: 19.5vh; } - \ No newline at end of file + diff --git a/src/views/ProductSearchView.vue b/src/views/ProductSearchView.vue new file mode 100644 index 00000000..a7cfcdc2 --- /dev/null +++ b/src/views/ProductSearchView.vue @@ -0,0 +1,264 @@ + + + + +