[#24] - Button 공통 컴포넌트 생성

[minh0518]

📌 연관된 이슈 번호

close #24

🌱 주요 변경 사항

Button 공통 컴포넌트를 생성합니다.

현재 디자인 시스템의 부재로, 작성된 테마의 스타일 내용은 임시로 작성된 것입니다.

전체 로직

Button 컴포넌트를 렌더링 전용 UI로 두고 최소한의 스타일만 가지도록 합니다. 그리고 각 컴포넌트가 버튼에 필요한 스타일 및 로직들을 계산해서 Button 컴포넌트에 내려줍니다.

• <BaseButton>
  가장 기본적인 버튼 스타일을 가지며 외부 props로 주입받은 스타일 및 기능을 최종적으로 렌더링

• <Button>
  현재 프로젝트의 디자인 시스템을 따르는 버튼을 생성

• <KaKaoAuthButton>,<GoogleAuthButton>, ...
  디자인 시스템과 별도로, 특정 목적을 위해 고정된 스타일을 가지는 버튼을 생성

추상화 레이어를 나눈 이유

초기에는 아래와 같이 하나의 컴포넌트에서 모든 버튼에 대해 처리를 하는 방향으로 진행했습니다.

그러나 이는 예상치 못한 복잡성을 증가할 수 있다고 생각했습니다.

• 만약 기존 디자인 시스템 외의 버튼들 (특정 목적을 가진 1회성 버튼 요소 or 예상치 못한 디자인 등)이 지속적으로 생기게 될 경우, 각기 다른 요구사항들을 1개의 공통 컴포넌트에서 모두 일괄적으로 처리해야 합니다.
  
  그러나, 이처럼 하나의 공통 컴포넌트가 많은 역할을 수행하게 될 수록 사용하는 쪽에서는 props를 지속적으로 구체화 해야 하기 때문에 오히려 복잡성 증가로 공통 컴포넌트라는 본래의 목적을 퇴색하게 됩니다.

• 그러므로 공통 컴포넌트의 책임과 역할을 명확히 하고 그 경계를 벗어나지 않는 선에서 확장성을 확보하기 위해

  • 프로젝트에 전반적으로 사용 될 디자인 시스템을 따르는 컴포넌트 <Button>

  • 디자인 시스템과 별개로, 독자적인 형태의 버튼을 생산하는 컴포넌트**<KaKaoAuthButton>,<GoogleAuthButton>, ...

    위 2개의 컴포넌트를 별도로 선언하고, 이들은 각각 UI로직과 스타일을 계산하는 방식으로 추상화를 분리했습니다.

사용 예시

📸 스크린샷 (선택)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
onepiece-fe	⬜️ Ignored (Inspect)	Visit Preview		Feb 15, 2025 5:39am

[Limgabi]

🚀 Storybook Deploy : https://67a21b40b49ad2ad0c08c418-enuztdknel.chromatic.com/

[Limgabi]

🚀 Storybook Deploy : https://67a21b40b49ad2ad0c08c418-ecndyjvcqu.chromatic.com/

[Limgabi]

🚀 Storybook Deploy : https://67a21b40b49ad2ad0c08c418-qwbuiotcgc.chromatic.com/

[Limgabi]

🚀 Storybook Deploy : https://67a21b40b49ad2ad0c08c418-bkllwrgnnn.chromatic.com/