feat: 프로필 이미지에 오류 발생 시 기본 이미지로 대체

src/components/Members/MemberImage/MemberImage.stories.tsx

@@ -1,19 +1,24 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import MemberImage from './MemberImage';
+import DefaultMemberImage from '../../../assets/defaultProfile.png';
 
 const meta: Meta<typeof MemberImage> = {
   title: 'members/MemberImage',
   component: MemberImage,
   args: {
     src: 'https://github.com/woowacourse-teams/2023-fun-eat/assets/78616893/1f0fd418-131c-4cf8-b540-112d762b7c34',
     alt: '펀잇님의 프로필 사진',
-    width: 45,
-    height: 45,
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof MemberImage>;
 
 export const Default: Story = {};
+
+export const Error: Story = {
+  args: {
+    src: DefaultMemberImage,
+  },
+};

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 <StyledMemberImage src={src} alt={alt} width={width} height={height} css={css} />;
+const MemberImage = ({ src, alt, width = 45, height = 45, css }: MemberImageProps) => {
+  const [imageSrc, setImageSrc] = useState(src);
+
+  const handleImageError = () => {
+    setImageSrc(DefaultMemberImage);
+  };
+
+  return (
+    <StyledMemberImage src={imageSrc} alt={alt} width={width} height={height} css={css} onError={handleImageError} />
+  );
 };
 
 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};
 `;