DESIGN-10 Avatar size 값 변경, hasBorder props 제거

thebbodek · Nov 18, 2024 · 5f21dfa · 5f21dfa
1 parent 486fc97
commit 5f21dfa
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;