CoreTextArea

레거시 텍스트 영역 컴포넌트. TextArea로 마이그레이션을 권장합니다.

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 TextArea를 사용하세요.

CoreTextArea는 <textarea> 네이티브 요소를 감싼 단일 props 기반 텍스트 영역 컴포넌트입니다.

label / required — 라벨과 필수 표시를 내장
labelElement — 라벨 뒤에 툴팁 같은 임의 요소 배치
status — success, warning, error 세 가지 검증 상태
validationText — 상태에 대응하는 아이콘과 함께 표시되는 검증 메시지
helperText — 항상 노출되는 보조 안내 문구
count + maxLength — 글자 수 카운터 내장

Usage

기본 사용법

<CoreTextArea placeholder="Placeholder" />

Label 포함

<CoreTextArea label="Label" placeholder="Placeholder" />

필수 입력 (Required)

<CoreTextArea label="Label" required placeholder="Placeholder" />

글자 수 카운트

<CoreTextArea placeholder="최대 100자" count maxLength={100} />

상태와 Validation Text

<VStack $css={{ gap: '12px' }}>
<CoreTextArea label="성공" status="success" validationText="성공 메시지" placeholder="Placeholder" />
<CoreTextArea label="경고" status="warning" validationText="경고 메시지" placeholder="Placeholder" />
<CoreTextArea label="에러" status="error"   validationText="에러 메시지"  placeholder="Placeholder" />
</VStack>

Helper Text

<CoreTextArea label="Label" placeholder="Placeholder" helperText="Helper text" />

비활성화 및 읽기 전용

<VStack $css={{ gap: '12px' }}>
<CoreTextArea label="Disabled"  value="Disabled value"   disabled />
<CoreTextArea label="Read Only" value="Read only value"  readOnly />
</VStack>

너비 지정

<CoreTextArea label="Label" placeholder="Placeholder" width="320px" />

모든 기능 조합

<CoreTextArea
label="Label"
required
count
maxLength={100}
status="success"
validationText="validationText"
helperText="Helper text"
placeholder="Placeholder"
/>

Props

ComponentPropsWithoutRef<'textarea'>를 확장한 컴포넌트입니다.

Prop

Type

스타일

레이아웃

Wrapper:

display: flex, flex-direction: column, align-items: stretch
width: width prop 값 (기본 100%)

Label:

typography: heading[1], color: text-2
margin-bottom: spacing-150 (6px)
disabled 시 color: text-4

TextArea:

padding: spacing-200 spacing-250 (8px 10px)
border-radius: radius-100
background-color: background-1
typography: body[2]
height: 160px, resize: vertical

Status별 테두리 색상

Status	Border
`none`	`border[1]` (focus/active 시 `primary[50]`)
`success`	`support-success[3]`
`warning`	`support-warning[3]`
`error`	`support-error[3]`

상태별 토큰

상태	배경	텍스트
기본	`background-1`	`text-1`
readOnly / disabled	`gray[20]`	`text-1` / `text-4`
placeholder	—	`text[5]` (`text[4]` when disabled/readOnly)

Validation Text: 아이콘 포함, status에 따라 support-success/warning/error[3] 색상 적용. none이면 color: transparent

마이그레이션 가이드

CoreTextArea	TextArea
`status="success"`	`status="success"`
`validationText`	`validationText`
`helperText`	`helperText`
`count` + `maxLength`	`count` + `maxLength`
`labelElement`	`labelElement`
`width` prop	컨테이너 너비로 제어

CoreTextArea와 TextArea는 API가 거의 동일합니다. width prop만 제거되고 너비는 부모 컨테이너로 제어하는 방식으로 바뀝니다.

// Before
<CoreTextArea
  label="Label"
  status="error"
  validationText="필수 항목입니다"
  width="400px"
/>

// After
<div style={{ width: '400px' }}>
  <TextArea
    label="Label"
    status="error"
    validationText="필수 항목입니다"
  />
</div>

On this page