공통 컴포넌트에 없는 css속성 추가하기 (두가지 방법)

1. styled로 확장하여 새로운 컴포넌트 생성

import styled from "styled-components";
import CustomButton from "@/components/CustomButton";

const StyledCreateClubButton = styled(CustomButton)`
  font-size: 18px;
  font-weight: bold;
`;

export default function AddClubButton() {
  return (
    <StyledCreateClubButton 
      $width="100%" 
      $height="56px" 
      $backgroundColor="#5296FF" 
      $borderRadius="12px" 
      $border="none"
      onClick={closeModal}
    >
      동아리 생성
    </StyledCreateClubButton>
  );
}

2. style 속성을 사용해 인라인 스타일 적용

<CustomButton
  $width="100%"
  $height="56px"
  $backgroundColor="#5296FF"
  $borderRadius="12px"
  $border="none"
  style={{
    fontSize: "18px",
    fontWeight: "bold",
  }}
  onClick={closeModal}
>
  동아리 생성
</CustomButton>

• 재사용 가능성 필요: 공통 컴포넌트의 변형을 여러 곳에서 반복 사용하려면 첫 번째 방법(styled 확장)을 추천.
• 한 번만 사용: 특정 화면이나 컴포넌트에서 한 번만 스타일을 추가해야 한다면, 두 번째 방법(인라인 스타일)을 사용해도 충분함.