diff --git a/src/assets/product-notfound.png b/src/assets/product-notfound.png new file mode 100644 index 00000000..c52be72b Binary files /dev/null and b/src/assets/product-notfound.png differ diff --git a/src/components/Product/ProductDetailItem/ProductDetailItem.tsx b/src/components/Product/ProductDetailItem/ProductDetailItem.tsx index 8b829f02..f580ca83 100644 --- 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 (
- {name} + {name}
diff --git a/src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx b/src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx index 896a87fa..0c9fd29f 100644 --- a/src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx +++ b/src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx @@ -1,8 +1,23 @@ 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; } @@ -10,10 +25,13 @@ interface ProductOverviewItemProps { const ProductOverviewItem = ({ product }: ProductOverviewItemProps) => { const { name, image, averageRating, price } = product; + const randomIndex = Math.floor(Math.random() * defaultImages.length); + const defaultImage = defaultImages[randomIndex]; + return (
- {name} + {name}

{name}

diff --git a/src/components/Review/ReviewItem/ReviewItem.tsx b/src/components/Review/ReviewItem/ReviewItem.tsx index 5b74a55b..34c508f3 100644 --- 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 (
- {`${userName}의 + {userName} {rebuy && ( diff --git a/src/components/Review/ReviewItem/reviewItem.css.ts b/src/components/Review/ReviewItem/reviewItem.css.ts index debb3153..280a6678 100644 --- 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 index 1f1e265e..20ce4d04 100644 --- 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 index 99daa2b9..d0a01812 100644 --- 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 index 9ec62d57..aa1790af 100644 --- 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",