Usage
props
width: 버튼의 너비 (기본값:550)
heigth: 버튼의 높이 (기본값:56)
backgroundColor: 버튼의 배경색 (기본값:#FFD039)
fontColor: 버튼의 글자색 (기본값:white)
fontSize: 버튼의 글자 크기 (기본값:16px)
example
- default 버튼
<Button>기본버튼</Button>
- 커스텀 버튼1
<Button width={550} height='56px' backgroundColor={yellow} fontColor={#fff} fontSize={16}> 커스텀버튼 </Button>
- 커스텀 버튼2
const buttonStyle = { width: '550px', height: 56, backgroundColor= 'rgba(233, 53, 80, 1)', fontColor: 'red', fontSize: '16px' } <Button {...buttonStyle}>커스텀버튼</Button>
개선해야할 점
width 값에 따라 border-radius 값이 정해지도록 구현이 되어있습니다.width≥250px→border-radius=16px
width<250px→border-radius=12px
허나
width 값으로 % 와 같은 상대길이 단위가 왔을 때 어떻게 반응적으로 border-radius 값을 정할수 있을까 고민중입니다. 상대길이 단위로 정해진 버튼의 너비값을 styled 컴포넌트의
props 로 넘겨받아서 정하는 방식으로 구현을 생각하고 있는데 어떻게 구현해야할지 고민중입니다.