[FEATURE] [공통 컴포넌트] Label

[KingNono1030]

📝 작업 설명

• Label 컴포넌트는 텍스트 라벨과 input 필드를 감싸는 컴포넌트로, 사용자가 명시적으로 필드를 구분할 수 있도록 도와줍니다.
• required 상태에 따라 별표(*) 표시를 추가하여 필수 입력 필드임을 나타냅니다.
• 향후 Form 컴파운드 컴포넌트의 재료로 활용할 수 있도록 설계되었습니다.

---

🎯 목표 및 필요성

• 재사용성: 라벨마다 디자인이 다르더라도 일관성을 유지하며 컴포넌트로 관리할 수 있음.
• 확장성: 필수 필드, 에러, 성공 상태 등 다양한 상태를 쉽게 추가 가능.
• 일관성: 디자인 시스템과의 통합을 통해 폼 구조에서 라벨과 필드 간의 일관성 유지.

---

📅 예상 마일스톤

• Step 1: Label 컴포넌트 기본 구현
• Step 2: required 상태 추가
• Step 3: children으로 인풋 필드 연결
• Step 4: Form 컴포넌트와 통합 테스트

---

🔍 상세 작업 내용

1️⃣ Label 컴포넌트 기본 설계

• children을 통해 텍스트 또는 input 필드를 동적으로 추가 가능.

2️⃣ required 상태 처리

• required 속성이 true일 경우 별표(*)를 추가하여 필수 필드임을 시각적으로 표시.

3️⃣ 추가 스타일링 옵션

• className을 통해 사용자 정의 스타일 적용 가능.

4️⃣ 확장 계획

• 에러 메시지 또는 성공 상태를 나타내는 상태 추가.
• aria-label 또는 aria-describedby를 활용한 접근성(A11y) 강화.

---

📌 컴포넌트 코드

import clsx from 'clsx'

interface LabelProps {
  htmlFor: string
  children: React.ReactNode
  required?: boolean
  className?: string
}

const Label = ({
  htmlFor,
  children,
  required = false,
  className = '',
}: LabelProps): JSX.Element => {
  return (
    <label
      htmlFor={htmlFor}
      className={clsx(
        'flex flex-col gap-2 text-gray-800 font-medium',
        className
      )}
    >
      <div className="flex items-center">
        <span>Label Text</span>
        {required && <span className="text-red-500 ml-1">*</span>}
      </div>
      {children}
    </label>
  )
}

export default Label

📘 사용 예시

import Input from './Input'
import Label from './Label'

export default function ExampleForm() {
  return (
    <form className="space-y-4">
      <Label required>
        <Input placeholder="Enter your username" />
      </Label>
    </form>
  )
}