fix: 프로필 default 이미지 설정 (#159)

* refactor: 리뷰 작성자 이미지 member image 컴포넌트로 교체 * refactor: 리뷰 작성자 이미지 member image 컴포넌트로 교체 * refactor: 상품 이미지 null 처리 * refactor: product overview image null 값 처리 * chore: mock data 빠진 부분 정의
fun-eat · Jun 28, 2024 · 3e6b7e8 · 3e6b7e8
1 parent 47db366
commit 3e6b7e8
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 12 deletions.
diff --git a/src/assets/product-notfound.png b/src/assets/product-notfound.png
diff --git a/src/components/Product/ProductDetailItem/ProductDetailItem.tsx b/src/components/Product/ProductDetailItem/ProductDetailItem.tsx
@@ -9,6 +9,7 @@ import {
   summaryWrapper,
 } from './productDetailItem.css';
 
+import ProductNotFoundImage from '@/assets/product-notfound.png';
 import { SvgIcon, TagList, Text } from '@/components/Common';
 import type { ProductDetail } from '@/types/product';
 
@@ -21,7 +22,7 @@ const ProductDetailItem = ({ productDetail }: ProductDetailItemProps) => {
 
   return (
     <section>
-      <img src={image} className={productImage} height={328} alt={name} />
+      <img src={image ?? ProductNotFoundImage} className={productImage} height={328} alt={name} />
 
       <div className={productOverview}>
         <div className={productInfo}>

diff --git a/src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx b/src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx
@@ -1,19 +1,37 @@
 import { container, priceRate, priceRateWrapper, rateWrapper, wrapper } from './productOverviewItem.css';
 
 import { SvgIcon } from '@/components/Common';
+import {
+  PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_1,
+  PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_2,
+  PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_3,
+  PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_4,
+  PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_5,
+} from '@/constants/image';
 import type { Product } from '@/types/product';
 
+const defaultImages = [
+  PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_1,
+  PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_2,
+  PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_3,
+  PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_4,
+  PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_5,
+];
+
 interface ProductOverviewItemProps {
   product: Product;
 }
 
 const ProductOverviewItem = ({ product }: ProductOverviewItemProps) => {
   const { name, image, averageRating, price } = product;
 
+  const randomIndex = Math.floor(Math.random() * defaultImages.length);
+  const defaultImage = defaultImages[randomIndex];
+
   return (
     <div className={container}>
       <div className={wrapper}>
-        <img src={image} width={60} height={60} alt={name} />
+        <img src={image ?? defaultImage} width={60} height={60} alt={name} />
         <div>
           <p>{name}</p>
           <div style={{ height: '6px' }} />

diff --git a/src/components/Review/ReviewItem/ReviewItem.tsx b/src/components/Review/ReviewItem/ReviewItem.tsx
@@ -1,10 +1,11 @@
 import { memo } from 'react';
 
-import { favoriteWrapper, memberImage, memberInfo } from './reviewItem.css';
+import { favoriteWrapper, memberInfo } from './reviewItem.css';
 import ReviewFavoriteButton from '../ReviewFavoriteButton/ReviewFavoriteButton';
 import ReviewItemInfo from '../ReviewItemInfo/ReviewItemInfo';
 
 import { Badge, Text } from '@/components/Common';
+import { MemberImage } from '@/components/Members';
 import { vars } from '@/styles/theme.css';
 import type { Review } from '@/types/review';
 
@@ -20,7 +21,7 @@ const ReviewItem = ({ productId, review }: ReviewItemProps) => {
   return (
     <div>
       <div className={memberInfo}>
-        <img src={profileImage} className={memberImage} width={36} height={36} alt={`${userName}의 프로필`} />
+        <MemberImage src={profileImage} width={36} height={36} />
         <Text weight="semiBold">{userName}</Text>
         {rebuy && (
           <Badge color={vars.colors.black} textColor={vars.colors.secondary1}>

diff --git a/src/components/Review/ReviewItem/reviewItem.css.ts b/src/components/Review/ReviewItem/reviewItem.css.ts
@@ -6,11 +6,6 @@ export const memberInfo = style({
   gap: 8,
 });
 
-export const memberImage = style({
-  borderRadius: '50%',
-  objectFit: 'cover',
-});
-
 export const favoriteWrapper = style({
   marginLeft: 'auto',
 });

diff --git a/src/constants/image.ts b/src/constants/image.ts
@@ -9,5 +9,11 @@ export const RECIPE_CARD_DEFAULT_IMAGE_URL_3 = `${IMAGE_BASE_URL}recipe-card-def
 export const RECIPE_CARD_DEFAULT_IMAGE_URL_4 = `${IMAGE_BASE_URL}recipe-card-default_4.png`;
 export const RECIPE_CARD_DEFAULT_IMAGE_URL_5 = `${IMAGE_BASE_URL}recipe-card-default_5.png`;
 
+export const PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_1 = `${IMAGE_BASE_URL}product-overview-default_1.png`;
+export const PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_2 = `${IMAGE_BASE_URL}product-overview-default_2.png`;
+export const PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_3 = `${IMAGE_BASE_URL}product-overview-default_3.png`;
+export const PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_4 = `${IMAGE_BASE_URL}product-overview-default_4.png`;
+export const PRODUCT_OVERVIEW_DEFAULT_IMAGE_URL_5 = `${IMAGE_BASE_URL}product-overview-default_5.png`;
+
 export const PRODUCT_BANNER = `${IMAGE_BASE_URL}product-banner.png`;
 export const STORE_BANNER = `${IMAGE_BASE_URL}store-banner.png`;
diff --git a/src/mocks/data/recipes.json b/src/mocks/data/recipes.json
@@ -159,7 +159,7 @@
       "products": [
         {
           "id": 11,
-          "image": "https://arqachylpmku8348141.cdn.ntruss.com/app/product/mst_product/8801056232979_L.jpg",
+          "image": null,
           "name": "불닭볶음면",
           "price": 1500,
           "averageRating": 4.0
@@ -173,14 +173,14 @@
         },
         {
           "id": 13,
-          "image": "https://arqachylpmku8348141.cdn.ntruss.com/app/product/mst_product/8801056232979_L.jpg",
+          "image": null,
           "name": "콘치즈",
           "price": 1500,
           "averageRating": 5.0
         },
         {
           "id": 14,
-          "image": "https://arqachylpmku8348141.cdn.ntruss.com/app/product/mst_product/8801056232979_L.jpg",
+          "image": null,
           "name": "치즈",
           "price": 1500,
           "averageRating": 3.0

diff --git a/src/mocks/data/reviewRankingList.json b/src/mocks/data/reviewRankingList.json
@@ -3,6 +3,8 @@
     {
       "reviewId": 1,
       "productId": 1,
+      "userName": "펀잇",
+      "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed",
       "productName": "구운감자슬림명란마요 구운감자슬림명란마요 구운감자슬림명란마요 구운감자슬림명란마요",
       "content": "할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다",
       "image": "",
@@ -26,6 +28,8 @@
     {
       "reviewId": 2,
       "productId": 1,
+      "userName": "펀잇",
+      "profileImage": "https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/991f7b69-53bf-4d03-96e1-988c34d010ed",
       "productName": "구운감자슬림명란마요",
       "content": "할머니가 먹을 거 같은 맛입니다. 1960년 전쟁 때 맛 보고 싶었는데 그때는 너무 가난해서 먹을 수 없었는데요 이것보다 긴 리뷰도 잘려 보인답니다",
       "image": "https://image.funeat.site/prod/c02bbc38-d9d5-4217-9c18-7b28995a9344-0001.webp",