[정성혜] week14

[eqypo9]

요구사항

기본

• 로그인/회원가입시 성공 응답으로 받은 accessToken을 로컬 스토리지에 저장합니다.
• 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 “/folder” 페이지로 이동합니다.
• “회원 가입하기”를 클릭하면 ‘/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”로 이동합니다.
• 소셜 로그인에
구글 아이콘 클릭시 ‘[https://www.google.com’
카카오]- [ ] (https://www.google.com%E2%80%99%E2%80%A8%EC%B9%B4%EC%B9%B4%EC%98%A4/) 아이콘 클릭시 ‘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을 활용해 주세요.

주요 변경사항

스크린샷

멘토에게

이전 주차 미션을 제대로 해결 못해서 원활한 진행이 되지 않았습니다.
아직 next에 대한 이해가 부족하다고 느껴 공부하면서 추후 수정하도록 하겠습니다. 🥲

[clianor]

react-hook-form의 Controller는 register로 제어하기 어려운 컴포넌트를 다룰때 주로 사용되는 래퍼 컴포넌트입니다.
인풋에는 register를 이용해보심이 어떨까요?

[clianor]

대신 인풋을 forwardRef를 사용해서 만들어보셔야겠네요!

[clianor]

현재 variant는 미구현된 기능으로 보여집니다.
이런 경우 주석을 활용해서 추후 개발할 기능이란 의미에서 TODO 주석을 활용해 보심은 어떨까요?

[clianor]

머지를 잘못된 타겟 브랜치로 하셔서 수정해두었습니다.
컨플릭트 난 부분은 제가 임의로 수정해두었지만 잘못되었을 수 있습니다.
만약 의존성과 관련해 문제가 생긴다면 node_modules와 package-lock.json 파일을 지우고 다시 npm install 을 실행해주세요!