diff --git a/src/apis/order/order.ts b/src/apis/order/order.ts
index 6e4eb7ba..85e02475 100644
--- a/src/apis/order/order.ts
+++ b/src/apis/order/order.ts
@@ -124,6 +124,27 @@ export const getOrderDetails = async (orderNo: String): Promise<OrderDetailRespo
   }
 }
 
+export const cancelOrderDetail = async (orderDetailNo: String) => {
+  try {
+    const response = await authAxiosInstance.delete(
+      `${ORDER_SERVICE_PREFIX_PATH}/orders/order-details/${orderDetailNo}`
+    )
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      if (error.response) {
+        if (error.response.status >= 400) {
+          alert(error.response.data.message)
+          console.error(`Client Error=${error.response.data.message}`)
+        } else if (error.response.status < 500) {
+          alert('서버 내부 오류')
+          console.error('Internal Server Error')
+        }
+      }
+    }
+    throw error
+  }
+}
+
 export const gifts = async (giftInfo: GiftInfo): Promise<string> => {
   try {
     const { data } = await authAxiosInstance.post(`${ORDER_SERVICE_PREFIX_PATH}/gifts`, giftInfo)
diff --git a/src/apis/product/ProductClient.ts b/src/apis/product/ProductClient.ts
index f4e48a45..32e07e39 100644
--- a/src/apis/product/ProductClient.ts
+++ b/src/apis/product/ProductClient.ts
@@ -1,7 +1,7 @@
 import type { AxiosResponse } from 'axios'
 import { AxiosError } from 'axios'
 import { defaultAxiosInstance } from '@/apis/utils'
-import type { ReadProductDetailResponse } from './ProductDto'
+import type { ReadProductDetailResponse, ReadProductSliceResponse } from './ProductDto'
 
 const PRODUCT_SERVICE_PREFIX: string = '/product-service'
 const PRODUCT_PREFIX: string = '/products'
@@ -43,3 +43,31 @@ export const getProductDetail = async (productId: number): Promise<ReadProductDe
     throw error
   }
 }
+
+export const searchProduct = async (
+  lastId: number,
+  query: string | null
+): Promise<ReadProductSliceResponse> => {
+  try {
+    const { data } = await defaultAxiosInstance.get(
+      `${PRODUCT_SERVICE_PREFIX}${PRODUCT_PREFIX}/search`,
+      {
+        params: { lastId: lastId, query: query }
+      }
+    )
+    return data
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      if (error.response) {
+        if (error.response.status >= 400) {
+          alert(error.response.data.message)
+          console.error(`Client Error=${error.response.data.message}`)
+        } else if (error.response.status < 500) {
+          alert('서버 내부 오류')
+          console.error('Internal Server Error')
+        }
+      }
+    }
+    throw error
+  }
+}
diff --git a/src/assets/css/cart.css b/src/assets/css/cart.css
index e90f8e5e..f8ae622c 100644
--- a/src/assets/css/cart.css
+++ b/src/assets/css/cart.css
@@ -25,6 +25,14 @@
     border-bottom: 1px solid #202027;
 }
 
