feat: 카테고리 페이지에 따라 제목 변경 UI 구현 (#271)

woowacourse-teams · Jul 28, 2022 · 45ba818 · 45ba818
1 parent 89e65c9
commit 45ba818
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/frontend/src/components/common/CategoryNav/CategoryNav.tsx b/frontend/src/components/common/CategoryNav/CategoryNav.tsx
@@ -7,16 +7,16 @@ type Props = {
   triggerAnimation: boolean;
 };
 
-const CATEGORY = {
-  KEYBOARD: { key: 'keyboard', name: '키보드' },
-  MOUSE: { key: 'mouse', name: '마우스' },
-  MONITOR: { key: 'monitor', name: '모니터' },
-  STAND: { key: 'stand', name: '거치대' },
-  SOFTWARE: { key: 'software', name: '소프트웨어' },
+export const CATEGORY = {
+  keyboard: '키보드',
+  mouse: '마우스',
+  monitor: '모니터',
+  stand: '거치대',
+  software: '소프트웨어',
 } as const;
 
 function CategoryNav({ handleTransitionEnd, triggerAnimation }: Props) {
-  const CategoryLinks = Object.values(CATEGORY).map(({ key, name }) => (
+  const CategoryLinks = Object.entries(CATEGORY).map(([key, name]) => (
     <Link key={key} to={`${ROUTES.PRODUCTS}?category=${key}`}>
       {name}
     </Link>

diff --git a/frontend/src/pages/Products/Products.tsx b/frontend/src/pages/Products/Products.tsx
@@ -4,6 +4,7 @@ import ProductListSection from '@/components/ProductListSection/ProductListSecti
 import Select from '@/components/common/Select/Select';
 import useProducts from '@/hooks/useProducts';
 import { useLocation, useSearchParams } from 'react-router-dom';
+import { CATEGORY } from '@/components/common/CategoryNav/CategoryNav';
 
 type Option = { value: string; text: string };
 
@@ -25,7 +26,9 @@ const DefaultSort = options[1];
 
 function Products() {
   const location = useLocation();
-  const [sort, setSort] = useState<Sort>(DefaultSort.value);
+  const [sort, setSort] = useState<Sort>(
+    location.hash === '#popular' ? PopularSort.value : DefaultSort.value
+  );
   const [searchParams] = useSearchParams();
   const category = searchParams.get('category');
   const [products, getNextPage] = useProducts({
@@ -34,6 +37,13 @@ function Products() {
     category,
   });
 
+  const categoryTitle = CATEGORY[category as keyof typeof CATEGORY] || '상품';
+
+  const title =
+    location.hash === '#popular'
+      ? '인기 상품 목록'
+      : `모든 ${categoryTitle} 목록`;
+
   useEffect(() => {
     setSort(
       location.hash === '#popular' ? PopularSort.value : DefaultSort.value
@@ -42,7 +52,7 @@ function Products() {
 
   return (
     <ProductListSection
-      title={location.hash === '#popular' ? '인기 상품 목록' : '모든 상품 목록'}
+      title={title}
       data={!!products && products}
       getNextPage={getNextPage}
       addOn={<Select value={sort} setValue={setSort} options={options} />}