커스텀 리유저블 버튼

CustomButton Component


import styled, { DefaultTheme } from 'styled-components';

interface ButtonProps {
  backgroundColor?: string;
  color?: string;
  width?: number | string;
  height?: number | string;
  fontSize?: number | string;
  padding?: number | string;
  borderRadius?: number | string;
  children?: string;
  theme: DefaultTheme;
}

export const CustomButton = styled.button<ButtonProps>`
  border: 0.5px solid gray;
  background-color: ${(props) => props.backgroundColor || 'black'};
  color: ${(props) => props.color || 'white'};
  width: ${(props) => props.width || '80px'};
  height: ${(props) => props.height || '30px'};
  font-size: ${(props) => props.fontSize || '18px'};
  border-radius: ${(props) => props.borderRadius || '5px'};
  transition: all 0.2s ease-in-out;

  &:disabled {
    opacity: 0.5;
  }

  &:hover {
    cursor: pointer;
    scale: 1.02;
  }
`;

버튼을 사용하는 컴포넌트

     <CustomButton

            width="120px"
            height="40px"
            backgroundColor="gray"
            color="white"
          >
            지역
          </CustomButton>