From 959c3fd923d8d559fb5f39cf5bbbfeaf5e9dd03a Mon Sep 17 00:00:00 2001
From: Leejin-Yang <ejin1996@gmail.com>
Date: Mon, 22 Apr 2024 22:15:28 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=83=81=ED=92=88=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=97=A4=EB=8D=94=20topbar=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProductDetailPage/ProductDetailPage.tsx | 9 +++++++--
 src/pages/ProductListPage/ProductListPage.tsx     | 8 ++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/pages/ProductDetailPage/ProductDetailPage.tsx b/src/pages/ProductDetailPage/ProductDetailPage.tsx
index 04fd5d1b..3bcfd939 100644
--- a/src/pages/ProductDetailPage/ProductDetailPage.tsx
+++ b/src/pages/ProductDetailPage/ProductDetailPage.tsx
@@ -8,12 +8,12 @@ import NotFoundPage from '../NotFoundPage';
 
 import {
   SortButton,
-  PageHeader,
   SectionHeader,
   ErrorBoundary,
   ErrorComponent,
   Loading,
   SelectOptionList,
+  TopBar,
 } from '@/components/Common';
 import { ProductDetailItem, ProductRecipeList } from '@/components/Product';
 import { ReviewList } from '@/components/Review';
@@ -55,7 +55,12 @@ export const ProductDetailPage = () => {
 
   return (
     <>
-      <PageHeader title="상세" hasBackLink />
+      <TopBar>
+        <TopBar.BackLink />
+        <TopBar.Title title="상세" />
+        <TopBar.Spacer />
+      </TopBar>
+
       <main className={main}>
         <ProductDetailItem productDetail={productDetail} />
 
diff --git a/src/pages/ProductListPage/ProductListPage.tsx b/src/pages/ProductListPage/ProductListPage.tsx
index 5221ef9a..b263275e 100644
--- a/src/pages/ProductListPage/ProductListPage.tsx
+++ b/src/pages/ProductListPage/ProductListPage.tsx
@@ -7,7 +7,7 @@ import { useLocation, useParams } from 'react-router-dom';
 import { categoryButton, listSection, main, selectButton, selectSection, sortButton } from './productListPage.css';
 import NotFoundPage from '../NotFoundPage';
 
-import { ErrorBoundary, ErrorComponent, Loading, PageHeader, SelectOptionList, SvgIcon } from '@/components/Common';
+import { ErrorBoundary, ErrorComponent, Loading, SelectOptionList, SvgIcon, TopBar } from '@/components/Common';
 import { ProductList } from '@/components/Product';
 import { CATEGORY_TYPE, PAGE_TITLE, PRODUCT_SORT_OPTIONS } from '@/constants';
 import { useSelect } from '@/hooks/common';
@@ -46,7 +46,11 @@ export const ProductListPage = () => {
 
   return (
     <>
-      <PageHeader title={pageTitle} hasBackLink hasSearchLink state={category} />
+      <TopBar>
+        <TopBar.BackLink state={category} />
+        <TopBar.Title title={pageTitle} />
+        <TopBar.SearchLink />
+      </TopBar>
 
       <main className={main}>
         <section className={selectSection}>