fix: 뒤로가기 버튼 동작 수정 (#115)

* refactor: 뒤로가기 버튼 동작 수정 * refactor: 상품 페이지 헤더 topbar로 수정
fun-eat · Apr 23, 2024 · 4def882 · 4def882
1 parent 92f0dae
commit 4def882
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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}>