refactor: Button 컴포넌트 스펙을 Figma 명세에 맞춰 수정#14
Conversation
Summary of ChangesHello @RookieAND, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 디자인 시스템 명세 변경에 따라 Button 컴포넌트를 리팩토링하고 Chip 컴포넌트의 폴더명을 일관성 있게 수정합니다. Button 컴포넌트는 Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Code Review
이번 Pull Request는 Figma 디자인 명세에 맞춰 Button 컴포넌트의 스펙을 성공적으로 업데이트하고, Chip 컴포넌트의 폴더명을 일관성 있게 변경했습니다. color prop이 variant로 변경되고 shape prop이 추가되어 Button 컴포넌트의 유연성이 향상되었습니다. 또한, 각 variant의 색상 스펙이 Figma 명세에 따라 정확하게 반영되었습니다. Chip 컴포넌트의 폴더명 변경은 전반적인 프로젝트의 네이밍 컨벤션 일관성을 높이는 좋은 개선입니다. 전반적으로 변경 사항들이 잘 적용되었으며, 코드 가독성도 좋습니다.
youngminss
left a comment
There was a problem hiding this comment.
loading 일 때 spinner 처리는 loading 상태에 따라 외부에서 children 으로 넣어주는 방식을 생각한걸까 ?
youngminss
left a comment
There was a problem hiding this comment.
variants 에 따라 ds 에 맞춰서 셋팅한거면 className 은 닫아놓자 !
|
Co-Authored-By: Claude <noreply@anthropic.com>
- color prop을 variant로 변경 (primary, secondary, tertiary) - shape prop 추가 (rounded, pill) - Primary: gray-900 배경으로 변경 - Secondary: primary-500 배경으로 변경 - Tertiary: gray-100 배경으로 변경 - Loading 상태는 외부에서 children으로 제어하도록 구조 변경 - 예시 페이지를 새로운 명세에 맞춰 업데이트 Co-Authored-By: Claude <noreply@anthropic.com>
- disabled 상태 클래스 순서 및 구조 개선 - tertiary variant의 잘못된 토큰 수정 (text-disabled, palette-gray-600) - 모든 variant에 일관된 disabled 상태 구조 적용 - disabled + hover 상태 명시적으로 정의하여 우선순위 문제 해결 Co-Authored-By: Claude <noreply@anthropic.com>
- palette 직접 참조를 button semantic color로 변경 - selected: false는 button-tertiary 스타일 적용 - selected: true는 button-primary 스타일 적용 - disabled 상태를 Button 컴포넌트와 동일한 구조로 개선 - 간격 토큰을 명시적인 값으로 변경 (px-4 py-2) Co-Authored-By: Claude <noreply@anthropic.com>
deb506a to
f3431ee
Compare
- Button에 width variant (full, fit) 추가 - Button, Chip 컴포넌트에서 className prop 제거 - 버튼 페이지 예제에서 width prop 사용으로 변경 Co-Authored-By: Claude <noreply@anthropic.com>
* refactor: Chip 컴포넌트 폴더명을 소문자로 변경 Co-Authored-By: Claude <noreply@anthropic.com> * refactor: Button 컴포넌트 Figma 명세에 맞춰 수정 - color prop을 variant로 변경 (primary, secondary, tertiary) - shape prop 추가 (rounded, pill) - Primary: gray-900 배경으로 변경 - Secondary: primary-500 배경으로 변경 - Tertiary: gray-100 배경으로 변경 - Loading 상태는 외부에서 children으로 제어하도록 구조 변경 - 예시 페이지를 새로운 명세에 맞춰 업데이트 Co-Authored-By: Claude <noreply@anthropic.com> * chore: prettier 포맷에 맞지 않았던 코드 수정 * refactor: Button 컴포넌트 disabled 상태 스타일 수정 - disabled 상태 클래스 순서 및 구조 개선 - tertiary variant의 잘못된 토큰 수정 (text-disabled, palette-gray-600) - 모든 variant에 일관된 disabled 상태 구조 적용 - disabled + hover 상태 명시적으로 정의하여 우선순위 문제 해결 Co-Authored-By: Claude <noreply@anthropic.com> * refactor: Chip 컴포넌트를 button semantic color 기반으로 수정 - palette 직접 참조를 button semantic color로 변경 - selected: false는 button-tertiary 스타일 적용 - selected: true는 button-primary 스타일 적용 - disabled 상태를 Button 컴포넌트와 동일한 구조로 개선 - 간격 토큰을 명시적인 값으로 변경 (px-4 py-2) Co-Authored-By: Claude <noreply@anthropic.com> * feat: button 및 chip 에 ref 를 등록할 수 있도록 확장 * feat: Button width variant 추가 및 className prop 제거 - Button에 width variant (full, fit) 추가 - Button, Chip 컴포넌트에서 className prop 제거 - 버튼 페이지 예제에서 width prop 사용으로 변경 Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
## 1.0.0-beta.1 (2026-02-16) ### Features * [#70](#70) ([#72](#72)) ([b676e0e](b676e0e)) * [QA] 모임 생성 완료, 결과페이지 페이지 UI 개선 ([#66](#66)) ([f10225d](f10225d)) * [QA] 서비스 전체 배경색 및 Layout Root 그림자 효과 적용 ([#59](#59)) ([384b56f](384b56f)) * api client 모듈 생성 ([#37](#37)) ([a37b0a9](a37b0a9)), closes [#38](#38) [#39](#39) [#40](#40) [#41](#41) * Button 컴포넌트 추가 ([#11](#11)) ([83b7607](83b7607)) * Chip Component 추가 ([#9](#9)) ([e9d8b8f](e9d8b8f)) * Color theme 초기화 ([#2](#2)) ([97f1dcc](97f1dcc)) * DotsLoader 컴포넌트 추가 ([#48](#48)) ([cfe4582](cfe4582)), closes [#49](#49) * GA4 이벤트 트래킹 통합 ([#70](#70)) ([0c1b9fa](0c1b9fa)) * GTM(Google Tag Manager) 통합을 위한 Analytics 컴포넌트 추가 ([#57](#57)) ([87a6ded](87a6ded)) * IconBase 컴포넌트 및 아이콘 컴포넌트들 구축 ([#13](#13)) ([8557b75](8557b75)), closes [#FFCD00](https://github.com/Nexters/yogieat/issues/FFCD00) [#FFAD00](https://github.com/Nexters/yogieat/issues/FFAD00) [#15](#15) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c) * InputField 컴포넌트 추가 ([#16](#16)) ([99b8aa2](99b8aa2)) * Landing / Opinion Form 페이지 분리 ([#61](#61)) ([0f11e71](0f11e71)) * Layout 컴포넌트 추가 ([#10](#10)) ([9efce6f](9efce6f)) * Semantic Color Token 추가 ([#19](#19)) ([fcaedaf](fcaedaf)) * Spacing utility 클래스 초기화 ([#8](#8)) ([2e38d7a](2e38d7a)) * Tag 컴포넌트 추가 ([#20](#20)) ([f69dd05](f69dd05)) * Toast 컴포넌트 추가 ([#21](#21)) ([76e84b0](76e84b0)) * 모임 생성 퍼널 Step 1 (인원 선택) 구현 ([#23](#23)) ([7fc01a1](7fc01a1)), closes [#24](#24) [#1f2933](https://github.com/Nexters/yogieat/issues/1f2933) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c) [#25](#25) [#26](#26) [#27](#27) [#28](#28) [#29](#29) [#30](#30) [#31](#31) [#32](#32) [#34](#34) * 프로젝트 기초 세팅 진행 ([aa0ec20](aa0ec20)) * 프로젝트 폴더 구조 반영 ([e54962d](e54962d)) ### Bug Fixes * 1순위를 1개라도 선택했다면 바로 CTA 가 활성화 되도록 수정 ([#60](#60)) ([e5758b4](e5758b4)) * 1차 MVP 배포 이전 최종 QA 항목 반영 ([#58](#58)) ([6574231](6574231)) * Button/Chip type 속성 추가 및 의견 수렴 UX 개선 ([#50](#50)) ([7e86e4a](7e86e4a)), closes [#51](#51) [#52](#52) [#53](#53) [#54](#54) [#55](#55) [#56](#56) * cat 에서 echo 로 env.production 파일을 생성하도록 수정 ([f15307d](f15307d)) * CI/CD health check 타이밍 개선 및 수동 배포 기능 추가 ([54fd2b8](54fd2b8)) * Docker build-args로 환경 변수 전달 방식 변경 ([#77](#77)) ([e5fa0b9](e5fa0b9)) * Docker 이미지 강제 pull 및 컨테이너 재생성 ([#79](#79)) ([c253ec1](c253ec1)) * Health check 전략 개선 및 curl 기반으로 변경 ([765d3da](765d3da)) * nginx http2 deprecated 경고 해결 ([2fd9c75](2fd9c75)) * PendingView 내에서 ShareButton 을 렌더링 하지 않도록 수정 ([7bc3e12](7bc3e12)) * 결과 페이지 맛집 이미지 기본 placeholder, 공유하기 toast 미노출 ([#68](#68)) ([3c80844](3c80844)) * 동시 배포 방지를 위한 concurrency 설정 추가 ([e9bfd52](e9bfd52)) * 모임 생성 퍼널 필드 상태 초기화 버그 수정 ([#64](#64)) ([3934066](3934066)), closes [#65](#65) * 모임 생성 폼 필드명 변경 (meetingDate → scheduledDate, location → region) ([#35](#35)) ([e90beed](e90beed)) * 배포 워크플로우에 GA4 환경 변수 추가 ([#73](#73)) ([835ae1f](835ae1f)) * 의견 수렴 페이지 내 UI 수정 및 인터렉션 개선 ([#36](#36)) ([a74f7da](a74f7da)) * 의견 수합 Form Capacity 폴링 제거 및 ErrorCode 타입 시스템 추가 ([#67](#67)) ([d55dba1](d55dba1)) * 인원 수 선택 Grid 및 의견 수렴 QA 수정 사항 반영 ([f01626e](f01626e)) * 테스트 용으로 추가했던 페이지 제거 및 icons 폴더 추가 ([4116025](4116025)) ### Code Refactoring * Button 컴포넌트 스펙을 Figma 명세에 맞춰 수정 ([#14](#14)) ([2e27f17](2e27f17)) ### Build System * Docker 빌드 시 NEXT_PUBLIC 환경변수 주입 프로세스 추가 ([#47](#47)) ([88ba163](88ba163)) ### Documentation * 프로젝트 개발 가이드 문서 추가 ([#84](#84)) ([4313145](4313145))
## 1.0.0 (2026-02-16) ### Features * [#70](#70) ([#72](#72)) ([b676e0e](b676e0e)) * [QA] 모임 생성 완료, 결과페이지 페이지 UI 개선 ([#66](#66)) ([f10225d](f10225d)) * [QA] 서비스 전체 배경색 및 Layout Root 그림자 효과 적용 ([#59](#59)) ([384b56f](384b56f)) * analytics 개선 및 네이버 서치 어드바이저 등록 ([#88](#88)) ([4372aa5](4372aa5)) * api client 모듈 생성 ([#37](#37)) ([a37b0a9](a37b0a9)), closes [#38](#38) [#39](#39) [#40](#40) [#41](#41) * Button 컴포넌트 추가 ([#11](#11)) ([83b7607](83b7607)) * Chip Component 추가 ([#9](#9)) ([e9d8b8f](e9d8b8f)) * Color theme 초기화 ([#2](#2)) ([97f1dcc](97f1dcc)) * DotsLoader 컴포넌트 추가 ([#48](#48)) ([cfe4582](cfe4582)), closes [#49](#49) * GA4 이벤트 트래킹 통합 ([#70](#70)) ([0c1b9fa](0c1b9fa)) * GTM(Google Tag Manager) 통합을 위한 Analytics 컴포넌트 추가 ([#57](#57)) ([87a6ded](87a6ded)) * IconBase 컴포넌트 및 아이콘 컴포넌트들 구축 ([#13](#13)) ([8557b75](8557b75)), closes [#FFCD00](https://github.com/Nexters/yogieat/issues/FFCD00) [#FFAD00](https://github.com/Nexters/yogieat/issues/FFAD00) [#15](#15) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c) * InputField 컴포넌트 추가 ([#16](#16)) ([99b8aa2](99b8aa2)) * Landing / Opinion Form 페이지 분리 ([#61](#61)) ([0f11e71](0f11e71)) * Layout 컴포넌트 추가 ([#10](#10)) ([9efce6f](9efce6f)) * Semantic Color Token 추가 ([#19](#19)) ([fcaedaf](fcaedaf)) * Spacing utility 클래스 초기화 ([#8](#8)) ([2e38d7a](2e38d7a)) * Tag 컴포넌트 추가 ([#20](#20)) ([f69dd05](f69dd05)) * Toast 컴포넌트 추가 ([#21](#21)) ([76e84b0](76e84b0)) * 모임 생성 완료 페이지 UI 리뉴얼 ([#89](#89)) ([17a3fc1](17a3fc1)) * 모임 생성 퍼널 Step 1 (인원 선택) 구현 ([#23](#23)) ([7fc01a1](7fc01a1)), closes [#24](#24) [#1f2933](https://github.com/Nexters/yogieat/issues/1f2933) [#ff5a3c](https://github.com/Nexters/yogieat/issues/ff5a3c) [#25](#25) [#26](#26) [#27](#27) [#28](#28) [#29](#29) [#30](#30) [#31](#31) [#32](#32) [#34](#34) * 프로젝트 기초 세팅 진행 ([aa0ec20](aa0ec20)) * 프로젝트 폴더 구조 반영 ([e54962d](e54962d)) ### Bug Fixes * 1순위를 1개라도 선택했다면 바로 CTA 가 활성화 되도록 수정 ([#60](#60)) ([e5758b4](e5758b4)) * 1차 MVP 배포 이전 최종 QA 항목 반영 ([#58](#58)) ([6574231](6574231)) * Button/Chip type 속성 추가 및 의견 수렴 UX 개선 ([#50](#50)) ([7e86e4a](7e86e4a)), closes [#51](#51) [#52](#52) [#53](#53) [#54](#54) [#55](#55) [#56](#56) * cat 에서 echo 로 env.production 파일을 생성하도록 수정 ([f15307d](f15307d)) * CI/CD health check 타이밍 개선 및 수동 배포 기능 추가 ([54fd2b8](54fd2b8)) * Docker build-args로 환경 변수 전달 방식 변경 ([#77](#77)) ([e5fa0b9](e5fa0b9)) * Docker 이미지 강제 pull 및 컨테이너 재생성 ([#79](#79)) ([c253ec1](c253ec1)) * Health check 전략 개선 및 curl 기반으로 변경 ([765d3da](765d3da)) * nginx http2 deprecated 경고 해결 ([2fd9c75](2fd9c75)) * PendingView 내에서 ShareButton 을 렌더링 하지 않도록 수정 ([7bc3e12](7bc3e12)) * 결과 페이지 맛집 이미지 기본 placeholder, 공유하기 toast 미노출 ([#68](#68)) ([3c80844](3c80844)) * 동시 배포 방지를 위한 concurrency 설정 추가 ([e9bfd52](e9bfd52)) * 모임 생성 퍼널 필드 상태 초기화 버그 수정 ([#64](#64)) ([3934066](3934066)), closes [#65](#65) * 모임 생성 폼 필드명 변경 (meetingDate → scheduledDate, location → region) ([#35](#35)) ([e90beed](e90beed)) * 배포 워크플로우에 GA4 환경 변수 추가 ([#73](#73)) ([835ae1f](835ae1f)) * 의견 수렴 페이지 내 UI 수정 및 인터렉션 개선 ([#36](#36)) ([a74f7da](a74f7da)) * 의견 수합 Form Capacity 폴링 제거 및 ErrorCode 타입 시스템 추가 ([#67](#67)) ([d55dba1](d55dba1)) * 인원 수 선택 Grid 및 의견 수렴 QA 수정 사항 반영 ([f01626e](f01626e)) * 테스트 용으로 추가했던 페이지 제거 및 icons 폴더 추가 ([4116025](4116025)) ### Code Refactoring * Button 컴포넌트 스펙을 Figma 명세에 맞춰 수정 ([#14](#14)) ([2e27f17](2e27f17)) ### Build System * Docker 빌드 시 NEXT_PUBLIC 환경변수 주입 프로세스 추가 ([#47](#47)) ([88ba163](88ba163)) ### Documentation * 프로젝트 개발 가이드 문서 추가 ([#84](#84)) ([4313145](4313145))

🎯 PR 제목
refactor: 디자인 시스템 명세 변경에 따른 컴포넌트 업데이트
📑 작업 상세 내역
Button 컴포넌트
colorprop을variant로 변경 (primary, secondary, tertiary)shapeprop 추가 (rounded, pill)Chip 컴포넌트
Chip)에서 소문자(chip)로 변경🙏 리뷰 요청 사항
📃 참고 자료
🖼️ 작업 결과물