fix: item image 규격 맞지 않는 부분 수정 (#106)

* fix: item image 규격 맞지 않는 부분 수정 * chore: 잘못 삭제한 css 속성 재작성 * fix: grid, flex 다른 방법으로 해결
fun-eat · Apr 23, 2024 · 92f0dae · 92f0dae
1 parent 525adb7
commit 92f0dae
Show file tree

Hide file tree

Showing 17 changed files with 43 additions and 49 deletions.
diff --git a/src/components/Product/ProductItem/ProductItem.tsx b/src/components/Product/ProductItem/ProductItem.tsx
@@ -1,17 +1,10 @@
 import { Skeleton } from '@fun-eat/design-system';
 import { memo, useState } from 'react';
 
-import {
-  container,
-  preview,
-  previewWrapper,
-  productImage,
-  productName,
-  productPrice,
-  summaryWrapper,
-} from './productItem.css';
+import { container, previewWrapper, productImage, summaryWrapper } from './productItem.css';
 
-import { SvgIcon } from '@/components/Common';
+import { SvgIcon, Text } from '@/components/Common';
+import { ellipsis } from '@/styles/common.css';
 import { vars } from '@/styles/theme.css';
 import type { Product } from '@/types/product';
 
@@ -39,22 +32,27 @@ const ProductItem = ({ product }: ProductItemProps) => {
         </div>
       )}
       <div style={{ height: '8px' }} />
-      <p className={productName}>{name}</p>
+      <Text className={ellipsis} size="caption3" weight="semiBold" color="sub">
+        {name}
+      </Text>
       <div style={{ height: '2px' }} />
-      <p className={productPrice}>{price.toLocaleString('ko-KR')}원</p>
+      {/* 추후 bold로 변경 */}
+      <Text size="caption2" weight="semiBold" color="sub">
+        {price.toLocaleString('ko-KR')}원
+      </Text>
       <div style={{ height: '8px' }} />
       <div className={summaryWrapper}>
         <div className={previewWrapper}>
           <SvgIcon variant="star2" width={11} height={11} fill={vars.colors.gray2} />
-          <span className={preview} aria-label={`${averageRating}점`}>
+          <Text as="span" size="caption3" color="disabled" aria-label={`${averageRating}점`}>
             {averageRating.toFixed(1)}
-          </span>
+          </Text>
         </div>
         <div className={previewWrapper}>
           <SvgIcon variant="review2" width={11} height={11} />
-          <span className={preview} aria-label={`리뷰 ${reviewCount}개`}>
+          <Text as="span" size="caption3" color="disabled" aria-label={`리뷰 ${reviewCount}개`}>
             {reviewCount}
-          </span>
+          </Text>
         </div>
       </div>
     </div>

diff --git a/src/components/Product/ProductItem/productItem.css.ts b/src/components/Product/ProductItem/productItem.css.ts
@@ -12,19 +12,6 @@ export const productImage = style({
   aspectRatio: '1 / 1',
 });
 
