StateBadge

예약 상태를 시각적으로 표시하는 배지 컴포넌트입니다. 상태에 따라 배경색과 텍스트 색상이 다르게 표시됩니다.

✅ Props

이름	타입	필수	설명
status	string literal union type	✅	badge의 상태 값
label	string	✅	사용자에게 보여줄 텍스트

🎨 상태 별 스타일 예시

status	label	배경색	텍스트 색상
pending	예약 완료	#e9fbe4	#2ba90d
confirmed	예약 승인	#ddf9f9	#1790a0
declined	예약 거절	#fcecea	#f96767
canceled	예약 취소	--gray-100	--gray-600
completed	체험 완료	#daf0ff	#0d6cd1

⚙️ 동작 방식

• status 값을 기반으로 내부적으로 해당 상태에 맞는 CSS 클래스가 적용됩니다.
• 배경 스타일(.bedge-common, .bedge-[status])과 텍스트 스타일(.label-common, [status])을 조합하여 구성됩니다.

🖥️ 사용예시

<StateBadge status="pending" label="예약 완료" />
<StateBadge status="confirmed" label="예약 승인" />
<StateBadge status="declined" label="예약 거절" />
<StateBadge status="canceled" label="예약 취소" />
<StateBadge status="completed" label="체험 완료" />

// 실제로는 status에는 data.status값이, label에는 맵핑한 값이 들어가야 합니다.
const statusLabelMap: Record<ReservationStatus, string> = {
  pending: '예약 완료',
  confirmed: '예약 승인',
  declined: '예약 거절',
  canceled: '예약 취소',
  completed: '체험 완료',
};

<StateBadge status={data.status} label={statusLabelMap[data.status]} />