Feat/search with gpt

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,

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
 }

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>

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>

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

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>