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;

---