24.1.4 Button 컴포넌트 만들기

    먼저 검정색 버튼을 스타일링해 보겠습니다. 이 버튼 컴포넌트는 다양한 곳에서 재사용할 예정입니다. 그러므로 src 디렉터리에 components/common 디렉터리를 생성하고 그 안에 이 컴포넌트를 만들어 주겠습니다.

    components/common/Button.js

    import React from 'react';
    import styled from 'styled-components';
    import palette from '../../lib/styles/palette';
    
    const StyledButton = styled.button`
      border: none;
      border-radius: 4px;
      font-size: 1rem;
      font-weight: bold;
      padding: 0.25rem 1rem;
      color: white;
      outline: none;
      cursor: pointer;
      
      background: ${palette.gray[8]};
      &:hover {
        background: ${palette.gray[6]};
      }
    `;
    
    const Button = props => <StyledButton {...props} />;
    
    export default Button;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.