feat: 오늘의 리뷰 태그 스타일 수정 (#56)

* feat: 오늘의 리뷰 태그 스타일 수정 * style: 유틸 함수 이름 수정 * refactor: 오늘의 리뷰 props 수정 * feat: 오늘의 리뷰 스타일 수정 * feat: 목데이터 수정 * feat: 오늘의 리뷰 스타일 수정 * feat: 오늘의 리뷰 컴포넌트 스타일 수정
fun-eat · Apr 20, 2024 · fd21bc7 · fd21bc7
1 parent 01a3d99
commit fd21bc7
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 93 deletions.
diff --git a/src/components/Members/MemberRecipeList/MemberRecipeList.tsx b/src/components/Members/MemberRecipeList/MemberRecipeList.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { PATH } from '@/constants/path';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteMemberRecipeQuery } from '@/hooks/queries/members';
-import useDisplaySlice from '@/utils/displaySlice';
+import displaySlice from '@/utils/displaySlice';
 
 interface MemberRecipeListProps {
   isPreview?: boolean;
@@ -17,7 +17,7 @@ const MemberRecipeList = ({ isPreview = false }: MemberRecipeListProps) => {
 
   const { fetchNextPage, hasNextPage, data } = useInfiniteMemberRecipeQuery();
   const memberRecipes = data?.pages.flatMap((page) => page.recipes);
-  const recipeToDisplay = useDisplaySlice(isPreview, memberRecipes);
+  const recipeToDisplay = displaySlice(isPreview, memberRecipes);
 
   useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
 

diff --git a/src/components/Members/MemberReviewList/MemberReviewList.tsx b/src/components/Members/MemberReviewList/MemberReviewList.tsx
@@ -8,7 +8,7 @@ import MemberReviewItem from '../MemberReviewItem/MemberReviewItem';
 import { PATH } from '@/constants/path';
 import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteMemberReviewQuery } from '@/hooks/queries/members';
-import useDisplaySlice from '@/utils/displaySlice';
+import displaySlice from '@/utils/displaySlice';
 
 interface MemberReviewListProps {
   isPreview?: boolean;
@@ -18,7 +18,7 @@ const MemberReviewList = ({ isPreview = false }: MemberReviewListProps) => {
   const scrollRef = useRef<HTMLDivElement>(null);
   const { fetchNextPage, hasNextPage, data } = useInfiniteMemberReviewQuery();
   const memberReviews = data.pages.flatMap((page) => page.reviews);
-  const reviewsToDisplay = useDisplaySlice(isPreview, memberReviews);
+  const reviewsToDisplay = displaySlice(isPreview, memberReviews);
 
   useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
 

diff --git a/src/components/Product/ProductPreviewList/ProductPreviewList.tsx b/src/components/Product/ProductPreviewList/ProductPreviewList.tsx
@@ -6,7 +6,7 @@ import ProductItem from '../ProductItem/ProductItem';
 import { PATH } from '@/constants/path';
 import { useInfiniteProductsQuery } from '@/hooks/queries/product';
 import type { CategoryVariant } from '@/types/common';
-import useDisplaySlice from '@/utils/displaySlice';
+import displaySlice from '@/utils/displaySlice';
 
 interface ProductPreviewListProps {
   category: CategoryVariant;
@@ -18,7 +18,7 @@ const ProductPreviewList = ({ categoryId }: ProductPreviewListProps) => {
   const { data } = useInfiniteProductsQuery(categoryId, 'reviewCount,desc');
   const products = data.pages.flatMap((page) => page.products);
   // 몇개까지 보여줄지
-  const productToDisplay = useDisplaySlice(false, products, 5);
+  const productToDisplay = displaySlice(true, products, 5);
 
   return (
     <ul className={container}>

diff --git a/src/components/Rank/ReviewRankingItem/ReviewRankingItem.stories.tsx b/src/components/Rank/ReviewRankingItem/ReviewRankingItem.stories.tsx
@@ -8,31 +8,51 @@ const meta: Meta<typeof ReviewRankingItem> = {
   title: 'review/ReviewRankingItem',
   component: ReviewRankingItem,
   args: {
-    reviewRanking: {
-      reviewId: 1,
-      productId: 5,
-      productName: '구운감자슬림명란마요',
-      content:
-        '할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다',
-      image: REVIEW_CARD_DEFAULT_IMAGE_URL,
-      categoryType: 'food',
-      tags: [
-        {
-          id: 5,
-          name: '😋 맛있어요',
-          tagType: 'TASTE',
-        },
-        {
-          id: 1,
-          name: '🍭 달달해요',
-          tagType: 'TASTE',
-        },
-      ],
-    },
+    productName: '구운감자슬림명란마요',
+    content:
+      '할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다',
+    image: REVIEW_CARD_DEFAULT_IMAGE_URL,
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof ReviewRankingItem>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    tags: [
+      {
+        id: 5,
+        name: '😋 맛있어요',
+        tagType: 'TASTE',
+      },
+      {
+        id: 1,
+        name: '🍭 달달해요',
+        tagType: 'TASTE',
+      },
+    ],
+  },
+};
+
+export const ExtraTag: Story = {
+  args: {
+    tags: [
+      {
+        id: 5,
+        name: '😋 맛있어요',
+        tagType: 'TASTE',
+      },
+      {
+        id: 1,
+        name: '🍭 속이 편해요',
+        tagType: 'TASTE',
+      },
+      {
+        id: 2,
+        name: '🍭 달달해요',
+        tagType: 'TASTE',
+      },
+    ],
+  },
+};
diff --git a/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx b/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx
@@ -1,37 +1,51 @@
 import { memo } from 'react';
 
-import { container, reviewContent, reviewImage, reviewTitle, tagList, tag } from './reviewRankingItem.css';
+import { reviewImage, tagList, tag, tagName, reviewContent } from './reviewRankingItem.css';
 
+import { Text } from '@/components/Common';
 import { REVIEW_CARD_DEFAULT_IMAGE_URL } from '@/constants/image';
 import type { ReviewRanking } from '@/types/ranking';
+import displaySlice from '@/utils/displaySlice';
 
 interface ReviewRankingItemProps {
-  reviewRanking: ReviewRanking;
+  productName: ReviewRanking['productName'];
+  content: ReviewRanking['content'];
+  tags: ReviewRanking['tags'];
+  image: ReviewRanking['image'];
 }
 
-const ReviewRankingItem = ({ reviewRanking }: ReviewRankingItemProps) => {
-  const { productName, content, tags, image } = reviewRanking;
+const TAG_DISPLAY_LIMIT = 2;
+
+const ReviewRankingItem = ({ productName, content, tags, image }: ReviewRankingItemProps) => {
+  const tagToDisplay = displaySlice(true, tags, TAG_DISPLAY_LIMIT);
 
   return (
-    <div className={container}>
-      <img
-        src={image ?? REVIEW_CARD_DEFAULT_IMAGE_URL}
-        className={reviewImage}
-        width={166}
-        height={90}
-        alt={productName}
-      />
+    <div>
+      <img src={image ?? REVIEW_CARD_DEFAULT_IMAGE_URL} className={reviewImage} alt={productName} />
       <div style={{ height: '8px' }} />
-      <p className={reviewTitle}>{productName}</p>
-      <div style={{ height: '6px' }} />
-      <p className={reviewContent}>{content}</p>
+      <Text color="sub" size="caption2" weight="semiBold">
+        {productName}
+      </Text>
+      <div style={{ height: '4px' }} />
+      <Text color="info" size="caption4" className={reviewContent}>
+        {content}
+      </Text>
       <div style={{ height: '10px' }} />
       <ul className={tagList}>
-        {tags.map(({ id, name }) => (
+        {tagToDisplay.map(({ id, name }) => (
           <li key={id} className={tag}>
-            <span>{name}</span>
+            <Text as="span" size="caption4" weight="medium" className={tagName}>
+              {name}
+            </Text>
           </li>
         ))}
+        {tags.length > TAG_DISPLAY_LIMIT && (
+          <li className={tag}>
+            <Text as="span" size="caption4" weight="medium" className={tagName}>
+              +
+            </Text>
+          </li>
+        )}
       </ul>
     </div>
   );

diff --git a/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts b/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts
@@ -1,23 +1,16 @@
+import { vars } from '@/styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
-export const container = style({
-  width: 166,
-});
-
 export const reviewImage = style({
+  width: '100%',
+  height: 'auto',
+  minWidth: 164,
   borderRadius: '6px',
   objectFit: 'cover',
-});
-
-export const reviewTitle = style({
-  fontSize: 13,
-  fontWeight: 600,
-  color: '#3d3d3d',
+  aspectRatio: '164 / 90',
 });
 
 export const reviewContent = style({
-  fontSize: 11,
-  color: '#808080',
   display: '-webkit-inline-box',
   textOverflow: 'ellipsis',
   overflow: 'hidden',
@@ -26,21 +19,20 @@ export const reviewContent = style({
 });
 
 export const tagList = style({
-  display: 'flex',
-  gap: 8,
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr 24px',
+  columnGap: 4,
 });
 
 export const tag = style({
-  width: 63,
   height: 26,
-  color: '#232527',
-  fontSize: 11,
-  fontWeight: 500,
-  lineHeight: '26px',
+  padding: '0 4px',
   textAlign: 'center',
-  borderRadius: '2px',
-  backgroundColor: '#ddd',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
+  borderRadius: 4,
+  backgroundColor: vars.colors.gray2,
+});
+
+export const tagName = style({
+  display: 'inline-block',
+  lineHeight: '26px',
 });
diff --git a/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx b/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx
@@ -19,10 +19,10 @@ const ReviewRankingList = () => {
 
   return (
     <ul className={container}>
-      {reviews.map((reviewRanking) => (
-        <li key={reviewRanking.reviewId}>
-          <Link to={`${PATH.REVIEW}/${reviewRanking.reviewId}`} onClick={handleReviewRankingLinkClick}>
-            <ReviewRankingItem reviewRanking={reviewRanking} />
+      {reviews.map(({ reviewId, productName, content, tags, image }) => (
+        <li key={reviewId}>
+          <Link to={`${PATH.REVIEW}/${reviewId}`} onClick={handleReviewRankingLinkClick}>
+            <ReviewRankingItem productName={productName} content={content} tags={tags} image={image} />
           </Link>
         </li>
       ))}

diff --git a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts
@@ -4,5 +4,4 @@ export const container = style({
   display: 'flex',
   gap: 10,
   padding: '0 20px',
-  overflowX: 'auto',
 });
diff --git a/src/mocks/data/reviewRankingList.json b/src/mocks/data/reviewRankingList.json
@@ -30,12 +30,12 @@
       "tags": [
         {
           "id": 5,
-          "name": "😋 맛있어요",
+          "name": "👶 초딩입맛",
           "tagType": "TASTE"
         },
         {
           "id": 1,
-          "name": "🍭 달달해요",
+          "name": "🍺 속풀려요",
           "tagType": "TASTE"
         },
         {
@@ -44,21 +44,6 @@
           "tagType": "TASTE"
         }
       ]
-    },
-    {
-      "reviewId": 3,
-      "productId": 2,
-      "productName": "하얀짜파게티큰사발",
-      "content": "하얀 짜파게티라니 말이 안된다고 생각했었죠. 실제로 맛을 보니까 까만 짜파게티랑 맛이 뭔가 다를게 없네요.",
-      "image": "https://image.funeat.site/prod/b9f82f35-e4ef-4acc-81a4-f3e07f8c0c738B1A8A65-8D48-4A8A-9474-EA3B6F0797BD.webp",
-      "categoryType": "food",
-      "tags": [
-        {
-          "id": 5,
-          "name": "🍳 아침식사",
-          "tagType": "TASTE"
-        }
-      ]
     }
   ]
 }
diff --git a/src/mocks/data/reviewTagList.json b/src/mocks/data/reviewTagList.json
@@ -8,7 +8,7 @@
       },
       {
         "id": 2,
-        "name": "👶 어린이입맛"
+        "name": "👶 초딩입맛"
       },
       {
         "id": 3,
@@ -62,7 +62,7 @@
       },
       {
         "id": 24,
-        "name": "🍺 속이 풀려요"
+        "name": "🍺 속풀려요"
       }
     ]
   }