Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/button: Button 컴포넌트 구현 #47

Merged
merged 18 commits into from
Mar 6, 2023
Merged

Feat/button: Button 컴포넌트 구현 #47

merged 18 commits into from
Mar 6, 2023

Conversation

se030
Copy link
Contributor

@se030 se030 commented Mar 5, 2023

🤠 개요

image

💫 설명

  • 컴포넌트 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 컴포넌트 활용해서 추가할 수 있습니다.
      image

📷 스크린샷

2023-03-05.6.51.09.mov

TBD

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

    • 얘 파일명이 컨벤션에 맞지 않아서 수정이 필요한데 여기저기서 많이 사용하고 있을 것 같아서 회의 때 확인하고 수정할게요!
  • type 속성을 추가해야하는데 FlexBox 컴포넌트 Props 관련해서 이슈가 있어서 Fix/defaultprops: DefaultProps에서 css 프로퍼티 제거 #44 PR 머지 이후에 수정하겠습니다.

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

- 사용처에서 px이 포함된 문자열인지 알 수 없는 경우가 있어(e.g. CSSProperties['width']) 파라미터 타입을 가드로 대체
- border 1px 등을 사용하고 싶은 경우 0rem을 반환함
- 그 외에도 0.25rem 단위로는 정교한 스타일링을 할 수 없어 2px 단위로 올림 처리하도록 변경
- 용례는 abbb6cc Button 컴포넌트 참고
- react-icons 패키지의 아이콘 단독으로 사용할 때는 감쌀 필요 없음
@se030 se030 added the ✨ feat 기능 구현 label Mar 5, 2023
@se030 se030 self-assigned this Mar 5, 2023
@prayinforrain
Copy link
Contributor

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

default(idle) | hover | active | disabled

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

@se030
Copy link
Contributor Author

se030 commented Mar 5, 2023

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

default(idle) | hover | active | disabled

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

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

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

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

se030 added 10 commits March 5, 2023 19:54
- flexboxStyle 분리, 추후 Flexbox 컴포넌트에 반영 예정
- 레이아웃 컴포넌트는 사용되는 태그의 HTML 기본 속성들을 사용할 수 있어야 함(이벤트 핸들러, button - type, disabled, a - href 등)
- Flexbox 컴포넌트와 as, withComponent만으로 타입 확장되게 구현하기가 어려움
Copy link
Member

@iyu88 iyu88 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

src/components/Button/index.tsx Outdated Show resolved Hide resolved
src/utils/pixelToRem.ts Show resolved Hide resolved
src/components/Button/Button.stories.tsx Show resolved Hide resolved
@se030 se030 merged commit 50987f2 into main Mar 6, 2023
@se030 se030 deleted the feat/button branch March 6, 2023 06:30
iyu88 pushed a commit that referenced this pull request Mar 6, 2023
* fix: pixelToRem 메서드 개선

- 사용처에서 px이 포함된 문자열인지 알 수 없는 경우가 있어(e.g. CSSProperties['width']) 파라미터 타입을 가드로 대체
- border 1px 등을 사용하고 싶은 경우 0rem을 반환함
- 그 외에도 0.25rem 단위로는 정교한 스타일링을 할 수 없어 2px 단위로 올림 처리하도록 변경

* feat: Button 컴포넌트 구현

* feat: Icon 컴포넌트 구현

- 용례는 abbb6cc Button 컴포넌트 참고
- react-icons 패키지의 아이콘 단독으로 사용할 때는 감쌀 필요 없음

* feat: style='square' 스타일 수정 및 스토리 추가

* fix: 닫는 중괄호 추가

* feat: disabled 스타일링 추가

* fix: 기본 속성과 중복되는 style 네이밍 variant로 변경

* feat: flexboxStyle 추가

- flexboxStyle 분리, 추후 Flexbox 컴포넌트에 반영 예정
- 레이아웃 컴포넌트는 사용되는 태그의 HTML 기본 속성들을 사용할 수 있어야 함(이벤트 핸들러, button - type, disabled, a - href 등)
- Flexbox 컴포넌트와 as, withComponent만으로 타입 확장되게 구현하기가 어려움

* feat: 버튼이 링크로 사용되는 케이스 추가

* fix: 필요없는 eslint-disable-next-line 제거

* fix: 변수명 오타 수정

* feat: a 태그 text-decoration none으로 캐스캐이드

* refactor: ButtonVariant 타입 정의 수정

* feat: disabled props 및 스토리 추가

* fix: 리뷰 반영

- getBorderRadius 가독성 개선
- 불필요한 pixelToRem 제거

* refactor: flexboxStyle Flexbox에 반영

* fix: 스타일 수정
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ feat 기능 구현
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feat: Button 컴포넌트 구현
4 participants