Skip to content

✨ Feat: IconButton 공통 컴포넌트 구현#76

Open
park-moen wants to merge 1 commit intodevelopfrom
feat/icon-only-button-component
Open

✨ Feat: IconButton 공통 컴포넌트 구현#76
park-moen wants to merge 1 commit intodevelopfrom
feat/icon-only-button-component

Conversation

@park-moen
Copy link
Collaborator

@park-moen park-moen commented Feb 26, 2026

이슈 번호

Closes #73

작업 내용 및 테스트 방법

디자인 시스템에 정의된 Icon Only Button을 공통 컴포넌트로 구현했습니다.

  • 컴포넌트 구현: CVA 기반 타입 안전 구현

    • variant: primary, secondary (색상 구분)
    • size: sm, md, lg (크기 지원)
    • disabled 상태 지원
    • React icon 컴포넌트 지원 (Icon props)
  • Storybook 추가: 다양한 상태의 IconButton 검증

    • variant × size 조합 스토리
    • disabled 상태 스토리
    • 사용자 조작 가능한 Default 스토리

To reviewers

  • CVA variant 정의가 디자인 시스템의 primary/secondary 색상과 일관되는지 확인해주세요.
  • pressed, hover 이밴트 시점이 다지인 시스템과 동일한지 확인해주세요.

아이콘만 표시하는 버튼 컴포넌트를 구현했습니다.

- IconButton 컴포넌트 (CVA 기반)
- variant: primary/secondary (색상)
- size: sm/md/lg (크기)
- disabled 상태 지원
- React icon 컴포넌트 지원 (Icon props)
- Storybook 스토리 작성
@park-moen park-moen changed the title ✨ Feat: IconButton 아이콘 버튼 컴포넌트 구현 ✨ Feat: IconButton 공통 컴포넌트 구현 Feb 26, 2026
@aws-amplify-ap-northeast-2
Copy link

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-76.d116jefxyr5bb0.amplifyapp.com

@coderabbitai
Copy link

coderabbitai bot commented Feb 26, 2026

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Free

📥 Commits

Reviewing files that changed from the base of the PR and between 9c8720f and fb7d9be.

📒 Files selected for processing (2)
  • src/shared/components/ui/button/icon-button.stories.tsx
  • src/shared/components/ui/button/icon-button.tsx

개요

새로운 IconButton React 컴포넌트와 그에 따른 Storybook 스토리 파일을 추가합니다. 이 컴포넌트는 두 가지 변형(primary, secondary)과 세 가지 크기(sm, md, lg)를 지원하며, 클래스 기반 스타일링 및 타입 안전성을 포함합니다.

변경 사항

통합 / 파일(들) 요약
IconButton 컴포넌트
src/shared/components/ui/button/icon-button.tsx
두 가지 변형(primary, secondary)과 세 가지 크기(sm, md, lg)를 지원하는 새로운 재사용 가능한 IconButton 컴포넌트 추가. CVA를 활용한 동적 스타일링과 타입 안전성 포함.
IconButton Storybook 스토리
src/shared/components/ui/button/icon-button.stories.tsx
IconButton 컴포넌트에 대한 Storybook 메타 설정 및 Default 스토리 추가. 변형, 크기, 비활성화 상태에 대한 제어 옵션 포함.

코드 리뷰 예상 소요 시간

🎯 2 (Simple) | ⏱️ ~10분

축하 시

🐰 새로운 아이콘 버튼이 탄생했네요,
다양한 모양과 크기로 우아하게 변신하고,
Storybook에서는 더욱 반짝반짝하네요!
타입 안전하고 재사용 가능한 친구,
버튼의 세계에 환영합니다! 🎨✨


Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

Comment @coderabbitai help to get the list of available commands and usage tips.

@park-moen park-moen self-assigned this Feb 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

✨ Feat: IconButton 공통 컴포넌트 구현

1 participant