Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feature/#14/input] Input 컴포넌트 #25

Closed
wants to merge 16 commits into from
Closed

Conversation

hellosonic-r
Copy link
Contributor

#️⃣연관된 이슈

#14

💡 핵심적으로 구현된 사항

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

사용 예시

  • react-hook-form 이랑 사용 시 간단한 사용 예시입니다. 기본적인 사용법으로 이해에 참고만 해주시고 정확한 것은 공식문서 참고 부탁드릴게요!
  • 아 그리고 validation 에러 처리의 경우엔 Chakra UI 에서 제공하는 기능이 있긴 하더라구요 링크 첨부해드리니 확인 부탁드립니다.
    react-hook-fom 공식문서
    Chakra UI + react-hook-form
스크린샷 2024-02-15 오후 7 35 44
  • useForm 을 통해 다양한 옵션을 사용할 수 있음
스크린샷 2024-02-15 오후 1 48 04
  • 아래의 전체 코드처럼 이런 식으로 register의 각 네임을 지정하고 validation 처리가 가능함
  • validation 검증 옵션에는 여러 가지가 있음
    • required
    • minLength
    • maxLength
    • pattern (정규식 ..)
  • formState의 Error 객체를 활용해서 validation 검증 후 필요 시 에러 메시지를 렌더링할 수 있습니다. (케찹터진부분)
스크린샷 2024-02-15 오후 1 54 34
  • submit시 인자로 받은 두 개의 콜백함수 중 하나가 실행됨
스크린샷 2024-02-15 오후 1 54 09

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

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

📌 PR Comment 작성 시 Prefix for Reviewers

@hellosonic-r hellosonic-r added Design 디자인 Feat 기능 구현 labels Feb 15, 2024
@hellosonic-r hellosonic-r added this to the 1차 스프린트 milestone Feb 15, 2024
@whdgur5717 whdgur5717 closed this Feb 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Design 디자인 Feat 기능 구현
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants