feat: 상품 랭킹 클릭 시 해당 상품으로 라우팅 기능 추가

woowacourse-teams · Aug 12, 2023 · 1500d9c · 1500d9c
1 parent f2fab5b
commit 1500d9c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/frontend/src/components/Rank/ProductRankingList/ProductRankingList.tsx b/frontend/src/components/Rank/ProductRankingList/ProductRankingList.tsx
@@ -1,9 +1,10 @@
-import { Spacing } from '@fun-eat/design-system';
+import { Link, Spacing } from '@fun-eat/design-system';
+import { Link as RouterLink } from 'react-router-dom';
 
 import { ProductOverviewItem } from '@/components/Product';
+import { PATH } from '@/constants/path';
 import { useProductRankingQuery } from '@/hooks/queries/rank';
 import displaySlice from '@/utils/displaySlice';
-
 interface ProductRankingListProps {
   isHome?: boolean;
 }
@@ -14,9 +15,11 @@ const ProductRankingList = ({ isHome }: ProductRankingListProps) => {
 
   return (
     <ul>
-      {productsToDisplay?.map(({ id, name, image }, index) => (
+      {productsToDisplay?.map(({ id, name, image, categoryType }, index) => (
         <li key={id}>
-          <ProductOverviewItem rank={index + 1} name={name} image={image} />
+          <Link as={RouterLink} to={`${PATH.PRODUCT_LIST}/${categoryType}/${id}`}>
+            <ProductOverviewItem rank={index + 1} name={name} image={image} />
+          </Link>
           <Spacing size={16} />
         </li>
       ))}

diff --git a/frontend/src/mocks/data/productRankingList.json b/frontend/src/mocks/data/productRankingList.json
@@ -3,22 +3,20 @@
     {
       "id": 3,
       "name": "구운감자슬림명란마요",
-      "image": "https://t3.ftcdn.net/jpg/06/06/91/70/240_F_606917032_4ujrrMV8nspZDX8nTgGrTpJ69N9JNxOL.jpg"
+      "image": "https://t3.ftcdn.net/jpg/06/06/91/70/240_F_606917032_4ujrrMV8nspZDX8nTgGrTpJ69N9JNxOL.jpg",
+      "categoryType": "food"
     },
     {
       "id": 2,
       "name": "삼립)보름달피치문",
-      "image": "https://t3.ftcdn.net/jpg/06/06/91/70/240_F_606917032_4ujrrMV8nspZDX8nTgGrTpJ69N9JNxOL.jpg"
+      "image": "https://t3.ftcdn.net/jpg/06/06/91/70/240_F_606917032_4ujrrMV8nspZDX8nTgGrTpJ69N9JNxOL.jpg",
+      "categoryType": "store"
     },
     {
       "id": 4,
       "name": "하얀짜파게티큰사발",
-      "image": "https://t3.ftcdn.net/jpg/06/06/91/70/240_F_606917032_4ujrrMV8nspZDX8nTgGrTpJ69N9JNxOL.jpg"
-    },
-    {
-      "id": 5,
-      "name": "감자깡",
-      "image": "https://t3.ftcdn.net/jpg/06/06/91/70/240_F_606917032_4ujrrMV8nspZDX8nTgGrTpJ69N9JNxOL.jpg"
+      "image": "https://t3.ftcdn.net/jpg/06/06/91/70/240_F_606917032_4ujrrMV8nspZDX8nTgGrTpJ69N9JNxOL.jpg",
+      "categoryType": "food"
     }
   ]
 }
diff --git a/frontend/src/types/ranking.ts b/frontend/src/types/ranking.ts
@@ -1,6 +1,6 @@
 import type { Product } from './product';
 
-export type ProductRanking = Pick<Product, 'id' | 'name' | 'image'>;
+export type ProductRanking = Pick<Product, 'id' | 'name' | 'image'> & { categoryType: string };
 
 export interface ReviewRanking {
   reviewId: number;