Avatar 컴포넌트 구현

[dudwns]

📑 이슈 번호

#11

🚧 구현 내용

• Avatar 컴포넌트 구현
• AvatarGroup 컴포넌트 구현

🚨 특이 사항

Avatar props

interface AvatarProps {
  src: string // 이미지 url
  width: number // width 값
  height: number // height 값
  alt: string // alt 문구
  style?: CSSProperties // 그 외 style
}

AvatarGroup props

interface AvatarGroupProps {
  children: React.ReactNode // 내부 아바타 배열
  size?: number // 아바타 간격 (지정 안해도 됨, default: 60)
  limit?: number // 보여주는 아바타의 최대 수 (default: 3)
}

사용 예시 코드

<Avatar
    src={'/duck.jpg'}
    width={40}
    height={40}
    alt="프로필"
/>

<AvatarGroup>
    {avatars.map((avatar) => (
        <Avatar
            key={avatar.id}
            src={'/duck.jpg'}
            width={20}
            height={20}
            alt="프로필"
        />
    ))}
</AvatarGroup>

[bomi8489]

고생하셨습니다!!

[eeseung]

이미지 귀엽네요🐤 LGTM 입니다!