회원가입/로그인 페이지 입력값 검증 결과 메시지 출력 추가 요청

[seonpilKim]

Feature Description

사용자 입장에서 입력 인풋에 값을 입력하면, 우측의 체크 표시와 X 표시를 통해 유효성 검사가 진행되는 것을 확인할 수 있지만, 유효성 검사 실패의 원인은 알 수 없어서 어떻게 해야할 지 난감해지는 경험을 할 것 같아요.

실제 인스타에서는 인풋 박스에서 유효성 검사에 실패해도(x 표시) 가입 버튼을 활성화시키고, 가입 버튼을 누르면 가입 버튼 하단에 메시지가 뜨는 형태인데, 이와 같이 추가되면 좋을 것 같습니다!

Todo

• [ ] 회원가입/로그인 페이지 입력 값 검증 결과 메시지 추가

[seonpilKim]

아 그리고 수화님, validator 수정이 필요해 보입니다! 회원가입 페이지에서는 비밀번호에 특수문자를 입력해도 넘어가지는데, 인증 코드를 검증하는 단계에서 회원가입 API를 호출하면, 서버에서 비밀번호는 특수문자를 불허하기 때문에 여기서 더 이상 진행이 안 되는 문제가 발생하고 있습니다.

서버에선 아래와 같이 정규식 검증을 진행하고 있습니다.

• username: 영소/대문자, 숫자만 허용 + 4문자 이상 12문자 이하
• name: 2문자 이상 12문자 이하
• password: 영소/대문자, 숫자만 허용 + 영소/대문자와 숫자 각각 1개 이상 사용 필수 + 8자 이상 20자 이하

  example) 12341234 ❌ asdfasdf ❌ a1234123 ✅ 1asdfasd ✅

Todo

• [x] 정규식 검증 로직 수정

[live-small]

@seonpilKim 선필님 덕분에 정규표현식 수정했습니다! 회의에서 들은대로 처리했었는데 놓쳤었나보네요 ㅠㅠ

회원가입할 때, 에러메시지 처리관련해서 이전에 프론트 팀원이랑 얘기한 적이 있었는데 ! 딱 그 부분을 이슈로 남겨주셨네요! 제안주신 가입버튼을 눌렀을 때 에러메시지를 보여주는 방법도 괜찮아보이는데, 2개 이상 x 일 경우에도 1개씩만 에러메시지를 보여주다보니 모든 x의 이유를 찾기위해서 버튼을 계속 눌러야하는 게 조금 불편할 수 있을 거 같아요.

그래서, x버튼에 포인터를 올렸을 때(hover시) 에러메시지를 보여주는 방법?은 어떨까요?

(우선 이 부분은 해시태그 프로필, 비밀번호 재설정 작업 후에 진행하겠습니다!)

[seonpilKim]

@live-small 오.. 저도 그 부분이 애매하다고 느꼈었는데 hover시 에러 메시지를 보여주는 거 좋은 방법인 것 같습니다👍👍