fix: Avatar에서 에러와 긴 이미지 대응 (#276)

* feat: 에러 이미지 대응

* refactor: Comment 컴포넌트에 Avatar 컴포넌트 적용

src/components/atoms/avatar/Avatar.stories.tsx

@@ -38,3 +38,18 @@ export const SizeSpecificationWithImage: Story = {
     size: 50,
   },
 };
+
+export const WithLongImage: Story = {
+  args: {
+    profileImage:
+      'https://mblogthumb-phinf.pstatic.net/MjAyMjEyMjZfMTgg/MDAxNjcyMDM3NzQ3ODM2.Sbq1QfmZo0iF88TxMv-pTcvxWQ-9Bygpl_xc7-y8jDIg.juEk5qCAI9YLs6koopdMyPoXnWdTsXdDA7ptSqMhZyUg.JPEG.planet-keepers/5269_20221226134032608.jpg?type=w800',
+    size: 40,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    profileImage: 'asdf',
+    size: 40,
+  },
+};

src/components/atoms/avatar/Avatar.tsx

@@ -1,23 +1,33 @@
-import Image from 'next/image';
+import type { SyntheticEvent } from 'react';
+import Link from 'next/link';
 
 import UserIcon from '@/assets/icons/user.svg';
+import DefaultProfileImage from '@/assets/images/default-profile.png';
 
 interface AvatarProps {
   size?: number;
   profileImage?: string;
+  href?: string;
 }
 
-export const Avatar = ({ size = 24, profileImage }: AvatarProps) => {
+export const Avatar = ({ size = 24, profileImage, href }: AvatarProps) => {
+  const handleAddDefaultImg = (e: SyntheticEvent<HTMLImageElement, Event>) => {
+    e.currentTarget.src = DefaultProfileImage.src;
+  };
+
   return (
-    <div
-      style={{ width: size, height: size }}
-      className="flex justify-center items-center rounded-xl overflow-hidden bg-white"
-    >
-      {!profileImage ? (
-        <UserIcon width={`calc(${size} / 1.5)`} height={`calc(${size} / 1.5)`} />
-      ) : (
-        <Image src={profileImage} width={size} height={size} alt="profile_image" />
-      )}
-    </div>
+    <Link href={{ pathname: href }}>
+      <div
+        style={{ width: size, height: size }}
+        className="flex justify-center items-center rounded-xl overflow-hidden bg-white"
+      >
+        {!profileImage ? (
+          <UserIcon width={`calc(${size} / 1.5)`} height={`calc(${size} / 1.5)`} />
+        ) : (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img src={profileImage} width={size} height={size} alt="profile_image" onError={handleAddDefaultImg} />
+        )}
+      </div>
+    </Link>
   );
 };

src/components/molecules/comment/Comment.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import Image from 'next/image';
 import Link from 'next/link';
 import { m } from 'framer-motion';
 
 import TrashIcon from '@/assets/icons/trash-icon.svg';
-import { Typography } from '@/components';
+import { Avatar, Typography } from '@/components';
 import { convertTimeToElapsedTime } from '@/utils/date';
 
 interface CommentProps {
@@ -23,9 +22,7 @@ interface CommentProps {
 export const Comment = ({ commenter, content, writtenAt, isDeletable, onDelete }: CommentProps) => {
   return (
     <m.div className="flex gap-4xs" {...animate}>
-      <Link href={{ pathname: `/home/${commenter.username}` }}>
-        <Image src={commenter.image} width={50} height={50} alt="user_profile_image" className="rounded-full" />
-      </Link>
+      <Avatar profileImage={commenter.image} size={50} href={`/home/${commenter.username}`} />
       <div className="w-full flex flex-col justify-between">
         <div className="w-full flex justify-between">
           <div className="flex gap-6xs items-center">