의류 쇼핑몰 21 | 버튼 컴포넌트, 스타일

버튼을 컴포넌트로 만들어 사용해 보자. 

component에 button 폴더와 파일을 만든다. 

 

 

button.jsx 파일 내용을 채운다. 

 

 

Button 탬플릿을 만들고

그 안에 세부적인 변경 사항은 children을 만들어 변경한다. 

버튼 안에 children을 넣는다. 

 

 

 

우리는 3 가지 버튼 타입이 필요하다. 

- default button

- Inverted button

- google sign in button 

 

 

위 3 개의 버튼 타입 class를 만들어 오브젝트에 저장해준다. 

const BUTTON_TYPE_CLASS = {

  google: 'google-sign-in',

  inverted: 'inverted ' 

}

 

BUTTON_TYPE_CLASS를 정하고 buttonType 클래스를 호출한다.

buttonType 클래스에 'google'을 string으로 넣어주면 

scss에 있는 'google-sign-in' 클래스를 적용시킨다

 

 

 

또 버튼 속성을 일일이 적어줄 필요없이 ...otherProps를 써준다. 

예를 들어 sign-up-form에서 type='submit'이 그대로 적용이 된다. 

 

button.jsx 에서는 속성을 일일이 안써주고 ...otherProps 로 퉁친다.

import './button.scss';

const BUTTON_TYPE_CLASSES = {

google: 'google-sign-in',

inverted: 'inverted'

}

const Button = ({ children, buttonType, ...otherProps }) => {

return (

<button className={`button-container ${BUTTON_TYPE_CLASSES[buttonType]} {...otherProps}`}

{...otherProps}>

{children}

</button>

)

};

export default Button;

 

 

button.scss 내용넣기 

.button-container {

min-width: 165px;

width: auto;

height: 50px;

letter-spacing: 0.5px;

line-height: 50px;

padding: 0 35px 0 35px;

font-size: 15px;

background-color: black;

color: white;

text-transform: uppercase;

font-family: 'Open Sans Condensed';

font-weight: bolder;

border: none;

cursor: pointer;

display: flex;

justify-content: center;

&:hover {

background-color: white;

color: black;

border: 1px solid black;

}

&.google-sign-in {

background-color: #4285f4;

color: white;

&:hover {

background-color: #357ae8;

border: none;

}

}

&.inverted {

background-color: white;

color: black;

border: 1px solid black;

&:hover {

background-color: black;

color: white;

border: none;

}

}

}

 

이제 Button을 적용 시켜보자. 

sign-up-form에서 Button을 import 하고 

 

 

Button 컴포넌트를 button 자리에 입력해 준다. 

 

 

buttonType이 default로 설정되어 기본형이 나온다.

 

 

buttonType을 google로 바꿔보았다. 

'google'을 입력하면 BUTTON_TYPE_CLASS에서 'google-sign-in' scss 클래스가 호출된다.

 

 

 

buttonType을 inverted로 바꿔보았다.