Feat/button: Button 컴포넌트 구현

[se030]

🤠 개요

• Closes Feat: Button 컴포넌트 구현 #22
• 드디어 !!! Button 컴포넌트를 구현했습니다.

💫 설명

• 컴포넌트 Props는 아래와 같습니다.

  interface ButtonProps extends DefaultProps<HTMLButtonElement> {
    variant?: ButtonVariant;    // 스타일 종류, default: 'round'
  
    text?: string;              // 텍스트
  
    icon?: IconSource;          // 아이콘, 문자열 또는 react-icons의 JSXconstructor
    iconSize?: CSSProperties['width'];
    iconPosition?: 'left' | 'right';
    iconTranslateY?: CSSProperties['translate'];
  
    href?: string;              // 버튼이 링크로 사용되는 경우를 위한 href
  }
  
  type ButtonVariant =
    | 'round'
    | 'square'
    | 'light'
    | 'round light'
    | 'square light';

• Icon 컴포넌트는 우선 현재 작업에서 사용할 수 있도록 만들었습니다. 뭔가 공부할게 좀 있어서 추후 개선하며 stories 추가할 예정입니다.

  • IconTypography는 별로 사용성 좋은 컴포넌트가 아닌 것 같아 만들지 않았습니다. 나중에 필요하다고 판단되면 Icon 컴포넌트 활용해서 추가할 수 있습니다.
    

📷 스크린샷

2023-03-05.6.51.09.mov

TBD

• 사용할 때 불편함이 있어 pixelToRem 메서드를 살짝 수정했습니다.
  

  • 얘 파일명이 컨벤션에 맞지 않아서 수정이 필요한데 여기저기서 많이 사용하고 있을 것 같아서 회의 때 확인하고 수정할게요!

• type 속성을 추가해야하는데 FlexBox 컴포넌트 Props 관련해서 이슈가 있어서 Fix/defaultprops: DefaultProps에서 css 프로퍼티 제거 #44 PR 머지 이후에 수정하겠습니다.

  • 83b677b 에서 flexboxStyle을 분리해서 작업했어요. 나중에 Flexbox 쪽에 반영하기만 하면 됩니다. 혹시 더 좋은 방법이 있으면 알려주세요!
    

[prayinforrain]

다른 디자인들을 보면 보통 버튼의 상태는 4가지를 정의하더라구요.

default(idle) | hover | active | disabled

active까진 잘 모르겠고 disabled까지는 기본 스타일 정의가 필요해 보여요.

[se030]

다른 디자인들을 보면 보통 버튼의 상태는 4가지를 정의하더라구요.

default(idle) | hover | active | disabled

active까진 잘 모르겠고 disabled까지는 기본 스타일 정의가 필요해 보여요.

아이콘에 정신팔려서 버튼의 본분을 잊었어요 ... 얼른 추가할게요 ㅋㅋㅋㅋㅋ!!!!

0adb412 반영했는데 Props 타입 이슈가 있어서 스토리에는 Flexbox 수정하고 반영할게요.
type, onClick 같은 기본 props를 HTMLAttributes로 받으려고 했는데 FlexboxProps가 HTMLDiv 로 되어있어서 확장이 안되더라고요. as나 withComponent만으로는 해결이 안돼서 스타일 자체를 export해서 사용하는게 좋을 것 같아요.

스타일 적용은 개발자도구로 disabled 넣어서 확인했어요!

[iyu88]

LGTM