From fd21bc75264b02e643d3f4f8ad4b794ad0daa749 Mon Sep 17 00:00:00 2001 From: Leejin Yang Date: Sat, 20 Apr 2024 09:08:42 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=98=A4=EB=8A=98=EC=9D=98=20=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=ED=83=9C=EA=B7=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(#56)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 오늘의 리뷰 태그 스타일 수정 * style: 유틸 함수 이름 수정 * refactor: 오늘의 리뷰 props 수정 * feat: 오늘의 리뷰 스타일 수정 * feat: 목데이터 수정 * feat: 오늘의 리뷰 스타일 수정 * feat: 오늘의 리뷰 컴포넌트 스타일 수정 --- .../MemberRecipeList/MemberRecipeList.tsx | 4 +- .../MemberReviewList/MemberReviewList.tsx | 4 +- .../ProductPreviewList/ProductPreviewList.tsx | 4 +- .../ReviewRankingItem.stories.tsx | 64 ++++++++++++------- .../ReviewRankingItem/ReviewRankingItem.tsx | 48 +++++++++----- .../reviewRankingItem.css.ts | 40 +++++------- .../ReviewRankingList/ReviewRankingList.tsx | 8 +-- .../reviewRankingList.css.ts | 1 - src/mocks/data/reviewRankingList.json | 19 +----- src/mocks/data/reviewTagList.json | 4 +- 10 files changed, 103 insertions(+), 93 deletions(-) diff --git a/src/components/Members/MemberRecipeList/MemberRecipeList.tsx b/src/components/Members/MemberRecipeList/MemberRecipeList.tsx index 445dd9e33..74cf2da96 100644 --- 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(fetchNextPage, scrollRef, hasNextPage); diff --git a/src/components/Members/MemberReviewList/MemberReviewList.tsx b/src/components/Members/MemberReviewList/MemberReviewList.tsx index b622d9f65..b150e1000 100644 --- 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(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(fetchNextPage, scrollRef, hasNextPage); diff --git a/src/components/Product/ProductPreviewList/ProductPreviewList.tsx b/src/components/Product/ProductPreviewList/ProductPreviewList.tsx index d6ffc5651..e49c5bb7c 100644 --- 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 (
    diff --git a/src/components/Rank/ReviewRankingItem/ReviewRankingItem.stories.tsx b/src/components/Rank/ReviewRankingItem/ReviewRankingItem.stories.tsx index fafb0373d..95eefa2cd 100644 --- a/src/components/Rank/ReviewRankingItem/ReviewRankingItem.stories.tsx +++ b/src/components/Rank/ReviewRankingItem/ReviewRankingItem.stories.tsx @@ -8,31 +8,51 @@ const meta: Meta = { 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; -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 index 4188ed425..5dabd8073 100644 --- 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 ( -
    - {productName} +
    + {productName}
    -

    {productName}

    -
    -

    {content}

    + + {productName} + +
    + + {content} +
      - {tags.map(({ id, name }) => ( + {tagToDisplay.map(({ id, name }) => (
    • - {name} + + {name} +
      • ))} + {tags.length > TAG_DISPLAY_LIMIT && ( +
    • + + + + +
      • + )}
    ); diff --git a/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts b/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts index 2f5d5faa0..72d65c241 100644 --- 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 index 008d0c3b2..600f49a52 100644 --- a/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx +++ b/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx @@ -19,10 +19,10 @@ const ReviewRankingList = () => { return (
      - {reviews.map((reviewRanking) => ( -
    • - - + {reviews.map(({ reviewId, productName, content, tags, image }) => ( +
    • + +
      • ))} diff --git a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts index 5880a3305..68a282a0b 100644 --- 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 index 45a86747e..099c19aa1 100644 --- 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 index 2f69f715b..b9452448a 100644 --- 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": "🍺 속풀려요" } ] }