Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Jun 28, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f173564
refactor: 리뷰 작성자 이미지 member image 컴포넌트로 교체
hae-on Jun 26, 2024
98583c6
refactor: 리뷰 작성자 이미지 member image 컴포넌트로 교체
hae-on Jun 26, 2024
f690e3e
refactor: 상품 이미지 null 처리
hae-on Jun 26, 2024
f715b46
refactor: product overview image null 값 처리
hae-on Jun 26, 2024
c76620a
chore: mock data 빠진 부분 정의
hae-on Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/assets/product-notfound.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion src/components/Product/ProductDetailItem/ProductDetailItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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}>
Expand Down
20 changes: 19 additions & 1 deletion src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' }} />
Expand Down
5 changes: 3 additions & 2 deletions src/components/Review/ReviewItem/ReviewItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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}>
Expand Down
5 changes: 0 additions & 5 deletions src/components/Review/ReviewItem/reviewItem.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,6 @@ export const memberInfo = style({
gap: 8,
});

export const memberImage = style({
borderRadius: '50%',
objectFit: 'cover',
});

export const favoriteWrapper = style({
marginLeft: 'auto',
});
Expand Down
6 changes: 6 additions & 0 deletions src/constants/image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
6 changes: 3 additions & 3 deletions src/mocks/data/recipes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
4 changes: 4 additions & 0 deletions src/mocks/data/reviewRankingList.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": "",
Expand All @@ -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",
Expand Down
Loading