Refactor: 로그인/회원가입 요청 react query 사용

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",

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>
+  );
 }

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

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