Ocean Road
가이드
컴포넌트
가이드
컴포넌트

Text

텍스트 렌더링 컴포넌트입니다. 기본 엘리먼트는 <span>이며 as prop으로 변경할 수 있습니다.

사용법

import { Text } from '@coldsurfers/ocean-road'

<Text>기본 텍스트</Text>

<Text as="h1">제목</Text>

<Text as="p" numberOfLines={2}>
  긴 텍스트를 두 줄로 제한합니다. 초과하는 내용은 말줄임표로 처리됩니다.
</Text>

styled 래퍼 패턴

Text는 Emotion의 styled()로 감싸 재사용 가능한 타이포그래피 컴포넌트를 정의하는 방식을 권장합니다. 디자인 토큰(semantics)을 함께 사용하면 테마 색상을 안전하게 참조할 수 있습니다.

import styled from '@emotion/styled'
import { Text, semantics } from '@coldsurfers/ocean-road'

const EventTitle = styled(Text)`
  color: ${semantics.color.foreground[2]};
  font-size: 16px;
  font-weight: 400;
  margin: unset;
`

// 사용
<EventTitle as="h2">이벤트 제목</EventTitle>
TIP

semantics.color.foreground[2]는 CSS 변수(var(--color-foreground-2))를 반환합니다. ColorSchemeProvider가 주입한 CSS 변수를 참조하므로 라이트/다크 모드가 자동으로 반영됩니다.

Props

ComponentPropsWithRef<'span'>을 모두 상속합니다.

prop 타입 기본값 설명
as ElementType 'span' 렌더링할 HTML 엘리먼트 또는 컴포넌트 ('p', 'h1', 'div' 등)
numberOfLines number — 최대 표시 줄 수. 초과 시 말줄임표(…) 처리
style CSSProperties — 인라인 스타일
children ReactNode — 텍스트 내용

인터랙티브 데모

ON THIS PAGE