button component 만들기

import styled from "styled-components";

const LoginButton = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.625rem;

  width: 27.1875rem;
  height: 3.6875rem;

  border: 1px solid #333333;
  border-radius: 6.25rem;

  font-family: "Noto Sans KR";
  font-style: normal;
  font-size: 1.125rem;

  cursor: pointer;

  :hover {
    background-color: lightgray;
  }
`;

export default LoginButton;

위의 코드는 next js를 활용했을 때의 코드 입니다. (리액트와 차이는 없습니다)

export default LoginButton 를 활용했기 때문에 컴포넌트를 사용하는 곳에서 바로 onclick과 같은 이벤트를 넣을 수 있습니다. children 또한 그대로 사용이 가능합니다.