Refactor: 인터셉터 리프레쉬 토큰 서버사이드 렌더링 코드 추가

src/api/apiClient.ts

@@ -1,51 +1,70 @@
-import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios';
 import Router from 'next/router';
 
-import { RetryRequestConfig } from '@/types/AuthTypes';
+import { clearAuthCookiesWithCallback, getCookie, setCookie } from '@/lib/cookie';
+import {
+  ApiClientContext,
+  RefreshTokenRequest,
+  RefreshTokenResponse,
+  RetryRequestConfig,
+} from '@/types/AuthTypes';
+import { CookieHeaderParams } from '@/types/CookieTypes';
 
 import { updateAccessToken } from './auth';
 
-// axios 인스턴스 생성
-const apiClient = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
-  timeout: 10_000,
-  headers: { 'Content-Type': 'application/json' },
-});
-
-/* Axios 인터셉터 설정 */
-// 토큰 추가 인터셉터
-apiClient.interceptors.request.use(addAccessToken);
-
-// 에러 처리 및 리프레쉬 토큰 추가 인터셉터
-apiClient.interceptors.response.use(
-  (res) => res.data,
-  async (error) => {
-    const status = error.response?.status;
-    const refreshToken = localStorage.getItem('refreshToken');
-
-    if (status !== 401 || !refreshToken) return handleCommonError(error);
-    try {
-      const result = await handleRequestRefreshToken(error, refreshToken);
-      if (result) return result;
-    } catch (refreshTokenError) {
-      // 토큰 삭제 처리 후 리디렉트
-      localStorage.removeItem('accessToken');
-      localStorage.removeItem('refreshToken');
-      Router.replace('/signin');
-      return handleCommonError(refreshTokenError as AxiosError);
-    }
-  },
-);
-
-export default apiClient;
+export const createApiClient = (context?: ApiClientContext) => {
+  const cookieHeader = context?.req?.headers.cookie || '';
+
+  // axios 인스턴스 생성
+  const instance = axios.create({
+    baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+    timeout: 10_000,
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+  /* Axios 인터셉터 설정 */
+  // 토큰 추가 인터셉터
+  instance.interceptors.request.use(createAddAccessToken({ cookieHeader }));
+
+  // 에러 처리 및 리프레쉬 토큰 추가 인터셉터
+  instance.interceptors.response.use(
+    (res) => res.data,
+    async (error) => {
+      const status = error.response?.status;
+      const refreshToken = getCookie({ name: 'refreshToken', cookieHeader });
+
+      if (status !== 401 || !refreshToken) return handleCommonError(error);
+
+      try {
+        const result = await handleRequestRefreshToken({
+          instance,
+          error,
+          refreshToken,
+          response: context?.res,
+        });
+        if (result) return result;
+      } catch (refreshTokenError) {
+        clearAuthCookiesWithCallback(() => Router.replace('/signin'));
+
+        return handleCommonError(refreshTokenError as AxiosError);
+      }
+    },
+  );
+
+  return instance;
+};
 
 // 토큰 추가 메소드
-function addAccessToken(config: InternalAxiosRequestConfig) {
-  const accessToken = localStorage.getItem('accessToken');
-  if (accessToken && config.headers) {
-    config.headers.Authorization = `Bearer ${accessToken}`;
-  }
-  return config;
+function createAddAccessToken({ cookieHeader }: CookieHeaderParams) {
+  return function addAccessToken(config: InternalAxiosRequestConfig) {
+    if ((config as RetryRequestConfig)._retry) return config;
+
+    const accessToken = getCookie({ name: 'accessToken', cookieHeader });
+    if (accessToken && config.headers) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return config;
+  };
 }
 
 // 공통 에러 처리 메소드
@@ -64,24 +83,28 @@ function handleCommonError(error: AxiosError) {
 }
 
 // 리프레쉬 토큰 및 에러 처리 메소드
-async function handleRequestRefreshToken(
-  error: AxiosError,
-  refreshToken: string,
-): Promise<AxiosResponse | null> {
+async function handleRequestRefreshToken({
+  instance,
+  error,
+  refreshToken,
+  response,
+}: RefreshTokenRequest): RefreshTokenResponse {
   const originalRequest = error.config as RetryRequestConfig;
 
   if (originalRequest._retry) return null;
   originalRequest._retry = true;
 
   const data = await updateAccessToken({ refreshToken });
 
-  // 갱신받은 access 토큰 저장
-  localStorage.setItem('accessToken', data.accessToken);
+  setCookie({ response, name: 'accessToken', value: data.accessToken, maxAge: 1800 });
 
-  // 새 토큰으로 헤더 수정
-  if (originalRequest.headers) {
-    originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
-  }
+  originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
+
+  const retryRequestConfig = {
+    ...originalRequest,
+    baseURL: instance.defaults.baseURL,
+    headers: originalRequest.headers,
+  };
 
-  return apiClient(originalRequest); // 토큰 갱신 후 재요청
+  return await instance.request(retryRequestConfig); // 토큰 갱신 후 재요청
 }

src/api/auth.ts

@@ -1,4 +1,3 @@
-import apiClient from '@/api/apiClient';
 import {
   AccessTokenRequest,
   AccessTokenResponse,
@@ -10,18 +9,20 @@ import {
   SignupResponse,
 } from '@/types/AuthTypes';
 
+import { createApiClient } from './apiClient';
+
 export const createUser = (data: SignupRequest): Promise<SignupResponse> => {
-  return apiClient.post(`/${process.env.NEXT_PUBLIC_TEAM}/auth/signUp`, data);
+  return createApiClient().post(`/${process.env.NEXT_PUBLIC_TEAM}/auth/signUp`, data);
 };
 
 export const loginUser = (data: LoginRequest): Promise<LoginResponse> => {
-  return apiClient.post(`/${process.env.NEXT_PUBLIC_TEAM}/auth/signIn`, data);
+  return createApiClient().post(`/${process.env.NEXT_PUBLIC_TEAM}/auth/signIn`, data);
 };
 
 export const updateAccessToken = (data: AccessTokenRequest): Promise<AccessTokenResponse> => {
-  return apiClient.post(`/${process.env.NEXT_PUBLIC_TEAM}/auth/refresh-token`, data);
+  return createApiClient().post(`/${process.env.NEXT_PUBLIC_TEAM}/auth/refresh-token`, data);
 };
 
 export const signInKakao = (data: KakakoSignInRequest): Promise<KakakoSignInResponse> => {
-  return apiClient.post(`/${process.env.NEXT_PUBLIC_TEAM}/auth/signIn/KAKAO`, data);
+  return createApiClient().post(`/${process.env.NEXT_PUBLIC_TEAM}/auth/signIn/KAKAO`, data);
 };

src/api/user.ts

@@ -1,6 +1,10 @@
-import apiClient from '@/api/apiClient';
+import { GetServerSidePropsContext } from 'next';
+
 import { GetUserResponse } from '@/types/UserTypes';
 
-export const getUser = (): Promise<GetUserResponse> => {
-  return apiClient.get(`/${process.env.NEXT_PUBLIC_TEAM}/users/me`);
+import { createApiClient } from './apiClient';
+
+// getServerSideProps 확인을 위해 cookieHeader 부분 임시 추가
+export const getUser = (context?: GetServerSidePropsContext): Promise<GetUserResponse> => {
+  return createApiClient(context).get(`/${process.env.NEXT_PUBLIC_TEAM}/users/me`);
 };

src/hooks/useAuthRedirect.tsx

@@ -13,7 +13,7 @@ const useAuthRedirect = () => {
 
   const { data: userData, isLoading } = useQuery({
     queryKey: ['getUser'],
-    queryFn: getUser,
+    queryFn: () => getUser,
     enabled: hasToken,
     retry: false,
   });

src/hooks/useTokenCheck.tsx

@@ -1,11 +1,13 @@
 import { useEffect, useState } from 'react';
 
+import { getCookie } from '@/lib/cookie';
+
 const useTokenCheck = () => {
   const [hasToken, setHasToken] = useState(false);
 
   useEffect(() => {
-    const token = localStorage.getItem('accessToken');
-    setHasToken(!!token);
+    const accessToken = getCookie({ name: 'accessToken' });
+    setHasToken(!!accessToken);
   }, []);
 
   return hasToken;

src/lib/cookie.ts

@@ -0,0 +1,88 @@
+import {
+  ClearAuthCookiesParams,
+  GetClientCookieParams,
+  GetCookieParams,
+  GetServerCookieParams,
+  GetServerCookieReturn,
+  SetCookieCallbackParams,
+  SetCookieParams,
+  SetCookieType,
+  SetServerCookieParams,
+} from '@/types/CookieTypes';
+
+import { isClient } from './utils';
+
+export function getCookie({ cookieHeader, name }: GetCookieParams) {
+  return isClient() ? getClientCookie({ name }) : getServerCookie({ cookieHeader, name });
+}
+
+export function setCookie({ response, name, value, maxAge }: SetCookieParams) {
+  if (isClient()) {
+    return setClientCookie({ name, value, maxAge });
+  }
+  if (response) {
+    return setServerCookie({ response, name, value, maxAge });
+  }
+  return undefined;
+}
+
+export function getClientCookie({ name }: GetClientCookieParams) {
+  const cookieArr = document.cookie.split('; ');
+  for (const cookie of cookieArr) {
+    const [key, value] = cookie.split('=');
+    if (key === name) return decodeURIComponent(value);
+  }
+}
+
+export function getServerCookie({
+  cookieHeader,
+  name,
+}: GetServerCookieParams): GetServerCookieReturn {
+  if (!cookieHeader) return undefined;
+
+  const cookies = cookieHeader.split(';');
+  for (const cookie of cookies) {
+    const [key, ...val] = cookie.trim().split('=');
+    if (key === name) {
+      return decodeURIComponent(val.join('='));
+    }
+  }
+}
+
+export function setClientCookie({ name, value, maxAge }: SetCookieType) {
+  document.cookie = `${name}=${encodeURIComponent(value)}; path=/; max-age=${maxAge}; SameSite=Lax; Secure`;
+}
+
+export function setServerCookie({ response, name, value, maxAge }: SetServerCookieParams) {
+  const cookie = `${name}=${encodeURIComponent(value)}; Path=/; Max-Age=${maxAge}; SameSite=Lax; Secure; HttpOnly`;
+
+  const prevCookies = response.getHeader('Set-Cookie');
+
+  if (!prevCookies) {
+    response.setHeader('Set-Cookie', cookie);
+  } else if (Array.isArray(prevCookies)) {
+    response.setHeader('Set-Cookie', [...prevCookies, cookie]);
+  } else if (typeof prevCookies === 'string') {
+    response.setHeader('Set-Cookie', [prevCookies, cookie]);
+  }
+}
+
+export function setAuthCookiesWithCallback({
+  accessToken,
+  refreshToken,
+  callback,
+}: SetCookieCallbackParams) {
+  setCookie({ name: 'accessToken', value: accessToken, maxAge: 1800 }); // 만료 30분
+  setCookie({ name: 'refreshToken', value: refreshToken, maxAge: 604800 }); // 만료 7일
+  if (isClient()) {
+    callback();
+  }
+}
+
+export function clearAuthCookiesWithCallback(callback: ClearAuthCookiesParams) {
+  setCookie({ name: 'accessToken', value: '', maxAge: 0 });
+  setCookie({ name: 'refreshToken', value: '', maxAge: 0 });
+  if (isClient()) {
+    callback();
+  }
+}

src/lib/utils.ts

@@ -4,3 +4,7 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function isClient() {
+  return typeof window !== 'undefined';
+}

src/pages/oauth/signup/kakao.tsx

@@ -48,12 +48,9 @@ const KakaoLoginCallbackPage = () => {
 
   return (
     /* 에러 모달에서 확인 버튼 클릭 시 로그인 화면으로 리디렉트 처리 */
-    <ErrorModal
-      open={open}
-      onOpenChange={setOpen}
-      onConfirm={() => router.replace('/signin')}
-      errorMessage={errorMessage}
-    ></ErrorModal>
+    <ErrorModal open={open} onOpenChange={setOpen} onConfirm={() => router.replace('/signin')}>
+      {errorMessage}
+    </ErrorModal>
   );
 };
 

src/pages/signin/index.tsx

@@ -16,6 +16,7 @@ import ErrorModal from '@/components/common/Modal/ErrorModal';
 import { Button } from '@/components/ui/button';
 import useAuthRedirect from '@/hooks/useAuthRedirect';
 import useErrorModal from '@/hooks/useErrorModal';
+import { setAuthCookiesWithCallback } from '@/lib/cookie';
 import { emailSchema, passwordSchema } from '@/lib/form/schemas';
 import { LoginRequest, LoginResponse } from '@/types/AuthTypes';
 
@@ -48,9 +49,9 @@ const SignIn = () => {
   const loginMutation = useMutation<LoginResponse, AxiosError, LoginRequest>({
     mutationFn: loginUser,
     onSuccess: (data) => {
-      localStorage.setItem('accessToken', data.accessToken);
-      localStorage.setItem('refreshToken', data.refreshToken);
-      router.push('/');
+      const { accessToken, refreshToken } = data;
+      /* 로그인 후 로컬스토리지 토큰 저장 */
+      setAuthCookiesWithCallback({ accessToken, refreshToken, callback: () => router.push('/') });
     },
     onError: (error) => {
       if (error.response?.status === 400) {

src/pages/signup/index.tsx

@@ -16,6 +16,7 @@ import ErrorModal from '@/components/common/Modal/ErrorModal';
 import { Button } from '@/components/ui/button';
 import useAuthRedirect from '@/hooks/useAuthRedirect';
 import useErrorModal from '@/hooks/useErrorModal';
+import { setAuthCookiesWithCallback } from '@/lib/cookie';
 import {
   emailSchema,
   nicknameSchema,
@@ -77,10 +78,9 @@ const Signup = () => {
   const loginMutation = useMutation<LoginResponse, AxiosError, LoginRequest>({
     mutationFn: loginUser,
     onSuccess: (data) => {
+      const { accessToken, refreshToken } = data;
       /* 로그인 후 로컬스토리지 토큰 저장 */
-      localStorage.setItem('accessToken', data.accessToken);
-      localStorage.setItem('refreshToken', data.refreshToken);
-      router.push('/');
+      setAuthCookiesWithCallback({ accessToken, refreshToken, callback: () => router.push('/') });
     },
     onError: (error) => {
       // API 에러를 모달로 출력
@@ -110,7 +110,9 @@ const Signup = () => {
 
   return (
     <AuthLayout className='min-h-[43rem] md:min-h-[48rem] lg:min-h-[50rem]'>
-      <ErrorModal open={open} onOpenChange={setOpen} errorMessage={errorMessage} />
+      <ErrorModal open={open} onOpenChange={setOpen}>
+        {errorMessage}
+      </ErrorModal>
 
       <AuthLogo />
       {/* 폼 시작 */}