From 39a9bd2fcd66c0f315fcc85e26c6bf9e056b2171 Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Sun, 29 Oct 2023 20:35:03 +0900 Subject: [PATCH 01/14] =?UTF-8?q?feat:=20#11=20-=20Avatar=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Avatar/Avatar.tsx | 26 ++++++++++++++++++++++++++ src/components/index.ts | 1 + 2 files changed, 27 insertions(+) create mode 100644 src/components/Avatar/Avatar.tsx diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx new file mode 100644 index 00000000..dd66deb8 --- /dev/null +++ b/src/components/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 ( +
+ {alt} +
+ ) +} + +export default Avatar diff --git a/src/components/index.ts b/src/components/index.ts index d813969e..22fb70de 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,2 +1,3 @@ export { default as Providers } from './Providers/providers' export { default as ThemeButton } from './ThemeButton/themeButton' +export { default as Avatar } from './Avatar/Avatar' From 6ff424dbaf1c5dd0f7d5079cbd3f2b820dcb1eaf Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Sun, 29 Oct 2023 21:00:14 +0900 Subject: [PATCH 02/14] =?UTF-8?q?feat:=20#11=20-=20AvatarGroup=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AvatarGroup/AvatarGroup.tsx | 59 +++++++++++++++++++ src/components/AvatarGroup/constants/index.ts | 4 ++ src/components/index.ts | 1 + 3 files changed, 64 insertions(+) create mode 100644 src/components/AvatarGroup/AvatarGroup.tsx create mode 100644 src/components/AvatarGroup/constants/index.ts diff --git a/src/components/AvatarGroup/AvatarGroup.tsx b/src/components/AvatarGroup/AvatarGroup.tsx new file mode 100644 index 00000000..798477a9 --- /dev/null +++ b/src/components/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 => { + return true + }) + .slice(0, limit) + .map((avatar, index, avatars) => { + return React.cloneElement(avatar, { + style: { + marginLeft: -size / MARGIN_LEFT_DIVIDE, + zIndex: avatars.length - index, + }, + }) + }) + + return ( +
+
+ {avatars.map((avatar) => ( +
+ {avatar} +
+ ))} +
+ {allAvatars.length > limit && ( +
+ +{allAvatars.length - limit}명 +
+ )} +
+ ) +} + +export default AvatarGroup diff --git a/src/components/AvatarGroup/constants/index.ts b/src/components/AvatarGroup/constants/index.ts new file mode 100644 index 00000000..83dc868b --- /dev/null +++ b/src/components/AvatarGroup/constants/index.ts @@ -0,0 +1,4 @@ +export const MARGIN_LEFT_DIVIDE = 8 +export const PADDING_LEFT_DIVIDE = 5 +export const DEFAULT_SIZE = 60 +export const DEFAULT_LIMIT = 3 diff --git a/src/components/index.ts b/src/components/index.ts index 22fb70de..945223e7 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,4 @@ export { default as Providers } from './Providers/providers' export { default as ThemeButton } from './ThemeButton/themeButton' export { default as Avatar } from './Avatar/Avatar' +export { default as AvatarGroup } from './AvatarGroup/AvatarGroup' From 5fe50a1c125af238a6ec4538d469c64319680fda Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Sun, 29 Oct 2023 21:12:08 +0900 Subject: [PATCH 03/14] =?UTF-8?q?style:=20#11=20-=20AvatarGroup=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=82=B4=EB=B6=80?= =?UTF-8?q?=EC=97=90=20gap=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AvatarGroup/AvatarGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AvatarGroup/AvatarGroup.tsx b/src/components/AvatarGroup/AvatarGroup.tsx index 798477a9..a1dbeceb 100644 --- a/src/components/AvatarGroup/AvatarGroup.tsx +++ b/src/components/AvatarGroup/AvatarGroup.tsx @@ -34,7 +34,7 @@ const AvatarGroup = ({ }) return ( -
+
From 09aeb76975ad729ed1547c837fdd197e2c7922b1 Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Sun, 29 Oct 2023 21:13:03 +0900 Subject: [PATCH 04/14] =?UTF-8?q?style:=20#11=20-=20AvatarGroup=20?= =?UTF-8?q?=EC=97=AC=EB=B0=B1=20=EA=B0=92=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AvatarGroup/constants/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AvatarGroup/constants/index.ts b/src/components/AvatarGroup/constants/index.ts index 83dc868b..2adc2cbb 100644 --- a/src/components/AvatarGroup/constants/index.ts +++ b/src/components/AvatarGroup/constants/index.ts @@ -1,4 +1,4 @@ -export const MARGIN_LEFT_DIVIDE = 8 -export const PADDING_LEFT_DIVIDE = 5 +export const MARGIN_LEFT_DIVIDE = 7 +export const PADDING_LEFT_DIVIDE = 7 export const DEFAULT_SIZE = 60 export const DEFAULT_LIMIT = 3 From 701c20e8d884c8e520d9a92116afbaef64353b9b Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Sun, 29 Oct 2023 21:18:51 +0900 Subject: [PATCH 05/14] =?UTF-8?q?style:=20#11=20-=20AvatarGroup=EC=9D=84?= =?UTF-8?q?=20flex=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AvatarGroup/AvatarGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AvatarGroup/AvatarGroup.tsx b/src/components/AvatarGroup/AvatarGroup.tsx index a1dbeceb..e53406c8 100644 --- a/src/components/AvatarGroup/AvatarGroup.tsx +++ b/src/components/AvatarGroup/AvatarGroup.tsx @@ -34,7 +34,7 @@ const AvatarGroup = ({ }) return ( -
+
From 88df75f1a11ff3bc271abdb59900e9324712a289 Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Sun, 29 Oct 2023 20:35:03 +0900 Subject: [PATCH 06/14] =?UTF-8?q?feat:=20#11=20-=20Avatar=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Avatar/Avatar.tsx | 26 ++++++++++++++++++++++++++ src/components/index.ts | 1 + 2 files changed, 27 insertions(+) create mode 100644 src/components/Avatar/Avatar.tsx diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx new file mode 100644 index 00000000..dd66deb8 --- /dev/null +++ b/src/components/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 ( +
+ {alt} +
+ ) +} + +export default Avatar diff --git a/src/components/index.ts b/src/components/index.ts index d813969e..22fb70de 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,2 +1,3 @@ export { default as Providers } from './Providers/providers' export { default as ThemeButton } from './ThemeButton/themeButton' +export { default as Avatar } from './Avatar/Avatar' From d17ce7c4b6b93548418f28b2992fa3f670994466 Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Sun, 29 Oct 2023 21:00:14 +0900 Subject: [PATCH 07/14] =?UTF-8?q?feat:=20#11=20-=20AvatarGroup=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AvatarGroup/AvatarGroup.tsx | 59 +++++++++++++++++++ src/components/AvatarGroup/constants/index.ts | 4 ++ src/components/index.ts | 1 + 3 files changed, 64 insertions(+) create mode 100644 src/components/AvatarGroup/AvatarGroup.tsx create mode 100644 src/components/AvatarGroup/constants/index.ts diff --git a/src/components/AvatarGroup/AvatarGroup.tsx b/src/components/AvatarGroup/AvatarGroup.tsx new file mode 100644 index 00000000..798477a9 --- /dev/null +++ b/src/components/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 => { + return true + }) + .slice(0, limit) + .map((avatar, index, avatars) => { + return React.cloneElement(avatar, { + style: { + marginLeft: -size / MARGIN_LEFT_DIVIDE, + zIndex: avatars.length - index, + }, + }) + }) + + return ( +
+
+ {avatars.map((avatar) => ( +
+ {avatar} +
+ ))} +
+ {allAvatars.length > limit && ( +
+ +{allAvatars.length - limit}명 +
+ )} +
+ ) +} + +export default AvatarGroup diff --git a/src/components/AvatarGroup/constants/index.ts b/src/components/AvatarGroup/constants/index.ts new file mode 100644 index 00000000..83dc868b --- /dev/null +++ b/src/components/AvatarGroup/constants/index.ts @@ -0,0 +1,4 @@ +export const MARGIN_LEFT_DIVIDE = 8 +export const PADDING_LEFT_DIVIDE = 5 +export const DEFAULT_SIZE = 60 +export const DEFAULT_LIMIT = 3 diff --git a/src/components/index.ts b/src/components/index.ts index 22fb70de..945223e7 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,4 @@ export { default as Providers } from './Providers/providers' export { default as ThemeButton } from './ThemeButton/themeButton' export { default as Avatar } from './Avatar/Avatar' +export { default as AvatarGroup } from './AvatarGroup/AvatarGroup' From 9ec40ccebd921d4113deb5799072bde3ae5899ba Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Sun, 29 Oct 2023 21:12:08 +0900 Subject: [PATCH 08/14] =?UTF-8?q?style:=20#11=20-=20AvatarGroup=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=82=B4=EB=B6=80?= =?UTF-8?q?=EC=97=90=20gap=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AvatarGroup/AvatarGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AvatarGroup/AvatarGroup.tsx b/src/components/AvatarGroup/AvatarGroup.tsx index 798477a9..a1dbeceb 100644 --- a/src/components/AvatarGroup/AvatarGroup.tsx +++ b/src/components/AvatarGroup/AvatarGroup.tsx @@ -34,7 +34,7 @@ const AvatarGroup = ({ }) return ( -
+
From fdab7009859eff08750e34d8c152022e0df5c66b Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Sun, 29 Oct 2023 21:13:03 +0900 Subject: [PATCH 09/14] =?UTF-8?q?style:=20#11=20-=20AvatarGroup=20?= =?UTF-8?q?=EC=97=AC=EB=B0=B1=20=EA=B0=92=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AvatarGroup/constants/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AvatarGroup/constants/index.ts b/src/components/AvatarGroup/constants/index.ts index 83dc868b..2adc2cbb 100644 --- a/src/components/AvatarGroup/constants/index.ts +++ b/src/components/AvatarGroup/constants/index.ts @@ -1,4 +1,4 @@ -export const MARGIN_LEFT_DIVIDE = 8 -export const PADDING_LEFT_DIVIDE = 5 +export const MARGIN_LEFT_DIVIDE = 7 +export const PADDING_LEFT_DIVIDE = 7 export const DEFAULT_SIZE = 60 export const DEFAULT_LIMIT = 3 From c3887ac4142ffe0f7a17a26d68196db82133c809 Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Sun, 29 Oct 2023 21:18:51 +0900 Subject: [PATCH 10/14] =?UTF-8?q?style:=20#11=20-=20AvatarGroup=EC=9D=84?= =?UTF-8?q?=20flex=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AvatarGroup/AvatarGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AvatarGroup/AvatarGroup.tsx b/src/components/AvatarGroup/AvatarGroup.tsx index a1dbeceb..e53406c8 100644 --- a/src/components/AvatarGroup/AvatarGroup.tsx +++ b/src/components/AvatarGroup/AvatarGroup.tsx @@ -34,7 +34,7 @@ const AvatarGroup = ({ }) return ( -
+
From fce5739014cdda94ba00e43b2020ca19ac8cbc7e Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Mon, 30 Oct 2023 19:35:36 +0900 Subject: [PATCH 11/14] =?UTF-8?q?refactor:=20#11=20-=20common=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=20=EB=82=B4=EB=B6=80=EB=A1=9C=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/{ => common}/Avatar/Avatar.tsx | 0 src/components/{ => common}/AvatarGroup/AvatarGroup.tsx | 0 src/components/{ => common}/AvatarGroup/constants/index.ts | 0 src/components/index.ts | 4 ++-- 4 files changed, 2 insertions(+), 2 deletions(-) rename src/components/{ => common}/Avatar/Avatar.tsx (100%) rename src/components/{ => common}/AvatarGroup/AvatarGroup.tsx (100%) rename src/components/{ => common}/AvatarGroup/constants/index.ts (100%) diff --git a/src/components/Avatar/Avatar.tsx b/src/components/common/Avatar/Avatar.tsx similarity index 100% rename from src/components/Avatar/Avatar.tsx rename to src/components/common/Avatar/Avatar.tsx diff --git a/src/components/AvatarGroup/AvatarGroup.tsx b/src/components/common/AvatarGroup/AvatarGroup.tsx similarity index 100% rename from src/components/AvatarGroup/AvatarGroup.tsx rename to src/components/common/AvatarGroup/AvatarGroup.tsx diff --git a/src/components/AvatarGroup/constants/index.ts b/src/components/common/AvatarGroup/constants/index.ts similarity index 100% rename from src/components/AvatarGroup/constants/index.ts rename to src/components/common/AvatarGroup/constants/index.ts diff --git a/src/components/index.ts b/src/components/index.ts index 945223e7..198b3c3f 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,4 +1,4 @@ export { default as Providers } from './Providers/providers' export { default as ThemeButton } from './ThemeButton/themeButton' -export { default as Avatar } from './Avatar/Avatar' -export { default as AvatarGroup } from './AvatarGroup/AvatarGroup' +export { default as Avatar } from './common/Avatar/Avatar' +export { default as AvatarGroup } from './common/AvatarGroup/AvatarGroup' From efa0a6179dfd9147a1a9b1f44fbe43837d5359a0 Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Mon, 30 Oct 2023 19:46:14 +0900 Subject: [PATCH 12/14] =?UTF-8?q?style:=20#11=20-=20Avatar=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=EA=B0=92=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Avatar/Avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/Avatar/Avatar.tsx b/src/components/common/Avatar/Avatar.tsx index dd66deb8..9bfc6432 100644 --- a/src/components/common/Avatar/Avatar.tsx +++ b/src/components/common/Avatar/Avatar.tsx @@ -17,7 +17,7 @@ const Avatar = ({ src, width, height, alt }: AvatarProps) => { width={width} height={height} alt={alt} - className="rounded-full border border-gray-300 object-cover" + className="border-slate3 rounded-full border object-cover" />
) From 290f2d1ea672a98179c6e2f791da7438fbc62641 Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Mon, 30 Oct 2023 19:47:33 +0900 Subject: [PATCH 13/14] =?UTF-8?q?style:=20#11=20-=20=EC=A1=B0=ED=9A=8C=20?= =?UTF-8?q?=EC=88=98=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EA=B0=92=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/AvatarGroup/AvatarGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/AvatarGroup/AvatarGroup.tsx b/src/components/common/AvatarGroup/AvatarGroup.tsx index e53406c8..eed1e645 100644 --- a/src/components/common/AvatarGroup/AvatarGroup.tsx +++ b/src/components/common/AvatarGroup/AvatarGroup.tsx @@ -48,7 +48,7 @@ const AvatarGroup = ({ ))}
{allAvatars.length > limit && ( -
+
+{allAvatars.length - limit}명
)} From ab79048b3f26e6450b981a210dbcda9cb5320560 Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Mon, 30 Oct 2023 20:18:39 +0900 Subject: [PATCH 14/14] =?UTF-8?q?refactor:=20#11=20-=20=EA=B8=B0=EC=A1=B4?= =?UTF-8?q?=20Avatar=EC=99=80=20AvatarGroup=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Avatar/Avatar.tsx | 26 -------- src/components/AvatarGroup/AvatarGroup.tsx | 59 ------------------- src/components/AvatarGroup/constants/index.ts | 4 -- 3 files changed, 89 deletions(-) delete mode 100644 src/components/Avatar/Avatar.tsx delete mode 100644 src/components/AvatarGroup/AvatarGroup.tsx delete mode 100644 src/components/AvatarGroup/constants/index.ts diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx deleted file mode 100644 index dd66deb8..00000000 --- a/src/components/Avatar/Avatar.tsx +++ /dev/null @@ -1,26 +0,0 @@ -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 ( -
- {alt} -
- ) -} - -export default Avatar diff --git a/src/components/AvatarGroup/AvatarGroup.tsx b/src/components/AvatarGroup/AvatarGroup.tsx deleted file mode 100644 index e53406c8..00000000 --- a/src/components/AvatarGroup/AvatarGroup.tsx +++ /dev/null @@ -1,59 +0,0 @@ -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 => { - return true - }) - .slice(0, limit) - .map((avatar, index, avatars) => { - return React.cloneElement(avatar, { - style: { - marginLeft: -size / MARGIN_LEFT_DIVIDE, - zIndex: avatars.length - index, - }, - }) - }) - - return ( -
-
- {avatars.map((avatar) => ( -
- {avatar} -
- ))} -
- {allAvatars.length > limit && ( -
- +{allAvatars.length - limit}명 -
- )} -
- ) -} - -export default AvatarGroup diff --git a/src/components/AvatarGroup/constants/index.ts b/src/components/AvatarGroup/constants/index.ts deleted file mode 100644 index 2adc2cbb..00000000 --- a/src/components/AvatarGroup/constants/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const MARGIN_LEFT_DIVIDE = 7 -export const PADDING_LEFT_DIVIDE = 7 -export const DEFAULT_SIZE = 60 -export const DEFAULT_LIMIT = 3