diff --git a/src/app/my-page/page.tsx b/src/app/my-page/page.tsx
index 9302c5db..8333d1c6 100644
--- a/src/app/my-page/page.tsx
+++ b/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,9 +43,6 @@ function MyProfilePage() {
     logout();
   };
 
-  const topMargin = 96;
-  const bottomMargin = 97;
-
   if (isLoggedIn === false) {
     return (
       <>
@@ -50,8 +50,8 @@ function MyProfilePage() {
           title={REQUIRED_LOGIN.title}
           description={REQUIRED_LOGIN.description}
           options={REQUIRED_LOGIN.options}
-          topMargin={topMargin}
-          bottomMargin={bottomMargin}
+          topMargin={TOP_MARGIN}
+          bottomMargin={BOTTOM_MARGIN}
         />
         <BottomNav />
       </>
diff --git a/src/hooks/useLoggedOut.ts b/src/hooks/useLoggedOut.ts
index ddc83f6a..e28a0d83 100644
--- a/src/hooks/useLoggedOut.ts
+++ b/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());
diff --git a/src/remote/api/common.api.ts b/src/remote/api/common.api.ts
index f3922d19..21d575fa 100644
--- a/src/remote/api/common.api.ts
+++ b/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';
       }
     }
diff --git a/src/remote/queries/auth/useLogin.ts b/src/remote/queries/auth/useLogin.ts
index 60079703..12d9fd1f 100644
--- a/src/remote/queries/auth/useLogin.ts
+++ b/src/remote/queries/auth/useLogin.ts
@@ -1,5 +1,3 @@
-import { useCookies } from 'react-cookie';
-
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
 
@@ -7,14 +5,13 @@ 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 };
 
diff --git a/src/types/cookies.type.ts b/src/types/cookies.type.ts
new file mode 100644
index 00000000..3f2ffb0f
--- /dev/null
+++ b/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;
+}
diff --git a/src/utils/cookies.ts b/src/utils/cookies.ts
new file mode 100644
index 00000000..c2879eed
--- /dev/null
+++ b/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);
+};