[FE] feat: 랭킹 기준 텍스트 추가 (#765)

* feat: 상품 리뷰 소수 한자리까지로 수정 * feat: 랭킹 업데이트 텍스트 추가 * feat: 랭킹 기준에 info 아이콘 추가 * feat: 스토리북 프리뷰에 info svg 추가
woowacourse-teams · Oct 16, 2023 · 62124a6 · 62124a6
1 parent 215003f
commit 62124a6
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 8 deletions.
diff --git a/frontend/.storybook/preview-body.html b/frontend/.storybook/preview-body.html
@@ -114,6 +114,11 @@
         d="M232 127.89a16 16 0 0 1-8.18 14L55.91 237.9A16.14 16.14 0 0 1 48 240a16 16 0 0 1-15.05-21.34l27.35-79.95a4 4 0 0 1 3.79-2.71H136a8 8 0 0 0 8-8.53a8.19 8.19 0 0 0-8.26-7.47H64.16a4 4 0 0 1-3.79-2.7l-27.44-80a16 16 0 0 1 22.92-19.23l168 95.89a16 16 0 0 1 8.15 13.93Z"
       />
     </symbol>
+    <symbol id="info" viewBox="0 0 16 16">
+      <path
+        d="M8 7a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 8 7zm0-.75a.749.749 0 1 0 0-1.5.749.749 0 0 0 0 1.498zM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8zm6-5a5 5 0 1 0 0 10A5 5 0 0 0 8 3z"
+      />
+    </symbol>
   </svg>
 </div>
 <div id="toast-container"></div>
diff --git a/frontend/src/components/Common/Svg/SvgIcon.tsx b/frontend/src/components/Common/Svg/SvgIcon.tsx
@@ -23,6 +23,7 @@ export const SVG_ICON_VARIANTS = [
   'camera',
   'link',
   'plane',
+  'info'
 ] as const;
 export type SvgIconVariant = (typeof SVG_ICON_VARIANTS)[number];
 

diff --git a/frontend/src/components/Common/Svg/SvgSprite.tsx b/frontend/src/components/Common/Svg/SvgSprite.tsx
@@ -83,6 +83,9 @@ const SvgSprite = () => {
       <symbol id="plane" viewBox="0 0 256 256">
         <path d="M232 127.89a16 16 0 0 1-8.18 14L55.91 237.9A16.14 16.14 0 0 1 48 240a16 16 0 0 1-15.05-21.34l27.35-79.95a4 4 0 0 1 3.79-2.71H136a8 8 0 0 0 8-8.53a8.19 8.19 0 0 0-8.26-7.47H64.16a4 4 0 0 1-3.79-2.7l-27.44-80a16 16 0 0 1 22.92-19.23l168 95.89a16 16 0 0 1 8.15 13.93Z" />
       </symbol>
+      <symbol id="info" viewBox="0 0 16 16">
+        <path d="M8 7a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 8 7zm0-.75a.749.749 0 1 0 0-1.5.749.749 0 0 0 0 1.498zM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8zm6-5a5 5 0 1 0 0 10A5 5 0 0 0 8 3z" />
+      </symbol>
     </svg>
   );
 };

diff --git a/frontend/src/components/Product/ProductDetailItem/ProductDetailItem.tsx b/frontend/src/components/Product/ProductDetailItem/ProductDetailItem.tsx
@@ -42,7 +42,7 @@ const ProductDetailItem = ({ category, productDetail }: ProductDetailItemProps)
           <Text weight="bold">평균 평점</Text>
           <RatingIconWrapper>
             <SvgIcon variant="star" width={20} height={20} color={theme.colors.secondary} />
-            <Text as="span">{averageRating}</Text>
+            <Text as="span">{averageRating.toFixed(1)}</Text>
           </RatingIconWrapper>
         </DescriptionWrapper>
       </DetailInfoWrapper>

diff --git a/frontend/src/components/Product/ProductItem/ProductItem.tsx b/frontend/src/components/Product/ProductItem/ProductItem.tsx
@@ -43,7 +43,7 @@ const ProductItem = ({ product }: ProductItemProps) => {
           <RatingIconWrapper>
             <SvgIcon variant="star" width={20} height={20} color={theme.colors.secondary} />
             <Text as="span" size="sm" css="line-height: 24px;" aria-label={`${averageRating}점`}>
-              {averageRating}
+              {averageRating.toFixed(1)}
             </Text>
           </RatingIconWrapper>
           <ReviewIconWrapper>

diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
@@ -1,15 +1,23 @@
-import { Heading, Spacing } from '@fun-eat/design-system';
+import { Heading, Spacing, Text, useTheme } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import { Suspense } from 'react';
 import styled from 'styled-components';
 
-import { Loading, ErrorBoundary, ErrorComponent, CategoryFoodList, CategoryStoreList } from '@/components/Common';
+import {
+  Loading,
+  ErrorBoundary,
+  ErrorComponent,
+  CategoryFoodList,
+  CategoryStoreList,
+  SvgIcon,
+} from '@/components/Common';
 import { ProductRankingList, ReviewRankingList, RecipeRankingList } from '@/components/Rank';
 import { IMAGE_URL } from '@/constants';
 import channelTalk from '@/service/channelTalk';
 
 export const HomePage = () => {
   const { reset } = useQueryErrorResetBoundary();
+  const theme = useTheme();
 
   channelTalk.loadScript();
 
@@ -41,7 +49,12 @@ export const HomePage = () => {
         <Heading as="h2" size="xl">
           🍯 꿀조합 랭킹
         </Heading>
-        <Spacing size={16} />
+        <RankingInfoWrapper>
+          <SvgIcon variant="info" width={18} height={18} color={theme.textColors.info} />
+          <Text size="sm" color={theme.textColors.info}>
+            꿀조합 랭킹은 자체 알고리즘 기반으로 업데이트됩니다.
+          </Text>
+        </RankingInfoWrapper>
         <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
           <Suspense fallback={<Loading />}>
             <RecipeRankingList />
@@ -51,9 +64,14 @@ export const HomePage = () => {
       <Spacing size={36} />
       <SectionWrapper>
         <Heading as="h2" size="xl">
-          👑 상품 랭킹
+          🍙 상품 랭킹
         </Heading>
-        <Spacing size={15} />
+        <RankingInfoWrapper>
+          <SvgIcon variant="info" width={18} height={18} color={theme.textColors.info} />
+          <Text size="sm" color={theme.textColors.info}>
+            상품 랭킹은 2주 단위로 업데이트됩니다.
+          </Text>
+        </RankingInfoWrapper>
         <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
           <Suspense fallback={<Loading />}>
             <ProductRankingList isHomePage />
@@ -65,7 +83,12 @@ export const HomePage = () => {
         <Heading as="h2" size="xl">
           📝 리뷰 랭킹
         </Heading>
-        <Spacing size={15} />
+        <RankingInfoWrapper>
+          <SvgIcon variant="info" width={18} height={18} color={theme.textColors.info} />
+          <Text size="sm" color={theme.textColors.info}>
+            리뷰 랭킹은 자체 알고리즘 기반으로 업데이트됩니다.
+          </Text>
+        </RankingInfoWrapper>
         <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
           <Suspense fallback={<Loading />}>
             <ReviewRankingList isHomePage />
@@ -100,3 +123,14 @@ const CategoryListWrapper = styled.div`
     display: none;
   }
 `;
+
+const RankingInfoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin: 8px 0 16px;
+
+  & > svg {
+    padding-bottom: 2px;
+  }
+`;