[Feat] Badge 컴포넌트 구현 #58
Conversation
|
Caution Review failedThe pull request is closed. Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
apps/web/src/app/page.tsxOops! Something went wrong! :( ESLint: 9.17.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@repo/eslint-config' imported from /eslint.config.mjs 워크스루이 풀 리퀘스트는 변경 사항
시퀀스 다이어그램sequenceDiagram
participant UI as UI 컴포넌트
participant Badge as Badge 컴포넌트
UI->>Badge: 크기, 변형, 모양 props 전달
Badge-->>UI: 스타일이 적용된 배지 렌더링
관련 가능성 있는 PR
제안된 리뷰어
토끼의 시
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🪧 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
CodeRabbit Configuration File (
|
![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)
packages/ui/src/components/Badge/Badge.tsx (1)
9-34: BadgeCombination 타입을 단순화할 수 있습니다현재 BadgeCombination 타입이 너무 복잡하게 정의되어 있습니다. 타입을 더 간단하게 리팩토링하면 유지보수가 더 쉬워질 것 같습니다.
type BadgeCombination = { size: BadgeSize; variant: BadgeVariant; shape: BadgeShape; } & ( | { size: 'medium'; variant: 'neutral' | 'primary'; shape: 'round' } | { size: 'medium'; variant: 'pink' | 'blue'; shape: 'square' } | { size: 'large'; variant: 'neutral'; shape: 'square' } );apps/web/src/app/page.tsx (1)
42-58: Badge 컴포넌트 사용 개선사항
- 'neautral' 오타를 'neutral'로 수정해야 합니다.
- Badge들을 의미론적으로 그룹화하면 좋을 것 같습니다.
-<div style={{ display: 'flex', gap: '8px' }}> +<section + aria-label="계정 상태 뱃지" + style={{ display: 'flex', gap: '8px' }} +> <Badge - size="medium" variant="neautral" shape="round" + size="medium" variant="neutral" shape="round" > X Premium 계정 전용 </Badge> {/* ... other badges ... */} <Badge - size="large" variant="neautral" shape="square" + size="large" variant="neutral" shape="square" > 요약 </Badge> -</div> +</section>packages/ui/src/components/Badge/Badge.css.ts (1)
4-68: 상호작용 상태 스타일 추가 제안뱃지에 호버나 포커스 상태가 정의되어 있지 않습니다. 사용자 경험 향상을 위해 상호작용 상태를 추가하면 좋을 것 같습니다.
export const badge = recipe({ base: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'nowrap', height: 'fit-content', + transition: 'all 0.2s ease-in-out', + cursor: 'default', + ':hover': { + filter: 'brightness(0.95)', + }, + ':focus-visible': { + outline: `2px solid ${vars.colors.primary600}`, + outlineOffset: '2px', + }, }, // ... rest of the code });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web/src/app/page.tsx(2 hunks)packages/ui/src/components/Badge/Badge.css.ts(1 hunks)packages/ui/src/components/Badge/Badge.tsx(1 hunks)packages/ui/src/components/index.ts(1 hunks)
🔇 Additional comments (1)
packages/ui/src/components/index.ts (1)
9-10: 내보내기가 올바르게 구현되었습니다!컴포넌트와 타입 내보내기가 기존 패턴을 잘 따르고 있습니다.
| import * as styles from './Badge.css'; | ||
|
|
||
| export type BadgeSize = 'medium' | 'large'; | ||
| export type BadgeVariant = 'neautral' | 'primary' | 'pink' | 'blue'; |
There was a problem hiding this comment.
'neutral' 단어 오타를 수정해주세요
'neautral'이라고 작성된 부분을 'neutral'로 수정해야 합니다.
-export type BadgeVariant = 'neautral' | 'primary' | 'pink' | 'blue';
+export type BadgeVariant = 'neutral' | 'primary' | 'pink' | 'blue';📝 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.
| export type BadgeVariant = 'neautral' | 'primary' | 'pink' | 'blue'; | |
| export type BadgeVariant = 'neutral' | 'primary' | 'pink' | 'blue'; |
| export const Badge = forwardRef<HTMLSpanElement, BadgeProps>( | ||
| ({ size, variant, shape, children, className = '', ...props }, ref) => ( | ||
| <span | ||
| ref={ref} | ||
| className={`${styles.badge({ size, variant, shape })} ${className}`} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </span> | ||
| ) | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
접근성 속성을 추가해주세요
Badge 컴포넌트에 접근성 속성이 누락되어 있습니다. 스크린 리더 사용자를 위해 적절한 ARIA 속성을 추가하는 것이 좋습니다.
<span
ref={ref}
className={`${styles.badge({ size, variant, shape })} ${className}`}
+ role="status"
+ aria-label={typeof children === 'string' ? children : undefined}
{...props}
>
{children}
</span>📝 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.
| export const Badge = forwardRef<HTMLSpanElement, BadgeProps>( | |
| ({ size, variant, shape, children, className = '', ...props }, ref) => ( | |
| <span | |
| ref={ref} | |
| className={`${styles.badge({ size, variant, shape })} ${className}`} | |
| {...props} | |
| > | |
| {children} | |
| </span> | |
| ) | |
| ); | |
| export const Badge = forwardRef<HTMLSpanElement, BadgeProps>( | |
| ({ size, variant, shape, children, className = '', ...props }, ref) => ( | |
| <span | |
| ref={ref} | |
| className={`${styles.badge({ size, variant, shape })} ${className}`} | |
| role="status" | |
| aria-label={typeof children === 'string' ? children : undefined} | |
| {...props} | |
| > | |
| {children} | |
| </span> | |
| ) | |
| ); |
| neautral: { | ||
| backgroundColor: vars.colors.grey50, | ||
| color: vars.colors.grey600, | ||
| }, |
There was a problem hiding this comment.
'neutral' 변형 이름 수정 필요
'neautral' 오타를 'neutral'로 수정해야 합니다.
- neautral: {
+ neutral: {
backgroundColor: vars.colors.grey50,
color: vars.colors.grey600,
},📝 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.
| neautral: { | |
| backgroundColor: vars.colors.grey50, | |
| color: vars.colors.grey600, | |
| }, | |
| neutral: { | |
| backgroundColor: vars.colors.grey50, | |
| color: vars.colors.grey600, | |
| }, |
There was a problem hiding this comment.
@kongnayeon 'neautral' 오타가 여러 파일에서 발견되었습니다. 다음 위치들도 함께 수정이 필요합니다:
packages/ui/src/components/Badge/Badge.css.ts: variant 정의packages/ui/src/components/Badge/Badge.tsx: BadgeVariant 타입 정의apps/web/src/app/page.tsx: Badge 컴포넌트 사용 부분
모든 'neautral'을 'neutral'로 수정해주시면 감사하겠습니다.
ʕ •ᴥ•ʔ
| |
🔗 Analysis chain
@kongnayeon 네, 'neautral'을 'neutral'로 수정하는 것이 맞습니다. 이 수정으로 Badge 컴포넌트의 variant 이름이 올바르게 표기될 것입니다. 변경사항을 적용해주시면 감사하겠습니다.
ʕ •ᴥ•ʔ
| |
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for any other instances of the misspelled word
rg "neautral" --type-add 'ts:*.{ts,tsx}' -t ts
# Search for correct usage of "neutral" in Badge component usage
rg "neutral" --type-add 'ts:*.{ts,tsx}' -t ts -C 2
Length of output: 637
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/ui/src/components/Badge/Badge.tsx (3)
1-3: named import로 변경이 필요합니다스타일 임포트를 named import로 변경하는 것이 좋습니다.
-import * as styles from './Badge.css'; +import { badge } from './Badge.css';
9-34: BadgeCombination 타입을 더 간단하게 리팩토링할 수 있습니다현재 구현은 매우 상세하지만, 유지보수가 어려울 수 있습니다. 다음과 같이 단순화하는 것을 고려해보세요:
type BadgeCombination = { size: BadgeSize; variant: BadgeVariant; shape: BadgeShape; } & ( | { size: 'medium'; variant: 'neutral' | 'primary'; shape: 'round' } | { size: 'medium'; variant: 'pink' | 'blue'; shape: 'square' } | { size: 'large'; variant: 'neutral'; shape: 'square' } );이렇게 하면:
- 코드가 더 간결해집니다
- 새로운 조합을 추가하기 더 쉬워집니다
- 중복된 코드가 줄어듭니다
1-53: 컴포넌트 문서화 및 유효성 검사가 필요합니다
- JSDoc을 사용하여 컴포넌트와 props에 대한 문서를 추가해주세요:
/** * Badge 컴포넌트는 상태나 카테고리를 시각적으로 표시하는데 사용됩니다. * @param size - 배지의 크기 ('medium' | 'large') * @param variant - 배지의 스타일 변형 ('neutral' | 'primary' | 'pink' | 'blue') * @param shape - 배지의 모양 ('round' | 'square') */
- prop-types 또는 zod를 사용하여 런타임 유효성 검사를 추가하는 것을 고려해주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/ui/src/components/Badge/Badge.tsx(1 hunks)
🔇 Additional comments (2)
packages/ui/src/components/Badge/Badge.tsx (2)
6-6: 'neutral' 단어 오타를 수정해주세요'neautral'이라고 작성된 부분을 'neutral'로 수정해야 합니다.
41-51: 접근성 속성을 추가해주세요Badge 컴포넌트에 접근성 속성이 누락되어 있습니다. 스크린 리더 사용자를 위해 적절한 ARIA 속성을 추가하는 것이 좋습니다.
수정했습니다! @kongnayeon |
관련 이슈
#39
변경 사항
디자이너 분들의 요구사항대로 뱃지의 종류를 제한하여 구현했어요.
레퍼런스
Summary by CodeRabbit
새로운 기능
스타일
개선 사항