From 19c77214a372f3aeb533191f275dc30b627bc7d9 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 15 Feb 2025 11:27:56 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20avatar=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=9C=EC=84=A0=20-=20nickname?=
 =?UTF-8?q?=EC=9D=84=20=EB=B0=9B=EC=9D=84=20=EC=88=98=20=EC=9E=88=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/Avatar/Avatar.tsx | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/ui/Avatar/Avatar.tsx b/src/components/ui/Avatar/Avatar.tsx
index a3bcd9f..a7907cc 100644
--- a/src/components/ui/Avatar/Avatar.tsx
+++ b/src/components/ui/Avatar/Avatar.tsx
@@ -1,10 +1,11 @@
 'use client';
 
-import { DEFAULT_COLORS } from '@/constants/colors';
-import { cn, getColorByString } from '@/utils/helper';
-import { cva, VariantProps } from 'class-variance-authority';
-import Image from 'next/image';
 import { HTMLAttributes, useState } from 'react';
+import Image from 'next/image';
+import { cva, VariantProps } from 'class-variance-authority';
+import { cn, getColorByString } from '@/utils/helper';
+import { DEFAULT_COLORS } from '@/constants/colors';
+import { User } from '@/apis/users/types';
 
 /**
  * 커스터마이징 가능한 기본 공용 Avatar 컴포넌트입니다.
@@ -44,22 +45,20 @@ const avatarVariants = cva(
   },
 );
 
-interface AvatarProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
-  email: string;
-  profileImageUrl?: string | null;
-}
+type AvatarProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof avatarVariants> & Partial<Pick<User, 'email' | 'nickname' | 'profileImageUrl'>>;
 
-export default function Avatar({ email, profileImageUrl, size, className, ...props }: AvatarProps) {
+export default function Avatar({ email, nickname, profileImageUrl, size, className, ...props }: AvatarProps) {
   const [imgError, setImgError] = useState(false);
-  const colorCode = getColorByString(email, DEFAULT_COLORS);
-  const firstChar = email.charAt(0);
+  const fallback = email || nickname || '';
+  const colorCode = fallback ? getColorByString(fallback, DEFAULT_COLORS) : DEFAULT_COLORS[0];
+  const firstChar = fallback.charAt(0);
 
   const isFallback = !profileImageUrl || imgError;
 
   return (
     <figure className={cn(avatarVariants({ size, className }))} {...props}>
       {!isFallback ? (
-        <Image src={profileImageUrl} alt={email} fill onError={() => setImgError(true)} className='object-cover' />
+        <Image src={profileImageUrl} alt={fallback} fill onError={() => setImgError(true)} className='object-cover' />
       ) : (
         <span className='flex aspect-square w-full items-center justify-center font-semibold uppercase text-white' style={{ backgroundColor: colorCode }}>
           {firstChar}

From 239f661b48aaca706f79f769174f2dc0088bca09 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 15 Feb 2025 11:43:44 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20default=20value=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/Avatar/Avatar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/Avatar/Avatar.tsx b/src/components/ui/Avatar/Avatar.tsx
index a7907cc..ce39202 100644
--- a/src/components/ui/Avatar/Avatar.tsx
+++ b/src/components/ui/Avatar/Avatar.tsx
@@ -49,7 +49,7 @@ type AvatarProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof avatarVa
 
 export default function Avatar({ email, nickname, profileImageUrl, size, className, ...props }: AvatarProps) {
   const [imgError, setImgError] = useState(false);
-  const fallback = email || nickname || '';
+  const fallback = email || nickname || 'user';
   const colorCode = fallback ? getColorByString(fallback, DEFAULT_COLORS) : DEFAULT_COLORS[0];
   const firstChar = fallback.charAt(0);