refactor: API 변경 사항 수정 반영, 토큰관련 interceptor 문 수정

- API 수정 반영하여 오류 사항들 수정
- 기존 interceptor 문에 오류가 있어서 수정
- AuthCallback Page에서 회원정보 설정 및 우편번호 발급

Author: nirii00

src/App.tsx

@@ -1,6 +1,5 @@
 import { Route, Routes } from 'react-router';
 
-import { useAxiosIntercepter } from './apis/client';
 import useViewport from './hooks/useViewport';
 import Layout from './layouts/Layout';
 import MobileLayout from './layouts/MobileLayout';
@@ -27,7 +26,6 @@ import WritePage from './pages/Write';
 
 const App = () => {
   useViewport();
-  useAxiosIntercepter();
 
   return (
     <Routes>

src/apis/auth.ts

@@ -36,17 +36,8 @@ export const getUserToken = async (stateToken: string) => {
 };
 
 export const getZipCode = async () => {
-  const { accessToken, userId, zipCode, isLoggedIn } = useAuthStore.getState();
-
   try {
-    const response = await client.get(`/members/zipCode`, {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    });
-    if (!response) throw new Error('getZipCode: no response data');
-    console.log(response);
-    console.log('UserInfo', 'Id:', userId, 'isLoggedIn:', isLoggedIn, 'zipCode', zipCode);
+    const response = await client.post(`/api/members/zipCode`);
     return response;
   } catch (error) {
     console.error(error);
@@ -56,9 +47,29 @@ export const getZipCode = async () => {
 export const getNewToken = async () => {
   try {
     const response = await client.get('/api/reissue', { withCredentials: true });
+    if (!response) throw new Error('getNewToken: no response data');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const getMydata = async () => {
+  try {
+    const response = await client.get('/api/members/me');
     if (!response) throw new Error('getNewTOken: no response data');
     return response;
   } catch (error) {
     console.error(error);
   }
 };
+
+export const deleteUserInfo = async () => {
+  try {
+    const response = await client.delete('/api/members/me');
+    if (!response) throw new Error('deleteUserInfo: no response');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};

src/apis/client.ts

@@ -1,5 +1,4 @@
 import axios from 'axios';
-import { useLayoutEffect } from 'react';
 
 import useAuthStore from '@/stores/authStore';
 
@@ -11,57 +10,51 @@ const client = axios.create({
 
 // eslint-disable-next-line react-hooks/rules-of-hooks
 
-export const useAxiosIntercepter = () => {
-  const { accessToken, setAccessToken } = useAuthStore();
-  const authIntercepter = client.interceptors.request.use(
-    (config) => {
-      config.headers.Authorization =
-        accessToken && !config.headers['x-retry']
-          ? `Bearer ${accessToken}`
-          : config.headers.Authorization;
-      return config;
-    },
-    (error) => {
-      return Promise.reject(error);
-    },
-  );
-
-  const refreshInterceptor = client.interceptors.response.use(
-    (response) => response,
-    async (error) => {
-      const originalRequest = error.config;
-
-      if (
-        (error.response.status === 401 || error.response.status === 403) &&
-        error.response.data.message === 'Unauthorized'
-      ) {
-        try {
-          const response = await getNewToken();
-          setAccessToken(response?.data.accessToken);
-
-          originalRequest.headers.Authorization = `Bearer ${response?.data.accessToken}`;
-          originalRequest.headers['x-retry'] = true;
-
-          return client(originalRequest);
-        } catch {
-          setAccessToken('');
+client.interceptors.request.use(
+  (config) => {
+    const { accessToken } = useAuthStore.getState();
+    if (config.url !== '/auth/reissue' && accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+client.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const { setAccessToken, logout } = useAuthStore.getState();
+    const originalRequest = error.config;
+
+    if (
+      error.response.status === 401 ||
+      error.response.status === 403 ||
+      error.response.data.message === 'Unauthorized'
+    ) {
+      originalRequest._retry = true;
+      try {
+        const response = await getNewToken();
+        const newToken = response?.data.accessToken;
+        if (!newToken) {
+          logout();
+          window.location.replace('/login');
+          return Promise.reject(error);
         }
-      }
-      return Promise.reject(error);
-    },
-  );
-
-  useLayoutEffect(() => {
-    return () => {
-      client.interceptors.request.eject(authIntercepter);
-    };
-  }, [accessToken]);
 
-  useLayoutEffect(() => {
-    return () => {
-      client.interceptors.response.eject(refreshInterceptor);
-    };
-  }, [accessToken]);
-};
+        setAccessToken(newToken);
+        originalRequest.headers.access = newToken;
+        return client(originalRequest);
+      } catch (error) {
+        logout();
+        window.location.replace('/login');
+        return Promise.reject(error);
+      }
+    }
+    return Promise.reject(error);
+  },
+);
 
 export default client;

src/main.tsx

@@ -15,11 +15,11 @@ queryClient.setDefaultOptions({
 });
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </QueryClientProvider>
-  </StrictMode>,
+  // <StrictMode>
+  <QueryClientProvider client={queryClient}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </QueryClientProvider>,
+  // </StrictMode>,
 );

src/pages/Auth/index.tsx

@@ -1,39 +1,62 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router';
 
-import { getUserToken } from '@/apis/auth';
+import { getUserToken, getMydata, deleteUserInfo, getZipCode } from '@/apis/auth';
 import useAuthStore from '@/stores/authStore';
 
 const AuthCallbackPage = () => {
   const stateToken = new URLSearchParams(window.location.search).get('state');
   const redirectURL = new URLSearchParams(window.location.search).get('redirect');
 
-  const { setUserId, setZipCode, setAccessToken, zipCode } = useAuthStore();
+  const { setZipCode, setAccessToken, login } = useAuthStore();
 
   const navigate = useNavigate();
 
   const setUserInfo = async (stateToken: string) => {
     try {
-      const userInfo = await getUserToken(stateToken);
-      if (!userInfo) throw new Error('Error Fetching userInfo');
+      const response = await getUserToken(stateToken);
+      if (!response) throw new Error('Error Fetching userInfo');
 
-      const accessToken = userInfo.match(/Bearer\s+(\S+)/);
-      if (accessToken) setAccessToken(accessToken[1]);
-      console.log('token', accessToken);
+      const userInfo = response.data;
+      if (userInfo) {
+        login();
+        userInfo.accessToken && setAccessToken(userInfo.accessToken);
 
-      const userId = userInfo.match(/UserId=(\d+)/);
-      if (userId) setUserId(userId[1]);
+        if (redirectURL == 'home') {
+          const zipCodeResponse = await getMydata();
+          if (!zipCodeResponse) throw new Error('Error Fetching userInfo');
+          const zipCode = zipCodeResponse.data.data.zipCode;
+          zipCode && setZipCode(zipCode);
 
-      const zipCode = userInfo.match(/ZipCode=([A-Za-z0-9]+)/);
-      if (zipCode) setZipCode(zipCode[1]);
+          console.log(
+            'isLoggedIn',
+            useAuthStore.getState().isLoggedIn,
+            'access',
+            useAuthStore.getState().accessToken,
+            'zipCode',
+            useAuthStore.getState().zipCode,
+          );
+        } else if (redirectURL === 'onboarding') {
+          const createZipCodeResponse = await getZipCode();
+          if (!createZipCodeResponse) throw new Error('Error creating ZipCode');
+          const zipCode = createZipCodeResponse.data.data.zipCode;
+          const newAccessToken = createZipCodeResponse.headers['authorizazion'];
+          
+          setZipCode(zipCode);
+          setAccessToken(newAccessToken);
+        }
+      } else {
+        navigate('/login');
+      }
     } catch (error) {
       console.error(error);
     }
   };
 
   // const redirection = () => {
-  //   if(redirectURL === 'onboarding') navigate('/onboarding');
-  //   else if(redirectURL === 'home') navigate('/');
+  //   if (redirectURL === 'onboarding') navigate('/onboarding');
+  //   else if (redirectURL === 'home') navigate('/');
   //   else navigate('/notFound');
   // };
 
@@ -44,7 +67,16 @@ const AuthCallbackPage = () => {
     }
     // else navigate('/notFound');
   }, []);
-  return <div></div>;
+
+  const handleLeave = async () => {
+    try {
+      const response = await deleteUserInfo();
+      console.log(response);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  return <button onClick={() => handleLeave()}>탈퇴</button>;
 };
 
 export default AuthCallbackPage;

src/pages/Onboarding/SetZipCode.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 
-import { getZipCode } from '@/apis/auth';
 import useAuthStore from '@/stores/authStore';
 
 import Spinner from './components/Spinner';
@@ -10,22 +9,10 @@ const SetZipCode = ({
 }: {
   setIsZipCodeSet: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const [zipCode, setZipCode] = useState<string>('');
   const [isBtnActive, setIsBtnActive] = useState<boolean>(false);
-  const { accessToken } = useAuthStore.getState();
+  const { zipCode } = useAuthStore.getState();
 
-  const fetchZipCode = async () => {
-    try {
-      const response = await getZipCode(accessToken as string);
-      if (!response) throw new Error('fetchZipCode: no response');
-      console.log(response.data.zipCode);
-      setZipCode(response.data.zipCode);
-    } catch (error) {
-      console.error(error);
-    }
-  };
   useEffect(() => {
-    fetchZipCode();
     setTimeout(() => {
       setIsBtnActive(true);
     }, 6300);

src/stores/authStore.ts

@@ -3,12 +3,10 @@ import { persist, createJSONStorage } from 'zustand/middleware';
 
 interface AuthStore {
   isLoggedIn: boolean;
-  userId: number | null;
   zipCode: string;
   accessToken: string;
   login: () => void;
   logout: () => void;
-  setUserId: (userId: number) => void;
   setZipCode: (zipCode: string) => void;
   setAccessToken: (accessToken: string) => void;
 }
@@ -17,11 +15,9 @@ const useAuthStore = create(
     (set) => ({
       isLoggedIn: false,
       accessToken: '',
-      userId: null,
       zipCode: '',
       login: () => set({ isLoggedIn: true }),
-      logout: () => set({ isLoggedIn: false, userId: null, zipCode: '' }),
-      setUserId: (userId) => set({ userId: userId }),
+      logout: () => set({ isLoggedIn: false, zipCode: '', accessToken: '' }),
       setZipCode: (zipCode) => set({ zipCode: zipCode }),
       setAccessToken: (accessToken) => set({ accessToken: accessToken }),
     }),