Merge pull request #231 from Kernel360/fix-react-cookie

환경 설정: 쿠키 에러 수정

src/app/my-page/page.tsx

@@ -20,6 +20,9 @@ import styles from './page.module.scss';
 
 const cx = classNames.bind(styles);
 
+const TOP_MARGIN = 96;
+const BOTTOM_MARGIN = 97;
+
 function MyProfilePage() {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [cookies, removeCookie] = useCookies(['token']);
@@ -40,18 +43,15 @@ function MyProfilePage() {
     logout();
   };
 
-  const topMargin = 96;
-  const bottomMargin = 97;
-
   if (isLoggedIn === false) {
     return (
       <>
         <Confirmation
           title={REQUIRED_LOGIN.title}
           description={REQUIRED_LOGIN.description}
           options={REQUIRED_LOGIN.options}
-          topMargin={topMargin}
-          bottomMargin={bottomMargin}
+          topMargin={TOP_MARGIN}
+          bottomMargin={BOTTOM_MARGIN}
         />
         <BottomNav />
       </>

src/hooks/useLoggedOut.ts

@@ -1,17 +1,14 @@
-import { useCookies } from 'react-cookie';
-
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
 
 import { useAppDispatch } from '@stores/hooks';
 import { clearUserId } from '@stores/slices/userSlice';
+import { removeCookie } from '@utils/cookies';
 
 function useLoggedOut() {
   const router = useRouter();
   const dispatch = useAppDispatch();
   const query = useQueryClient();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [cookies, removeCookie] = useCookies(['token']);
 
   const logout = (redirectPath = '/') => {
     dispatch(clearUserId());

src/remote/api/common.api.ts

@@ -1,9 +1,9 @@
 /* eslint-disable no-param-reassign */
-import { useCookies } from 'react-cookie';
 
 import axios, { InternalAxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';
 
 import { axiosInstance } from '@remote/api/instance.api';
+import { getCookie } from '@utils/cookies';
 import logOnDev from '@utils/logOnDev';
 
 axiosInstance.interceptors.request.use(
@@ -12,11 +12,9 @@ axiosInstance.interceptors.request.use(
      * request 직전 공통으로 진행할 작업
      */
     if (config && config.headers) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const [cookies, setCookie] = useCookies(['token']);
-
-      if (cookies.token) {
-        config.headers.Authorization = cookies.token as string;
+      const token = getCookie('token') as string;
+      if (token) {
+        config.headers.Authorization = token;
         config.headers['Content-Type'] = 'application/json';
       }
     }

src/remote/queries/auth/useLogin.ts

@@ -1,20 +1,17 @@
-import { useCookies } from 'react-cookie';
-
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
 
 import { login } from '@remote/api/requests/auth/auth.post.api';
 import { UserInfoType } from '@remote/api/types/auth';
 import { useAppDispatch } from '@stores/hooks';
 import { setUserId } from '@stores/slices/userSlice';
+import { setCookie } from '@utils/cookies';
 
 function useLogin() {
   const router = useRouter();
   const dispatch = useAppDispatch();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [cookies, setCookie] = useCookies(['token']);
 
-  const onSuccess = (data : UserInfoType) => {
+  const onSuccess = (data: UserInfoType) => {
     const { id, jwtToken } = data.value;
     const cookieOptions = { path: '/', maxAge: 60 * 15 };
 

src/types/cookies.type.ts

@@ -0,0 +1,19 @@
+export interface CookieGetOptions {
+  doNotParse?: boolean;
+  doNotUpdate?: boolean;
+}
+export interface CookieSetOptions {
+  path?: string;
+  expires?: Date;
+  maxAge?: number;
+  domain?: string;
+  secure?: boolean;
+  httpOnly?: boolean;
+  sameSite?: boolean | 'none' | 'lax' | 'strict';
+}
+export interface CookieChangeOptions {
+  name: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value?: any;
+  options?: CookieSetOptions;
+}

src/utils/cookies.ts

@@ -0,0 +1,18 @@
+import { Cookies } from 'react-cookie';
+
+import { CookieGetOptions, CookieSetOptions } from '@/types/cookies.type';
+
+const cookies = new Cookies();
+
+export const setCookie = (name: string, value: string, options?: CookieSetOptions) => {
+  return cookies.set(name, value, { ...options });
+};
+
+export const getCookie = (name: string, options?: CookieGetOptions) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return cookies.get(name, options);
+};
+
+export const removeCookie = (name: string, options?: CookieSetOptions) => {
+  return cookies.remove(name, options);
+};