From 509863c0b1b22757c16954aa3cd8d1f3f857ec89 Mon Sep 17 00:00:00 2001
From: Leejin-Yang <ejin1996@gmail.com>
Date: Tue, 19 Mar 2024 23:46:56 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=84=B9=EC=85=98=20=EA=B5=AC=EB=B6=84?=
 =?UTF-8?q?=EC=84=A0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProductPage/ProductPage.tsx    | 23 +++++++++++++----------
 src/pages/ProductPage/productPage.css.ts |  4 ++++
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/pages/ProductPage/ProductPage.tsx b/src/pages/ProductPage/ProductPage.tsx
index 1122ecf5..a0d85a32 100644
--- a/src/pages/ProductPage/ProductPage.tsx
+++ b/src/pages/ProductPage/ProductPage.tsx
@@ -2,7 +2,7 @@ import { Spacing } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import { Suspense } from 'react';
 
-import { productSection } from './productPage.css';
+import { categorySection, productSection } from './productPage.css';
 
 import {
   Loading,
@@ -35,15 +35,18 @@ export const ProductPage = () => {
   return (
     <>
       <TabMenu tabMenus={TAB_MENUS} selectedTabMenu={selectedTabMenu} handleTabMenuSelect={handleTabMenuClick} />
-      <Spacing size={28} />
-      <Suspense fallback={null}>
-        {selectedTabMenu === TAB_MENUS[0].value ? (
-          <CategoryFoodList location="products" hasName isCircular />
-        ) : (
-          <CategoryStoreList location="products" hasName isBordered />
-        )}
-      </Suspense>
-      <Spacing size={12} />
+
+      <section className={categorySection}>
+        <Suspense fallback={null}>
+          {selectedTabMenu === TAB_MENUS[0].value ? (
+            <CategoryFoodList location="products" hasName isCircular />
+          ) : (
+            <CategoryStoreList location="products" hasName isBordered />
+          )}
+        </Suspense>
+      </section>
+
+      <div style={{ height: '12px', backgroundColor: '#f9f9f9' }} aria-hidden />
 
       <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
         <Suspense fallback={<Loading />}>
diff --git a/src/pages/ProductPage/productPage.css.ts b/src/pages/ProductPage/productPage.css.ts
index b2e71805..cf4e6165 100644
--- a/src/pages/ProductPage/productPage.css.ts
+++ b/src/pages/ProductPage/productPage.css.ts
@@ -26,6 +26,10 @@ export const menuName = styleVariants({
   default: [menuNameBase, { fontWeight: 600, color: '#999' }],
 });
 
+export const categorySection = style({
+  margin: '28px 0 24px',
+});
+
 export const productSection = style({
   margin: '28px 0 32px',
 });