Feat: Chip component 구현#74
Conversation
|
""" Walkthrough텍스트 스타일 토큰의 네이밍과 단위가 일관성 있게 리팩토링되었고, Chip UI 컴포넌트가 새롭게 추가되었습니다. Chip 컴포넌트의 스타일, 스토리북 문서, 컴포넌트 구현이 포함되며, 기존 네비게이션 바 스타일에서 텍스트 토큰 참조도 최신화되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant Storybook
participant Chip
participant Styles
Storybook->>Chip: variant, size, className, children 전달
Chip->>Styles: chipBase, chipVariant[variant], chipSize[size] 적용
Chip-->>Storybook: <span> 렌더링 (children 포함)
Possibly related issues
Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
🚀 Storybook 배포📖 Storybook: https://683d91ab23651aa0b399e435-kwfksihigz.chromatic.com/ |
|
This pull request (commit
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
shared/styles/tokens/text.ts (1)
5-16: H1 토큰의 단위 변경이 올바르게 적용되었습니다.
lineHeight와letterSpacing이em에서rem으로 일관성 있게 변경되었습니다. 다만lineHeight: "1.6rem"이 절대값으로 설정되어 폰트 크기와 상관없이 고정된 높이를 갖게 됩니다.shared/ui/chip/index.tsx (1)
26-26: named export를 고려해보세요.프로젝트의 일관성과 tree-shaking을 위해 named export를 사용하는 것을 권장합니다.
-export default Chip; +export { Chip };shared/ui/chip/chip.css.ts (1)
5-14: 기본 스타일이 잘 정의되었습니다.flexbox 레이아웃과 적절한 크기 설정이 좋습니다. 다만 padding 값을 간소화할 수 있습니다.
- padding: "0px 4px 0px 4px", + padding: "0 4px",
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
shared/styles/tokens/text.ts(2 hunks)shared/ui/chip/chip.css.ts(1 hunks)shared/ui/chip/chip.stories.tsx(1 hunks)shared/ui/chip/index.tsx(1 hunks)shared/ui/navbar/navbar-main/navbar-main.css.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
shared/ui/chip/index.tsx (2)
shared/ui/chip/chip.css.ts (3)
chipVariant(16-25)chipSize(27-40)chipBase(5-14)shared/utils/cn.ts (1)
cn(3-5)
shared/ui/chip/chip.css.ts (2)
shared/styles/tokens/color.ts (1)
colorTheme(1-62)shared/styles/tokens/text.ts (1)
textTheme(4-139)
shared/ui/chip/chip.stories.tsx (1)
shared/styles/tokens/color.ts (1)
colorTheme(1-62)
🔇 Additional comments (10)
shared/styles/tokens/text.ts (1)
76-138: F 시리즈 토큰들이 일관성 있게 구현되었습니다.새로운 명명 규칙과
rem단위 사용이 올바르게 적용되었습니다. 토큰 구조가 깔끔하고 유지보수하기 좋습니다.shared/ui/navbar/navbar-main/navbar-main.css.ts (2)
43-43: 텍스트 토큰 참조가 올바르게 업데이트되었습니다.
caption15에서F15로의 토큰 명명 변경이 정확히 반영되었습니다.
90-90: 텍스트 토큰 참조 업데이트가 완료되었습니다.
caption16에서F16으로의 변경이 적절하게 적용되었습니다.shared/ui/chip/index.tsx (2)
5-9: 타입 정의가 잘 구성되었습니다.
PropsWithChildren을 확장하고keyof typeof를 사용하여 타입 안전성을 보장하는 좋은 패턴입니다.
11-24: 컴포넌트 구현이 깔끔하고 효율적입니다.기본값 설정, className 조합, 그리고 전체적인 구조가 React 모범 사례를 잘 따르고 있습니다.
shared/ui/chip/chip.css.ts (2)
16-25: variant 스타일이 테마 토큰을 올바르게 활용했습니다.색상 대비가 충분하고 브랜딩에 적합한 색상 조합을 사용했습니다.
27-40: size variant가 텍스트 토큰을 효과적으로 재사용하고 있습니다.F12와 F14 토큰을 사용하여 일관된 타이포그래피를 구현했습니다. 토큰의 모든 속성을 개별적으로 적용하는 것이 정확합니다.
shared/ui/chip/chip.stories.tsx (3)
6-62: Storybook 설정이 매우 포괄적이고 잘 구성되었습니다.메타데이터, 컨트롤, 한국어 문서화, 그리고 다크 배경 데코레이터까지 모든 요소가 잘 갖춰져 있습니다.
68-106: 개별 스토리들이 모든 조합을 적절히 커버하고 있습니다.각 variant와 size 조합에 대한 스토리가 명확하고 일관성 있게 정의되었습니다.
108-125: AllVariants 스토리가 컴포넌트 개발에 매우 유용합니다.모든 조합을 한눈에 볼 수 있는 종합 뷰를 제공하여 시각적 테스트와 개발 효율성을 높입니다.
|
This pull request (commit
|
2 participants
📌 Summary
재사용 가능한 Chip 컴포넌트를 구현하고 Storybook에 문서화했습니다.
작업 과정에서 텍스트 토큰 수정사항을 반영했습니다.
📚 Tasks
Chip 컴포넌트 구현
텍스트 토큰 수정사항 반영
👀 To Reviewer
텍스트 토큰의 경우 수정사항 반영하였고 기본적으로 framer의 이름을 따름과 동시에 숫자로만 표시되어 있는 fixed의 경우 F를 prefix로 붙여 작명하였습니다!
ex)
F16Summary by CodeRabbit
Summary by CodeRabbit
New Features
Style