From e9b4db10f87912cd627cc3c54fe4a1e541c230df Mon Sep 17 00:00:00 2001
From: hae-on <solbi2004@naver.com>
Date: Tue, 23 Apr 2024 13:35:11 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=20=EB=AA=A9=EB=A1=9D?=
 =?UTF-8?q?=20=EB=B0=B0=EB=84=88=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/image.ts                |  3 +++
 src/pages/ProductPage/ProductPage.tsx | 11 ++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/constants/image.ts b/src/constants/image.ts
index 864e1ad9..1f1e265e 100644
--- a/src/constants/image.ts
+++ b/src/constants/image.ts
@@ -8,3 +8,6 @@ export const RECIPE_CARD_DEFAULT_IMAGE_URL_2 = `${IMAGE_BASE_URL}recipe-card-def
 export const RECIPE_CARD_DEFAULT_IMAGE_URL_3 = `${IMAGE_BASE_URL}recipe-card-default_3.png`;
 export const RECIPE_CARD_DEFAULT_IMAGE_URL_4 = `${IMAGE_BASE_URL}recipe-card-default_4.png`;
 export const RECIPE_CARD_DEFAULT_IMAGE_URL_5 = `${IMAGE_BASE_URL}recipe-card-default_5.png`;
+
+export const PRODUCT_BANNER = `${IMAGE_BASE_URL}product-banner.png`;
+export const STORE_BANNER = `${IMAGE_BASE_URL}store-banner.png`;
diff --git a/src/pages/ProductPage/ProductPage.tsx b/src/pages/ProductPage/ProductPage.tsx
index aa7de4af..0c56180e 100644
--- a/src/pages/ProductPage/ProductPage.tsx
+++ b/src/pages/ProductPage/ProductPage.tsx
@@ -20,6 +20,7 @@ import { useTabMenu } from '@/hooks/common';
 import { useCategoryQuery } from '@/hooks/queries/product';
 import { vars } from '@/styles/theme.css';
 import type { CategoryVariant, Tab } from '@/types/common';
+import { PRODUCT_BANNER, STORE_BANNER } from '@/constants/image';
 
 const TAB_MENUS: Tab<CategoryVariant>[] = [
   { value: CATEGORY_TYPE.FOOD, label: '공통 상품' },
@@ -39,6 +40,10 @@ export const ProductPage = () => {
     <>
       <TabMenu tabMenus={TAB_MENUS} selectedTabMenu={selectedTabMenu} handleTabMenuSelect={handleTabMenuClick} />
 
+      {selectedTabMenu === TAB_MENUS[1].value && (
+        <img src={STORE_BANNER} width={'100%'} height={180} alt="편의점 배너" />
+      )}
+
       <section className={categorySection}>
         <Suspense fallback={null}>
           {selectedTabMenu === TAB_MENUS[0].value ? (
@@ -49,7 +54,11 @@ export const ProductPage = () => {
         </Suspense>
       </section>
 
-      <div style={{ height: '12px', backgroundColor: vars.colors.border.light }} aria-hidden />
+      {selectedTabMenu === TAB_MENUS[0].value ? (
+        <img src={PRODUCT_BANNER} width={'100%'} height={72} alt="상품 배너" />
+      ) : (
+        <div style={{ height: '12px', backgroundColor: vars.colors.border.light }} aria-hidden />
+      )}
 
       <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
         <Suspense fallback={<Loading />}>