refactor: 디자인 시스템 일관성 개선, baseframe 리팩토링, Storybook 문서화#86
refactor: 디자인 시스템 일관성 개선, baseframe 리팩토링, Storybook 문서화#86ohprettyhak wants to merge 17 commits intowipfrom
Conversation
- primitive/radius.yaml 신규 생성 (none~circle) - primitive/font-weight.yaml 신규 생성 (thin~black) - semantic/color.yaml 참조 형식 수정 (dot → hyphen) - token.css, tailwind4.css를 baseframe CLI 파이프라인으로 재생성 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- token/radius.ts 신규 생성 (CSS 변수 참조) - token/index.ts에 radius export 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- ButtonVariant error → danger 네이밍 통일 - getColor → getFontColor 내부 함수명 명확화 - 하드코딩 px → spacing/radius 토큰으로 전환 - docs 예제 컴포넌트 동기화 BREAKING CHANGE: variant="error"를 variant="danger"로 변경 필요 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- SelectSize에서 2xs 제거 - 높이 매핑을 Button과 동일하게 통일 (xs~xl) - SelectSize 타입 export 추가 - docs 예제 컴포넌트 동기화 BREAKING CHANGE: size="2xs" 제거, xs~xl 사이즈만 지원 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Badge: clsx→cx import 패턴 통일, BadgeSize/BadgeVariant 타입 export, radius 토큰 적용 - Switch: getSwitchWidth→getWidth, getSwitchHeight→getHeight 함수명 정리 - StockQuantityStatus: getColor export 제거 (내부 전용) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Modal: 12px → var(--ds-radius-xl) - DayPicker: 8px → var(--ds-radius-lg), opacity 0.3 → 0.4 - MonthPicker: 8px → var(--ds-radius-lg) - Checkbox: 4px → var(--ds-radius-sm) - RadioGroup: opacity 0.5 → 0.4 - Spinner: 하드코딩 px → spacing 토큰 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @ohprettyhak, 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! 이 Pull Request는 디자인 시스템의 일관성을 강화하기 위해 토큰, 네이밍 규칙 및 값들을 통일하는 작업을 수행합니다. 새로운 radius 및 font-weight 토큰을 도입하고, Button 컴포넌트의 'error' variant를 'danger'로 변경하며, Select 컴포넌트의 '2xs' 사이즈를 제거하는 등 여러 컴포넌트의 변형을 업데이트했습니다. 또한, 하드코딩된 픽셀 값들을 spacing 및 radius 토큰으로 대체하여 디자인 시스템 전반의 유지보수성과 확장성을 개선했습니다. 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. Changelog
Activity
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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이 PR은 디자인 시스템의 일관성을 높이기 위한 중요한 리팩터링을 담고 있습니다. 전반적으로 토큰 시스템을 도입하고, 네이밍을 정리하며, 하드코딩된 값들을 토큰으로 대체하는 변경 사항들이 인상적입니다. 특히 Button 컴포넌트의 variant를 error에서 danger로 변경하고 Select 컴포넌트의 2xs 사이즈를 제거하는 등, Breaking Changes를 포함한 과감한 개선이 돋보입니다. 코드 변경 사항들을 검토한 결과, 대부분의 변경점이 PR의 목표에 잘 부합하며 코드 품질을 향상시키는 방향으로 이루어졌습니다. 한 가지 CSS 유틸리티 정의에서 발견된 잠재적인 오류에 대해 리뷰 코멘트를 남겼으니 확인 부탁드립니다. 훌륭한 작업입니다!
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
10.19.3이 npm registry에서 제거되어 install 실패하는 문제 수정 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
CI biome check 실패 해결을 위해 docs 예제 파일 포맷팅 및 OTP 컴포넌트 배열 인덱스 키 lint 경고 억제 처리 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
SwitchSize는 'sm' | 'md'만 지원하므로 argTypes와 스토리에서 'lg' 참조를 'sm'으로 수정 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
intermediate 상태에서 CheckIcon(체크마크) 대신 CheckIndeterminateSmallIcon(대시)을 사용하여 시각적으로 구분되도록 수정 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- value.ts(277줄)를 primitives.ts, shadow.ts, value.ts(67줄)로 분리 - 중복된 createVarName을 builders/utils/naming.ts로 추출 - transforms/resolve.ts에서 미사용 mode 파라미터 제거 - transforms/build.ts에서 console 로깅을 Error 메시지로 대체 - $number.1 → --spacing 매직 값 특수 처리 제거 - tailwind4.css에서 var() 참조 토큰을 @theme inline으로 분리 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
ohprettyhak
changed the title
vitest 설정 및 11개 테스트 파일 작성: - parsers: hex, rgb, rgba, tokenRef, size, duration, shadow, value, ast - transforms: validate, resolve, build - builders: css-vars, tailwind, css utils, naming utils 코드 리뷰 반영: 경계값 테스트 보강, 타입 단언 강화, 소스 동작 문서화 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Select 컴포넌트에서 불필요한 xl 사이즈 옵션 제거 - SelectSize 타입에서 xl 제거 - getStyles에서 xl 분기 제거 - Storybook 및 docs 예제 업데이트 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
AllVariants 단일 스토리를 Default/Sizes/Variants/States 등 prop별 독립 스토리로 분리하고, 일관된 레이아웃·네이밍·description 패턴 적용. DayPicker/MonthPicker는 기존 구조 유지하며 description만 추가. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
ohprettyhak
changed the title
1 participant
Summary
error→dangervariant, Select2xs제거 및 높이 통일, 내부 함수/import 네이밍 정리AllVariants단일 스토리를 prop 차원별 독립 스토리로 분리, 일관된 레이아웃/네이밍/문서화 패턴 적용xl사이즈 제거, Storybook 10.2.8 업데이트, Checkbox/Switch 버그 수정Breaking Changes
Button:variant="error"→variant="danger"Select:size="2xs"제거 (xs~lg만 지원)Button:size="xl"제거 (xs~lg만 지원)Select:size="xl"제거 (xs~lg만 지원)Phase 5: Storybook 리팩토링 상세
변경 원칙
AllVariants하나에 모든 것을 담던 구조 → prop 차원별 독립 스토리 (Default, Sizes, Variants, States, Composition, Playground)containerStyle,sectionStyle,rowStyle공통 패턴 적용parameters.docs.description.story추가컴포넌트별 스토리 변경 (20개 파일)
변경 파일 (87개)
토큰 시스템 (Phase 1)
baseframe/primitive/radius.yamlbaseframe/primitive/font-weight.yamlbaseframe/semantic/color.yamlcss/token.css,css/tailwind4.cssreact/src/token/radius.tsreact/src/token/index.ts컴포넌트 리팩토링 (Phase 2-3)
button/Button.tsxselect/Select.tsxbadge/Badge.tsxswitch/Switch.tsxspinner/Spinner.tsxbaseframe 파서 리팩토링 (Phase 4)
parsers/primitives.tsparsers/shadow.tsparsers/value.tsbuilders/utils/naming.tsbuilders/tailwind.ts,css-vars.tstransforms/resolve.tsStorybook 리팩토링 (Phase 5)
20개
.stories.tsx파일 — 위 테이블 참조Test plan
pnpm biome check .통과 (243 파일)pnpm build통과 (5 tasks)pnpm --filter storybook build통과🤖 Generated with Claude Code