뱃지.gif

본 컴포넌트는 단일 파일 구조 내에서 **"정적 정보 전달"**과 **"사용자 인터랙션"**이라는 두 가지 역할을 유연하게 수행하도록 설계되었다. onClick 속성의 유무에 따라 웹 접근성(A11y) 속성이 자동으로 최적화된다.

✅ 컴포넌트 구조

파일명	유형	주요 역학
Badge.tsx	Server	라이브러리 의존성 없이 스타일과 로직을 한 파일에서 관리하는 공통 배지 컴포넌트

지능형 속성 할당: onClick 속성이 감지되면 자동으로 role="button"과 tabIndex={0}이 부여되어 키보드 접근성이 활성화된다.
키보드 인터랙션 지원: div 기반임에도 Enter 및 Space 키 입력을 감지하여 클릭 이벤트를 트리거하므로 완벽한 웹 접근성을 보장한다.
시각적 피드백: 인터랙티브 상태일 경우 cursor-pointer 및 active:opacity-80 스타일이 자동으로 적용된다.

✅ BadgeProps (공통 속성)

모든 표준 HTML div 속성을 지원하며, 아래의 커스텀 속성을 추가로 가집니다.

속성명	타입	기본값	설명
`variant`	`'default'	'recommend'	'dDayUrgent'
`onClick`	`(e: React.MouseEvent) => void`	`-`	클릭 핸들러 주입 시 배지가 버튼 모드로 동작하며 접근성 기능이 활성화된다.
`className`	`string`	`-`	레이아웃 보정 등을 위한 추가 Tailwind 클래스.
`children`	`React.ReactNode`	`-`	배지 내부에 표시될 텍스트나 아이콘.

✅ 디자인 변체 (Variants)

변체명	배경색	텍스트색	용도
`default`	Gray BG	Gray 700	일반적인 정보 태그
`recommend`	Blue 50	Blue 900	추천, 강조, 승인 상태
`dDayUrgent`	Red 50	Red 900	마감 임박, 긴급 공지
`dDay`	Gray 100	Gray 700	일반적인 디데이 표시
`scheduled`	Gray 100	Gray 400	대기 중, 예정된 상태
`closed`	Gray 700	White	마감됨, 종료된 상태

✅ 사용 예시

1. 정보 전달용 (정적 태그)

이벤트 핸들러 없이 정보를 전달할 때 사용합니다. 스크린 리더는 이를 일반 요소로 인식하며 불필요한 포커스가 잡히지 않는다.

import { Badge } from "@/shared/ui/badge";

export default function StatusSection() {
  return (
    <div className="flex gap-2">
      <Badge variant="recommend">추천</Badge>
      <Badge variant="dDayUrgent">마감 1일전</Badge>
      <Badge variant="closed">모집 종료</Badge>
    </div>
  );
}

✅ 컴포넌트 구조

✅ BadgeProps (공통 속성)

✅ 디자인 변체 (Variants)

✅ 사용 예시

1. 정보 전달용 (정적 태그)

2. 상호작용용 (클릭 가능한 배지)