[정용준] Week13

[dkile]

요구사항

기본

• “회원 가입하기”를 클릭하면 ‘/signup’ 페이지로 이동합니다.
• 이메일 input에 placeholder는 “이메일을 입력해 주세요.”
비밀번호 input에 placeholder는 “비밀번호를 입력해 주세요.”
로 설정해 주세요.
• 이메일 input에서 focus out 할 때, 값이 없을 경우 아래에 “이메일을 입력해 주세요.” 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 아래에 “올바른 이메일 주소가 아닙니다.” 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해 주세요.” 에러 메세지를 보입니다.
• 로그인 실패하는 경우, 이메일 input 아래에 “이메일을 확인해 주세요.”, 비밀번호 input 아래에 “비밀번호를 확인해 주세요.” 에러 메세지를 보입니다.
• 로그인 버튼 클릭 또는 Enter키 입력으로 로그인 실행돼야 합니다.
• https://bootcamp-api.codeit.kr/docs 에 명세된 “/api/sign-in”으로 { “email”: “[email protected]”, “password”: “sprint101” } POST 요청해서 성공 응답을 받으면 “/folder”로 이동합니다.
• 로그인/회원가입시 성공 응답으로 받은 accessToken을 로컬 스토리지에 저장합니다.
• 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 “/folder” 페이지로 이동합니다.
• 눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
• 비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다.
• 소셜 로그인에
구글 아이콘 클릭시 ‘https://www.google.com’
카카오 아이콘 클릭시 ‘https://www.kakaocorp.com/page’
로 이동하게 해주세요.
• “회원 가입하기”를 클릭하면 ‘/signin’ 페이지로 이동합니다.
• 이메일 input에 placeholder는 “이메일을 입력해 주세요.”
비밀번호 input에 placeholder는 “영문, 숫자를 조합해 8자 이상 입력해 주세요.”
비밀번호 확인 input에 placeholder는 “비밀번호와 일치하는 값을 입력해 주세요.”
로 설정해 주세요.
• 이메일 input에서 focus out 할 때, 값이 없을 경우 “이메일을 입력해주세요.” 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 “올바른 이메일 주소가 아닙니다.” 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만으로 있거나 문자열만 있거나 숫자만 있는 경우, “비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.” 에러 메세지를 보입니다.
• 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않아요.” 에러 메세지를 보입니다.
  회원가입을 실행할 경우, 문제가 있는 경우 문제가 있는 input에 에러 메세지로 알립니다.
• 회원가입 버튼 클릭 또는 Enter키 입력으로 회원가입 실행돼야 합니다.
• 이메일 input focus out 할 때 이메일 중복 확인은 “/api/check-email” POST 요청해서 확인합니다. 중복된 경우 “이미 사용 중인 이메일입니다.” 에러 메세지를 보입니다.
(중복된 이메일 확인은 “[email protected]”을 활용해 주세요.)
• 유효한 회원가입 형식의 경우 “/api/sign-up” POST 요청하고 성공 응답을 받으면 “/folder”로 이동합니다.

심화

• 로그인, 회원가입 기능에 react-hook-form을 활용해 주세요.

주요 변경사항

• 로그인 페이지 구현
• react-hook-form 적용

스크린샷

멘토에게

• 질문 사항은 멘토링 노션 페이지에 적어두겠습니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[JaeSang1998]

용준님 너무 깔끔해졌습니다 코드가, 저도 좀 더 보고 코멘트 추가적으로 있으면 남겨둘게요!

[JaeSang1998]

resolver 라는 이름이 내포하고 있는 의미가 뭘까요? 약간은 어색해보여서요

[dkile]

https://blog.neonkid.xyz/238
스프링에서 파라미터를 가공해서 데이터를 뽑아내는 객체를 resolver라고 하길래 똑같이 네이밍을 해봤습니다. 음..Mapper가 더 직관적일까요?

[JaeSang1998]

음... mapper 나 resolve 둘 다 의미가 명확히 전달되지는 않는 것 같아요 ㅋㅋ
값을 뽑아내서 토큰을 저장하는 거니까.. 흠.....
오히려 controller 가 더 어울리는 것 같기도 하고...

[dkile]

뷰에 도착하기 전까지의 플로우만 정의한다면 Controller가 더 어울리는 이름 같습니다. 값을 뽑아내서 뷰 모델에 맞게 바꾸는건
Resolver 혹은 Adapter, 플로우만 명시하고 각각의 동작들은 함수로 빼거나 다른 객체에게 위임을 하는 건 Controller 어떨까요?