-export const productName = style({
-  fontWeight: 600,
-  lineHeight: 1.4,
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
-export const productPrice = style({
-  fontWeight: 500,
-  lineHeight: 1.4,
-});
-
 export const summaryWrapper = style({
   display: 'flex',
   gap: 12,

diff --git a/src/components/Product/ProductList/productList.css.ts b/src/components/Product/ProductList/productList.css.ts
@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'grid',
-  gridTemplateColumns: 'repeat(2, 1fr)',
+  gridTemplateColumns: 'minmax(0, 1fr) 1fr',
   gridAutoRows: 'auto',
   columnGap: 10,
   rowGap: 20,

diff --git a/src/components/Product/ProductPreviewList/ProductPreviewList.tsx b/src/components/Product/ProductPreviewList/ProductPreviewList.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 
-import { container } from './productPreviewList.css';
+import { container, productItemWrapper } from './productPreviewList.css';
 import ProductItem from '../ProductItem/ProductItem';
 
 import { PATH } from '@/constants/path';
@@ -23,7 +23,7 @@ const ProductPreviewList = ({ categoryId }: ProductPreviewListProps) => {
   return (
     <ul className={container}>
       {productToDisplay.map((product) => (
-        <li key={product.id}>
+        <li key={product.id} className={productItemWrapper}>
           <Link to={`${PATH.PRODUCT_LIST}/detail/${product.id}`}>
             <ProductItem product={product} />
           </Link>

diff --git a/src/components/Product/ProductPreviewList/productPreviewList.css.ts b/src/components/Product/ProductPreviewList/productPreviewList.css.ts
@@ -6,3 +6,7 @@ export const container = style({
   padding: '0 20px',
   overflowX: 'auto',
 });
+
+export const productItemWrapper = style({
+  minWidth: 163,
+});
diff --git a/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts b/src/components/Rank/RecipeRankingList/recipeRankingList.css.ts
@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'grid',
-  gridTemplateColumns: 'repeat(2, 1fr)',
+  gridTemplateColumns: 'minmax(0, 1fr) 1fr',
   gridAutoRows: 'auto',
   columnGap: 10,
   rowGap: 20,

diff --git a/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx b/src/components/Rank/ReviewRankingItem/ReviewRankingItem.tsx
@@ -4,6 +4,7 @@ import { reviewImage, tagList, tag, tagName, reviewContent } from './reviewRanki
 
 import { Text } from '@/components/Common';
 import { REVIEW_CARD_DEFAULT_IMAGE_URL } from '@/constants/image';
+import { ellipsis } from '@/styles/common.css';
 import type { ReviewRanking } from '@/types/ranking';
 import displaySlice from '@/utils/displaySlice';
 
@@ -23,7 +24,7 @@ const ReviewRankingItem = ({ productName, content, tags, image }: ReviewRankingI
     <div>
       <img src={image ?? REVIEW_CARD_DEFAULT_IMAGE_URL} className={reviewImage} alt={productName} />
       <div style={{ height: '8px' }} />
-      <Text color="sub" size="caption2" weight="semiBold">
+      <Text className={ellipsis} color="sub" size="caption2" weight="semiBold">
         {productName}
       </Text>
       <div style={{ height: '4px' }} />

diff --git a/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts b/src/components/Rank/ReviewRankingItem/reviewRankingItem.css.ts
@@ -4,7 +4,6 @@ import { style } from '@vanilla-extract/css';
 export const reviewImage = style({
   width: '100%',
   height: 'auto',
-  minWidth: 164,
   borderRadius: '6px',
   objectFit: 'cover',
   aspectRatio: '164 / 90',

diff --git a/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx b/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 
-import { container } from './reviewRankingList.css';
+import { container, reviewItemWrapper } from './reviewRankingList.css';
 import ReviewRankingItem from '../ReviewRankingItem/ReviewRankingItem';
 
 import { PATH } from '@/constants/path';
@@ -20,7 +20,7 @@ const ReviewRankingList = () => {
   return (
     <ul className={container}>
       {reviews.map(({ reviewId, productName, content, tags, image }) => (
-        <li key={reviewId}>
+        <li key={reviewId} className={reviewItemWrapper}>
           <Link to={`${PATH.REVIEW}/${reviewId}`} onClick={handleReviewRankingLinkClick}>
             <ReviewRankingItem productName={productName} content={content} tags={tags} image={image} />
           </Link>

diff --git a/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts b/src/components/Rank/ReviewRankingList/reviewRankingList.css.ts
@@ -5,3 +5,7 @@ export const container = style({
   gap: 10,
   padding: '0 20px',
 });
+
+export const reviewItemWrapper = style({
+  minWidth: 164,
+});
diff --git a/src/components/Recipe/RecipeItem/RecipeItem.tsx b/src/components/Recipe/RecipeItem/RecipeItem.tsx
@@ -4,7 +4,6 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import {
-  ellipsis,
   favoriteButtonWrapper,
   imageWrapper,
   productButtonWrapper,
@@ -29,6 +28,7 @@ import {
 import { PATH } from '@/constants/path';
 import RecipeItemProvider from '@/contexts/RecipeItemContext';
 import { useRecipeItemValueContext } from '@/hooks/context';
+import { ellipsis } from '@/styles/common.css';
 import type { Recipe } from '@/types/recipe';
 import { getRelativeDate } from '@/utils/date';
 import displaySlice from '@/utils/displaySlice';

diff --git a/src/components/Recipe/RecipeItem/recipeItem.css.ts b/src/components/Recipe/RecipeItem/recipeItem.css.ts
@@ -64,9 +64,3 @@ export const recipeProductsCount = style({
   transform: 'translate( -50%, -50% )',
   color: vars.colors.white,
 });
-
-export const ellipsis = style({
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
diff --git a/src/components/Recipe/RecipeList/recipeList.css.ts b/src/components/Recipe/RecipeList/recipeList.css.ts
@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const container = style({
   display: 'grid',
-  gridTemplateColumns: 'repeat(2, 1fr)',
+  gridTemplateColumns: 'minmax(0, 1fr) 1fr',
   gridAutoRows: 'auto',
   columnGap: 10,
   rowGap: 20,

diff --git a/src/mocks/data/products.json b/src/mocks/data/products.json
@@ -3,7 +3,7 @@
   "products": [
     {
       "id": 1,
-      "name": "꼬북칩",
+      "name": "꼬북칩 꼬북칩 꼬북칩 꼬북칩 꼬북칩 꼬북칩 꼬북칩 ",
       "price": 1500,
       "image": "https://arqachylpmku8348141.cdn.ntruss.com/app/product/mst_product/8801056232979_L.jpg",
       "averageRating": 4.5,

diff --git a/src/mocks/data/recipes.json b/src/mocks/data/recipes.json
@@ -19,7 +19,7 @@
       "createdAt": "2023-08-05T10:10:10",
       "favoriteCount": 154,
       "favorite": true,
-      "content": "곰탕과 짜장면을 같이 먹을 수 있어요!",
+      "content": "곰탕과 짜장면을 같이 먹을 수 있어요! 곰탕과 짜장면을 같이 먹을 수 있어요! 곰탕과 짜장면을 같이 먹을 수 있어요! 곰탕과 짜장면을 같이 먹을 수 있어요!",
       "products": [
         {
           "id": 1,
@@ -204,7 +204,7 @@
     {
       "id": 5,
       "image": null,
-      "title": "초특급불닭콘치즈",
+      "title": "초특급불닭콘치즈 초특급불닭콘치즈 초특급불닭콘치즈 초특급불닭콘치즈 초특급불닭콘치즈",
       "author": {
         "nickname": "5번 글",
         "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/84a20dae-4770-4497-ae25-2dd552261aab"

diff --git a/src/mocks/data/reviewRankingList.json b/src/mocks/data/reviewRankingList.json
@@ -3,7 +3,7 @@
     {
       "reviewId": 1,
       "productId": 1,
-      "productName": "구운감자슬림명란마요",
+      "productName": "구운감자슬림명란마요 구운감자슬림명란마요 구운감자슬림명란마요 구운감자슬림명란마요",
       "content": "할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다",
       "image": null,
       "categoryType": "food",

diff --git a/src/styles/common.css.ts b/src/styles/common.css.ts
@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export const ellipsis = style({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});