zod, react-hook-form을 활용하여 이름, 휴대전화, 이메일, 인증번호 유효성 검사를 진행하고 오류시 에러메시지를 표시합니다.
submit 했을 때 미입력 항목이 있으면 해당 요소로 focus 됩니다.
이메일 입력값이 없으면 확인창('이메일을 입력해주세요')이 뜹니다.
이메일 입력 상태에 따라 코드발송 버튼 활성화 여부가 달라집니다.
인증번호 입력 상태에 따라 인증완료 버튼 활성화 여부가 달라집니다.
지원자 중복확인 api 를 요청해 중복확인합니다.
지원서 작성 버튼 클릭시 지원서 작성 페이지로 이동합니다.
1.2 지원자 작성 페이지
지원서 작성 - 작성중
지원서 작성 - 제출
zod, react-hook-form을 활용하여 모든 입력값에 대한 유효성 검사를 진행합니다.
submit 했을 때 모두 입력해야 다음 페이지로 이동합니다.
스크롤의 움직임에 따라 사이드바가 움직입니다.
1.3 채용 폼 생성 페이지
채용 폼 생성 - 진입
채용 폼 생성 - 작성과정
채용 폼 생성 - 작성완료
사용자가 값을 입력하자마자 즉각적으로 에러 문구를 출력하기로 했고, 이를 위해 실시간으로 값을 갱신해 주는 React-hook-form 의 onChange mode 를 사용하였습니다. 이를 통해 사용자가 submit 버튼을 누르기 전에 입력값이 유효한지 검사해줘, UX 친화적으로 구현할 수 있었습니다.
입력값의 복잡한 유효성 검증은 Zod 라이브러리를 사용해 간단하게 처리했고, Typescript 와 함께 사용함으로써 타입의 안정성을 향상시켰습니다.
폼의 중복 제출을 방지하기 위해, 버튼의 disabled 속성에 현재 제출 중인 상태인지 아닌지를 알아낼 수 있는 isSubmitting 값을 설정해 주었습니다.
나가기 및 삭제 클릭시 채용폼관리 메인으로 이동합니다.
작성완료 클릭시 api 호출돼 폼이 서버로 저장됩니다. 그 후 모달창이 뜨고 링크복사를 하거나 지원서로 이동할 수 있습니다.
2. 개발 환경 세팅
git clone https://github.com/eun0leee/salarying-fe.git
cd salarying-fe
npm install
npm dev
