[FE-Feat] Avatar 컴포넌트 기본 레이아웃 작성

frontend/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Avatar from '.';
+
+const meta: Meta = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  argTypes: {
+    size: {
+      control: { type: 'radio', options: ['sm', 'lg'] },
+    },
+    imageUrls: {
+      control: false,
+    },
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    size: 'sm',
+    imageUrls: [
+      'https://picsum.photos/200',
+      'https://picsum.photos/201',
+      'https://picsum.photos/202',
+      'https://picsum.photos/203',
+      'https://picsum.photos/204',
+      'https://picsum.photos/205',
+    ],
+  },
+};
+
+export const FetchError: Story = {
+  args: {
+    size: 'sm',
+    imageUrls: [
+      'https://hi.com/',
+      'https://hi.com/',
+      'https://hi.com/',
+      'https://hi.com/',
+    ],
+  },
+};

frontend/src/components/Avatar/AvatarCount.tsx

@@ -0,0 +1,27 @@
+import { vars } from '@/theme/index.css';
+
+import { Flex } from '../Flex';
+import type { Typo } from '../Text';
+import { Text } from '../Text';
+import type { Size } from '.';
+import { avatarItemStyle } from './index.css';
+
+interface AvatarCountProps {
+  size: Size;
+  count: number;
+}
+
+const AvatarCount = ({ size, count }: AvatarCountProps) => (
+  <Flex
+    align='center'
+    className={avatarItemStyle({ size })}
+    justify='center'
+  >
+    <Text color={vars.color.Ref.Netural[500]} typo={getTypo(size)}>{count}</Text>
+  </Flex>
+);
+
+const getTypo = (size: Size): Typo => 
+  size === 'sm' ? 'caption' : 't3';
+
+export default AvatarCount;

frontend/src/components/Avatar/AvatarItem.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+import type { Size } from '.';
+import { avatarItemStyle } from './index.css';
+
+interface AvatarItemProps {
+  src: string;
+  size?: Size;
+  alt?: string;
+}
+
+const AvatarItem = ({ src, size = 'sm', alt }: AvatarItemProps) => {
+  const [imgSrc, setImgSrc] = useState(src);
+  const [hasError, setHasError] = useState(false);
+  const fallbackSrc = 'https://picsum.photos/id/200/200/200';
+  const handleError = () => {
+    if (!hasError) {
+      setImgSrc(fallbackSrc);
+      setHasError(true);
+    }
+  };
+
+  return (
+    <img
+      alt={alt || `Avatar image ${imgSrc}`}
+      className={avatarItemStyle({ size })}
+      loading='lazy'
+      onError={handleError}
+      src={imgSrc}
+    />
+  );
+};
+
+export default AvatarItem;

frontend/src/components/Avatar/index.css.ts

@@ -12,7 +12,12 @@ export const avatarItemStyle = recipe({
   base: {
     backgroundColor: vars.color.Ref.Netural['White'],
     borderRadius: vars.radius['Max'],
-    border: `2px solid ${vars.color.Ref.Netural[500]}`,
+    border: `2px solid ${vars.color.Ref.Netural['White']}`,
+    selectors: {
+      '&:last-child': {
+        borderColor: vars.color.Ref.Netural[100],
+      },
+    },
   },
   variants: {
     size: {
@@ -45,4 +50,4 @@ export const avatarCountStyle = recipe({
     color: vars.color.Ref.Netural[500],
     border: `2px solid ${vars.color.Ref.Netural[100]}`,
   },
-});
+});

frontend/src/components/Avatar/index.tsx

@@ -0,0 +1,37 @@
+import AvatarCount from './AvatarCount';
+import AvatarItem from './AvatarItem';
+import { avatarContainerStyle } from './index.css';
+
+export type Size = 'sm' | 'lg';
+
+interface AvatarProps {
+  size: Size;
+  imageUrls: string[];
+}
+
+const MAX_IMAGE_COUNT = 4;
+
+const Avatar = ({ size, imageUrls }: AvatarProps) => {
+  const ENTIRE_LENGTH = imageUrls.length;
+  const limitedUrls = imageUrls.slice(0, MAX_IMAGE_COUNT);
+
+  return (
+    <div className={avatarContainerStyle}>
+      {limitedUrls.map((url, index) => (
+        <AvatarItem
+          key={`${index}-${url}`}
+          size={size}
+          src={url}
+        />
+      ))}
+      {ENTIRE_LENGTH > MAX_IMAGE_COUNT && (
+        <AvatarCount
+          count={ENTIRE_LENGTH}
+          size={size}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Avatar;