From 45ba8188e12690ae701eecf47abecde2e8731ea4 Mon Sep 17 00:00:00 2001
From: Yo Wook Kim <uk960214@gmail.com>
Date: Thu, 28 Jul 2022 11:10:23 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EB=94=B0=EB=9D=BC=20?=
 =?UTF-8?q?=EC=A0=9C=EB=AA=A9=20=EB=B3=80=EA=B2=BD=20UI=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20(#271)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/CategoryNav/CategoryNav.tsx  | 14 +++++++-------
 frontend/src/pages/Products/Products.tsx           | 14 ++++++++++++--
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/common/CategoryNav/CategoryNav.tsx b/frontend/src/components/common/CategoryNav/CategoryNav.tsx
index 3f270d84..8e073487 100644
--- 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
index caeeabd6..8c3a63f0 100644
--- 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} />}