[석지우] sprint11

[Jiwoo11111]

요구사항

기본

회원가입

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

로그인

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

메인

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

심화

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

주요 변경사항

• 스프린트 미션 1~4 내용의 html css js를 리액트, 모듈 css로 마이그레이션하여 추가했습니다.

멘토에게

[baeggmin]

로그인, 회원가입 로직 모두 잘 작성해주셨네요! 👏
다음에는 리프레시토큰 사용 방법과 로그인 상태를 전역상태로 관리하는 방법에 대해서 공부해보시면 좋을 것 같습니다! 💪

[baeggmin]

중첩된 삼항연산자 사용은 지양해주세요!
가독성이 떨어질 수 있어요. if 문으로 대체해도 충분할 것 같습니다.

[baeggmin]

value 에 공백이 포함될 수도 있으니 String.trim() 메소드를 써도 좋을 것 같네요~ (아래 password 도 동일합니다.)

[baeggmin]

state 가 너무 많은데요, error 와 관련된 state 들은 const 변수로도 충분히 관리 가능할 것 같습니다.
어차피 email, username, password 등의 state 가 바뀔 때 해당 컴포넌트는 리렌더링 될 것이기 때문에 error 값을 다시 계산해줄거에요. 아래와 같이 수정해보시면 좋을 것 같습니다. (저는 우선 지우님 로직을 그대로 가져다가 썼지만, 가급적 중첩된 삼항연산자는 지양해주세용)

  const emailError = !email
    ? '이메일을 입력해주세요.'
    : !emailPattern.test(email)
    ? '잘못된 이메일 형식입니다.'
    : '';

  const usernameError = !username.trim() ? '닉네임을 입력해주세요.' : '';

  const passwordError = !password
    ? '비밀번호를 입력해주세요.'
    : password.length < 8
    ? '비밀번호를 8자 이상 입력해주세요.'
    : '';

  const passwordVerifyError =
    passwordVerify !== password ? '비밀번호가 일치하지 않습니다.' : '';
    
    ```

[baeggmin]

client component 도 기본적으로 서버사이드 렌더링이기 때문에, 지금처럼 useEffect에서 localStorage를 바로 읽으면 undefined 에러가 발생할 수 있어요. 브라우저(클라이언트) 환경에서만 접근할 수 있게 조건을 추가해주시면 좋을 것 같네용