lotteon2 · ssjy4974 · Jan 26, 2024 · Jan 23, 2024 · Jan 24, 2024 · Jan 24, 2024
diff --git a/index.html b/index.html
@@ -1,13 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.png">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DailyOn</title>
   </head>
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
+
+<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
diff --git 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<boolean>(false)
 const route = useRoute()
 const displayHeader = computed(() => !route.path.startsWith('/order-success'))
@@ -42,4 +48,4 @@ provide('isScrollEnd', isScrollEnd)
   display: flex;
   justify-content: center;
 }
-</style>
+</style>
diff --git 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<ReadProductSearchResponse> => {
+  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
@@ -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
@@ -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 () => {
 
 <style scoped>
 @import '@/assets/header.css';
-</style>
+</style>
diff --git a/src/components/SpinnerComponent.vue b/src/components/SpinnerComponent.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="spinner" />
+</template>
+
+<style scoped>
+.spinner {
+  border: 16px solid #f3f3f3;
+  border-top: 16px solid #c22727;
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git 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
@@ -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
@@ -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
+    }
+  })
+}
 </script>
 <template>
   <Result
@@ -23,6 +49,9 @@ onMounted(async () => {
       <Button Button key="console" type="primary" @click="router.push('/order-history')"
         >주문내역 조회하기</Button
       >
+      <Button v-if="orderType === 'SINGLE'" Button key="console" type="default" @click="kakao"
+        >선물알림</Button
+      >
     </template>
   </Result>
 </template>

diff --git 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<number>(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
@@ -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;
 }
-</style>
+</style>