diff --git a/src/assets/defaultProfile.png b/src/assets/defaultProfile.png new file mode 100644 index 000000000..76a16709c Binary files /dev/null and b/src/assets/defaultProfile.png differ diff --git a/src/components/Members/MemberImage/MemberImage.stories.tsx b/src/components/Members/MemberImage/MemberImage.stories.tsx index c9cc43771..e644e9390 100644 --- a/src/components/Members/MemberImage/MemberImage.stories.tsx +++ b/src/components/Members/MemberImage/MemberImage.stories.tsx @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import MemberImage from './MemberImage'; +import DefaultMemberImage from '../../../assets/defaultProfile.png'; const meta: Meta = { title: 'members/MemberImage', @@ -8,8 +9,6 @@ const meta: Meta = { args: { src: 'https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/1f0fd418-131c-4cf8-b540-112d762b7c34', alt: '펀잇님의 프로필 사진', - width: 45, - height: 45, }, }; @@ -17,3 +16,9 @@ export default meta; type Story = StoryObj; export const Default: Story = {}; + +export const Error: Story = { + args: { + src: DefaultMemberImage, + }, +}; diff --git a/src/components/Members/MemberImage/MemberImage.tsx b/src/components/Members/MemberImage/MemberImage.tsx index e20797f6d..c1cf23bb1 100644 --- a/src/components/Members/MemberImage/MemberImage.tsx +++ b/src/components/Members/MemberImage/MemberImage.tsx @@ -1,16 +1,27 @@ +import { useState } from 'react'; import type { CSSProp } from 'styled-components'; import styled from 'styled-components'; +import DefaultMemberImage from '@/assets/defaultProfile.png'; + interface MemberImageProps { src: string; alt: string; - width: number; - height: number; + width?: number; + height?: number; css?: CSSProp; } -const MemberImage = ({ src, alt, width, height, css }: MemberImageProps) => { - return ; +const MemberImage = ({ src, alt, width = 45, height = 45, css }: MemberImageProps) => { + const [imageSrc, setImageSrc] = useState(src); + + const handleImageError = () => { + setImageSrc(DefaultMemberImage); + }; + + return ( + + ); }; export default MemberImage; @@ -19,5 +30,6 @@ const StyledMemberImage = styled.img` border: 2px solid ${({ theme }) => theme.colors.primary}; border-radius: 50%; background: ${({ theme }) => theme.backgroundColors.default}; + object-fit: cover; ${({ css }) => css}; `;