본 컴포넌트는 Next.js 환경에서 폼 요소(Input, Select, Textarea 등)에 대응되는 라벨을 명확하게 연결하기 위한 공통 Label 컴포넌트를 제공하도록 설계되었다.

웹 접근성을 고려하여 htmlFor를 필수로 사용하며, 시각적으로 숨기되 스크린 리더에는 노출되는 옵션을 함께 제공한다.

✅ 컴포넌트 구조

• "use client" 선언 없이 사용 가능
• Server / Client 컴포넌트 어디서든 안전하게 사용 가능

✅ 공통 속성 (LabelProps)

본 컴포넌트는 아래의 Props를 기반으로 하며, 폼 접근성을 최우선으로 고려한 최소한의 인터페이스를 제공한다.

• htmlFor: string

  연결할 폼 요소의 id → 스크린 리더 및 클릭 포커싱을 위해 필수

• children: React.ReactNode

  라벨에 표시될 텍스트 또는 요소

• hidden?: boolean

  시각적으로 라벨을 숨길지 여부

  • true일 경우 sr-only 클래스를 적용
  • 스크린 리더에는 정상적으로 노출됨

• className?: string

  라벨에 커스텀 스타일을 적용하기 위한 클래스

✅ 사용 예시

1. 일반적인 사용 (Server / Client 공통)

가장 기본적인 라벨 사용 방법입니다.

htmlFor와 id를 통해 폼 요소와 명확하게 연결한다.