<Name />, <Avatar />리팩터링

src/components/Common/Avatar/Avatar.stories.tsx

@@ -1,53 +1,88 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { SingleAvatarProps } from '~/components/Common/Avatar/SingleAvatar';
+
+import { userInfo } from '~/mocks/handlers/member/data';
 
 import Avatar from './index';
 
-const meta: Meta<typeof Avatar> = {
+const disableArgs = ['userInfo'];
+const disableArgsTypes = disableArgs.reduce((acc, cur) => {
+  (acc as Record<string, unknown>)[cur] = {
+    table: {
+      disable: true,
+    },
+  };
+  return acc;
+}, {});
+
+const meta: Meta = {
   title: 'Avatar',
   component: Avatar,
+  argTypes: {
+    ...disableArgsTypes,
+  },
 };
 
 export default meta;
 
-type AvatarStory = StoryObj<typeof Avatar>;
+interface AvatarStoryProps {
+  size: SingleAvatarProps['size'];
+  empty: boolean;
+}
+
+type AvatarStory = StoryObj<AvatarStoryProps>;
+
 export const SingleAvatar: AvatarStory = {
   name: 'Avatar',
   args: {
     size: 'sm',
-    major: true,
-    nickName: '전공자',
-    isEmpty: false,
+    empty: false,
+  },
+  render: (args: AvatarStoryProps) => {
+    const { size, empty } = args;
+    return (
+      <Avatar
+        userInfo={empty ? undefined : userInfo.certifiedSsafyUserInfo}
+        size={size}
+      />
+    );
   },
 };
 
-export const AvatarGroup = () => {
-  const data = [
-    {
-      major: true,
-      nickName: '전공자',
-    },
-    {
-      major: false,
-      nickName: '비전공자',
-    },
-    {
-      major: true,
-      nickName: 'Eng',
-    },
-    {
-      major: false,
-      nickName: 'Test',
-    },
-    {
-      major: true,
-      nickName: 'Extra',
-    },
-  ];
-  return (
-    <Avatar.Group>
-      {data.map((d) => (
-        <Avatar {...d} key={d.nickName} />
-      ))}
-    </Avatar.Group>
-  );
+interface AvatarGroupStoryProps {
+  avatarCount: number;
+  maxCount: number;
+  visibleCount: number;
+  size: SingleAvatarProps['size'];
+}
+type AvatarGroupStory = StoryObj<AvatarGroupStoryProps>;
+
+export const AvatarGroup: AvatarGroupStory = {
+  name: 'AvatarGroup',
+  argTypes: {},
+  args: {
+    avatarCount: 2,
+    maxCount: 4,
+    visibleCount: 4,
+    size: 'sm',
+  },
+
+  render: (args: AvatarGroupStoryProps) => {
+    const { avatarCount, maxCount, visibleCount, size } = args;
+    const data = Array(avatarCount)
+      .fill(undefined)
+      .map(() => userInfo.certifiedSsafyUserInfo);
+
+    return (
+      <>
+        <div>
+          <Avatar.Group maxCount={maxCount} visibleCount={visibleCount}>
+            {data.map((d) => (
+              <Avatar size={size} userInfo={d} key={d.nickname} />
+            ))}
+          </Avatar.Group>
+        </div>
+      </>
+    );
+  },
 };

src/components/Common/Avatar/AvatarGroup.tsx

@@ -1,46 +1,56 @@
-import type { ReactNode, ComponentPropsWithoutRef, ReactElement } from 'react';
+import type { SingleAvatarProps } from './SingleAvatar';
+import type { ReactNode, ComponentPropsWithoutRef } from 'react';
 
 import { css } from '@emotion/react';
 import { Children, isValidElement } from 'react';
 
-import { flex, fontCss } from '~/styles/utils';
+import { fontCss, inlineFlex } from '~/styles/utils';
 
 import SingleAvatar from './SingleAvatar';
 
 export interface AvatarGroupProps extends ComponentPropsWithoutRef<'div'> {
   children: ReactNode;
   visibleCount?: number;
+  maxCount: number;
 }
 const AvatarGroup = (props: AvatarGroupProps) => {
-  const { children, visibleCount = 4, ...rest } = props;
+  const { children, maxCount, visibleCount = 4, ...rest } = props;
 
-  const validAvatars = Children.toArray(children).filter(isValidElement);
+  const validAvatars = Children.toArray(children).filter(
+    isValidElement<SingleAvatarProps>
+  );
 
   const visibleAvatars = validAvatars.slice(0, visibleCount);
-
-  const restAvatarsNumber = validAvatars.length - visibleCount;
-  const emptyAvatarsNumber = visibleCount - validAvatars.length;
+  const emptyAvatarsCount = visibleCount - validAvatars.length;
+  const restAvatarsCount = maxCount - visibleCount;
+  const avatarSize = validAvatars[0].props?.size || 'sm';
 
   return (
     <div css={selfCss} {...rest}>
       {visibleAvatars}
-      {Array.from({ length: emptyAvatarsNumber }).map((_, i) => (
-        <SingleAvatar isEmpty key={i} />
+      {Array.from({ length: emptyAvatarsCount }).map((_, i) => (
+        <SingleAvatar key={i} size={avatarSize} />
       ))}
-      {restAvatarsNumber > 0 && <span css={textCss}>+{restAvatarsNumber}</span>}
+      {restAvatarsCount > 0 && (
+        <span css={[textCss, textSizeCss[avatarSize]]}>
+          +{restAvatarsCount}
+        </span>
+      )}
     </div>
   );
 };
 
 const selfCss = css(
-  {
-    '> div': {
-      marginLeft: -2,
-    },
-  },
-  flex('center', 'center', 'row')
+  { '> div': { marginLeft: -4 } },
+  inlineFlex('center', 'center', 'row'),
+  fontCss.family.auto
 );
 
-const textCss = css(fontCss.style.R12);
+const textCss = css({ marginLeft: 4 });
+const textSizeCss = {
+  sm: css(fontCss.style.B12),
+  md: css(fontCss.style.B14),
+  lg: css(fontCss.style.B28),
+};
 
 export default AvatarGroup;

src/components/Common/Avatar/SingleAvatar.tsx

@@ -1,91 +1,78 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { ComponentPropsWithoutRef } from 'react';
+import type { UserInfo } from '~/services/member';
 
 import { css } from '@emotion/react';
 import React from 'react';
 
-import { flex, fontCss } from '~/styles/utils';
+import { flex, fontCss, palettes } from '~/styles/utils';
 
-export interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
+export interface SingleAvatarProps extends ComponentPropsWithoutRef<'div'> {
   size?: AvatarSize;
-  major?: boolean;
-  nickName?: string;
-  isEmpty?: boolean;
+  userInfo?: UserInfo;
 }
 type AvatarSize = 'sm' | 'md' | 'lg';
-type BackgroundColor = 'major' | 'nonMajor';
 
-const SingleAvatar = (props: AvatarProps) => {
-  const {
-    major = false,
-    size = 'sm',
-    nickName = '샆사운드',
-    isEmpty = false,
-    ...rest
-  } = props;
-  // 현재 설계상 major라는 이름으로 전공여부를 가지고오게되어 그대로 사용하기 위해 major라는 명칭을 사용하게 됨.
+const SingleAvatar = (props: SingleAvatarProps) => {
+  const { size = 'sm', userInfo, ...restProps } = props;
 
   return (
     <div
       css={[
         selfCss,
         sizeCss[size],
-        backgroundCss[major ? 'major' : 'nonMajor'],
-        isEmpty && emptyCss,
+        userInfo?.isMajor && majorCss,
+        !userInfo && emptyCss,
       ]}
-      {...rest}
+      {...restProps}
     >
-      {isEmpty || (
-        <span css={[[textCss[size]], textCapitalizeCss, fontStyleCss]}>
-          {getFirstText(nickName)}
+      {userInfo && (
+        <span css={[textCss[size], textCapitalizeCss, lineHeightCss]}>
+          {getFirstText(userInfo.nickname)}
         </span>
       )}
     </div>
   );
 };
 
-const getFirstText = (str: string) => str.at(0);
+const getFirstText = (str: string) => str.at(0) || '';
 
 const selfCss = css(
   {
     borderRadius: 100,
-    color: '#000',
-    border: '0.6px solid #fff',
+    color: palettes.black,
+    border: `0.6px solid ${palettes.white}`,
+    backgroundColor: palettes.nonMajor,
   },
-  flex('center', 'center', 'row')
+  flex('center', 'center', 'row'),
+  fontCss.family.auto
 );
 
-const fontStyleCss = fontCss.family.manrope;
-
 const sizeCss: Record<AvatarSize, SerializedStyles> = {
-  sm: css({ width: 12, height: 12 }),
-  md: css({ width: 18, height: 18 }),
+  sm: css({ width: 16, height: 16 }),
+  md: css({ width: 20, height: 20 }),
   lg: css({ width: 40, height: 40 }),
 };
 
+const lineHeightCss = css({ lineHeight: 1 });
+
 const textCss: Record<AvatarSize, SerializedStyles> = {
   sm: css(fontCss.style.B12),
   md: css(fontCss.style.B14),
-  lg: css(fontCss.style.B24),
+  lg: css(fontCss.style.B28),
 };
 
 const textCapitalizeCss = css({
   textTransform: 'capitalize',
 });
 
-const backgroundCss: Record<BackgroundColor, SerializedStyles> = {
-  major: css({
-    backgroundColor: '#71E498',
-    // todo 팔레트로 이관
-  }),
-  nonMajor: css({
-    backgroundColor: '#FFBF75',
-  }),
-};
+const majorCss = css({
+  backgroundColor: palettes.major,
+});
 
 const emptyCss = css({
-  backgroundColor: '#F0F0F0',
-  border: '1px dotted #292929',
+  backgroundColor: palettes.white,
+  border: `1px dotted ${palettes.grey0}`,
 });
 
 export default SingleAvatar;

src/components/Common/SsafyIcon/Track.stories.tsx

@@ -16,11 +16,6 @@ type TrackIconStory = StoryObj<typeof Track>;
 export const TrackIcon: TrackIconStory = {
   args: { name: SsafyTrack.MOBILE, size: TrackSize.SM1 },
   argTypes: {
-    label: {
-      table: {
-        disable: true,
-      },
-    },
     style: {
       table: {
         disable: true,
@@ -43,7 +38,7 @@ export const AllTrackIcons: TrackIconStory = {
           <div key={track} style={{ display: 'flex', gap: 10 }}>
             {sizes.map((size) => (
               <div key={size}>
-                <Track name={track} size={size} theme={'primary'}/>
+                <Track name={track} size={size} theme={'primary'} />
               </div>
             ))}
           </div>

src/components/Common/SsafyIcon/Track.tsx

@@ -12,36 +12,27 @@ import PythonTrack from '~/assets/images/track-python.svg';
 import Uncertified from '~/assets/images/track-uncertified.svg';
 import { SsafyTrack } from '~/services/member/utils';
 import { inlineFlex } from '~/styles/utils';
+import { defaultify } from '~/utils';
 
-// MajorType을 ~/services/member 에서 가져오면 참조 오류가 발생하는데 이유를 잘 모르겠습니다.
+// SsafyTrack을 ~/services/member 에서 가져오면 참조 오류가 발생하는데 이유를 잘 모르겠습니다.
 // import 구문 옆에다 주석 달면 린트 오류가 발생해서 여기 적어둡니다.
 
 export interface TrackProps<Track extends keyof typeof tracks> {
-  /**
-   * API 명세에 `null`이 들어올 수 있다고 되어있는데
-   * 만약 그렇다면 `fetcher`에서 `null`을 `undefined`로 변환할 예정입니다.
-   */
   name?: Track;
-  label?: string;
   size?: TrackSize;
   style?: CSSProperties;
   theme?: Track extends 'fallback' | undefined ? FallbackTheme : undefined;
 }
 
 const Track = <T extends keyof typeof tracks>(props: TrackProps<T>) => {
-  const {
-    name = 'fallback',
-    label = name,
-    size = TrackSize.SM1,
-    style = {},
-    theme,
-  } = props;
+  const { name = 'fallback', size = TrackSize.SM1, style = {}, theme } = props;
+  const safeName = defaultify(name, [null]).to('fallback') as NonNullable<T>;
 
-  const TrackComponent = tracks[name];
+  const TrackComponent = tracks[safeName];
 
   return (
     <div css={selfCss}>
-      <AccessibleIcon label={label}>
+      <AccessibleIcon label={safeName}>
         <TrackComponent style={{ height: size, ...style }} theme={theme} />
       </AccessibleIcon>
     </div>