+.cart-table-data2 {
+    cursor: pointer;
+}
+
+.cart-table-data2:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
 .cart-table-data2 > td {
     color: var(--Grayscale7, #202027);
     font-family: TheJamsil;
@@ -88,6 +96,8 @@
 .basket-img {
     flex-shrink: 0;
     margin: 20px 0;
+    width: 100px;
+    height: 100px;
 }
 
 .basket-column {
diff --git a/src/assets/css/order/order-detail.css b/src/assets/css/order/order-detail.css
index dc69a9f3..019e2243 100644
--- a/src/assets/css/order/order-detail.css
+++ b/src/assets/css/order/order-detail.css
@@ -143,6 +143,20 @@
   cursor: pointer;
 }
 
+.gray-button,
+.gray-cancel-button {
+  width: 100%;
+  height: 40px;
+  border: none;
+  border-radius: 2.5px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: normal;
+  color: #fff;
+  background-color: gray;
+  cursor: default;
+}
+
 /* ant */
 .ant-rate {
   color: var(--Grayscale7, #000);
diff --git a/src/assets/css/wish.css b/src/assets/css/wish.css
index 0e7302b5..a4f9b06e 100644
--- a/src/assets/css/wish.css
+++ b/src/assets/css/wish.css
@@ -55,6 +55,14 @@
     padding-bottom: 10px;
 }
 
+.wish-table-data2 {
+    cursor: pointer;
+}
+
+.wish-table-data2:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
 .wish-table-data2 > td {
     color: var(--Grayscale7, #202027);
     font-family: TheJamsil;
@@ -67,6 +75,8 @@
 .basket-img {
     flex-shrink: 0;
     margin: 20px 0;
+    width: 100px;
+    height: 100px;
 }
 
 .basket-column {
diff --git a/src/components/HeaderComponent.vue b/src/components/HeaderComponent.vue
index c43594d0..bae8e425 100644
--- a/src/components/HeaderComponent.vue
+++ b/src/components/HeaderComponent.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
-import { onBeforeMount, onMounted, onBeforeUnmount, ref, computed, watch } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 import HeaderCategoryComponent from '@/components/HeaderCategoryComponent.vue'
 import NotificationComponent from '@/components/notification/NotificationComponent.vue'
 import { useMemberStore } from '@/stores/member/MemberStore'
 import { useCategoryStore } from '@/stores/category/CategoryStore'
 import { useNotificationStore } from '@/stores/notification/NotificationStore'
+import router from '@/router'
 
 const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
 
@@ -49,6 +50,12 @@ const showCategoryDropdown = ref<boolean>(true)
 const memberStore = useMemberStore()
 const memberInfo = computed(() => memberStore.getMemberInfo())
 
+const searchQuery = ref<string | null>(null)
+
+const routeSearch = () => {
+  router.push({ name: 'productSearch', query: { query: searchQuery.value } })
+}
+
 const categoryStore = useCategoryStore()
 
 onBeforeMount(() => {
@@ -67,9 +74,14 @@ onBeforeMount(() => {
     </RouterLink>
     <div class="search-wrapper">
       <div class="search-input-wrapper">
-        <input class="search-input" placeholder="통합 검색" />
+        <input
+          class="search-input"
+          placeholder="통합 검색"
+          v-model="searchQuery"
+          @keyup.enter="routeSearch"
+        />
       </div>
-      <div class="search-logo-wrapper">
+      <div class="search-logo-wrapper" @click="routeSearch">
         <svg
           class="search-logo"
           xmlns="http://www.w3.org/2000/svg"
@@ -87,20 +99,20 @@ onBeforeMount(() => {
     </div>
     <div class="auth-wrapper">
       <RouterLink v-if="!isLoggedIn()" to="/login" class="login-text">Login</RouterLink>
- <div v-else class="profile-wrapper">
-          <RouterLink to="/member-info" class="profile-link">
-            <img
-              v-if="`${VITE_STATIC_IMG_URL}${memberInfo.profileImgUrl}`"
-              :src="`${VITE_STATIC_IMG_URL}${memberInfo.profileImgUrl}`"
-              alt="Profile Image"
-              class="profile-image"
-            />
-            <div class="profile-text">
-              <span v-if="memberInfo.nickname" class="nickname">{{ memberInfo.nickname }}님</span>
-              <span class="welcome">환영합니다!</span>
-            </div>
-          </RouterLink>
-        </div>
+      <div v-else class="profile-wrapper">
+        <RouterLink to="/member-info" class="profile-link">
+          <img
+            v-if="`${VITE_STATIC_IMG_URL}${memberInfo.profileImgUrl}`"
+            :src="`${VITE_STATIC_IMG_URL}${memberInfo.profileImgUrl}`"
+            alt="Profile Image"
+            class="profile-image"
+          />
+          <div class="profile-text">
+            <span v-if="memberInfo.nickname" class="nickname">{{ memberInfo.nickname }}님</span>
+            <span class="welcome">환영합니다!</span>
+          </div>
+        </RouterLink>
+      </div>
     </div>
   </div>
   <div class="header-divide-line-wrapper">
@@ -130,26 +142,26 @@ onBeforeMount(() => {
     </div>
     <div class="nav-tab-wrapper">
       <RouterLink to="/luxury" class="nav-tab-text" :class="{ selected: $route.path === '/luxury' }"
-        >LUXURY</RouterLink
-      >
+        >LUXURY
+      </RouterLink>
     </div>
     <div class="nav-tab-wrapper">
       <RouterLink
         to="/fashions"
         class="nav-tab-text"
         :class="{ selected: $route.path === '/fashions' }"
-        >FASHION</RouterLink
-      >
+        >FASHION
+      </RouterLink>
     </div>
     <div class="nav-tab-wrapper">
       <RouterLink to="/ootds" class="nav-tab-text" :class="{ selected: $route.path === '/ootds' }"
-        >OOTD</RouterLink
-      >
+        >OOTD
+      </RouterLink>
     </div>
     <div class="nav-tab-wrapper">
       <RouterLink to="/events" class="nav-tab-text" :class="{ selected: $route.path === '/events' }"
-        >EVENT</RouterLink
-      >
+        >EVENT
+      </RouterLink>
     </div>
     <div class="nav-tab-wrapper">
       <NotificationComponent v-show="showNotificationDropdown" />
@@ -218,4 +230,4 @@ onBeforeMount(() => {
 
 <style scoped>
 @import '@/assets/header.css';
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/order/OrderHistoryComponent.vue b/src/components/order/OrderHistoryComponent.vue
index b9da7e5f..1c133d6c 100644
--- a/src/components/order/OrderHistoryComponent.vue
+++ b/src/components/order/OrderHistoryComponent.vue
@@ -77,7 +77,7 @@ watchEffect(() => {
     <div v-if="showModal" class="modal" @click="closeModal">
       <div class="modal-content" @click.stop>
         <span class="close" @click="closeModal">&times;</span>
-        <OrderDetailComponent :orderNo="orderNo" />
+        <OrderDetailComponent :orderNo="orderNo" @closeModal="closeModal" />
       </div>
     </div>
     <PaginationComponent
diff --git a/src/components/order/orderDetail/OrderDetailComponent.vue b/src/components/order/orderDetail/OrderDetailComponent.vue
index 65282430..09431113 100644
--- a/src/components/order/orderDetail/OrderDetailComponent.vue
+++ b/src/components/order/orderDetail/OrderDetailComponent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, onBeforeMount } from 'vue'
+import { ref, onBeforeMount, defineEmits } from 'vue'
 import { storeToRefs } from 'pinia'
-import { getOrderDetails } from '@/apis/order/order'
+import { getOrderDetails, cancelOrderDetail } from '@/apis/order/order'
 import { createReview } from '@/apis/review/review'
 import { uploadImageToS3 } from '@/apis/s3/S3Client'
 import { PlusOutlined } from '@ant-design/icons-vue'
@@ -12,7 +12,7 @@ import type { ReviewCreateRequest } from '@/apis/review/reviewDto'
 import type { UploadProps, UploadChangeParam, UploadFile } from 'ant-design-vue'
 const { nickname, profileImgUrl } = storeToRefs(useMemberStore())
 const orderDetails = ref<Array<OrderDetailResponse>>([])
-
+const emits = defineEmits(['closeModal'])
 const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
 const props = defineProps({
   orderNo: {
@@ -124,6 +124,15 @@ const beforeUpload = (file: UploadFile) => {
   }
   return false
 }
+
+const cancel = async (orderDetailNo: string) => {
+  if (confirm('정말로 취소하시겠습니까?')) {
+    await cancelOrderDetail(orderDetailNo)
+    alert('취소 요청이 접수되었습니다.')
+    emits('closeModal')
+    return
+  }
+}
 </script>
 <template v-if="orderDetails.length">
   <div v-for="(orderDetail, index) in orderDetails" :key="index" class="order-detail-container">
@@ -151,7 +160,7 @@ const beforeUpload = (file: UploadFile) => {
     <div class="right-section">
       <div v-if="orderDetail.reviewCheck === false">
         <div class="right-section-buttons">
-          <div class="right-inner-button">
+          <div v-if="orderDetail.status !== '취소완료'" class="right-inner-button">
             <button class="black-button" @click="showModal(index)">리뷰 쓰기</button>
           </div>
         </div>
@@ -166,7 +175,18 @@ const beforeUpload = (file: UploadFile) => {
       <div v-if="orderDetail.status == '배송전'">
         <div class="right-section-buttons">
           <div class="right-inner-button">
-            <button class="white-button">주문 취소</button>
+            <button class="white-button" @click="cancel(orderDetail.orderDetailNo)">
+              주문 취소
+            </button>
+          </div>
+        </div>
+      </div>
+      <div v-if="orderDetail.status == '취소완료'">
+        <div class="right-section-buttons">
+          <div class="right-inner-button">
+            <button class="gray-cancel-button" disabled>
+              {{ orderDetail.status }}
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/components/promotion/coupon/checkout/CheckoutCouponModal.vue b/src/components/promotion/coupon/checkout/CheckoutCouponModal.vue
index 07df376a..b0a70723 100644
--- a/src/components/promotion/coupon/checkout/CheckoutCouponModal.vue
+++ b/src/components/promotion/coupon/checkout/CheckoutCouponModal.vue
@@ -118,7 +118,7 @@ const applyCouponDatas = () => {
     let discount = 0
 
     if (item.couponInfoId !== null && item.discountValue !== null) {
-      const totalPrice = item.orderPrice * item.quantity
+      const totalPrice = item.orderPrice
 
       if (item.discountType === 'PERCENTAGE') {
         discount = totalPrice * (item.discountValue / 100)
diff --git a/src/components/promotion/coupon/checkout/OrderItem.vue b/src/components/promotion/coupon/checkout/OrderItem.vue
index 76d27d3b..92bbcfca 100644
--- a/src/components/promotion/coupon/checkout/OrderItem.vue
+++ b/src/components/promotion/coupon/checkout/OrderItem.vue
@@ -3,7 +3,7 @@
     <div class="order-item">
       <div class="product-name-block">
         <div class="image-container">
-          <img :src="orderItem.imgUrl as string" alt="상품이미지" />
+          <img :src="`${VITE_STATIC_IMG_URL}${orderItem.imgUrl}`" alt="상품이미지" />
         </div>
         <div class="product-name">{{ orderItem.productName }}</div>
       </div>
@@ -88,6 +88,8 @@ import type {
 import type { OrderItemDto } from '@/types/coupon'
 import type { ProductInfo } from '@/apis/product/ProductDto'
 
+const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
+
 const emit = defineEmits<{
   // (event: 'apply-coupon', orderItemIndex: number, couponInfoId: number | null): void
   (
diff --git a/src/components/wishcart/CartComponent.vue b/src/components/wishcart/CartComponent.vue
index 40414f1a..910b7cbe 100644
--- a/src/components/wishcart/CartComponent.vue
+++ b/src/components/wishcart/CartComponent.vue
@@ -212,7 +212,12 @@ const routeOrderSheet = () => {
         <td class="center-text">상품 가격</td>
         <td class="center-text">총금액</td>
       </tr>
-      <tr v-for="(cartItem, idx) in cartItems" :key="idx" class="cart-table-data2">
+      <tr
+        v-for="(cartItem, idx) in cartItems"
+        :key="idx"
+        class="cart-table-data2"
+        @click="router.push(`/products/${cartItem.productId}`)"
+      >
         <td class="left-margin">
           <div class="align-center">
             <input
@@ -345,4 +350,4 @@ const routeOrderSheet = () => {
 
 <style scoped>
 @import '@/assets/css/cart.css';
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/wishcart/WishComponent.vue b/src/components/wishcart/WishComponent.vue
index 91d836e2..c79e64ac 100644
--- a/src/components/wishcart/WishComponent.vue
+++ b/src/components/wishcart/WishComponent.vue
@@ -10,6 +10,7 @@ import type { GiftInfo } from '@/apis/order/orderDto'
 import PaginationComponent from '@/components/ootd/PaginationComponent.vue'
 import WhitePageComponent from '@/components/wishcart/WhitePageComponent.vue'
 import router from '@/router'
+
 const productStore = useProductStore()
 const props = defineProps({
   targetId: {
@@ -137,7 +138,12 @@ watch(requestPage, async (afterPage: number, beforePage: number) => {
         <td class="center-text">판매 가격</td>
         <td></td>
       </tr>
-      <tr v-for="(wishList, idx) in wishLists" :key="idx" class="wish-table-data2">
+      <tr
+        v-for="(wishList, idx) in wishLists"
+        :key="idx"
+        class="wish-table-data2"
+        @click="router.push(`/products/${wishList.productId}`)"
+      >
         <td class="left-margin">
           <img
             class="basket-img"
@@ -156,8 +162,8 @@ watch(requestPage, async (afterPage: number, beforePage: number) => {
           <span class="prod-price">{{ wishList.productPrice.toLocaleString() }}원</span>
         </td>
         <td>
-          <button class="wishBtn" v-if="isMine" @click="executeDelete(idx)">삭제</button
-          ><button class="wishBtn" v-else @click="routeOrder(idx)">선물</button>
+          <button class="wishBtn" v-if="isMine" @click="executeDelete(idx)">삭제</button>
+          <button class="wishBtn" v-else @click="routeOrder(idx)">선물</button>
         </td>
       </tr>
     </table>
@@ -173,4 +179,4 @@ watch(requestPage, async (afterPage: number, beforePage: number) => {
 
 <style scoped>
 @import '@/assets/css/wish.css';
-</style>
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 8c32a5da..25f6b5a6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
-import OrderHistoryComponent from '@/components/order/OrderHistoryComponent.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -25,6 +24,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',
@@ -188,9 +192,9 @@ const router = createRouter({
       component: () => import('@/views/LoginGetInfo.vue')
     },
     {
-      path: "/:catchAll(.*)",
-      name: "not-found",
-      component: () => import("@/views/NotFoundView.vue"),
+      path: '/:catchAll(.*)',
+      name: 'not-found',
+      component: () => import('@/views/NotFoundView.vue')
     }
   ]
 })
@@ -202,11 +206,11 @@ router.beforeEach((to, from, next) => {
   } else if (to.name === 'login' && isLoggedIn()) {
     alert('이미 로그인한 상태입니다.')
     next('/')
-  }  else if (to.name === 'not-found') {
-    alert('페이지를 찾을 수 없습니다.');
-    next('/');
+  } else if (to.name === 'not-found') {
+    alert('페이지를 찾을 수 없습니다.')
+    next('/')
   } else {
-    next();
+    next()
   }
 })
 
diff --git a/src/views/ProductDetailView.vue b/src/views/ProductDetailView.vue
index c67aef3b..14fd3745 100644
--- a/src/views/ProductDetailView.vue
+++ b/src/views/ProductDetailView.vue
@@ -4,19 +4,19 @@ import ProductDetailCouponModal from '@/components/promotion/coupon/productdetai
 import BreadCrumbComponent from '@/components/product/BreadCrumbComponent.vue'
 import { useRoute } from 'vue-router'
 import { getProductDetail } from '@/apis/product/ProductClient'
-import type { ReadProductStockResponse } from '@/apis/product/ProductDto'
-import type { ProductInfo } from '@/apis/product/ProductDto'
+import type { ProductInfo, ReadProductStockResponse } from '@/apis/product/ProductDto'
 import DescribeImageComponent from '@/components/product/DescribeImageComponent.vue'
 import ReviewComponent from '@/components/product/ReviewComponent.vue'
 import { useProductStore } from '@/stores/product/ProductStore'
 import router from '@/router'
-const productStore = useProductStore()
 import { upsertCart } from '@/apis/wishcart/CartClient'
 import type { ReadWishListFromProduct } from '@/apis/wishcart/WishListDto'
 import { readWishListFromProduct, toggleWishList } from '@/apis/wishcart/WishListClient'
 import type { AxiosResponse } from 'axios'
 import TOP4OOTDComponent from '@/components/ootd/TOP4OOTDComponent.vue'
 
+const productStore = useProductStore()
+
 const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
 
 const route = useRoute()
@@ -49,6 +49,13 @@ const executeToggle = () => {
 
   if (isWishBtnEnabled.value) {
     isWishBtnEnabled.value = false
+
+    if (!localStorage.getItem('accessToken')) {
+      alert('로그인 후 이용해 주세요')
+      isWishBtnEnabled.value = true
+      return
+    }
+
     toggleWishList({
       productId: productId.value,
       productSizeId: selectedProductSize.value.productSizeId
@@ -137,6 +144,12 @@ const addToCart = () => {
   if (isCartBtnEnabled.value === true) {
     isCartBtnEnabled.value = false
 
+    if (!localStorage.getItem('accessToken')) {
+      alert('로그인 후 이용해 주세요')
+      isCartBtnEnabled.value = true
+      return
+    }
+
     if (selectedProductSize.value.productSizeId === 0) {
       alert('옵션을 지정해주세요')
       isCartBtnEnabled.value = true
@@ -399,4 +412,4 @@ watch(selectedProductSize, () => {
 
 <style scoped>
 @import url('@/assets/product-detail.css');
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/ProductListView.vue b/src/views/ProductListView.vue
index 58c50d72..a82f3a63 100644
--- a/src/views/ProductListView.vue
+++ b/src/views/ProductListView.vue
@@ -77,7 +77,11 @@ watch(isScrollEnd, async (after, before) => {
         :to="`/products/${product.id}`"
         :key="product.id"
       >
-        <img :src="`${VITE_STATIC_IMG_URL}${product.imgUrl}?w=200&h=200`" alt="productImg" />
+        <img
+          class="product-img"
+          :src="`${VITE_STATIC_IMG_URL}${product.imgUrl}?w=200&h=200`"
+          alt="productImg"
+        />
         <h1>{{ product.brandName }}</h1>
         <h2>{{ product.name }}</h2>
         <div class="product-third-info">
@@ -156,4 +160,9 @@ watch(isScrollEnd, async (after, before) => {
   display: flex;
   align-items: center;
 }
-</style>
+
+.product-img {
+  width: 200px;
+  height: 200px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ProductSearchView.vue b/src/views/ProductSearchView.vue
new file mode 100644
index 00000000..2d4233bc
--- /dev/null
+++ b/src/views/ProductSearchView.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { inject, onBeforeMount, type Ref, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { ReadProductResponse, ReadProductSliceResponse } from '@/apis/product/ProductDto'
+import { searchProduct } from '@/apis/product/ProductClient'
+
+const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
+
+const route = useRoute()
+
+const hasNext = ref<boolean>(true)
+const lastId = ref<number>(0)
+const searchQuery = ref<string | null>(null)
+const products = ref<ReadProductResponse[]>([])
+
+const initData = async () => {
+  if (route.query.query !== null) {
+    searchQuery.value = String(route.query.query)
+  }
+
+  const response: ReadProductSliceResponse = await searchProduct(lastId.value, searchQuery.value)
+  hasNext.value = response.hasNext
+  lastId.value = response.productResponses[response.productResponses.length - 1].id
+  products.value = [...products.value, ...response.productResponses]
+
+  console.log(lastId.value)
+}
+
+onBeforeMount(initData)
+
+const isScrollEnd = inject<Ref<boolean | undefined>>('isScrollEnd') as Ref<boolean | undefined>
+watch(isScrollEnd, async (after, before) => {
+  if (after !== before && hasNext.value) {
+    const response: ReadProductSliceResponse = await searchProduct(lastId.value, searchQuery.value)
+    hasNext.value = response.hasNext
+    lastId.value = response.productResponses[response.productResponses.length - 1].id
+    products.value = [...products.value, ...response.productResponses]
+  }
+})
+</script>
+
+<template>
+  <div class="product-search-container">
+    <div class="product-search-result">
+      <p class="search-label">검색 결과</p>
+      <p class="search-query">{{ searchQuery }}</p>
+    </div>
+    <div class="product-list-container">
+      <RouterLink
+        class="prod-info"
+        v-for="(product, index) in products"
+        :to="`/products/${product.id}`"
+        :key="product.id"
+      >
+        <img
+          class="product-img"
+          :src="`${VITE_STATIC_IMG_URL}${product.imgUrl}?w=200&h=200`"
+          alt="productImg"
+        />
+        <h1>{{ product.brandName }}</h1>
+        <h2>{{ product.name }}</h2>
+        <div class="product-third-info">
+          <div class="product-aggregate">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 576 512"
+              width="20"
+              height="20"
+              style="padding-right: 3px"
+            >
+              <path
+                fill="black"
+                d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+              />
+            </svg>
+            <h1>{{ product.avgRating.toFixed(1) }} | ({{ product.reviewCount }})</h1>
+          </div>
+          <div>
+            <h3>{{ product.price.toLocaleString() }}원</h3>
+          </div>
+        </div>
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.product-search-container {
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.product-search-result {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  width: 25vw;
+  padding-bottom: 20px;
+}
+
+.search-label {
+  font-family: TheJamsil;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 1.5vw;
+}
+
+.search-query {
+  font-family: TheJamsil;
+  font-style: normal;
+  font-size: 1.5vw;
+}
+
+.product-list-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+}
+
+.prod-info {
+  display: flex;
+  flex-direction: column;
+  flex-basis: calc(25% - 40px);
+  margin: 20px;
+}
+
+.prod-info > h1 {
+  color: var(--Grayscale7, #000);
+  font-family: TheJamsil;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 30px; /* 150% */
+}
+
+.prod-info > h2 {
+  color: var(--Grayscale7, #000);
+  font-family: TheJamsil;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 30px;
+}
+
+.product-third-info {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  color: var(--Grayscale7, #000);
+  font-family: TheJamsil;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 30px; /* 120% */
+}
+
+.product-aggregate {
+  display: flex;
+  align-items: center;
+}
+
+.product-img {
+  width: 200px;
+  height: 200px;
+}
+</style>
\ No newline at end of file