[김제완] sprint11

[Berrnuda]

netlify 링크

요구사항

• Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
• 피그마 디자인에 맞게 페이지를 만들어 주세요.
• 기존의 스프린트 미션 8에 이어서 React, Typescript를 사용합니다.

기본

회원가입

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

로그인

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

메인

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

심화

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

주요 변경사항

• AuthProvider를 사용하는 방식으로 변경했습니다.
• axios 오류가 나서 fetch로 일단 해두었습니다 ㅠ
• 훅폼 사용

멘토에게

• 아직도 깃허브가 익숙치않네요 ㅎㅎ; SigninForm, SignupForm, AuthProvider 파일만 봐주시면 될것같습니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[leejyart]

inputField 를 공통 컴포넌트로 만들수 있을 것 같습니다. 또한, 에러메세지 뿐만 아니라 다른 상수값들도 모두 한곳에서 관리해볼수도 있을 것 같습니다.

export const INPUT_FIELD_SETTINGS = {
  email: {
    id: "email",
    placeholder: "이메일을 입력해 주세요.",
    validation: {
      required: "이메일을 입력해 주세요.",
      pattern: {
        value: /^\S+@\S+$/i,
        message: "이메일 형식이 올바르지 않습니다.",
      },
    },
  },
  password: {
    id: "password",
    placeholder: "비밀번호를 입력해 주세요.",
    validation: {
      required: "비밀번호를 입력해 주세요.",
      minLength: {
        value: 8,
        message: "비밀번호 길이를 8자리 이상 입력해주세요.",
      },
    },
  },
};

[leejyart]

401일 경우에 적절한 에러 핸들링을 추가해주면 좋습니다. HTTP 상태 코드 401은 인증되지 않은(Unauthorized) 상태를 나타내며, 사용자가 인증되지 않았음을 의미합니다. 이 상황에서는 사용자를 로그인 페이지로 리다이렉트하거나 인증이 필요한 처리를 요구할 수 있습니다.

[leejyart]

환경 변수(Environment variables)를 사용하여 API 엔드포인트와 같은 중요한 설정값들을 관리하는 것도 추천합니다. 중요한 정보를 소스 코드에 하드코딩하지 않고 환경 변수로 관리하면, 보안을 강화할 수 있습니다

[leejyart]

회원가입 폼(SignUpForm)에서 로그인 상태를 감지하여 리다이렉트하는 useEffect를 사용하는 것보다는, 이 로직을 상위 컴포넌트에서 처리하는 것이 더 적절할 수 있습니다. 상위 컴포넌트에서는 사용자 상태를 감지하고, 필요할 때마다 자식 컴포넌트로 전달할 수 있습니다.