Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat] Badge 컴포넌트 구현 #58

Merged
merged 4 commits into from
Jan 13, 2025
Merged

[Feat] Badge 컴포넌트 구현 #58

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6d9f450
feat(packages/ui, apps/web): Badge 컴포넌트 구현
minseong0324 Jan 12, 2025
6e59852
fix(packages/ui, apps/web): Badge 컴포넌트 수정
minseong0324 Jan 12, 2025
c03c709
chore(packages/ui): named import 변경
minseong0324 Jan 13, 2025
6282df6
chore(packages/ui): 오타 수정
minseong0324 Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion apps/web/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import { Icon, Toast, Text } from '@repo/ui';
import { Icon, Toast, Text, Badge } from '@repo/ui';
import { overlay } from 'overlay-kit';

export default function Home() {
Expand Down Expand Up @@ -39,6 +39,23 @@ export default function Home() {
<Text.H1 color="grey950" fontSize={28} fontWeight="semibold">
hihi
</Text.H1>
<div style={{ display: 'flex', gap: '8px' }}>
<Badge size="medium" variant="neautral" shape="round">
X Premium 계정 전용
</Badge>
<Badge size="medium" variant="primary" shape="round">
X Premium 계정 전용
</Badge>
<Badge size="medium" variant="pink" shape="square">
전체 적용
</Badge>
<Badge size="medium" variant="blue" shape="square">
개별 적용
</Badge>
<Badge size="large" variant="neautral" shape="square">
요약
</Badge>
</div>
</div>
);
}
68 changes: 68 additions & 0 deletions packages/ui/src/components/Badge/Badge.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { recipe } from '@vanilla-extract/recipes';
import { vars } from '@repo/theme';

export const badge = recipe({
base: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
whiteSpace: 'nowrap',
height: 'fit-content',
},

variants: {
size: {
medium: {
fontSize: vars.typography.fontSize[14],
fontWeight: vars.typography.fontWeight.medium,
lineHeight: '150%',
},
large: {
fontSize: vars.typography.fontSize[20],
fontWeight: vars.typography.fontWeight.semibold,
lineHeight: '150%',
},
},
variant: {
neautral: {
backgroundColor: vars.colors.grey50,
color: vars.colors.grey600,
},
Copy link

@coderabbitai coderabbitai bot Jan 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

'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.

Suggested change
neautral: {
backgroundColor: vars.colors.grey50,
color: vars.colors.grey600,
},
neutral: {
backgroundColor: vars.colors.grey50,
color: vars.colors.grey600,
},

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요거 확인 부탁드려요!

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kongnayeon 'neautral' 오타가 여러 파일에서 발견되었습니다. 다음 위치들도 함께 수정이 필요합니다:

  1. packages/ui/src/components/Badge/Badge.css.ts: variant 정의
  2. packages/ui/src/components/Badge/Badge.tsx: BadgeVariant 타입 정의
  3. 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

primary: {
backgroundColor: vars.colors.primary600,
color: vars.colors.grey,
},
pink: {
backgroundColor: vars.colors.pink200,
color: vars.colors.grey600,
},
blue: {
backgroundColor: vars.colors.blue200,
color: vars.colors.grey600,
},
},
shape: {
round: {
borderRadius: 100,
},
square: {
borderRadius: '4px',
},
},
},

compoundVariants: [
{
variants: { shape: 'round', size: 'medium' },
style: { padding: '4px 10px' },
},
{
variants: { shape: 'square', size: 'medium' },
style: { padding: '2px 6px' },
},
{
variants: { shape: 'square', size: 'large' },
style: { padding: '4px 8px' },
},
],
});
53 changes: 53 additions & 0 deletions packages/ui/src/components/Badge/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { forwardRef } from 'react';
import type { HTMLAttributes } from 'react';
import * as styles from './Badge.css';

export type BadgeSize = 'medium' | 'large';
export type BadgeVariant = 'neautral' | 'primary' | 'pink' | 'blue';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

'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.

Suggested change
export type BadgeVariant = 'neautral' | 'primary' | 'pink' | 'blue';
export type BadgeVariant = 'neutral' | 'primary' | 'pink' | 'blue';

export type BadgeShape = 'round' | 'square';

type BadgeCombination =
| {
size: Extract<BadgeSize, 'medium'>;
variant: Extract<BadgeVariant, 'neautral'>;
shape: Extract<BadgeShape, 'round'>;
}
| {
size: Extract<BadgeSize, 'medium'>;
variant: Extract<BadgeVariant, 'pink'>;
shape: Extract<BadgeShape, 'square'>;
}
| {
size: Extract<BadgeSize, 'medium'>;
variant: Extract<BadgeVariant, 'primary'>;
shape: Extract<BadgeShape, 'round'>;
}
| {
size: Extract<BadgeSize, 'medium'>;
variant: Extract<BadgeVariant, 'blue'>;
shape: Extract<BadgeShape, 'square'>;
}
| {
size: Extract<BadgeSize, 'large'>;
variant: Extract<BadgeVariant, 'neautral'>;
shape: Extract<BadgeShape, 'square'>;
};

export type BadgeProps = HTMLAttributes<HTMLSpanElement> &
BadgeCombination & {
children: React.ReactNode;
};

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>
)
);
Comment on lines +41 to +51
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

Suggested change
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>
)
);


Badge.displayName = 'Badge';
2 changes: 2 additions & 0 deletions packages/ui/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,5 @@ export { Toast } from './Toast';
export type { ToastProps, ToastType, ToastIconProps } from './Toast';
export { Text } from './Text/Text.subComponents';
export type { AllowedTags, TextProps } from './Text/Text';
export { Badge } from './Badge/Badge';
export type { BadgeProps } from './Badge/Badge';
Loading