From 4def882aa6eb5fc76dad38f81f997774c8e1b909 Mon Sep 17 00:00:00 2001
From: Leejin Yang <ejin1996@gmail.com>
Date: Tue, 23 Apr 2024 04:56:47 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=8F=99=EC=9E=91=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?(#115)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 뒤로가기 버튼 동작 수정

* refactor: 상품 페이지 헤더 topbar로 수정
---
 src/components/Common/TopBar/TopBar.tsx       | 19 ++++++++++++++++---
 .../ProductDetailPage/ProductDetailPage.tsx   |  9 +++++++--
 src/pages/ProductListPage/ProductListPage.tsx |  8 ++++++--
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/Common/TopBar/TopBar.tsx b/src/components/Common/TopBar/TopBar.tsx
index 7f997124..32e19d06 100644
--- a/src/components/Common/TopBar/TopBar.tsx
+++ b/src/components/Common/TopBar/TopBar.tsx
@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef } from 'react';
-import { Link } from 'react-router-dom';
+import type { ComponentPropsWithoutRef, MouseEventHandler } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 
 import { LeftNavigationWrapper, container, headerTitle, leftTitle, register } from './topBar.css';
 import SvgIcon from '../Svg/SvgIcon';
@@ -31,8 +31,21 @@ const Logo = () => {
 };
 
 const BackLink = ({ state }: TopBarProps) => {
+  const navigate = useNavigate();
+
+  const handleBack: MouseEventHandler<HTMLAnchorElement> = (event) => {
+    event.preventDefault();
+
+    if (state) {
+      navigate('..', { state, relative: 'path' });
+      return;
+    }
+
+    navigate(-1);
+  };
+
   return (
-    <Link to=".." relative="path" state={state}>
+    <Link to="#" onClick={handleBack}>
       <SvgIcon variant="arrowLeft" stroke={vars.colors.gray5} width={20} height={20} />
     </Link>
   );
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}>