버튼 CustomButton

태그

Atoms

개발자

적용 코드

<CustomButton
    size="Ms"
    state="activ"
    onClick={}
>안녕하세요</CustomButton>
JavaScript
복사

속성	설명
children	버튼에 들어갈 내용 기존 버튼 처럼 태그 사이에 내용을 적어주면 됩니다. * ellipsis 적용했습니다.
size	L(322px) / M(120px) / MS(90px) / S(56px) * 대소문자 구분하지 않으셔도 됩니다. toUpperCase 처리 완 * 크기별 width 값을 괄호 안에 작성해두겠습니다
state	disabled : 비활성화 상태, activ :
onClick	해당 요소 클릭 이벤트 함수

컴포넌트 구현 코드

export default function CustomButton({ children, onClick, size, state }) {
    let width, height, radius;
    switch (size.toUpperCase()) {
        case 'L':
            width = '322px';
            height = '44px';
            radius = '44px';
            break;
        case 'M':
            width = '120px';
            height = '34px';
            radius = '30px';
            break;
        case 'MS':
            width = '90px';
            height = '32px';
            radius = '32px';
            break;
        case 'S':
            width = '56px';
            height = '28px';
            radius = '28px';
            break;
        default:
            width = 'fit-content';
            height = 'fit-content';
            radius = '30%';
    }

    return (
        <CustomButtonBox onClick={onClick} state={state} width={width} height={height} radius={radius}>
            {children}
        </CustomButtonBox>
    );
}

CustomButton.defaultProps = {
    state: null,
};
JavaScript
복사