[✨Feature] Input 공통 컴포너트 구현

[Lseojeong]

📌 설명

폼 입력을 일관된 방식으로 관리하기 위해 Input 공통 컴포넌트를 구현합니다.

React Hook Form과 연동하여 폼 상태 및 유효성 검사를 효율적으로 관리하고, Compound Pattern을 적용하여 Label, Input, Description, Error Message를 유연하게 조합할 수 있도록 구성합니다.

또한 텍스트, 숫자, URL 입력 등 다양한 입력 타입을 지원하며, 입력 필드 내 버튼이 필요한 경우에도 재사용할 수 있도록 확장 가능한 구조를 제공합니다.

🛠️ 구현 목록 (TODO)

진행할 작업을 체크리스트로 작성해주세요.

Input

• Input 공통 컴포넌트 구현
• text 타입 지원
• number 타입 지원
• url 타입 지원
• Disabled 상태 지원
• Readonly 상태 지원
• 버튼 포함 Input 지원
• className 확장 지원

Compound Pattern

• Compound Pattern 구조 설계
• Input.Label 구현
• Input.Field 구현
• Input.ErrorMessage 구현

Label

• 기본 Label 지원
• 필수 입력(*) 표시 지원
• Label과 Input 연결 (htmlFor, id)

React Hook Form

• React Hook Form 연동
• FormField 래퍼 구현
• 에러 메시지 표시 연동
• 유효성 검증 상태 연동

문서화

• Storybook 작성
• 타입별 예제 작성
• React Hook Form 사용 예제 작성

✅ 참고

디자인 링크, 관련 이슈 등 (선택)