data 정보 수정
우편 내용 복사 기능 우편 코드 정리 유저 인벤토리 아이템 삭제 제거
This commit is contained in:
@@ -5,28 +5,13 @@ import ResetIcon from '../../../assets/img/icon/icon-reset.png';
|
||||
/**
|
||||
* @param {string} text 버튼 내부 텍스트
|
||||
* @param {string} type 버튼 타입 (button, submit)
|
||||
* @param {string} errorMessage 표시할 에러 메시지
|
||||
* @param {() => void} handleClick 버튼 클릭시 실행할 이벤트, Route 기능의 경우 history.push와 같은 함수를 이용합니다.
|
||||
* @param {string} buttonColor 버튼 배경 색상
|
||||
* @param {string} hoverColor 버튼 호버 배경 색상
|
||||
* @param {object} props 폰트 관련 속성
|
||||
*/
|
||||
|
||||
const Button = ({ text, type = 'button', errorMessage, handleClick, theme, size, width, height, bordercolor, disabled, name }) => {
|
||||
const [isShowErrorMessage, setIsShowErrorMessage] = useState(false);
|
||||
|
||||
const handleButtonClick = () => {
|
||||
if (errorMessage) {
|
||||
setIsShowErrorMessage(true);
|
||||
} else {
|
||||
handleClick?.();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
errorMessage || setIsShowErrorMessage(false);
|
||||
}, [errorMessage]);
|
||||
|
||||
const Button = ({ text, type = 'button', handleClick, theme, size, width, height, bordercolor, disabled, name }) => {
|
||||
return (
|
||||
<Wrapper width={width}>
|
||||
<ButtonStyle
|
||||
@@ -42,7 +27,6 @@ const Button = ({ text, type = 'button', errorMessage, handleClick, theme, size,
|
||||
name={name}>
|
||||
{text}
|
||||
</ButtonStyle>
|
||||
{isShowErrorMessage && <ErrorText>{errorMessage}</ErrorText>}
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
@@ -139,13 +123,4 @@ const ButtonStyle = styled.button`
|
||||
`}
|
||||
`;
|
||||
|
||||
const ErrorText = styled.p`
|
||||
color: red;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
line-height: 15px;
|
||||
`;
|
||||
|
||||
export default Button;
|
||||
|
||||
Reference in New Issue
Block a user