feat: 로그인 기능 임시 구현

- API 완성 되지 않음 : 논의된 부분을 바탕으로 임시로 제작함(작동 안함)
- 토큰을 전달 받기 위해 권한 상태 페이지 추가(보여주기 위한 용도가 아니라 쿼리문으로 토큰 전달을 위한 목적)

Author: nirii00

src/App.tsx

@@ -1,12 +1,14 @@
 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';
 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';
@@ -25,6 +27,7 @@ import WritePage from './pages/Write';
 
 const App = () => {
   useViewport();
+  useAxiosIntercepter();
 
   return (
     <Routes>
@@ -54,7 +57,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

@@ -1,11 +1,49 @@
-// import useAuthStore from '@/stores/authStore';
-
-// import client from './client';
+import client from './client';
 
 type LoginType = 'kakao' | 'naver' | 'google';
 export const socialLogin = (loginType: LoginType) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   // const { setUserId, setZipCode, login } = useAuthStore.getState();
-    window.location.href = `http://13.209.132.150:8081/oauth2/authorization/${loginType}`;
+
+  window.location.href = `http://13.209.132.150:8081/oauth2/authorization/${loginType}`;
+};
+
+//임시 코드
+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.headers['authorization'];
+
+    if (userInfo) {
+      return userInfo;
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const getZipCode = async (accessToken: string) => {
+  try {
+    const response = await client.get(`/members/zipCode`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+    if (!response) throw new Error('getZipCode: no response data');
+    console.log(response);
+    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);
+  }
+};

src/apis/client.ts

@@ -1,21 +1,67 @@
 import axios from 'axios';
+import { useLayoutEffect } from 'react';
+
+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);
-  },
-);
+// 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('');
+        }
+      }
+      return Promise.reject(error);
+    },
+  );
+
+  useLayoutEffect(() => {
+    return () => {
+      client.interceptors.request.eject(authIntercepter);
+    };
+  }, [accessToken]);
+
+  useLayoutEffect(() => {
+    return () => {
+      client.interceptors.response.eject(refreshInterceptor);
+    };
+  }, [accessToken]);
+};
 
 export default client;

src/pages/Auth/index.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+
+import { getUserToken } from '@/apis/auth';
+import useAuthStore from '@/stores/authStore';
+
+const AuthCallbackPage = () => {
+  const stateToken = new URLSearchParams(window.location.search).get('state');
+  const { setUserId, setZipCode, setAccessToken, zipCode } = useAuthStore.getState();
+  const [role, setRole] = useState<string>('');
+
+  const navigate = useNavigate();
+
+  const setUserInfo = async (stateToken: string) => {
+    try {
+      const userInfo = await getUserToken(stateToken);
+      if (!userInfo) throw new Error('Error Fetching userInfo');
+
+      const accessToken = userInfo.match(/Bearer\s+(\S+)/);
+      if (accessToken) setAccessToken(accessToken[1]);
+
+      const role = userInfo.match(/Role=([\w-]+)/);
+      if (role) setRole(role);
+
+      const userId = userInfo.match(/UserId=(\d+)/);
+      if (userId) setUserId(userId[1]);
+
+      const zipCode = userInfo.match(/ZipCode=([A-Za-z0-9]+)/);
+      if (zipCode) setZipCode(zipCode[1]);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const redirection = () => {
+    if (role === 'admin') navigate('/report');
+    else {
+      if (!zipCode) navigate('/onboarding');
+      else navigate('/');
+    }
+  };
+
+  useEffect(() => {
+    if (stateToken) {
+      setUserInfo(stateToken as string);
+      redirection();
+    } else navigate('/notFound');
+  }, []);
+  return <div></div>;
+};
+
+export default AuthCallbackPage;

src/pages/Onboarding/SetZipCode.tsx

@@ -1,16 +1,31 @@
 import { useEffect, useState } from 'react';
 
+import { getZipCode } from '@/apis/auth';
+import useAuthStore from '@/stores/authStore';
+
 import Spinner from './components/Spinner';
 
 const SetZipCode = ({
   setIsZipCodeSet,
 }: {
   setIsZipCodeSet: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const DUMMY_ZIPCODE = '122A2';
+  const [zipCode, setZipCode] = useState<string>('');
   const [isBtnActive, setIsBtnActive] = useState<boolean>(false);
+  const { accessToken } = 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);
@@ -23,7 +38,7 @@ const SetZipCode = ({
         <p className="caption-sb text-gray-60">사용자님이 편지를 주고 받는 주소입니다.</p>
       </header>
       <section className="flex gap-2">
-        {DUMMY_ZIPCODE.split('').map((char, index) => (
+        {zipCode.split('').map((char, index) => (
           <Spinner key={index} target={char} index={index}></Spinner>
         ))}
       </section>

src/pages/Onboarding/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import SetZipCode from './SetZipCode';
 import UserInteraction from './UserInteraction';
-import WelcomeLetter from './welcomeLetter';
+import WelcomeLetter from './WelcomeLetter';
 
 const OnboardingPage = () => {
   const [isZipCodeSet, setIsZipCodeSet] = useState<boolean>(false);

src/stores/authStore.ts

@@ -5,21 +5,25 @@ 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;
 }
 const useAuthStore = create(
   persist<AuthStore>(
     (set) => ({
       isLoggedIn: false,
+      accessToken: '',
       userId: null,
       zipCode: '',
       login: () => set({ isLoggedIn: true }),
       logout: () => set({ isLoggedIn: false, userId: null, zipCode: '' }),
       setUserId: (userId) => set({ userId: userId }),
       setZipCode: (zipCode) => set({ zipCode: zipCode }),
+      setAccessToken: (accessToken) => set({ accessToken: accessToken }),
     }),
     {
       name: 'userInfo',