1. Badge

Badge 컴포넌트는 다양한 상태나 정보를 시각적으로 표시하는 UI 요소입니다. 여러 유형의 배지를 지원하며, 다크 모드에도 대응합니다.

1.1. Import

import Badge from '@components/Badge/Badge';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

BasicBadge


import Badge from './Badge';

const BadgeBasic = () => {
  return (
    <Badge type="basic" content="BasicBadge" color="bg-blue-500" textColor="text-white" />
  );
};

export default BadgeBasic;

2. BadgeCounter

BadgeCounter는 숫자를 강조하여 알림 수나 메시지 수를 표시합니다.


import Badge from './Badge';

const BadgeCounter = () => {
  return (
    <Badge type="counter" content="+5" color="bg-red-500" textColor="text-white" />
  );
};

export default BadgeCounter;

3. BadgeDot

BadgeDot는 작은 점 형태로 알림이나 상태를 간단하게 표시합니다.


import Badge from './Badge';

const BadgeDot = () => (
  <Badge type="dot" color="bg-red-500" />
);

export default BadgeDot;

4. BadgeIcon

BadgeIcon는 텍스트와 아이콘을 함께 표시하여 더 직관적인 정보를 제공합니다.

IconBadge


import Badge from './Badge';
import { FaStar } from 'react-icons/fa';

const BadgeIcon = () => {
  return (
    <Badge type="icon" content="IconBadge" icon={<FaStar />} color="bg-yellow-500" textColor="text-white" />
  );
};

export default BadgeIcon;

5. Dark Mode Support

Badge 컴포넌트는 다크 모드를 지원합니다. 다크 모드에서 배경색과 테두리 색상이 자동으로 변경되어 어두운 배경에서도 잘 보입니다.

BasicBadge


import Badge from './Badge';

const BadgeBasic = () => {
  return (
    <Badge type="basic" content="BasicBadge" color="bg-blue-500" textColor="text-white" />
  );
};

export default BadgeBasic;