feat: 섹션 구분선 추가

fun-eat · Mar 19, 2024 · 509863c · 509863c
1 parent 4981897
commit 509863c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git 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
@@ -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',
 });