[Refactor] 로그인, 비로그인 api 관리 방법

🚨 문제 상황1 : 로그인이 필요한 페이지에서의 반복적인 토큰 발급과 토큰 유효성 검사 🚨

• 로그인이 필요한 페이지에서 매번 토큰을 발급하고 토큰 유효성 검사를 하다 보니 중복 코드가 많았다.

🚑🚑 해결 방법1 : axiosInstance 두 개 만들기 🚑🚑

• 로그인이 필요하지 않은 api를 호출할 때 사용할 axiosInstance 하나, 로그인이 필요한 api를 호출할 때 사용할 axiosInstance 하나, 이렇게 총 두 개를 만들었다.

두 개를 이렇게 분리를 하고 나니 확실히 api 호출부가 간단해졌다.

하지만 이대로 두면 안된다.
다음과 같은 문제가 발생하기 때문이다.

🚨 문제 상황 2: 로그인하지 않은 상태에서 마이페이지에 접근할 경우, 로그인 페이지로 넘어가기 전에 마이페이지가 잠깐 보인다 🚨

생각해보면 당연한 것인데

이제 axiosInstance에서 intercepter.request에 토큰 유효성 검사만 추가하면 간단하고 완벽한 axiosInstance가 완성이 되겠다고 생각했다.

그런데 생각해보니 참 당연하게도 axiosInstance에 토큰 유효성 검사를 넣는 것은 옳지 않다. axiosInstance를 호출한다는 것은 이미 페이지 접근 여부가 정해졌다는 것이기 때문이다.

토큰 유효성 검사는 axiosInstance를 호출하기 전에 해야 한다. 따라서, 로그인/비로그인 여부를 담당하는 전역 상태 관리 툴을 따로 사용해야 한다.

🚑🚑 해결 방법2 : 전역 상태관리 툴을 사용해야 한다 🚑🚑

이 프로젝트에는 zustand를 사용하기로 했다.
이유는 다음과 같다.
1. redux를 사용할 만큼 복잡한 상태가 아니다. zustand는 설정이 간단하고, 사용법도 직관적이라는 이야기를 들어서 로그인/비로그인 상태 관리에 적합하다고 판단했다.
2. zustand는 상태 변경 시 불필요한 리렌더링을 줄임으로써 리렌더링을 최적화하여 성능 향상을 돕는다. 본 프로젝트는 많은 양의 브랜드 데이터와 향수 데이터를 담고 있어서 최적화가 중요하다.
3. zustand는 애플리케이션 번들 크기를 줄이는 데에 도움이 된다.

zustand는 api 모듈화 먼저 끝내고 할 예정이다.