BoxData

데이터 값을 표시하는 읽기 전용 디스플레이 컴포넌트

개요

Cals BoxData는 원본 Vue QSBoxData 컴포넌트를 React로 재구현한 것으로, 단일 데이터 값을 다양한 스타일과 포맷으로 표시합니다.

주요 특징

• ✅ 데이터 표시: 숫자/텍스트 데이터 렌더링
• ✅ 접미어: suffix prop으로 단위 표시
• ✅ 천 단위 구분자: 숫자에 자동 쉼표 삽입, 원본 값은 툴팁으로 확인
• ✅ 커스텀 스타일: 10가지 CSS 속성 개별 오버라이드
• ✅ 가시성 제어: visible prop으로 선언적 표시/숨김
• ✅ children 지원: data 대신 커스텀 콘텐츠 렌더링

기본 사용

data prop으로 표시할 값을 지정합니다.

<BoxData data="12345" />
<BoxData data={9876} />
<BoxData data="텍스트 데이터" />

children 사용

children을 지정하면 data 대신 커스텀 콘텐츠를 표시합니다.

<BoxData>
  <span className="text-green-600 font-medium">● 정상</span>
</BoxData>
<BoxData suffix="원">
  <span className="text-2xl font-bold">12,345</span>
</BoxData>

접미어 (suffix)

데이터 뒤에 단위 등의 접미어를 표시합니다.

<BoxData data="1500" suffix="원" />
<BoxData data="85" suffix="%" />
<BoxData data="36.5" suffix="℃" />

천 단위 구분자 (thousandSeparator)

숫자 값에 자동으로 쉼표를 삽입합니다. 마우스를 올리면 원본 값이 툴팁으로 표시됩니다.

<BoxData data="1234567" thousandSeparator />
<BoxData data="9876543210" thousandSeparator suffix="원" />

커스텀 스타일

backgroundColor, color, fontSize, fontWeight, borderWidth, borderColor, fontStyle, textDecoration, textAlign prop으로 스타일을 지정합니다. fontWeight는 설정 시 값에 무관하게 항상 900으로 고정됩니다.

<BoxData data="배경색" backgroundColor="#fee2e2" />
<BoxData data="텍스트 색상" color="#2563eb" />
<BoxData data="테두리" borderWidth="2px" borderColor="#ef4444" />
<BoxData data="굵은 글씨 (항상 900)" fontWeight="300" />
<BoxData data="이탤릭" fontStyle="italic" />
<BoxData data="밑줄" textDecoration="underline" />

가시성 제어 (visible)

visible prop으로 선언적으로 표시/숨김을 제어합니다.

<BoxData data="보이는 데이터" visible={true} />
<BoxData data="숨겨진 데이터" visible={false} />

API Reference

Props

접근성

권장 사항

• ✅ 의미 있는 data 텍스트 사용
• ✅ thousandSeparator 사용 시 원본 값이 title 속성(툴팁)으로 자동 제공
• ❌ 중요 정보를 color만으로 전달하지 않기 (색맹 고려)

관련 컴포넌트

• Label: 제목+데이터 조합 표시용 디스플레이 컴포넌트