TierBadge.tsx 1020 B

123456789101112131415161718192021222324252627282930313233343536
  1. // D2 트랙레코드 등급 배지 — 무등급/브론즈/실버/골드/황금개미.
  2. // 순수 프레젠테이션 (서버·클라이언트 공용, 'use client' 미선언 — 상태·이벤트 없음).
  3. import '@/app/styles/community.scss';
  4. import { TIER_META, TrackRecordTierValue } from '@/types/community';
  5. interface Props {
  6. // 숫자 코드 우선. 문자열 라벨(tier)만 있을 때 fallback 표기.
  7. tierCode: TrackRecordTierValue;
  8. label?: string;
  9. }
  10. const TIER_ICON: Record<string, string> = {
  11. none: '',
  12. bronze: '🥉',
  13. silver: '🥈',
  14. gold: '🥇',
  15. goldant: '🐜'
  16. };
  17. export default function TierBadge({ tierCode, label }: Props)
  18. {
  19. const meta = TIER_META[tierCode];
  20. if (!meta) {
  21. return <span className='tier-badge tier-badge--none'>{label ?? '무등급'}</span>;
  22. }
  23. const icon = TIER_ICON[meta.tone];
  24. return (
  25. <span className={`tier-badge tier-badge--${meta.tone}`}>
  26. {icon && <span className='tier-badge__icon' aria-hidden='true'>{icon}</span>}
  27. {label ?? meta.label}
  28. </span>
  29. );
  30. }