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<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
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 () => {
 
 <style scoped>
 @import '@/assets/header.css';
-</style>
\ No newline at end of file
+</style>
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 @@
+<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
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/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;
 }
-</style>
\ No newline at end of file
+</style>
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 @@
+<script setup lang="ts">
+import { onBeforeMount, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import type { ReadProductResponse, ReadProductSearchResponse } from '@/apis/product/ProductDto'
+import { searchProducts } from '@/apis/product/ProductClient'
+import ProductListPriceDisplay from '@/components/product/ProductListPriceDisplay.vue'
+import WhitePageComponent from '@/components/wishcart/WhitePageComponent.vue'
+import SpinnerComponent from '@/components/SpinnerComponent.vue'
+
+const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
+
+const route = useRoute()
+
+const query = ref<string>('')
+const products = ref<ReadProductResponse[]>([])
+
+const loading = ref<boolean>(true)
+
+const initData = async () => {
+  if (route.query.query) {
+    query.value = String(route.query.query)
+  }
+
+  const response: ReadProductSearchResponse = await searchProducts(query.value)
+
+  products.value = response.productResponses
+
+  loading.value = false
+}
+
+onMounted(initData)
+
+const img = ref<Array<HTMLImageElement>>(new Array<HTMLImageElement>())
+const imageSize = ref({
+  width: 0,
+  height: 0
+})
+
+const getImageSize = async () => {
+  if (img.value[0]) {
+    await handleImageLoad()
+  } else {
+    ;(img.value[0] as HTMLImageElement).onload = handleImageLoad
+  }
+}
+
+const handleImageLoad = async () => {
+  if (img.value) {
+    imageSize.value = {
+      width: img.value[0]!.width,
+      height: img.value[0]!.height
+    }
+  }
+}
+
+/**
+ 혜택가 관련 계산입니다.
+ */
+const getFloorDiscountPercentage = (product: ReadProductResponse) => {
+  const { maxDiscountPercentageBeforeFlooring, maxDiscountPercentageAfterFlooring } =
+    getProductMaxDiscountPercentage(product)
+  return Math.floor(maxDiscountPercentageAfterFlooring)
+}
+
+const getFinalPrice = (product: ReadProductResponse) => {
+  const { maxDiscountPercentageBeforeFlooring, maxDiscountPercentageAfterFlooring } =
+    getProductMaxDiscountPercentage(product)
+  return Math.floor(product.price - (product.price * maxDiscountPercentageBeforeFlooring) / 100)
+}
+
+const getProductMaxDiscountPercentage = (product: ReadProductResponse) => {
+  let maxDiscountPercentageBeforeFlooring = 0 // 가격을 따로 정확히 보여주기 위한 보존값
+  let maxDiscountPercentageAfterFlooring = 0
+
+  product.coupons?.forEach((coupon) => {
+    if (product.price >= coupon.minPurchaseAmount) {
+      // Listview에서는 일단 1개 구매를 기준으로 display
+      // N개 이상 구매했을때를 가정한 최적 할인율과 해당 쿠폰 적용환경의 최소개수도 구할까 고민중임.
+      let discountPercentage = 0
+
+      if (coupon.discountType === 'PERCENTAGE') {
+        discountPercentage = coupon.discountValue
+      } else if (coupon.discountType === 'FIXED_AMOUNT') {
+        discountPercentage = (coupon.discountValue / product.price) * 100
+      }
+
+      // 쿠폰별 maxDiscount cap 적용해서 갱신
+      if (coupon.maxDiscountAmount !== null) {
+        const maxDiscountValue = (coupon.maxDiscountAmount / product.price) * 100
+        discountPercentage = Math.min(discountPercentage, maxDiscountValue)
+      }
+
+      // 직전 iteration과 비교 갱신
+      maxDiscountPercentageBeforeFlooring = Math.max(
+        // 가격을 따로 정확히 보여주기 위한 보존값
+        maxDiscountPercentageBeforeFlooring,
+        discountPercentage
+      )
+      maxDiscountPercentageAfterFlooring = Math.max(
+        maxDiscountPercentageAfterFlooring,
+        Math.floor(discountPercentage)
+      )
+    }
+  })
+
+  return { maxDiscountPercentageBeforeFlooring, maxDiscountPercentageAfterFlooring }
+}
+</script>
+
+<template>
+  <div v-if="loading">
+    <SpinnerComponent />
+  </div>
+  <div v-else>
+    <div class="product-search-container">
+      <div class="product-search-result">
+        <p class="search-label">{{ query }}의 검색 결과입니다</p>
+      </div>
+      <div style="padding: 1vh" />
+      <div class="product-list-container" v-if="products.length > 0">
+        <RouterLink
+          class="prod-info"
+          v-for="(product, index) in products"
+          :to="`/products/${product.id}`"
+          :key="product.id"
+        >
+          <img
+            v-if="imageSize.width === 0 || imageSize.height === 0"
+            class="product-img"
+            ref="img"
+            @load="getImageSize"
+            src="@/assets/images/loading.gif"
+            alt="상품 이미지"
+          />
+          <img
+            v-else
+            class="product-img"
+            ref="img"
+            @load="getImageSize"
+            :src="`${VITE_STATIC_IMG_URL}${product.imgUrl}?w=${imageSize.width}&h=${imageSize.height}&q=95`"
+            alt="상품 이미지"
+          />
+          <h1>{{ product.brandName }}</h1>
+          <h2>{{ product.name }}</h2>
+          <ProductListPriceDisplay
+            :original-price="product.price"
+            :discount-percentage="getFloorDiscountPercentage(product)"
+            :final-price="getFinalPrice(product)"
+          />
+          <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>
+        </RouterLink>
+      </div>
+      <div class="product-list-container" v-else>
+        <WhitePageComponent message="해당하는 상품이 존재하지 않습니다" />
+      </div>
+    </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: 50vw;
+  padding: 20px;
+}
+
+.product-list-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+}
+
+.search-label {
+  font-family: 'TheJamsil';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 2vw;
+}
+
+.prod-info {
+  display: flex;
+  flex-direction: column;
+  flex-basis: calc(25% - 40px);
+  width: 10vw;
+  margin: 20px;
+}
+
+.prod-info > h1 {
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: var(--Grayscale7, #000);
+  font-family: 'TheJamsil';
+  font-size: 1.1vw;
+  /*font-style: normal;*/
+  font-weight: 300;
+  line-height: 30px;
+}
+
+.prod-info > h2 {
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: var(--Grayscale7, #000);
+  font-family: 'TheJamsil';
+  font-size: 1.1vw;
+  /*font-style: normal;*/
+  font-weight: 200;
+  line-height: 30px;
+}
+
+.product-third-info {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: end;
+  color: var(--Grayscale7, #000);
+  font-family: 'TheJamsil';
+  font-size: 0.9vw;
+  font-style: normal;
+  font-weight: 200;
+  line-height: 30px;
+}
+
+.product-aggregate {
+  display: flex;
+  align-items: center;
+}
+
+.product-img {
+  width: 10vw;
+  height: 19.5vh;
+}
+</style>