feat: 로그인, 회원가입 api 연결

#139

client/src/apis/auth.ts

@@ -0,0 +1,35 @@
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+
+export const useSignupMutation = () => {
+  const fetcher = ({
+    name,
+    email,
+    password,
+  }: {
+    name: string;
+    email: string;
+    password: string;
+  }) => {
+    return axios.post("/auth/register", { name, email, password });
+  };
+
+  return useMutation({
+    mutationFn: fetcher,
+  });
+};
+
+export const useLoginMutation = () => {
+  const fetcher = ({ email, password }: { email: string; password: string }) => {
+    return axios.post("/auth/login", { email, password });
+  };
+
+  return useMutation({
+    mutationFn: fetcher,
+    // TODO 성공했을 경우 accessToken 저장 (zustand? localStorage? cookie?)
+    // accessToken: cookie (쿠기 다 때려넣기...) / localStorage / zustand (번거로움..귀찮음.. 안해봤음..)
+    // refreshToken: cookie,
+    // onSuccess: (data) => {
+    // },
+  });
+};

client/src/features/auth/AuthModal.tsx

@@ -4,6 +4,7 @@ import Lock from "@assets/icons/lock.svg?react";
 import Mail from "@assets/icons/mail.svg?react";
 import User from "@assets/icons/user.svg?react";
 import { Modal } from "@components/modal/modal";
+import { useLoginMutation, useSignupMutation } from "@src/apis/auth";
 import { InputField } from "@src/components/inputField/InputField";
 import { container, formContainer, title, toggleButton } from "./AuthModal.style";
 
@@ -20,6 +21,9 @@ export const AuthModal = ({ isOpen, onClose }: AuthModalProps) => {
     password: "",
   });
 
+  const { mutate: signUp } = useSignupMutation();
+  const { mutate: login } = useLoginMutation();
+
   const toggleMode = () => {
     setMode(mode === "login" ? "register" : "login");
     setFormData({ email: "", password: "", name: "" });
@@ -38,7 +42,12 @@ export const AuthModal = ({ isOpen, onClose }: AuthModalProps) => {
 
   const handleSubmitButtonClick = () => {
     // TODO API 연결
-    closeModal();
+    if (mode === "register") {
+      signUp(formData);
+    } else {
+      login(formData);
+    }
+    // closeModal();
   };
 
   return (

client/src/main.tsx

@@ -1,10 +1,25 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import axios from "axios";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
 
+axios.defaults.baseURL = import.meta.env.VITE_API_URL;
+axios.defaults.withCredentials = true;
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </StrictMode>,
 );

server/src/main.ts

@@ -3,6 +3,10 @@ import { AppModule } from "./app.module";
 
 const bootstrap = async () => {
   const app = await NestFactory.create(AppModule);
+  app.enableCors({
+    origin: true, // 개발 중에는 모든 origin 허용
+    credentials: true, // 쿠키 전송을 위해 필수
+  });
   await app.listen(process.env.PORT ?? 3000);
 };
 bootstrap();