회원가입 로직 기능을 추가합니다.

[hhhminme]

📌 이슈 링크

• close 🌟 FEATURE: [4 Week] 로그인/회원가입 등 유저 기능을 개발합니다. #127

📖 작업 배경

• 아티클 상세 페이지에 필요한 댓글, 팔로잉 등을 관리하기 위해 회원가입 기능을 추가합니다.

🛠️ 구현 내용

• 폼 관리를 위한 react-hook-form 추가
• 회원가입 api 추가
  • 회원가입 시 422 에러가 떨어져 정상적인 회원가입 플로우를 만들 수가 없어서 일단 회원 가입을 성공 시 로그인 페이지로 보내버립니다.
• 회원가입 폼 분리 및 validation 과 Required 에러 메시지 추가 (이메일 포멧 추가, 빈 칸 입력 제거)
• 에러 메시지를 인풋 하단으로 옮겨놨습니다 (기존 데모 페이지에서는 상단에 다 뭉쳐있더군요)

💡 참고사항

• 궁금한 점이 있습니다. fetch 에서 throw error 를 던졌을때 react query 내 onError 콜백 인자로 받아서 처리를 하고 싶습니다. axios 를 사용했을 땐 콜백 인자의 Error 가 객체로 넘겨졌는데 지금은 throw new error를 해서 그런지 따로 잡히는게 없습니다.
• 폼에서 에러를 처리하는것이 상당히 중요하므로(어떤 필드의 에러가 나는 지를 보여줘야해서..) 다른 분들은 어떻게 하셨는지 꼭 코멘트 남겨주세요.. 😭

🖼️ 스크린샷

Screen.Recording.2023-09-20.at.11.29.01.PM.mov

[InSeong-So]

LGTM

[InSeong-So]

Suggested change

	import type { SubmitHandler } from "react-hook-form";
	import { useForm } from "react-hook-form";
	import { useForm, type SubmitHandler } from "react-hook-form";

요렇게 하는것도 좋을 것 같아요! 일부러 분리시킨 걸까요?

[InSeong-So]

react-hook-form 다룰 때 필연적으로 JSX 부분이 길어지게 되는데 하나의 훅으로 분리하는 것도 좋더라구요.
이런 케이스는 보통 어떻게 처리하시나요? 🤗

[Seung-wan]

react-hook-form의 validation쪽은 zod와 엮어서 다뤄봐도 좋을 것 같아요~
react-hook-form resolvers