FEAT: refreshToken 로직 추가

[niamu01]

프론트는 이론만 알고 아직 코드를 짤 때 어떻게 만들어야 좋은 방향인지 잘 모릅니다. 오류 있으면 수정해주세요!!
이 변경사항을 꼭 반영하지 않아도 기존과 동일하게 accessToken만으로 동작합니다.
백엔드가 아직 refresh 로직이 반영되지 않아 이후에 PR오픈하겠습니다...!
dev에만 refresh로직이 반영된 상태입니다! main은 혹시 모르니 이후에...!!!

테스트 방법 및 백엔드 변경 사항은 아래 링크에서 확인할 수 있습니다. 🫡
innovationacademy-kr/24hane-backend#211

작업 내용

1. readme 의 실행 방법 부분의 env 설명을 수정하였습니다.

VITE_ACCESS_TOKEN = accessToken
VITE_REFRESH_TOKEN = refreshToken

나머지 수정들은 저장 시 자동으로 포맷팅된 띄어쓰기들입니다. 크게 상관 없는 것 같아 그대로 두었습니다.

2. env.d.ts 파일에 env 값의 자료형을 명시해주었습니다. 추가한 코드와 관련있는 env 만 명시했습니다.

3. Cookie 관련 함수들

a. getCookie

• 기존의 getCookie(): env 값과 동일한 쿠키의 값을 반환
• getCookie(name: string):
  • 매개변수로 입력 받은 이름에 맞는 쿠키의 값을 반환
  • 이름에 해당하는 쿠키가 없을 시 null 반환

b. setCookie

• accessToken을 새로 설정해주기 위해 추가된 함수
• setCookie(name: string, value: string)
  • 매개변수로 입력 받은 이름과 값 그대로 쿠키 설정
  • path랑 domain은 removeCookie 보고 따라했습니다.

c. removeCookie

• 기존의 removeCookie(): env 값과 동일한 쿠키를 만료시킴
• removeCookie(name: string):
  • 매개변수로 입력 받은 이름에 맞는 쿠키를 만료시킴

4. 인증 로직 변경
   파일: src/router/index.ts
   기존: 토큰이 없는 경우 로그인 페이지로 이동
   변경: 토큰이 없는 경우 /user/#/refresh 로 POST 요청을 하여 accessToken 갱신을 시도
   refreshToken도 없거나 만료된 경우 기존과 동일하게 로그인 페이지로 이동

5. 401 응답에 대한 로직 변경
   파일: src/api/baseAPI.ts
   기존: 응답이 401상태거나 정의되지 않는 경우 -> 쿠키 삭제, 로컬 스토리지 삭제, 로그인 페이지로 리다이렉트
   변경:
   응답이 401인 경우 -> 토큰 갱신을 시도 (이미 시도 중이라면 대기)
   갱신된 토큰을 사용하여 원래의 요청을 다시 시도
   갱신에 실패하면 쿠키와 로컬 스토리지를 지우고 로그인 페이지로 리다이렉트