127 lines
2.8 KiB
JavaScript
127 lines
2.8 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
|
|
import styled, { css } from 'styled-components';
|
|
import ResetIcon from '../../../assets/img/icon/icon-reset.png';
|
|
/**
|
|
* @param {string} text 버튼 내부 텍스트
|
|
* @param {string} type 버튼 타입 (button, submit)
|
|
* @param {() => void} handleClick 버튼 클릭시 실행할 이벤트, Route 기능의 경우 history.push와 같은 함수를 이용합니다.
|
|
* @param {string} buttonColor 버튼 배경 색상
|
|
* @param {string} hoverColor 버튼 호버 배경 색상
|
|
* @param {object} props 폰트 관련 속성
|
|
*/
|
|
|
|
const Button = ({ text, type = 'button', handleClick, theme, size, width, height, bordercolor, disabled, name }) => {
|
|
return (
|
|
<Wrapper width={width}>
|
|
<ButtonStyle
|
|
onSubmit={e => e.preventDefault()}
|
|
type={type}
|
|
disabled={disabled}
|
|
onClick={handleClick}
|
|
theme={theme}
|
|
size={size}
|
|
bordercolor={bordercolor}
|
|
width={width}
|
|
height={height}
|
|
name={name}>
|
|
{text}
|
|
</ButtonStyle>
|
|
</Wrapper>
|
|
);
|
|
};
|
|
|
|
const Wrapper = styled.div`
|
|
display: ${props => props.display || 'inline-block'};
|
|
width: ${props => props.width};
|
|
text-align: center;
|
|
`;
|
|
|
|
const sizes = {
|
|
large: {
|
|
width: '100%',
|
|
fontSize: '17px',
|
|
padding: '16px 20px',
|
|
fontWeight: '600',
|
|
height: '50px',
|
|
},
|
|
};
|
|
|
|
const sizeStyles = css`
|
|
${({ size }) => css`
|
|
width: ${sizes[size].width};
|
|
font-size: ${sizes[size].fontSize};
|
|
border-radius: ${sizes[size].borderRadius};
|
|
padding: ${sizes[size].$padding};
|
|
font-weight: ${sizes[size].fontWeight};
|
|
height: ${sizes[size].height};
|
|
`}
|
|
`;
|
|
|
|
const ButtonStyle = styled.button`
|
|
border-radius: 5px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: ${props => props.width || '80px'};
|
|
height: ${props => props.height || '30px'};
|
|
min-width: fit-content;
|
|
color: #2c2c2c;
|
|
font-size: 14px;
|
|
${props => props.size && sizeStyles}
|
|
|
|
${props =>
|
|
props.theme === 'line' &&
|
|
css`
|
|
border: 1px solid #2c2c2c;
|
|
background: transparent;
|
|
`}
|
|
${props =>
|
|
props.theme === 'primary' &&
|
|
css`
|
|
background: #2c2c2c;
|
|
color: #fff;
|
|
`}
|
|
${props =>
|
|
props.theme === 'disable' &&
|
|
css`
|
|
background: #d9d9d9;
|
|
color: #fff;
|
|
`}
|
|
${props =>
|
|
props.theme === 'reset' &&
|
|
css`
|
|
border: 1px solid ${props.bordercolor};
|
|
background: url(${ResetIcon}) 50% 50% no-repeat;
|
|
border: 1px solid #d9d9d9;
|
|
width: 35px;
|
|
height: 35px;
|
|
`}
|
|
${props =>
|
|
props.theme === 'gray' &&
|
|
css`
|
|
background: #b8b8b8;
|
|
color: #fff;
|
|
width: 100px;
|
|
height: 35px;
|
|
`}
|
|
${props =>
|
|
props.theme === 'search' &&
|
|
css`
|
|
background: #2c2c2c;
|
|
color: #fff;
|
|
width: 100px;
|
|
height: 35px;
|
|
`}
|
|
${props =>
|
|
props.theme === 'find' &&
|
|
css`
|
|
background: #8c8c8c;
|
|
color: #fff;
|
|
width: 100px;
|
|
height: 35px;
|
|
`}
|
|
`;
|
|
|
|
export default Button;
|