From 5f21dfa41b6f06b81771a81bf912095c4827b6f9 Mon Sep 17 00:00:00 2001
From: JinJu <jin_jooo@naver.com>
Date: Tue, 19 Nov 2024 01:15:14 +0900
Subject: [PATCH] =?UTF-8?q?DESIGN-10=20Avatar=20size=20=EA=B0=92=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD,=20hasBorder=20props=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/components/Avatar/constants/index.ts           | 4 ++--
 src/core/components/Avatar/index.tsx                    | 2 --
 src/core/components/Avatar/types/index.ts               | 1 -
 src/core/components/AvatarGroup/AvatarGroup.stories.tsx | 3 +--
 src/core/components/AvatarGroup/index.tsx               | 6 ++----
 src/core/components/AvatarGroup/types/index.ts          | 4 +---
 6 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/core/components/Avatar/constants/index.ts b/src/core/components/Avatar/constants/index.ts
index 892ac7e..f0b0e26 100644
--- a/src/core/components/Avatar/constants/index.ts
+++ b/src/core/components/Avatar/constants/index.ts
@@ -3,11 +3,11 @@ import { SIZE } from '@/core/components/Label/constants';
 export const AVATAR_SIZE = {
   [SIZE['SMALL']]: 'h-6 w-6 text-body-03-regular',
   [SIZE['MEDIUM']]: 'h-10 w-10 text-body-01-regular',
-  [SIZE['LARGE']]: 'h-14 w-14 text-subhead-01-regular',
+  [SIZE['LARGE']]: 'h-12 w-12 text-subhead-01-regular',
 };
 
 export const AVATAR_IMAGE_SIZE = {
   [SIZE['SMALL']]: 24,
   [SIZE['MEDIUM']]: 40,
-  [SIZE['LARGE']]: 56,
+  [SIZE['LARGE']]: 48,
 };
diff --git a/src/core/components/Avatar/index.tsx b/src/core/components/Avatar/index.tsx
index 59c5af2..9ffa479 100644
--- a/src/core/components/Avatar/index.tsx
+++ b/src/core/components/Avatar/index.tsx
@@ -37,7 +37,6 @@ const Avatar = ({
   popover,
   onClick,
   showAllLetter = false,
-  hasBorder = false,
   ...props
 }: PropsWithChildren<AvatarProps>) => {
   const avatarRef = useRef<HTMLDivElement>(null);
@@ -104,7 +103,6 @@ const Avatar = ({
           'flex items-center justify-center overflow-hidden uppercase hover:z-[1]',
           disabled && 'cursor-not-allowed opacity-50',
           onClick && !disabled && 'cursor-pointer',
-          hasBorder && 'border-2 border-white',
           className,
           COLOR_THEME_STYLES[_colorTheme],
           AVATAR_SIZE[size],
diff --git a/src/core/components/Avatar/types/index.ts b/src/core/components/Avatar/types/index.ts
index eebbea0..95b5564 100644
--- a/src/core/components/Avatar/types/index.ts
+++ b/src/core/components/Avatar/types/index.ts
@@ -13,6 +13,5 @@ export interface AvatarProps
   colorTheme?: ColorThemeType;
   popover?: ReactElement;
   showAllLetter?: boolean;
-  hasBorder?: boolean;
   disabled?: boolean;
 }
diff --git a/src/core/components/AvatarGroup/AvatarGroup.stories.tsx b/src/core/components/AvatarGroup/AvatarGroup.stories.tsx
index 824a152..c65da0c 100644
--- a/src/core/components/AvatarGroup/AvatarGroup.stories.tsx
+++ b/src/core/components/AvatarGroup/AvatarGroup.stories.tsx
@@ -58,7 +58,6 @@ export const MaxAvatarGroup = (props: AvatarGroupProps) => {
         <AvatarGroup
           items={items}
           max={3}
-          hasBorder
           overflowPopover={({ overflowItems }) => (
             <Section className={'mt-1 flex flex-col gap-1 p-2'} hasBorder>
               {overflowItems.map((item) => (
@@ -80,7 +79,7 @@ export const TotalAvatarGroup = (props: AvatarGroupProps) => {
     <>
       <div id={'portal'} />
       <Section className={'overflow-hidden border p-4'}>
-        <AvatarGroup items={items} total={50} hasBorder />
+        <AvatarGroup items={items} total={50} />
       </Section>
     </>
   );
diff --git a/src/core/components/AvatarGroup/index.tsx b/src/core/components/AvatarGroup/index.tsx
index 9250add..206f6fb 100644
--- a/src/core/components/AvatarGroup/index.tsx
+++ b/src/core/components/AvatarGroup/index.tsx
@@ -1,4 +1,4 @@
-import { cloneElement, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import clsx from 'clsx';
 
 import { AvatarGroupProps } from '@/core/components/AvatarGroup/types';
@@ -13,7 +13,6 @@ const AvatarGroup = ({
   spacing = SIZE['SMALL'],
   overflowPopover,
   className,
-  hasBorder,
   ...props
 }: PropsWithChildren<AvatarGroupProps>) => {
   const { size, rounded, disabled } = items[0].props;
@@ -28,7 +27,7 @@ const AvatarGroup = ({
       className={clsx('flex', AVATAR_SPACING[spacing], className)}
       {...props}
     >
-      {visibleItems.map((item) => cloneElement(item, { hasBorder }))}
+      {visibleItems}
       {isOverflow && (
         <Avatar
           colorTheme={'gray'}
@@ -42,7 +41,6 @@ const AvatarGroup = ({
           size={size}
           rounded={rounded}
           disabled={disabled}
-          hasBorder={hasBorder}
           showAllLetter
         >
           {`+${overflowCount}`}
diff --git a/src/core/components/AvatarGroup/types/index.ts b/src/core/components/AvatarGroup/types/index.ts
index bf6500e..06baa04 100644
--- a/src/core/components/AvatarGroup/types/index.ts
+++ b/src/core/components/AvatarGroup/types/index.ts
@@ -3,9 +3,7 @@ import { HTMLAttributes, PropsWithChildren, ReactElement } from 'react';
 import { SizeType } from '@/core/components/Label/types';
 import { AvatarProps } from '@/core/components/Avatar/types';
 
-export interface AvatarGroupProps
-  extends HTMLAttributes<HTMLDivElement>,
-    Pick<AvatarProps, 'hasBorder'> {
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
   items: ReactElement[];
   max?: number;
   total?: number;