[김정현] Sprint11

[kjh9852]

요구사항

기본

회원가입

• 유효한 정보를 입력하고 스웨거 명세된 “/auth/signUp”으로 POST 요청해서 성공 응답을 받으면 회원가입이 완료됩니다.
• 회원가입이 완료되면 “/login”로 이동합니다.
• 회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.

로그인

• 회원가입을 성공한 정보를 입력하고 스웨거 명세된 “/auth/signIp”으로 POST 요청을 하면 로그인이 완료됩니다.
• 로그인이 완료되면 로컬 스토리지에 accessToken을 저장하고 “/” 로 이동합니다.
• 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.

메인

• 로컬 스토리지에 accessToken이 있는 경우 상단바 ‘로그인’ 버튼이 판다 이미지로 바뀝니다.

심화

• 로그인, 회원가입 기능에 react-hook-form을 활용해봅니다.

주요 변경사항

스크린샷

멘토에게

• 로그인 상태에서 signIn페이지에 접근 할 때 "/"로 navigate 되면서 잠깐 signIn페이지가 보이는데 어떻게 해결 할 수 있을까요??
• react-hook-form을 사용했는데 Input component가 회원가입, 로그인에만 쓰이는게 아니고 상품등록이나 게시물 등록에서도 같이 쓰이다 보니까 꼬이는게 많은 것 같습니당..어떻게 하는게 좋을까요?? 로그인에서만 쓰이는 Input을 또 따로 컴포넌트로 빼는게 좋을까요???
• accessToken 만 사용했는데 refreashToken도 사용해보겠습니다 (하다가 정 안되거나 모르겠으면 멘토링 때 질문 드리겠습니당)

[lisarnjs]

정현님 제가 넘 늦어서 죄송해요 ㅠㅠㅠ

우선 리다이렉트 문제는 next의 middleware를 이용해보면 좋을 거 같아요!
아티클도 첨부해둘테니 참고해서 수정해보세요 :)
* next js 에 middleware라는 기능이 있다. 이걸 참고해서 수정해봐라!
https://velog.io/@shagrat/Next.js-%EC%9D%B8%EC%A6%9D%EC%9D%B4-%ED%95%84%EC%9A%94%ED%95%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A6%AC%EB%8B%A4%EC%9D%B4%EB%A0%89%EC%85%98-%EB%B6%84%EA%B8%B0%EC%B2%98%EB%A6%AC

react-hook-form은 validation을 효과적으로 컨트롤하기 위해서 사용하기 때문에 모든 input에 적용하려면 오히려 불편할 수 있을거에요..! react-hook-form이 유용하게 쓰일 만한 인풋들만 컴포넌트로 분리해보는것도 좋은 방법이 될 거 같아요!

이번 한 주도 화이팅입니다 👍

[lisarnjs]

오 context로 잘 만들었군요 👍

[lisarnjs]

throw new Error()를 통해서 에러를 던져주는 것이 alert보다는 안전성 측면에서 더 좋을 것 같네요:)

[lisarnjs]

객체 props를 넘겨줄 때 삼항 연산자를 스프레드 문법 내부에서 사용하는 경우가 흔하지는 않아요! 차라리 해당 삼항연산자 부분을 변수화시켜주면 좋을 것 같아요 👍