Avatar 컴포넌트 구현

src/components/common/Avatar/Avatar.tsx

@@ -0,0 +1,26 @@
+import { CSSProperties } from 'react'
+import Image from 'next/image'
+
+export interface AvatarProps {
+  src: string
+  width: number
+  height: number
+  alt: string
+  style?: CSSProperties
+}
+
+const Avatar = ({ src, width, height, alt }: AvatarProps) => {
+  return (
+    <div className="inline-block">
+      <Image
+        src={src}
+        width={width}
+        height={height}
+        alt={alt}
+        className="border-slate3 rounded-full border object-cover"
+      />
+    </div>
+  )
+}
+
+export default Avatar

src/components/common/AvatarGroup/AvatarGroup.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { AvatarProps } from '../Avatar/Avatar'
+import {
+  DEFAULT_LIMIT,
+  DEFAULT_SIZE,
+  MARGIN_LEFT_DIVIDE,
+  PADDING_LEFT_DIVIDE,
+} from './constants'
+
+export interface AvatarGroupProps {
+  children: React.ReactNode
+  size?: number
+  limit?: number
+}
+
+const AvatarGroup = ({
+  children,
+  size = DEFAULT_SIZE,
+  limit = DEFAULT_LIMIT,
+}: AvatarGroupProps) => {
+  const allAvatars = React.Children.toArray(children)
+  const avatars = React.Children.toArray(children)
+    .filter((element): element is React.ReactElement<AvatarProps> => {
+      return true
+    })
+    .slice(0, limit)
+    .map((avatar, index, avatars) => {
+      return React.cloneElement(avatar, {
+        style: {
+          marginLeft: -size / MARGIN_LEFT_DIVIDE,
+          zIndex: avatars.length - index,
+        },
+      })
+    })
+
+  return (
+    <div className="flex items-center gap-0.5">
+      <div
+        className="flex"
+        style={{ paddingLeft: size / PADDING_LEFT_DIVIDE }}>
+        {avatars.map((avatar) => (
+          <div
+            className="flex"
+            key={avatar.key}
+            style={avatar.props.style}>
+            {avatar}
+          </div>
+        ))}
+      </div>
+      {allAvatars.length > limit && (
+        <div className="text-slate6 text-xs font-normal">
+          +{allAvatars.length - limit}명
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AvatarGroup

src/components/common/AvatarGroup/constants/index.ts

@@ -0,0 +1,4 @@
+export const MARGIN_LEFT_DIVIDE = 7
+export const PADDING_LEFT_DIVIDE = 7
+export const DEFAULT_SIZE = 60
+export const DEFAULT_LIMIT = 3

src/components/index.ts

@@ -1,2 +1,4 @@
 export { default as Providers } from './Providers/providers'
 export { default as ThemeButton } from './ThemeButton/themeButton'
+export { default as Avatar } from './common/Avatar/Avatar'
+export { default as AvatarGroup } from './common/AvatarGroup/AvatarGroup'