[FE] feat: 랭킹 상대 시간 추가 (#826)

* feat: 꿀조합 랭킹 상대 날짜 추가 * feat: 리뷰 랭킹 상대 시간 추가
woowacourse-teams · Oct 19, 2023 · a5b52e7 · a5b52e7
1 parent 9b00964
commit a5b52e7
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 6 deletions.
diff --git a/frontend/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx b/frontend/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import RecipePreviewImage from '@/assets/plate.svg';
 import { Skeleton, SvgIcon } from '@/components/Common';
 import type { RecipeRanking } from '@/types/ranking';
+import { getRelativeDate } from '@/utils/date';
 
 interface RecipeRankingItemProps {
   rank: number;
@@ -18,6 +19,7 @@ const RecipeRankingItem = ({ rank, recipe }: RecipeRankingItemProps) => {
     title,
     author: { nickname, profileImage },
     favoriteCount,
+    createdAt,
   } = recipe;
   const [isImageLoading, setIsImageLoading] = useState(true);
 
@@ -49,6 +51,10 @@ const RecipeRankingItem = ({ rank, recipe }: RecipeRankingItemProps) => {
               <Text as="span" size="sm" weight="bold">
                 {favoriteCount}
               </Text>
+              <Spacing direction="horizontal" size={4} />
+              <Text size="sm" color={theme.textColors.info}>
+                {getRelativeDate(createdAt)}
+              </Text>
             </FavoriteWrapper>
           </TitleFavoriteWrapper>
         </RankingRecipeWrapper>

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/recipeRankingList.json b/frontend/src/mocks/data/recipeRankingList.json
@@ -8,7 +8,8 @@
         "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed",
         "nickname": "funeat"
       },
-      "favoriteCount": 153
+      "favoriteCount": 153,
+      "createdAt": "2023-08-09T10:10:10"
     },
     {
       "id": 2,
@@ -18,7 +19,8 @@
         "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed",
         "nickname": "funeat"
       },
-      "favoriteCount": 153
+      "favoriteCount": 153,
+      "createdAt": "2023-08-09T10:10:10"
     },
     {
       "id": 3,
@@ -28,7 +30,8 @@
         "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed",
         "nickname": "funeat"
       },
-      "favoriteCount": 153
+      "favoriteCount": 153,
+      "createdAt": "2023-08-09T10:10:10"
     }
   ]
 }
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"
     }
   ]
 }
diff --git a/frontend/src/types/ranking.ts b/frontend/src/types/ranking.ts
@@ -12,6 +12,7 @@ export interface ReviewRanking {
   rating: number;
   favoriteCount: number;
   categoryType: CategoryVariant;
+  createdAt: string;
 }
 
 export interface RecipeRanking {
@@ -20,4 +21,5 @@ export interface RecipeRanking {
   title: string;
   author: Member;
   favoriteCount: number;
+  createdAt: string;
 }