[FEAT] Badge 컴포넌트, 스토리북 #31
Conversation
워크스루이 풀 리퀘스트는 새로운 Badge 컴포넌트를 구현하고 있습니다. Badge 컴포넌트는 다양한 상태(제출됨, 진행 중, 모집 중)를 시각적으로 표현할 수 있으며, Storybook을 통해 컴포넌트의 다양한 상태와 속성을 확인할 수 있도록 구현되었습니다. 변경 사항
이슈 대상 평가
제안된 리뷰어
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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
|
|
Update: 2025년 02월 01일 16시 10분 32초 |
![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 (2)
src/shared/ui/Badge/Badge.tsx (2)
47-77: 상태 로직을 단순화할 수 있습니다.현재 조건문이 복잡하게 중첩되어 있습니다. 상태 매핑 객체를 사용하여 로직을 단순화할 수 있습니다.
- if (isRecriting !== undefined) { - badgeColor = isRecriting ? 'bg-green-100 text-green-300' : 'bg-gray-100 text-gray-400'; - badgeText = isRecriting ? '모집 중' : '모집 마감'; - } else if (isProgress !== undefined) { - if (isProgress === null) { - badgeColor = 'bg-gray-100 text-gray-400'; - badgeText = '진행 전'; - } else { - badgeColor = isProgress ? 'bg-green-100 text-green-300' : 'bg-red-100 text-red-300'; - badgeText = isProgress ? '진행 중' : '마감'; - } - } // ... 나머지 조건문 + const stateConfig = { + recruiting: { + true: { color: 'bg-green-100 text-green-300', text: '모집 중' }, + false: { color: 'bg-gray-100 text-gray-400', text: '모집 마감' }, + }, + progress: { + true: { color: 'bg-green-100 text-green-300', text: '진행 중' }, + false: { color: 'bg-red-100 text-red-300', text: '마감' }, + null: { color: 'bg-gray-100 text-gray-400', text: '진행 전' }, + }, + // ... 다른 상태들도 유사하게 정의 + }; + + if (isRecruiting !== undefined) { + const state = stateConfig.recruiting[String(isRecruiting)]; + badgeColor = state.color; + badgeText = state.text; + } + // ... 다른 상태들도 유사하게 처리
79-83: 스타일 클래스를 상수로 분리하는 것이 좋습니다.Tailwind CSS 클래스들을 상수로 분리하면 재사용성과 유지보수성이 향상됩니다.
+const BASE_BADGE_CLASSES = 'w-min whitespace-nowrap rounded-xl p-1 px-2 font-semibold'; return ( - <div className={`w-min whitespace-nowrap rounded-xl p-1 px-2 font-semibold ${badgeColor}`}> + <div className={`${BASE_BADGE_CLASSES} ${badgeColor}`}>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/shared/ui/Badge/Badge.stories.tsx(1 hunks)src/shared/ui/Badge/Badge.tsx(1 hunks)src/shared/ui/Badge/index.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/shared/ui/Badge/index.ts
🔇 Additional comments (1)
src/shared/ui/Badge/Badge.stories.tsx (1)
17-25: 기본값이 적절하게 설정되어 있습니다.InteractiveBadge 스토리의 기본값 설정이 잘 되어 있습니다.
| argTypes: { | ||
| isSubmited: { control: 'radio', options: [true, false, null] }, | ||
| isProgress: { control: 'radio', options: [true, false, null] }, | ||
| isRecriting: { control: 'boolean' }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
isRecriting 속성의 제어 타입이 일관성이 없습니다.
다른 상태 속성들은 radio 타입으로 null 옵션을 포함하고 있는데 반해, isRecriting 속성만 boolean 타입으로 되어있습니다. 일관성을 위해 다음과 같이 수정하는 것이 좋습니다.
- isRecriting: { control: 'boolean' },
+ isRecriting: { control: 'radio', options: [true, false, null] },📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| isRecriting: { control: 'boolean' }, | |
| isRecriting: { control: 'radio', options: [true, false, null] }, |
There was a problem hiding this comment.
수고 많으셨어요 👍
기존에는 아래와 같은 설계를 예상했어요 !
// badge component (공통 view component)
- color와 text 속성으로 주입받음
// badge component를 사용하는 component (도메인)
- 각 상태에 따른 color, text 처리 진행
추상화를 너무 많이하면 이후 다른 도메인에서 사용할 때 다른 속성을 또 추가해야 해야하잖아요.
그래서 공통 컴포넌트로서 잘활용되려면, 도메인적인 성격을 띄지 않아야한다고 생각해요. 유진이의 의견은 어떤가요?
사용이 빈번하지 않은 컴포넌트라 우선순위가 떨어진다 생각해 당장 변경을 요청드리는 부분은 아니고,
추후 속성 추가 등 변경이 요구될 때 고려해주셔도 좋을 듯 싶어요.
| }; | ||
|
|
||
| /** | ||
| * `Badge` is a UI element that visually represents various statuses. | ||
| */ | ||
| export function Badge({ isSubmited, isProgress, isRecruiting, color, text }: Props) { |
There was a problem hiding this comment.
| }; | |
| /** | |
| * `Badge` is a UI element that visually represents various statuses. | |
| */ | |
| export function Badge({ isSubmited, isProgress, isRecruiting, color, text }: Props) { | |
| } & React.HTMLAttributes<HTMLDivElement>; | |
| /** | |
| * `Badge` is a UI element that visually represents various statuses. | |
| */ | |
| export function Badge({ isSubmited, isProgress, isRecruiting, color, text, ...props }: Props) { |
div 속성을 상속받아 더 유연하게 작업할 수 있을 것 같아요 !
🔥 연관 이슈
🚀 작업 내용
🤔 고민했던 내용
💬 리뷰 중점사항
Summary by CodeRabbit
새로운 기능
문서화