1. 버튼 컴포넌트 제작

모바일 UIX 시스템 기반의 Button을 개발했습니다.

개발한 코드는 NewButton.tsx, NewButton.style.ts에 저장했습니다.

특이사항

• style 이름에 대한 컨벤션을 정하면 좋을 것 같습니다. 일단 저같은 경우 size_M_container, size_L_container 형식으로, [속성_값_적용대상] 형식으로 이름을 지었습니다.
• text style도 별도로 정의되어야 할 것 같습니다(승엽님이 만들어두신 Text에다가..?)
• ExtractToken 유틸리티 타입을 정의해두고, style로부터 사이즈, 타입을 추출하여 Button의 Props에서 활용했습니다.

NewButton.style.ts

type ExtractToken<
  C extends string,
  Key extends string,
> = C extends `${Key}_${infer Digits}_${string}` ? Digits : never;

// 스타일에서 정의된 버튼 사이즈 추출
export type ButtonSize = ExtractToken<keyof typeof styles, 'size'>;

// 스타일에서 정의된 버튼 타입 추출
export type ButtonType = ExtractToken<keyof typeof styles, 'type'>;

NewButton

interface Props extends PressableProps {
  size?: ButtonSize; // 스타일에서 추출된 버튼 사이즈 사용
  type?: ButtonType; // 스타일에서 추출된 버튼 타입 사용
  ...
}

...

혹은 size, type에 대한 공통 타입을 별도 폴더에 정의해두는 것도 좋을 것 같습니다.

• Icon, LoadingSpinner는 껍데기만 만들어 두었습니다.

Pull requests URL : https://bitbucket.org/midasitweb/mobile-uix-system/pull-requests/3