Image, Avatar, AvatarGroup 공통 컴포넌트 구현 (#28)

* feat: Image 공통 컴포넌트 구현

* feat: Avatar 공통 컴포넌트 구현

* feat: AvatarGroup 공통 컴포넌트 구현

* feat: Avatar 컴포넌트가 img element props를 받는 기능

Author: dlwl98

src/components/shared/Avatar/Avatar.styles.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+import { Image } from '@components/shared/Image';
+
+import { AvatarProps } from './Avatar';
+
+export const StyledImage = styled(Image)<AvatarProps>`
+  border: ${({ border }) => border};
+  border-radius: ${({ radius }) => radius};
+`;

src/components/shared/Avatar/Avatar.tsx

@@ -0,0 +1,29 @@
+import { HTMLAttributes } from 'react';
+
+import { StyledImage } from './Avatar.styles';
+
+export type AvatarProps = {
+  src: string;
+  size?: number;
+  radius?: string;
+  border?: string;
+} & HTMLAttributes<HTMLImageElement>;
+
+export const Avatar = ({
+  src,
+  size = 30,
+  radius = '50%',
+  border,
+  ...props
+}: AvatarProps) => {
+  return (
+    <StyledImage
+      src={src}
+      alt="avatar"
+      width={size}
+      border={border}
+      radius={radius}
+      {...props}
+    />
+  );
+};

src/components/shared/Avatar/index.ts

@@ -0,0 +1 @@
+export * from './Avatar';

src/components/shared/AvatarGroup/AvatarGroup.styles.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+import { Avatar, AvatarProps } from '@components/shared/Avatar';
+
+import { AvatarGroupProps } from './AvatarGroup';
+
+type AvatarGroupWrapperProps = Required<Pick<AvatarGroupProps, 'overlap'>>;
+
+export const AvatarGroupWrapper = styled.div<AvatarGroupWrapperProps>`
+  padding-left: ${({ overlap }) => `${overlap / 16}rem`};
+`;
+
+export const OverlapedAvatar = styled(Avatar)<
+  AvatarProps & { overlap: number }
+>`
+  margin-left: ${({ overlap }) => `-${overlap / 16}rem`};
+`;

src/components/shared/AvatarGroup/AvatarGroup.tsx

@@ -0,0 +1,45 @@
+import React, { HTMLAttributes } from 'react';
+
+import { Avatar, AvatarProps } from '../Avatar';
+import { AvatarGroupWrapper, OverlapedAvatar } from './AvatarGroup.styles';
+
+export type AvatarGroupProps = {
+  children: React.ReactNode;
+  overlap?: number;
+} & Omit<AvatarProps, 'src'> &
+  HTMLAttributes<HTMLDivElement>;
+
+export const AvatarGroup = ({
+  children,
+  size = 30,
+  radius = '50%',
+  border,
+  overlap = 10,
+  ...props
+}: AvatarGroupProps) => {
+  const avatars = React.Children.toArray(children)
+    .filter((element): element is React.ReactElement<AvatarProps> => {
+      if (!React.isValidElement(element)) {
+        return false;
+      }
+      if (element.type !== Avatar) {
+        return false;
+      }
+      return true;
+    })
+    .map(({ props }) => (
+      <OverlapedAvatar
+        {...props}
+        size={size}
+        border={border}
+        radius={radius}
+        overlap={overlap}
+      />
+    ));
+
+  return (
+    <AvatarGroupWrapper overlap={overlap} {...props}>
+      {avatars}
+    </AvatarGroupWrapper>
+  );
+};

src/components/shared/AvatarGroup/index.ts

@@ -0,0 +1 @@
+export * from './AvatarGroup';

src/components/shared/Image/Image.styles.ts

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+import { ImageCustomProps } from './Image';
+
+type ImgProps = Required<ImageCustomProps>;
+
+export const Img = styled.img<ImgProps>`
+  display: ${({ block }) => (block ? 'block' : 'inline')};
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+  object-fit: ${({ mode }) => mode};
+`;

src/components/shared/Image/Image.tsx

@@ -0,0 +1,40 @@
+import { CSSProperties, HTMLAttributes } from 'react';
+
+import { Img } from './Image.styles';
+
+export type ImageCustomProps = {
+  src: string;
+  block?: boolean;
+  width: number | string;
+  height?: number | string;
+  alt: string;
+  mode?: CSSProperties['objectFit'];
+};
+type ImageProps = ImageCustomProps & HTMLAttributes<HTMLImageElement>;
+
+export const Image = ({
+  src,
+  block = false,
+  width,
+  height = width,
+  alt,
+  mode = 'cover',
+  ...props
+}: ImageProps) => {
+  const stringifiedWidth =
+    typeof width === 'number' ? `${width / 16}rem` : width;
+  const stringifiedHeight =
+    typeof height === 'number' ? `${height / 16}rem` : height;
+
+  return (
+    <Img
+      src={src}
+      alt={alt}
+      width={stringifiedWidth}
+      height={stringifiedHeight}
+      block={block}
+      mode={mode}
+      {...props}
+    />
+  );
+};

src/components/shared/Image/index.ts

@@ -0,0 +1 @@
+export * from './Image';