feat: PageHeader 컴포넌트를 TopBar 컴포넌트로 교체

fun-eat · Apr 19, 2024 · d5a74b4 · d5a74b4
1 parent 363caa8
commit d5a74b4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts
@@ -25,3 +25,4 @@ export { default as PageHeader } from './PageHeader/PageHeader';
 export { default as Badge } from './Badge/Badge';
 export { default as WriteButton } from './WriteButton/WriteButton';
 export { default as Text } from './Text/Text';
+export { default as TopBar } from './TopBar/TopBar';
diff --git a/src/pages/ProductSearchListPage/ProductSearchListPage.tsx b/src/pages/ProductSearchListPage/ProductSearchListPage.tsx
@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 
 import { container } from './productSearchListPage.css';
 
-import { PageHeader } from '@/components/Common';
+import { TopBar } from '@/components/Common';
 import { ProductOverviewList } from '@/components/Product';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteProductSearchResultsQuery } from '@/hooks/queries/search';
@@ -24,7 +24,11 @@ export const ProductSearchListPage = () => {
 
   return (
     <>
-      <PageHeader title={`'${searchQuery}'이/가 포함된 상품`} hasBackLink />
+      <TopBar>
+        <TopBar.BackLink />
+        <TopBar.Title title={`'${searchQuery}'이/가 포함된 상품`} />
+        <TopBar.Spacer />
+      </TopBar>
       <div className={container}>
         <ProductOverviewList products={products} hasBorder />
       </div>

diff --git a/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx b/src/pages/RecipeSearchListPage/RecipeSearchListPage.tsx
@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 
 import { listWrapper } from './recipeSearchListPage.css';
 
-import { PageHeader } from '@/components/Common';
+import { TopBar } from '@/components/Common';
 import { DefaultRecipeItem } from '@/components/Recipe';
 import SearchNotFound from '@/components/Search/SearchNotFound/SearchNotFound';
 import { useIntersectionObserver } from '@/hooks/common';
@@ -25,7 +25,11 @@ export const RecipeSearchListPage = () => {
 
   return (
     <>
-      <PageHeader title={`'${searchQuery}'이/가 포함된 꿀조합`} hasBackLink />
+      <TopBar>
+        <TopBar.Title title={`'${searchQuery}'이/가 포함된 꿀조합`} />
+        <TopBar.BackLink />
+        <TopBar.Spacer />
+      </TopBar>
       <ul className={listWrapper}>
         {recipes.map((recipe) => (
           <li key={recipe.id}>