feat: 로그인 기능구현

package.json

@@ -19,6 +19,7 @@
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.7.9",
     "gsap": "^3.12.7",
+    "immer": "^10.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-intersection-observer": "^9.15.1",

src/App.tsx

@@ -7,6 +7,7 @@ import AdminPage from './pages/Admin';
 import FilteredLetterManage from './pages/Admin/FilteredLetter';
 import FilteringManage from './pages/Admin/Filtering';
 import ReportManage from './pages/Admin/Report';
+import AuthCallbackPage from './pages/Auth';
 import Home from './pages/Home';
 import Landing from './pages/Landing';
 import LetterBoardPage from './pages/LetterBoard';
@@ -54,7 +55,8 @@ const App = () => {
           <Route path="board" element={<LetterBoardPage />} />
           <Route path="notifications" element={<NotificationsPage />} />
         </Route>
-        <Route path="*" element={<NotFoundPage />}></Route>
+        <Route path="*" element={<NotFoundPage />} />
+        <Route path="auth-callback" element={<AuthCallbackPage />} />
       </Route>
 
       <Route path="admin" element={<AdminPage />}>

src/apis/auth.ts

@@ -0,0 +1,88 @@
+import useAuthStore from '@/stores/authStore';
+
+import client from './client';
+
+type LoginType = 'kakao' | 'naver' | 'google';
+export const socialLogin = (loginType: LoginType) => {
+  window.location.href = `http://13.209.132.150:8081/oauth2/authorization/${loginType}`;
+};
+
+export const logout = async () => {
+  const { accessToken } = useAuthStore.getState();
+
+  try {
+    const response = await client.post(`/api/logout`, {
+      Authorization: { token: `Bearer ${accessToken}` },
+      withCredentials: true,
+    });
+    if (!response) throw new Error('logout fail');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const getUserToken = async (stateToken: string) => {
+  try {
+    const response = await client.get(`/api/auth/token?state=${stateToken}`);
+    if (!response) throw new Error('getUserToken: Error while fetching user token');
+    const userInfo = response.data;
+    if (userInfo) {
+      return userInfo;
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const postZipCode = async () => {
+  try {
+    const response = await client.post(`/api/members/zipCode`);
+    if(!response) throw new Error('fail to post ZipCode')
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+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', {
+      withCredentials: true,
+    });
+    if (!response) throw new Error('deleteUserInfo: no response');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const postLogout = async () => {
+  try {
+    const response = await client.post('/api/logout', { withCredentials: true });
+    if (!response) throw new Error('postLogout: failed to logout');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};

src/apis/client.ts

@@ -1,21 +1,69 @@
 import axios from 'axios';
 
+import useAuthStore from '@/stores/authStore';
+
+import { getNewToken } from './auth';
+
 const client = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
 });
 
-// client.interceptors.request.use(
-//   (config) => {
-//     const token = localStorage.getItem('authToken');
-//     if (token) {
-//       config.headers['Authorization'] = `Bearer ${token}`;
-//     }
-//     return config;
-//   },
-//   (error) => {
-//     //TODO: 에러처리
-//     return Promise.reject(error);
-//   },
-// );
+client.interceptors.request.use(
+  (config) => {
+    const { accessToken } = useAuthStore.getState();
+    console.log(config.url);
+    console.log(accessToken);
+    if (config.url !== '/auth/reissue' && accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+      console.log('intercepter', config.headers);
+    }
+    return config
+    ;
+  },
+  (error) => {
+    const { logout } = useAuthStore.getState();
+    logout();
+    window.location.replace('/login');
+    return Promise.reject(error);
+  },
+);
+
+client.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const { setAccessToken, logout } = useAuthStore.getState();
+    const originalRequest = error.config;
+
+    if (!originalRequest) {
+      return Promise.reject(error);
+    }
+
+    if (
+      (error.response.status === 401 ||
+        error.response.status === 403 ||
+        error.response.data.message === 'Unauthorized') &&
+      !originalRequest._retry
+    ) {
+      originalRequest._retry = true;
+
+      try {
+        const response = await getNewToken();
+        const newToken = response?.data.accessToken;
+
+        if (!newToken) throw new Error('Failed to Refresh Token');
+
+        setAccessToken(newToken);
+        originalRequest.headers.Authorization = `Bearer ${newToken}`;
+
+        return client(originalRequest);
+      } catch (e) {
+        logout();
+        window.location.replace('/login');
+        return Promise.reject(e);
+      }
+    }
+    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

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+
+import { getUserToken, getMydata, deleteUserInfo, postZipCode } 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 { setZipCode, setAccessToken, login } = useAuthStore();
+
+  const navigate = useNavigate();
+
+  const setUserInfo = async (stateToken: string) => {
+    try {
+      const response = await getUserToken(stateToken);
+      if (!response) throw new Error('Error Fetching userInfo');
+
+      const userInfo = response.data;
+      if (userInfo) {
+        login();
+        userInfo.accessToken && setAccessToken(userInfo.accessToken);
+
+        if (redirectURL == 'home') {
+          const zipCodeResponse = await getMydata();
+          if (!zipCodeResponse) throw new Error('Error Fetching userInfo');
+          const zipCode = zipCodeResponse.data.data.zipCode;
+          zipCode && setZipCode(zipCode);
+
+          console.log(
+            'isLoggedIn',
+            useAuthStore.getState().isLoggedIn,
+            'access',
+            useAuthStore.getState().accessToken,
+            'zipCode',
+            useAuthStore.getState().zipCode,
+          );
+        } else if (redirectURL === 'onboarding') {
+          const createZipCodeResponse = await postZipCode();
+          if (!createZipCodeResponse) throw new Error('Error creating ZipCode');
+          const zipCode = createZipCodeResponse.data.data.zipCode;
+          console.log(createZipCodeResponse);
+          const newAccessToken = createZipCodeResponse.headers['Authorization'];
+          setZipCode(zipCode);
+          setAccessToken(newAccessToken);
+          console.log(
+            'isLoggedIn',
+            useAuthStore.getState().isLoggedIn,
+            'access',
+            useAuthStore.getState().accessToken,
+            'zipCode',
+            useAuthStore.getState().zipCode,
+          );
+        }
+      } else {
+        navigate('/login');
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const redirection = () => {
+    if (redirectURL === 'onboarding') navigate('/onboarding');
+    else if (redirectURL === 'home') navigate('/');
+    else navigate('/notFound');
+  };
+
+  useEffect(() => {
+    if (stateToken) {
+      setUserInfo(stateToken as string);
+      redirection();
+    } else navigate('/notFound');
+  }, []);
+
+  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/Login/index.tsx

@@ -1,8 +1,14 @@
+import { socialLogin } from '@/apis/auth';
 import { GoogleIcon, KakaoIcon, NaverIcon, StampIcon } from '@/assets/icons';
 
 import Background from './components/Background';
 
 const LoginPage = () => {
+  type LoginType = 'kakao' | 'naver' | 'google';
+
+  const handleLogin = (loginType: LoginType) => {
+    socialLogin(loginType);
+  };
   return (
     <>
       <main className="mt-10 flex grow flex-col items-center justify-between">
@@ -22,20 +28,23 @@ const LoginPage = () => {
             type="button"
             className="rounded-full bg-[#03C75A] p-3.5"
             aria-label="네이버 로그인"
+            onClick={() => handleLogin('naver')}
           >
             <NaverIcon />
           </button>
           <button
             type="button"
             className="rounded-full bg-[#FEE500] p-3.5"
             aria-label="카카오 로그인"
+            onClick={() => handleLogin('kakao')}
           >
             <KakaoIcon />
           </button>
           <button
             type="button"
             className="border-gray-5 rounded-full border bg-white p-3.5"
             aria-label="구글 로그인"
+            onClick={() => handleLogin('google')}
           >
             <GoogleIcon />
           </button>