[feature/#14/Input] Input 공용 컴포넌트 구현

[hellosonic-r]

#️⃣연관된 이슈

close #14

💡 핵심적으로 구현된 사항

• 공용 컴포넌트 CommonInput 컴포넌트 구현
• children으로 input 필드 우측에 아이콘 등 요소를 추가할 수 있음
• prop으로 register 전달받아 validation 처리가 가능함

사용 예시

• react-hook-form 이랑 사용 시 간단한 사용 예시입니다. 기본적인 사용법으로 이해에 참고만 해주시고 정확한 것은 공식문서 참고 부탁드릴게요!
• 아 그리고 validation 에러 처리의 경우엔 Chakra UI 에서 제공하는 기능이 있긴 하더라구요 링크 첨부해드리니 확인 부탁드립니다.
  react-hook-fom 공식문서
  Chakra UI + react-hook-form

• useForm 을 통해 다양한 옵션을 사용할 수 있음

• 아래의 전체 코드처럼 이런 식으로 register의 각 네임을 지정하고 validation 처리가 가능함
• validation 검증 옵션에는 여러 가지가 있음
  • required
  • minLength
  • maxLength
  • pattern (정규식 ..)
• formState의 Error 객체를 활용해서 validation 검증 후 필요 시 에러 메시지를 렌더링할 수 있습니다. (케찹터진부분)

• submit시 인자로 받은 두 개의 콜백함수 중 하나가 실행됨

➕ 그 외에 추가적으로 구현된 사항

🤔 테스트,검증 && 고민 사항

📌 PR Comment 작성 시 Prefix for Reviewers

[wdgWon]

고생하셨습니다~!!
와이어프레임의 모든 입력 UI를 정말 꼼꼼히 보신 것 같아요
딱 필요한 속성들만 들어가 있었는데
이것들 추리느라 고생하셨습니다 ㅠㅠㅠ
사용해보면서 또 얘기하겠습니다!