Label 컴포넌트 명칭 모호성 및 역할 재정의 제안

[jj5u]

현재 디자인 시스템에서 사용 중인 Label 컴포넌트의 역할 정의가 모호합니다.
일반적으로 UI/UX 관점에서 label은 다음과 같이 이해됩니다:

1. 특정 form control (input, select, checkbox 등) 과 1:1로 연결되는 설명 텍스트
2. 접근성 측면에서 for 속성 또는 aria-labelledby 와 연결되는 명시적 식별자

그러나 현재 Label이라는 명칭이 아래 두 가지 개념을 혼용하고 있습니다:

1. Control Label
   → 개별 input을 설명하는 label
2. Group Label (Fieldset Legend)
   → 여러 입력 요소를 묶는 그룹 제목

현재 legend 역할을 하는 label에 대해 명칭 구분을 구체적으로 하는 것을 제안드립니다.

MDN legend
KRDS 접근성 가이드라인

[SimYunSup]

좋습니다! 하지만 Control Label 대신 Field Label이라고 명칭하는 것이 더 개발자에게 와닿을 것 같네요(Form Field라고 명칭하는 경우가 많으니까요).

[SimYunSup]

labelText prop을 children으로 변경 제안

현재 Label 컴포넌트는 라벨 텍스트를 labelText prop으로 전달받고 있습니다. 이를 React의 관용적 패턴인 children으로 변경하는 것을 제안합니다.

현재 상태

<Label labelText="이메일" required>
  <TextInput placeholder="이메일을 입력해주세요" />
</Label>

• labelText: string — 라벨 텍스트 (필수)
• children?: LabelFormChild — 연결할 입력 요소 (Button, Checkbox, RadioGroup, TextInput만 허용)

제안하는 변경

<Label required>
  이메일
  <TextInput placeholder="이메일을 입력해주세요" />
</Label>

• children?: React.ReactNode — 라벨 텍스트 및 하위 요소
• labelText prop 제거

변경 이유

1. React 관용적 패턴 준수

대부분의 React UI 라이브러리(Radix, Chakra, MUI 등)에서 <Label> 컴포넌트는 children을 통해 텍스트를 전달합니다.

// Radix UI
<Label.Root>이메일</Label.Root>

// Chakra UI
<FormLabel>이메일</FormLabel>

// MUI
<InputLabel>이메일</InputLabel>

2. children 타입 제한 제거

현재 children은 LabelFormChild 타입으로 Button | Checkbox | RadioGroup | TextInput만 허용합니다. 이 제한은 새로운 입력 컴포넌트(Select, Textarea 등)가 추가될 때마다 타입을 수동으로 업데이트해야 하므로 유지보수에 부담이 됩니다. React.ReactNode로 변경하면 이 문제가 해결됩니다.

3. 네이티브 <label> 태그와의 일관성

HTML <label> 태그는 텍스트를 자식 요소로 받습니다:

<label>이메일 <input type="text" /></label>

children으로 변경하면 네이티브 HTML 패턴과 동일하게 동작하여 직관적입니다.