TextContent

텍스트 콘텐츠를 표시하는 순수 디스플레이 컴포넌트

개요

Cals TextContent는 텍스트 또는 HTML 콘텐츠를 표시하는 디스플레이 전용 컴포넌트입니다. 폼 입력이 아닌 순수 텍스트 영역으로, 스타일 오버라이드와 가시성 제어를 prop으로 지원합니다.

주요 특징

• ✅ 텍스트 표시: content prop 또는 children으로 콘텐츠 렌더링
• ✅ children 우선: children이 있으면 content 대신 렌더링
• ✅ 스타일 오버라이드: backgroundColor, color, font*, textAlign, textDecoration
• ✅ 가시성 제어: visible prop으로 표시/숨김

기본 사용

content prop으로 텍스트를 표시합니다.

<TextContent content="안녕하세요, CALS입니다." />

Children 사용

children이 있으면 content 대신 children을 렌더링합니다. HTML/React 요소도 가능합니다.

<TextContent>
  <span>children으로 <strong>HTML</strong> 콘텐츠도 가능합니다.</span>
</TextContent>

스타일 오버라이드

backgroundColor, color, fontSize, fontWeight 등으로 스타일을 설정합니다.

<TextContent
  content="배경색 + 텍스트 색상"
  backgroundColor="#eef2ff"
  color="#1e3a8a"
  fontSize="16px"
  fontWeight="bold"
/>

폰트 스타일

fontStyle, fontFamily, textDecoration으로 텍스트를 꾸밉니다.

<TextContent content="이탤릭 + 밑줄" fontStyle="italic" textDecoration="underline" />
<TextContent content="monospace 폰트" fontFamily="monospace" />

텍스트 정렬

textAlign으로 텍스트를 정렬합니다.

<TextContent content="왼쪽" textAlign="left" className="block w-full" />
<TextContent content="가운데" textAlign="center" className="block w-full" />
<TextContent content="오른쪽" textAlign="right" className="block w-full" />

API Reference

Props

접근성

권장 사항

• ✅ 의미가 중요한 텍스트는 적절한 시맨틱 HTML(heading, p 등)을 children으로 사용하세요.
• ✅ 색상 대비를 충분히 확보하세요 (WCAG AA 기준 4.5:1).

관련 컴포넌트

• Cals Label: 데이터 레이블 표시 컴포넌트
• Cals BoxData: 데이터 표시 박스 컴포넌트