feat: 리뷰 랭킹 바텀시트 추가 (#135)

* feat: ReviewDetail 페이지 삭제 * feat: 리뷰 랭킹 바텀시트 구현
fun-eat · Jun 7, 2024 · 887ef4a · 887ef4a
1 parent 914bbb2
commit 887ef4a
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 143 deletions.
diff --git a/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx b/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx
@@ -1,32 +1,62 @@
+import { BottomSheet, useBottomSheet } from '@fun-eat/design-system';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import { container, reviewItemWrapper } from './reviewRankingList.css';
+import { bottomSheetWrapper, container, productLink, reviewItemWrapper } from './reviewRankingList.css';
 import ReviewRankingItem from '../ReviewRankingItem/ReviewRankingItem';
 
+import { Text } from '@/components/Common';
+import { ReviewItem } from '@/components/Review';
 import { PATH } from '@/constants/path';
-import { useGA } from '@/hooks/common';
 import { useReviewRankingQuery } from '@/hooks/queries/rank';
+import { vars } from '@/styles/theme.css';
+import type { ReviewDetail } from '@/types/review';
 
 const ReviewRankingList = () => {
   const {
     data: { reviews },
   } = useReviewRankingQuery();
-  const { gaEvent } = useGA();
+  const { isOpen, isClosing, handleOpenBottomSheet, handleCloseBottomSheet } = useBottomSheet();
 
-  const handleReviewRankingLinkClick = () => {
-    gaEvent({ category: 'link', action: '리뷰 랭킹 링크 클릭', label: '랭킹' });
+  const [selectedReview, setSelectedReview] = useState<{ productId: number; review: ReviewDetail }>();
+
+  const handleReviewRankingItemClick = (productId: number, review: ReviewDetail) => {
+    handleOpenBottomSheet();
+    setSelectedReview({ productId, review });
   };
 
   return (
-    <ul className={container}>
-      {reviews.map(({ reviewId, productName, content, tags, image }) => (
-        <li key={reviewId} className={reviewItemWrapper}>
-          <Link to={`${PATH.REVIEW}/${reviewId}`} onClick={handleReviewRankingLinkClick}>
-            <ReviewRankingItem productName={productName} content={content} tags={tags} image={image} />
-          </Link>
-        </li>
-      ))}
-    </ul>
+    <>
+      <ul className={container}>
+        {reviews.map((review) => (
+          <li
+            key={review.id}
+            className={reviewItemWrapper}
+            onClick={() => handleReviewRankingItemClick(review.productId, review)}
+          >
+            <ReviewRankingItem
+              productName={review.productName}
+              content={review.content}
+              tags={review.tags}
+              image={review.image}
+            />
+          </li>
+        ))}
+      </ul>
+      {selectedReview && (
+        <BottomSheet isOpen={isOpen} isClosing={isClosing} close={handleCloseBottomSheet}>
+          <div className={bottomSheetWrapper}>
+            <ReviewItem productId={selectedReview.productId} review={selectedReview.review} />
+            <hr style={{ height: '1px', background: `${vars.colors.border.default}`, border: 0, margin: '12px 0' }} />
+            <Link to={`${PATH.PRODUCT_LIST}/detail/${selectedReview?.productId}`} className={productLink}>
+              <Text weight="semiBold" color="white">
+                상품 바로가기
+              </Text>
+            </Link>
+          </div>
+        </BottomSheet>
+      )}
+    </>
   );
 };
 

diff --git a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts
@@ -1,3 +1,4 @@
+import { vars } from '@/styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const container = style({
@@ -10,3 +11,16 @@ export const container = style({
 export const reviewItemWrapper = style({
   minWidth: 164,
 });
+
+export const bottomSheetWrapper = style({
+  padding: '40px 20px',
+});
+
+export const productLink = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 56,
+  background: vars.colors.primary,
+  borderRadius: 6,
+});
diff --git a/src/mocks/data/reviewRankingList.json b/src/mocks/data/reviewRankingList.json
@@ -6,6 +6,7 @@
       "productName": "구운감자슬림명란마요 구운감자슬림명란마요 구운감자슬림명란마요 구운감자슬림명란마요",
       "content": "할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다",
       "image": "",
+      "rating": 4.5,
       "categoryType": "food",
       "tags": [
         {
@@ -18,7 +19,9 @@
           "name": "🍭 달달해요",
           "tagType": "TASTE"
         }
-      ]
+      ],
+      "rebuy": true,
+      "favoriteCount": 1320
     },
     {
       "reviewId": 2,
@@ -27,6 +30,7 @@
       "content": "할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다",
       "image": "",
       "categoryType": "food",
+      "rating": 4.5,
       "tags": [
         {
           "id": 5,
@@ -43,7 +47,9 @@
           "name": "🍳 아침식사",
           "tagType": "TASTE"
         }
-      ]
+      ],
+      "rebuy": true,
+      "favoriteCount": 1320
     }
   ]
 }
diff --git a/src/pages/ReviewDetailPage.tsx b/src/pages/ReviewDetailPage.tsx
diff --git a/src/router/index.tsx b/src/router/index.tsx
@@ -84,15 +84,6 @@ const router = createBrowserRouter([
           return { Component: ProductPage };
         },
       },
-      {
-        path: `${PATH.REVIEW}/:reviewId`,
-        async lazy() {
-          const { ReviewDetailPage } = await import(
-            /* webpackChunkName: "ReviewDetailPage" */ '@/pages/ReviewDetailPage'
-          );
-          return { Component: ReviewDetailPage };
-        },
-      },
       {
         path: PATH.RECIPE,
         async lazy() {

diff --git a/src/types/response.ts b/src/types/response.ts
@@ -1,7 +1,7 @@
 import type { Product } from './product';
-import type { ProductRanking, ReviewRanking } from './ranking';
+import type { ProductRanking } from './ranking';
 import type { Comment, Recipe } from './recipe';
-import type { MemberReview, Review } from './review';
+import type { MemberReview, Review, ReviewDetail } from './review';
 import type { ProductSearchResult, ProductSearchAutocomplete } from './search';
 
 export interface Page {
@@ -53,7 +53,7 @@ export interface MemberRecipeResponse {
 }
 
 export interface ReviewRankingResponse {
-  reviews: ReviewRanking[];
+  reviews: ReviewDetail[];
 }
 
 export interface ProductRankingResponse {