카드 등급 수량을 표시 하는 컴포넌트

GradeBox

• 위치: components/ui/label/GradeBox.jsx
• 용도: 페이지에서 등급별 라벨과 보유 수량을 표시함(박스 형태)

하여튼 이부분 컴포넌트임

Props

/** props      type       description */
    grade      string     카드등급(대문자)
    count      number     해당 등급의 카드수량

스타일링 (자동 적용)

grade prop에 따라 텍스트 및 테두리 색상이 자동으로 결정됨

• COMMON: Yellow (Main컬러)
• RARE: Blue
• SUPER_RARE: Purple
• LEGENDARY: Pink

사용 예시

import GradeBox form '@/componets/ui/label/GradeBox'

<GradeBox grade="RARE" count={3} />