outline과 full width 버튼

 오늘 만들 버튼은 아래와 같다.

 

 

 

 

 

기존에 우리가 작성했던 Button.js와 Button.scss 그리고 App.js 파일을 vscode에서 열어준다. 오늘 작성할 내용에 이전에 작업했던 코드와 크게 다르지는 않다. 

 

 

 

classNames() 함수의 파라미터에 다음과 같이 {outline, fullwidth}를 추가해준다. 기존에 방식과 달리 { }를 사용한 이유는 outline과 fullwidth로 받아올 값이 Boolean값이기 때문이다. 우리는 이 Boolean값을 이용하여 버튼의 윤곽과 폭을 설정하도록 하겠다. Button.js 파일에 아래와 같이 작성해주면 된다. 

 

 

import React from 'react';
import classNames from 'classnames';
import './Button.scss';


function Button({children, size ,color , outline, fullwidth}){

    return( <button className={classNames('Button', size, color, {outline, fullwidth})}>{children}</button>);

}

Button.defaultPros={
    size: 'medium',
    color: 'blue'
};

export default Button;

 

 

 

이번에는 Button.scss 파일에 윤곽과 폭을 설정해주도록 하겠다. 우리가 오늘 추가로 만들 버튼은 2가지이다. 첫 번째는 배경이 하얗고 윤곽 테두리가 있는 버튼이다. 하지만 마우스를 대면 글자색과 배경색이 반전된다. 그리고 두 번째는 폭이 굉장히 넓은 버튼이다. 이 기능을 구현하려면 기존의 파일에 아래와 같은 내용을 수정해주면 된다. 

 

 

 

$blue: #228be6;// 주석;
$gray: #495057;
$pink: #f06595;

@mixin button-color($color){

    background :$color;

    &:hover{
        background: lighten($color, 10%);
    }

    &:active{
        background: darken($color, 10%);
    }

    &.outline {
            color: $color;
            background: none;
            border: 1px solid $color;
            &:hover {
              background: $color;
              color: white;
            }
          }
}

.Button{

    display: inline-flex;
    color: white;
    font-weight: bold;
    outline: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;


    padding-left: 1rem;
    padding-right: 1rem;

    &.large{
     height: 2.25rem;
    
     font-size: 1rem;
    }

    &.medium{
        height: 1.75rem;
        font-size: 1rem;

    }

    &.small{
        height: 1rem;
        font-size: 0.875rem;
    }

    &.blue {

      @include button-color($blue);

    }

    &.gray {
    @include button-color($gray);
    }

    &.pink {
    @include button-color($pink);
    }
    
    &+& {
        margin-left: 1rem;
    }


    &.fullwidth{
        width: 100%;
        justify-content: center;//display: flex를 사용해야지만 쓸 수 있는 프로퍼티이다. 

        &+&{
            margin-left: 0;
            margin-top: 1rem;
        }
    }

}

 

 

여기서 justify-content는 부모 클래스에서 display: flex;가 있어야지만 쓸 수 있는 props이다. 주의해서 사용하도록 하자. 

 

 

 

그리고 마지막으로 우리가 원하는 버튼이 나올 수 있도록 App.js 파일에서 속성 값을 수정해주면 된다. 

 

import React from 'react';

import './App.scss';
import Button from './Button.js';


function App() {

  return (

    <div className="App">
      <div className="buttons">
        <Button size="large" color="blue" > button</Button>
        <Button size="medium"  color="blue">button</Button>
        <Button size="small"  color="blue"> button</Button>
      </div>
      <div className="buttons">
        <Button size="large"  color="gray"> button</Button>
        <Button size="medium"  color="gray">button</Button>
        <Button size="small"  color="gray"> button</Button>
      </div>
      <div className="buttons">
        <Button size="large"  color="pink"> button</Button>
        <Button size="medium"  color="pink">button</Button>
        <Button size="small"  color="pink"> button</Button>
      </div>
      <div className="buttons"> /*아래부터 새롭게 추가한 부분*/
        <Button size="large"  color="blue" outline={true}> button</Button>
        <Button size="medium"  color="gray" outline={true}>button</Button>
        <Button size="small"  color="pink" outline={true}> button</Button>
      </div>
      <div className="buttons">
        <Button size="large"  color="blue" fullwidth={true}> button</Button>
        <Button size="medium"  color="gray"fullwidth={true} >button</Button>
        <Button size="small"  color="pink" fullwidth={true}> button</Button>
      </div>
    </div>

  );

}

export default App;

 

outline={true}에서 {true}를 생략해도 무방하다. 생략하면 자동으로 true 값이 들어가기 때문이다. fullwidth도 마찬가지로 {true}를 생략해도 된다.

 

크기와 형태, 색상 등을 바꿔가며 직접 구현해보기 바란다. 생각보다 간단하고 예쁜 버튼을 만들 수 있다.