# Badge

## Introduction

Badge 컴포넌트는 다른 UI 요소 위에 작은 카운트, 상태, 또는 레이블을 표시하는 데 사용됩니다. 주로 알림 수, 상태 표시기, 또는 새로운 콘텐츠를 나타내는 데 활용됩니다.

```tsx
<Badge {...args}>
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>
```

| Field        | Description         | Default   |
| ------------ | ------------------- | --------- |
| badgeContent | 배지에 표시될 내용          | 4         |
| color        | 배지 색상               | "primary" |
| variant      | 배지 스타일 변형           | "solid"   |
| size         | 배지 크기               | "md"      |
| invisible    | 배지 숨김 여부            | —         |
| showZero     | 0일 때 표시 여부          | —         |
| max          | 최대 표시 숫자 (99 → 99+) | —         |

## Usage

```tsx
import { Badge, IconButton } from '@ceed/cds';
import { NotificationsIcon } from '@mui/icons-material';

function MyComponent() {
  return (
    <Badge badgeContent={4} color="danger">
      <IconButton>
        <NotificationsIcon />
      </IconButton>
    </Badge>
  );
}
```

## Examples

### Basic Usage

기본적인 Badge 사용법입니다.

```tsx
<div style={{
  display: 'flex',
  gap: '2rem'
}}>
<Badge badgeContent={4}>
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>

<Badge badgeContent={100} max={99}>
  <IconButton>
    <EmailIcon />
  </IconButton>
</Badge>

<Badge badgeContent="NEW">
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>
</div>
```

### Colors

다양한 색상을 적용할 수 있습니다.

```tsx
<div style={{
  display: 'flex',
  gap: '2rem'
}}>
<Badge badgeContent={4} color="primary">
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>

<Badge badgeContent={4} color="neutral">
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>

<Badge badgeContent={4} color="danger">
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>

<Badge badgeContent={4} color="success">
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>

<Badge badgeContent={4} color="warning">
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>
</div>
```

### Variants

다양한 스타일 변형을 제공합니다.

```tsx
<div style={{
  display: 'flex',
  gap: '2rem'
}}>
<Badge badgeContent={4} variant="solid">
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>

<Badge badgeContent={4} variant="soft">
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>

<Badge badgeContent={4} variant="outlined">
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>

<Badge badgeContent={4} variant="plain">
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>
</div>
```

### Sizes

크기를 조절할 수 있습니다.

```tsx
<div style={{
  display: 'flex',
  gap: '2rem',
  alignItems: 'center'
}}>
<Badge badgeContent={4} size="sm">
  <IconButton size="sm">
    <NotificationsIcon />
  </IconButton>
</Badge>

<Badge badgeContent={4} size="md">
  <IconButton size="md">
    <NotificationsIcon />
  </IconButton>
</Badge>

<Badge badgeContent={4} size="lg">
  <IconButton size="lg">
    <NotificationsIcon />
  </IconButton>
</Badge>
</div>
```

### With Avatar

아바타와 함께 사용할 수 있습니다.

```tsx
<div style={{
  display: 'flex',
  gap: '2rem'
}}>
<Badge badgeContent={4} color="danger">
  <Avatar src="https://i.pravatar.cc/40?img=1" />
</Badge>

<Badge badgeContent="●" color="success">
  <Avatar src="https://i.pravatar.cc/40?img=2" />
</Badge>
</div>
```

### Dot Badge

내용 없이 점으로만 표시할 수 있습니다.

```tsx
<div style={{
  display: 'flex',
  gap: '2rem'
}}>
<Badge variant="solid" color="danger">
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>

<Badge variant="solid" color="success">
  <Avatar src="https://i.pravatar.cc/40?img=3" />
</Badge>
</div>
```

### Max Count

최대 카운트를 설정하여 숫자가 넘을 때 '+' 표시를 할 수 있습니다.

```tsx
<div style={{
  display: 'flex',
  gap: '2rem'
}}>
<Badge badgeContent={99}>
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>

<Badge badgeContent={100} max={99}>
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>

<Badge badgeContent={1000} max={999}>
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>
</div>
```

### Show Zero

기본적으로 0일 때는 숨겨지지만, showZero 옵션으로 표시할 수 있습니다.

```tsx
<div style={{
  display: 'flex',
  gap: '2rem'
}}>
<div>
  <p>Default (0 숨김)</p>
  <Badge badgeContent={0}>
    <IconButton>
      <NotificationsIcon />
    </IconButton>
  </Badge>
</div>

<div>
  <p>Show zero</p>
  <Badge badgeContent={0} showZero>
    <IconButton>
      <NotificationsIcon />
    </IconButton>
  </Badge>
</div>
</div>
```

## Common Use Cases

### Notification Count

```tsx
<Badge badgeContent={unreadCount} color="danger">
  <IconButton>
    <NotificationsIcon />
  </IconButton>
</Badge>
```

### Status Indicator

```tsx
<Badge color="success" variant="solid">
  <Avatar src="/user-avatar.jpg" />
</Badge>
```

### New Items

```tsx
<Badge badgeContent="NEW" color="warning">
  <Button>메뉴</Button>
</Badge>
```

## Best Practices

1. **의미 있는 색상**: 색상은 의미를 가지도록 사용하세요 (빨간색은 중요한 알림, 초록색은 성공 상태 등).

2. **적절한 콘텐츠**: 너무 긴 텍스트는 피하고, 숫자나 짧은 텍스트를 사용하세요.

3. **대비**: Badge의 색상이 배경과 충분한 대비를 가지도록 하세요.

4. **접근성**: 시각적 정보만으로 의존하지 않고, 스크린 리더를 위한 적절한 레이블을 제공하세요.

5. **일관성**: 애플리케이션 전체에서 Badge 사용 패턴을 일관되게 유지하세요.
