Merge pull request #549 from sungik-choi/bug-fix/avatar-group-count-w…

…idth AvatarGroup 컴포넌트 최신화
channel-io · Jun 25, 2021 · 2ceab61 · 2ceab61
2 parents b42f3de + 8399639
commit 2ceab61
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts b/src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts
@@ -5,19 +5,36 @@ import { AVATAR_BORDER_RADIUS_PERCENTAGE, AVATAR_GROUP_DEFAULT_SPACING } from '.
 import { Text, TextProps } from '../../Text'
 import { AvatarSize } from '../Avatar/Avatar.types'
 
+interface AvatarSizeProps {
+  size: AvatarSize
+}
+
 interface AvatarGroupProps {
   spacing: number
 }
 
-interface AvatarEllipsisCountProps extends TextProps, WithInterpolation {
-  size: AvatarSize
+interface AvatarEllipsisCountWrapperProps extends AvatarSizeProps, AvatarGroupProps { }
+
+interface AvatarEllipsisCountProps extends AvatarSizeProps, TextProps, WithInterpolation { }
+
+// TODO: 올바른 페어의 패딩 사이즈를 지정해줘야함
+function getProperEllipsisCountPaddingRight(avatarSize: AvatarSize) {
+  return {
+    [AvatarSize.Size20]: 4,
+    [AvatarSize.Size24]: 5,
+    [AvatarSize.Size30]: 6,
+    [AvatarSize.Size36]: 6,
+    [AvatarSize.Size42]: 6,
+    [AvatarSize.Size48]: 6,
+    [AvatarSize.Size90]: 6,
+    [AvatarSize.Size120]: 6,
+  }[avatarSize]
 }
 
 export const AvatarEllipsisCount = styled(Text)<AvatarEllipsisCountProps>`
   position: relative;
   display: flex;
   align-items: center;
-  width: ${({ size }) => size}px;
   height: ${({ size }) => size}px;
   color: ${({ foundation }) => foundation?.theme?.['txt-black-dark']};
 
@@ -32,14 +49,16 @@ export const StyledAvatarGroup = styled.div<AvatarGroupProps>`
   }
 `
 
-export const AvatarEllipsisWrapper = styled.div<WithInterpolation>`
+export const AvatarEllipsisIconWrapper = styled.div<WithInterpolation>`
   position: relative;
 
   ${({ interpolation }) => interpolation}
 `
 
-export const AvatarEllipsisCountWrapper = styled(AvatarEllipsisWrapper)<AvatarGroupProps>`
-  ${({ spacing }) => css`
+export const AvatarEllipsisCountWrapper = styled.div<AvatarEllipsisCountWrapperProps>`
+  ${({ spacing, size }) => css`
+    padding-right: ${getProperEllipsisCountPaddingRight(size)}px;
+
     && {
       margin-left: ${spacing > AVATAR_GROUP_DEFAULT_SPACING ? spacing : AVATAR_GROUP_DEFAULT_SPACING}px;
     }

diff --git a/src/components/Avatars/AvatarGroup/AvatarGroup.tsx b/src/components/Avatars/AvatarGroup/AvatarGroup.tsx
@@ -11,7 +11,7 @@ import { AVATAR_GROUP_DEFAULT_SPACING } from '../constants/AvatarStyle'
 import AvatarGroupProps, { AvatarGroupEllipsisType } from './AvatarGroup.types'
 import {
   StyledAvatarGroup,
-  AvatarEllipsisWrapper,
+  AvatarEllipsisIconWrapper,
   AvatarEllipsisCountWrapper,
   AvatarEllipsisIcon,
   AvatarEllipsisCount,
@@ -63,13 +63,14 @@ function AvatarGroup({
   onMouseEnterEllipsis = noop,
   onMouseLeaveEllipsis = noop,
   ellipsisInterpolation,
+  className,
   children,
 }: AvatarGroupProps,
 forwardedRef: React.Ref<HTMLDivElement>,
 ) {
   const renderAvatarElement = useCallback((avatar: React.ReactElement<AvatarProps>) => (
     React.cloneElement(avatar, {
-      key: `${avatar.props.name}-${avatar.props.avatarUrl}`,
+      key: avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`,
       size,
       showBorder: avatar.props.showBorder || spacing < 0,
     })
@@ -99,7 +100,7 @@ forwardedRef: React.Ref<HTMLDivElement>,
 
       if (ellipsisType === AvatarGroupEllipsisType.Icon) {
         return (
-          <AvatarEllipsisWrapper
+          <AvatarEllipsisIconWrapper
             key="ellipsis"
             interpolation={ellipsisInterpolation}
             onMouseEnter={onMouseEnterEllipsis}
@@ -109,11 +110,11 @@ forwardedRef: React.Ref<HTMLDivElement>,
               <Icon
                 size={getProperIconSize(size)}
                 name="more"
-                color="bgtxt-absolute-white-normal"
+                color="bgtxt-absolute-white-dark"
               />
             </AvatarEllipsisIcon>
             { renderAvatarElement(avatar) }
-          </AvatarEllipsisWrapper>
+          </AvatarEllipsisIconWrapper>
         )
       }
 
@@ -124,6 +125,7 @@ forwardedRef: React.Ref<HTMLDivElement>,
           >
             { renderAvatarElement(avatar) }
             <AvatarEllipsisCountWrapper
+              size={size}
               spacing={spacing}
               onMouseEnter={onMouseEnterEllipsis}
               onMouseLeave={onMouseLeaveEllipsis}
@@ -158,6 +160,7 @@ forwardedRef: React.Ref<HTMLDivElement>,
 
   return (
     <StyledAvatarGroup
+      className={className}
       data-testid={AVATAR_GROUP_TEST_ID}
       ref={forwardedRef}
       spacing={spacing}