Skip to content

[Feat] Button 컴포넌트 디자인 구현 #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
jwj0620gcu merged 4 commits into from
Jan 11, 2026
Merged

[Feat] Button 컴포넌트 디자인 구현 #7

jwj0620gcu merged 4 commits into from
Jan 11, 2026

Conversation

@jwj0620gcu
Copy link
Collaborator

@jwj0620gcu jwj0620gcu commented Jan 10, 2026

✨ 주요 변경사항

공통 Button 컴포넌트에 피그마 스타일을 적용해 디자인 토큰(index.css)으로 기반해 버튼 스타일을 만들었습니다.

📝 작업 상세 내용

  • fill / outline variant 구조 설계
  • hover / focus / disabled 상태별 스타일 구현
  • index.css에 정의된 디자인 토큰(CSS 변수) 기반으로 스타일 적용

✅ 체크리스트

  • PR 본문에 Close #번호 추가
  • 불필요한 주석, 디버깅 코드 제거
  • 기능 테스트 및 정상 동작 확인
  • 커밋컨벤션 준수

📸 스크린샷 (선택)

KakaoTalk_Photo_2026-01-10-23-46-01 001 KakaoTalk_Photo_2026-01-10-23-46-01 006 KakaoTalk_Photo_2026-01-10-23-46-01 005 KakaoTalk_Photo_2026-01-10-23-46-01 004 KakaoTalk_Photo_2026-01-10-23-46-01 003 KakaoTalk_Photo_2026-01-10-23-46-01 002

🔍 기타 참고사항

🔗 관련 이슈

@jwj0620gcu jwj0620gcu self-assigned this Jan 10, 2026
@jwj0620gcu jwj0620gcu added the ✨Feature 새로운 기능 label Jan 10, 2026
@github-actions
Copy link

github-actions bot commented Jan 10, 2026

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
❌ Prettier: 포맷 필요
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

@github-actions
Copy link

github-actions bot commented Jan 10, 2026

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

KyeongJooni
KyeongJooni reviewed Jan 10, 2026
View reviewed changes
Copy link
Member

@KyeongJooni KyeongJooni left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코멘트 확인해주세요! 수고하셨습니다! :)

src/shared/ui/Button/Button.variants.ts Outdated
'gap-[--spacing-xxs]',
'rounded-[--radius-l]',
'w-[163px] h-[44px]',
'px-[var(--spacing-xl)] py-[var(--padding-m)]',
Copy link
Member

@KyeongJooni KyeongJooni Jan 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

패딩과 같은 것들은 스페이싱에 사용되는 토큰 값을 사용하는 것보다 추가로 padding 전용 토큰 값을 만들어서 사용하는게 더 좋을 것 같습니다! 😄

@jwj0620gcu jwj0620gcu changed the title feat(button): 디자인 토큰 기반 Button 스타일 적용 [Feat] 디자인 토큰 기반 Button 스타일 적용 Jan 11, 2026
@jwj0620gcu jwj0620gcu changed the title [Feat] 디자인 토큰 기반 Button 스타일 적용 [Feat] Button 컴포넌트 디자인 구현 Jan 11, 2026
@github-actions
Copy link

github-actions bot commented Jan 11, 2026

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

@github-actions
Copy link

github-actions bot commented Jan 11, 2026

PR 검증 결과

✅ TypeScript: 통과
✅ ESLint: 통과
✅ Prettier: 통과
✅ Test: 통과
✅ Build: 성공
Build Size: 2MB

KyeongJooni
KyeongJooni approved these changes Jan 11, 2026
View reviewed changes
Copy link
Member

@KyeongJooni KyeongJooni left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@jwj0620gcu
Copy link
Collaborator Author

jwj0620gcu commented Jan 11, 2026

확인 감사합니다. 머지 진행하겠습니다!

@jwj0620gcu jwj0620gcu merged commit 5880a5e into main Jan 11, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@KyeongJooni KyeongJooni KyeongJooni approved these changes

@YeBeenChoi YeBeenChoi Awaiting requested review from YeBeenChoi

Assignees

@jwj0620gcu jwj0620gcu

Labels

✨Feature 새로운 기능

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Feat] #4 - Button 컴포넌트 제작

3 participants

@jwj0620gcu @KyeongJooni