이승윤

feat: Button 컴포넌트 설정 요소 추가

...@@ -3,18 +3,29 @@ import styled from 'styled-components'; ...@@ -3,18 +3,29 @@ import styled from 'styled-components';
3 import { buttonColorMap } from '../../lib/styles/palette'; 3 import { buttonColorMap } from '../../lib/styles/palette';
4 4
5 const ButtonBlock = styled.button` 5 const ButtonBlock = styled.button`
6 - width: 20%; 6 + width: ${props => props.width || '80px'};
7 + height: ${props => props.height || '40px'};
8 + font-size: ${props => props.fontsize || '15px'};
7 background-color: ${props => buttonColorMap[props.color].background}; 9 background-color: ${props => buttonColorMap[props.color].background};
8 &:hover { 10 &:hover {
9 background-color: ${props => buttonColorMap[props.color].hoverBackground}; 11 background-color: ${props => buttonColorMap[props.color].hoverBackground};
10 } 12 }
11 color: ${props => buttonColorMap[props.color].color}; 13 color: ${props => buttonColorMap[props.color].color};
12 float: ${props => props.float || ''}; 14 float: ${props => props.float || ''};
15 + border-radius: 0.3em;
16 + cursor: pointer;
17 + border: 1px ${props => buttonColorMap[props.color].background};
13 `; 18 `;
14 19
15 -const Button = ({ children, color, float }) => { 20 +const Button = ({ children, color, float, width, height, fontsize }) => {
16 return ( 21 return (
17 - <ButtonBlock color={color} float={float}> 22 + <ButtonBlock
23 + color={color || 'blue'}
24 + float={float}
25 + width={width}
26 + height={height}
27 + fontsize={fontsize}
28 + >
18 {children} 29 {children}
19 </ButtonBlock> 30 </ButtonBlock>
20 ); 31 );
......
1 +{
2 + "systemParams": "darwin-x64-88",
3 + "modulesFolders": [],
4 + "flags": [],
5 + "linkedModules": [],
6 + "topLevelPatterns": [],
7 + "lockfileEntries": {},
8 + "files": [],
9 + "artifacts": {}
10 +}
...\ No newline at end of file ...\ No newline at end of file