🎉 코드리뷰 반영 및 아바타 디폴트 이미지 설정 완료

team-nabi · Nov 1, 2023 · 4cc6ba2 · 4cc6ba2
1 parent 86be8c0
commit 4cc6ba2
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 12 deletions.
diff --git a/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.tsx b/src/app/(root)/(routes)/items/[itemId]/components/ProfileSection/ProfileSection.tsx
@@ -2,18 +2,15 @@ import { Avatar, AvatarImage } from '@/components/ui/Avatar'
 import { TYPHOGRAPHY } from '@/styles/sizes'
 
 type ProfileSectionProps = {
-  profileImg?: string
+  profileImg: string | null
   userName: string
 }
 
-const ProfileSection = ({
-  profileImg = 'https://github.com/shadcn.png',
-  userName,
-}: ProfileSectionProps) => {
+const ProfileSection = ({ profileImg, userName }: ProfileSectionProps) => {
   return (
     <section className="flex w-full py-2 border-b-[1px] items-center">
       <Avatar size="md">
-        <AvatarImage src={profileImg} />
+        <AvatarImage imgUrl={profileImg} />
       </Avatar>
       <div className={`ml-9 ${TYPHOGRAPHY.profile}`}>{userName}</div>
     </section>

diff --git a/src/app/(root)/(routes)/items/[itemId]/page.tsx b/src/app/(root)/(routes)/items/[itemId]/page.tsx
@@ -10,7 +10,7 @@ const ItemPage = ({ params }: ItemPageProps) => {
   return (
     <main className="flex-col min-h-screen  bg-background-color">
       <div>이미지 슬라이더 영역</div>
-      <ProfileSection userName="임시이름" />
+      <ProfileSection profileImg={null} userName="임시이름" />
       <div>아이템 상세정보 영역</div>
     </main>
   )

diff --git a/src/components/ui/Avatar/Avatar.stories.tsx b/src/components/ui/Avatar/Avatar.stories.tsx
@@ -17,15 +17,15 @@ export const Normal: Story = {
     return (
       <>
         <Avatar size="sm">
-          <AvatarImage src="https://github.com/shadcn.png" />
+          <AvatarImage imgUrl={null} />
           <AvatarFallback>NB</AvatarFallback>
         </Avatar>
         <Avatar size="md">
-          <AvatarImage src="https://github.com/shadcn.png" />
+          <AvatarImage imgUrl={null} />
           <AvatarFallback>NB</AvatarFallback>
         </Avatar>
         <Avatar size="lg">
-          <AvatarImage src="https://github.com/shadcn.png" />
+          <AvatarImage imgUrl="https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_1280.jpg" />
           <AvatarFallback>NB</AvatarFallback>
         </Avatar>
       </>

diff --git a/src/components/ui/Avatar/Avatar.tsx b/src/components/ui/Avatar/Avatar.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react'
 import * as AvatarPrimitive from '@radix-ui/react-avatar'
 import { cva, type VariantProps } from 'class-variance-authority'
+import { DEFAULT_PROFILE_IMG } from '@/constants/image'
 import { cn } from '@/utils'
 
 const avatarVariants = cva(
@@ -39,11 +40,15 @@ Avatar.displayName = AvatarPrimitive.Root.displayName
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
+    imgUrl: string | null
+  }
+>(({ className, imgUrl, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
     className={cn('aspect-square h-full w-full', className)}
+    src={imgUrl ?? DEFAULT_PROFILE_IMG}
+    onError={(e) => (e.currentTarget.src = DEFAULT_PROFILE_IMG)}
     {...props}
   />
 ))

diff --git a/src/constants/image.ts b/src/constants/image.ts
@@ -0,0 +1,4 @@
+const DEFAULT_PROFILE_IMG = 'https://github.com/shadcn.png'
+const DEFAULT_ITEM_IMG = '';
+
+export {DEFAULT_PROFILE_IMG, DEFAULT_ITEM_IMG}