diff --git a/package-lock.json b/package-lock.json
index 5223f5ece..a2d4b738c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@hookform/error-message": "^2.0.1",
         "@tanstack/react-query": "^5.49.0",
+        "@tanstack/react-query-devtools": "^5.49.0",
         "axios": "^1.7.2",
         "classnames": "^2.5.1",
         "next": "^13.5.6",
@@ -373,6 +374,15 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.49.0.tgz",
+      "integrity": "sha512-Mzv87fXWSdqTo4TDACnrZpYzSGYZYJLWcHV6t/XKId31wyFbWwCT/lJwEfp333Nq2xt2ffvBTKFUjcFIp0dw7Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/react-query": {
       "version": "5.49.0",
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.49.0.tgz",
@@ -388,6 +398,22 @@
         "react": "^18.0.0"
       }
     },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.49.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.49.0.tgz",
+      "integrity": "sha512-8zrzL9xW3I68c4A4FKXEXkfN5lUzW9ypWFikmr0qkzI/KRc+lalGveGpxiAjwWNsvkWwOyQLrlGVlNtCmGOKGA==",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.49.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.49.0",
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
diff --git a/package.json b/package.json
index 1e2dc70dd..8974db277 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@hookform/error-message": "^2.0.1",
     "@tanstack/react-query": "^5.49.0",
+    "@tanstack/react-query-devtools": "^5.49.0",
     "axios": "^1.7.2",
     "classnames": "^2.5.1",
     "next": "^13.5.6",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 248bf29c9..33711808c 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,13 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { AppProps } from "next/app";
 import "src/styles/global.css";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  const queryClient = new QueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Component {...pageProps} />
+    </QueryClientProvider>
+  );
 }
diff --git a/src/components/SignInForm/SignInForm.js b/src/components/SignInForm/SignInForm.js
index ea1955307..659ca13e3 100644
--- a/src/components/SignInForm/SignInForm.js
+++ b/src/components/SignInForm/SignInForm.js
@@ -2,13 +2,8 @@ import styles from "./SingInForm.module.scss";
 import classNames from "classnames/bind";
 import { useForm } from "react-hook-form";
 import { InputBox } from "../InputBox";
-import {
-  postIdPwd,
-  regexData,
-  ApiUrl,
-  checkAccessToken,
-  postSignin,
-} from "../../utils";
+import { regexData, postSignin } from "../../utils";
+import { useMutation } from "@tanstack/react-query";
 
 const cx = classNames.bind(styles);
 
@@ -36,10 +31,13 @@ export function SignInForm() {
   });
 
   const onSubmit = (data) => {
-    console.log(data);
-    postSignin(data, setError);
+    postSigninMutaion.mutate(data, setError);
   };
 
+  const postSigninMutaion = useMutation({
+    mutationFn: (data) => postSignin(data, setError),
+  });
+
   return (
     <form className={cx("form-wrapper")} onSubmit={handleSubmit(onSubmit)}>
       <InputBox
diff --git a/src/components/SignUpForm/SignUpForm.js b/src/components/SignUpForm/SignUpForm.js
index 9effb7263..c0926b4ff 100644
--- a/src/components/SignUpForm/SignUpForm.js
+++ b/src/components/SignUpForm/SignUpForm.js
@@ -3,6 +3,7 @@ import classNames from "classnames/bind";
 import { useForm } from "react-hook-form";
 import { InputBox } from "../InputBox";
 import { checkDuplicateEmail, postSignUp, regexData } from "../../utils";
+import { useMutation } from "@tanstack/react-query";
 
 const cx = classNames.bind(styles);
 
@@ -41,10 +42,13 @@ export function SignUpForm() {
   const onSubmit = (data) => {
     const { email, password } = data;
     const selectedData = { email, password };
-    console.log(selectedData);
-    postSignUp(selectedData);
+    postSignUpMutaion.mutate(selectedData);
   };
 
+  const postSignUpMutaion = useMutation({
+    mutationFn: (data) => postSignUp(data),
+  });
+
   return (
     <form className={cx("form-wrapper")} onSubmit={handleSubmit(onSubmit)}>
       <InputBox