Feature/#139 react query 세팅

@noctaCrdt/Crdt.ts

@@ -86,7 +86,7 @@ export class CRDT<T extends Node<NodeId>> {
       client: this.client,
       LinkedList: {
         head: this.LinkedList.head,
-        nodeMap: this.LinkedList.nodeMap,
+        nodeMap: this.LinkedList.nodeMap || {},
       },
     };
   }

client/package.json

@@ -11,12 +11,14 @@
     "prepare": "panda codegen"
   },
   "dependencies": {
-    "@lottiefiles/react-lottie-player": "^3.5.4",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@lottiefiles/react-lottie-player": "^3.5.4",
     "@noctaCrdt": "workspace:*",
     "@pandabox/panda-plugins": "^0.0.8",
+    "@tanstack/react-query": "^5.60.5",
+    "axios": "^1.7.7",
     "framer-motion": "^11.11.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

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/app.module.spec.ts

@@ -14,7 +14,7 @@ describe("AppModule", () => {
 
   beforeAll(async () => {
     // jest-mongodb가 설정한 MONGO_URL을 MONGO_URI로 설정
-    process.env.MONGO_URI = process.env.MONGO_URL || "mongodb://localhost:27017/test-db";
+    process.env.MONGO_URI = process.env.MONGO_URL || "mongodb://localhost:27017/test";
     console.log(`MONGO_URI: ${process.env.MONGO_URI}`);
 
     testingModule = await Test.createTestingModule({

server/src/crdt/crdt.service.ts

@@ -59,7 +59,7 @@ export class CrdtService implements OnModuleInit {
   async getDocument(): Promise<Doc> {
     let doc = await this.documentModel.findOne();
     if (!doc) {
-      doc = new this.documentModel({ content: JSON.stringify(this.crdt.spread()) });
+      doc = new this.documentModel({ crdt: this.crdt.serialize() });
       await doc.save();
     }
     return doc;

server/src/crdt/schemas/document.schema.ts

@@ -3,7 +3,7 @@ import { Document } from "mongoose";
 
 export type DocumentDocument = Document & Doc;
 
-@Schema()
+@Schema({ minimize: false })
 export class Doc {
   @Prop({ type: Object, required: true })
   crdt: {

server/src/main.ts

@@ -3,6 +3,30 @@ import { AppModule } from "./app.module";
 
 const bootstrap = async () => {
   const app = await NestFactory.create(AppModule);
+
+  const isDevelopment = process.env.NODE_ENV === "development";
+
+  const allowedOrigins = ["https://nocta.site", "https://www.nocta.site"];
+
+  app.enableCors({
+    origin: (origin, callback) => {
+      if (isDevelopment) {
+        // 개발 환경: 모든 Origin 허용
+        callback(null, true);
+      } else {
+        // 배포 환경: 특정 Origin만 허용
+        if (!origin || allowedOrigins.includes(origin)) {
+          callback(null, true);
+        } else {
+          callback(new Error("Not allowed by CORS"));
+        }
+      }
+    },
+    credentials: true, // 쿠키 전송을 위해 필수
+  });
+
+  app.setGlobalPrefix("api");
+
   await app.listen(process.env.PORT ?? 3000);
 };
 bootstrap();