[TIL] Ant Design 훑어보기 - Button

사내 디자인 시스템을 구축하던 중에 버튼 컴포넌트의 설계를 어떻게 가져가야할지 고민을 하다가
React 에서 2번째로 유명하다고 소개하고 있는 Ant Design 라이브러리 코드를 참조해 보기로 했다.

Base Button Props

https://github.com/ant-design/ant-design/blob/master/components/button/button.tsx#L96-L114

components/button/button.tsx 파일을 열어보면 다음과 같은 interface 를 볼 수 있다.

export interface BaseButtonProps {
  type?: ButtonType;
  icon?: React.ReactNode;
  /**
   * Shape of Button
   *
   * @default default
   */
  shape?: ButtonShape;
  size?: SizeType;
  disabled?: boolean;
  loading?: boolean | { delay?: number };
  prefixCls?: string;
  className?: string;
  ghost?: boolean;
  danger?: boolean;
  block?: boolean;
  children?: React.ReactNode;
}

여러 종류의 Button 들(primary, default, dashed ...)이 기본적으로 모두 가지고 있어야할 props 들을 나열해 놓았다.

prop 이 총 12개 인데, 이것을 보고 '아 사내 버튼 컴포넌트에도 props가 이정도로 늘어나는건 괜찮겠다' 라는 생각이 들었다.
꽤나 규모있는 UI library 에서도 이정도 prop 숫자는 용인하고 있다는 점과 사내에는 스토리북이 있어서 개발자가 언제든지 각 prop의 역할을 확인해 볼 수 있다는 점 때문이었다.

Button classes

https://github.com/ant-design/ant-design/blob/master/components/button/button.tsx#L257-L275

const classes = classNames(
    prefixCls,
    hashId,
    {
      [`${prefixCls}-${shape}`]: shape !== 'default' && shape, // Note: Shape also has `default`
      [`${prefixCls}-${type}`]: type,
      [`${prefixCls}-${sizeCls}`]: sizeCls,
      [`${prefixCls}-icon-only`]: !children && children !== 0 && !!iconType,
      [`${prefixCls}-background-ghost`]: ghost && !isUnBorderedButtonType(type),
      [`${prefixCls}-loading`]: innerLoading,
      [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace && !innerLoading,
      [`${prefixCls}-block`]: block,
      [`${prefixCls}-dangerous`]: !!danger,
      [`${prefixCls}-rtl`]: direction === 'rtl',
      [`${prefixCls}-disabled`]: linkButtonRestProps.href !== undefined && mergedDisabled,
    },
    compactItemClassnames,
    className,
  );

classNames 라는 라이브러리를 사용해서, prop의 조합에 따라 각기 다른 class 를 갖도록 해주었다.
사실 이 부분에 관한 설계를 확인하고자 코드를 훑어본 것인데, 사내 챕터에서 설계했던 방식과 완전히 동일해서 괜시리 뿌듯한 마음이 들었다.

앞으로 사내 디자인 시스템에 다양한 atom, molecule, organism 들을 추가해 나가면서 Ant Design 의 컴포넌트 설계 패턴을 많이 참고해야겠다.