[FE] Access 토큰 쿠키로 변경(#808)

[github-actions]

📓 스토리북 링크

바로가기

📌 관련 이슈

• closed : [FE] Access 토큰 쿠키로 변경, 로그인 연장 구현 #808

✨ PR 세부 내용

Feat

refresh token을 쿠키에 저장했습니다. 그 이유는 아래와 같습니다.

• access token보다 refresh token이 만료 기간이 깁니다. 따라서 refresh token이 탈취되었을 때 보안적 이슈가 더 커지고 refresh token과 access token의 저장 위치를 다르게 하여 보안을 강하게 하려고 했습니다.
• 둘 다 localStorage에 저장하고 있었는데 localStorage는 자바스크립트로 접근이 가능하여 XSS 공격에 취약합니다. 쿠키도 XSS 공격에 취약할 수 있지만 httpOnly 옵션을 켜서 자바스크립트에서의 접근을 막아 XSS 공격에 강합니다. 또한 sameSite도 Lax로 설정하여 CSRF 공격도 예방하였습니다.

Refactor

1. apiClient 코드에서 타입 부분을 분리하였습니다.

2. 스토리북에서 JSON 데이터를 가져올 때 타입 단언을 해주었는데 하드코딩 되어있었습니다. 이 부분을 타입 import 하였습니다.

3. 로그아웃 시 새로 고침은 비동기, localStorage.clear는 동기로 작동하여 아래처럼 이미지를 못 불러오는 상태가 1초 정도 보였습니다. localStorage는 컴포넌트 상태와 주기가 다르기 때문입니다. ImageWithFallback 코드에서 사용하는 모든 값은 prop으로 받기 때문에 state를 새로 만들 필요가 없다고 판단하였습니다. 따라서 isFallback state를 제거하고 단순 변수로 변경하였습니다.