feat: 리뷰 랭킹 상대 시간 추가

woowacourse-teams · Oct 19, 2023 · f231a55 · f231a55
1 parent e869575
commit f231a55
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/frontend/src/components/Rank/ReviewRankingItem/ReviewRankingItem.stories.tsx b/frontend/src/components/Rank/ReviewRankingItem/ReviewRankingItem.stories.tsx
@@ -15,6 +15,7 @@ const meta: Meta<typeof ReviewRankingItem> = {
       rating: 4.0,
       favoriteCount: 1256,
       categoryType: 'food',
+      createdAt: '2021-08-01T00:00:00.000Z',
     },
   },
 };

diff --git a/frontend/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx b/frontend/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import { SvgIcon } from '@/components/Common';
 import type { ReviewRanking } from '@/types/ranking';
+import { getRelativeDate } from '@/utils/date';
 
 interface ReviewRankingItemProps {
   reviewRanking: ReviewRanking;
@@ -12,7 +13,7 @@ interface ReviewRankingItemProps {
 const ReviewRankingItem = ({ reviewRanking }: ReviewRankingItemProps) => {
   const theme = useTheme();
 
-  const { productName, content, rating, favoriteCount } = reviewRanking;
+  const { productName, content, rating, favoriteCount, createdAt } = reviewRanking;
 
   return (
     <ReviewRankingItemContainer>
@@ -36,6 +37,9 @@ const ReviewRankingItem = ({ reviewRanking }: ReviewRankingItemProps) => {
             {rating.toFixed(1)}
           </Text>
         </RatingIconWrapper>
+        <ReviewDate size="sm" color={theme.textColors.info}>
+          {getRelativeDate(createdAt)}
+        </ReviewDate>
       </FavoriteStarWrapper>
     </ReviewRankingItemContainer>
   );
@@ -80,3 +84,7 @@ const RatingIconWrapper = styled.div`
     padding-bottom: 2px;
   }
 `;
+
+const ReviewDate = styled(Text)`
+  margin-left: auto;
+`;
diff --git a/frontend/src/mocks/data/reviewRankingList.json b/frontend/src/mocks/data/reviewRankingList.json
@@ -7,7 +7,8 @@
       "content": "할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다",
       "rating": 4.0,
       "favoriteCount": 1256,
-      "categoryType": "food"
+      "categoryType": "food",
+      "createdAt": "2023-08-09T10:10:10"
     },
     {
       "reviewId": 1,
@@ -16,7 +17,8 @@
       "content": "하얀 짜파게티라니 말이 안된다고 생각했었죠. 실제로 맛을 보니까 까만 짜파게티랑 맛이 뭔가 다를게 없네요.",
       "rating": 4.4,
       "favoriteCount": 870,
-      "categoryType": "food"
+      "categoryType": "food",
+      "createdAt": "2023-08-09T10:10:10"
     }
   ]
 }