[FE] 로그인 상태 관리 추가, 로그인 상태에 따른 UI 및 동작 변경 구현

[MeganMagic]

작업 내용

ContinueUrl store 작성

• 페이지가 reload된 후에도 store의 값이 유지되어야 함으로, redux-persist를 적용했습니다.
• redux-persist를 적용하면서 non-serialiazable 관련 에러가 발생해, src/store/index.ts에 몇가지 설정을 추가했습니다. (참고자료)

loginRedirectPage 작성

• /login/success에 해당하는 페이지입니다.
• cookie에 토큰이 있으면 continueUrl의 주소로 리다이렉트 합니다.
• 토큰이 없으면 에러 메세지와 함께 로그인 페이지로 리다이렉트 합니다.

withAuth 작성

• Higher order component로 해당 페이지에 접근하기 이전에 로그인 관련된 상태를 확인합니다.
• 로그인해야 접근할 수 있는 페이지의 경우, role parameter에 'protected'를 입력하고, 로그인을 하는 페이지의 경우 'auth'를 입력합니다.
• 'protected'의 경우 로그인이 되어 있으면 해당 페이지로 이동, 아닐 경우 현재 url을 continueUrl에 저장한 후 로그인 페이지로 redirect 합니다.
• 'auth'의 경우 로그인이 안되어 있으면 해당 페이지로 이동, 로그인이 되어 있는 경우 메인 페이지로 redirect 합니다.
  • 로그인한 유저가 로그인 페이지에 접근하는 것이 부자연스럽다고 생각하여 추가한 기능인데, 혹시 너무 로직이 복잡해지는 것 같으면 제외해도 좋습니다.

useLogin hook을 작성했습니다.

• isLogin: cookie의 토큰 여부에 따른 로그인 상태
• profile: 사용자 정보 (isLogin시에만 존재)
• logIn: 현재 주소를 continueUrl에 저장한 후 로그인 페이지로 이동
• logOut: cookie의 토큰 삭제
• checkAuth: isLogin 여부를 확인하고, 로그인 된 경우 입력된 callback을 실행, 아닐 경우 continueUrl 저장 후 로그인 페이지로 이동

로그인 여부에 따른 UI 및 동작 변경 구현

• mainHeader: 로그인 시 user Icon & notification button, 비로그인시 로그인 버튼
• detailPage: 로그인 시 모든 동작 가능, 비로그인시 댓글, 리액션 버튼 클릭시 로그인 페이지로 이동
• openapi-request > getAxiosInstance(): cookie의 토큰 유무에 따라 headers.Authorization 구분