Skip to content

Commit

Permalink
feat: 상품 목록 배너 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
hae-on committed Apr 23, 2024
1 parent 6c46176 commit e9b4db1
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 1 deletion.
3 changes: 3 additions & 0 deletions src/constants/image.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
11 changes: 10 additions & 1 deletion src/pages/ProductPage/ProductPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: '공통 상품' },
Expand All @@ -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 ? (
Expand All @@ -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 />}>
Expand Down

0 comments on commit e9b4db1

Please sign in to comment.