[강수민] Sprint11

[hpk5802]

요구사항

기본

회원가입

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

로그인

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

메인

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

심화

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

주요 변경사항

• Form을 Reducer에서 React Hook Form으로 마이그레이션 했습니다.
• 기존에 .env에서 관리하던 Access & Refresh Token을 삭제하고, POST(/signin)의 response로 받은 Access & Refresh Token을 local storage에서 관리하도록 수정했습니다.

스크린샷

배포 사이트로 대체하겠습니다.
판다마켓

멘토에게

• 멘토링 때 말씀해 주셨던 401 status 관련해서 찾아봤는데, 서버에서 에러 메시지를 분기 처리 해주는 방법이 많이 나왔습니다. 추가로 현재 미션은 로그인 시 받은 Access & Refresh Token을 사용하기 때문에 따로 401 status에 대한 분기 처리는 하지 않았습니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[jyh0521]

고생하셨습니다. 리액트 훅 폼 잘 써보셨네요 👍

[jyh0521]

아이콘 별도의 컴포넌트로 파일 분리 해주신거 좋네요!

[jyh0521]

아이콘에 width와 height를 주게 설계 하셨던데, svg에 따라서 width와 height가 잘 적용되지 않는 경우도 종종 있더라고요. 개발자 도구에서 꼭 확인해보시면 좋을 것 같습니다.

[jyh0521]

+대신 Number 사용해주신거 좋네요.

[jyh0521]

accessToken을 localStorage에서 받아온다면, 악성 유저가 accessToken을 넣어서 이 페이지에 접속한다면 로그인이 됐다고 뜰 것 같습니다.

[jyh0521]

remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],

원래는 호스트 이름을 다 지정해주지만, 지금은 연습이니까 이거로 한번에 퉁쳐두시는 것도 좋을 것 같습니다.