Merge pull request #415 from boostcampwm-2024/feature-fe-#414

웹 소켓 연결 분리 및 성능 최적화

Author: github-actions[bot]

apps/frontend/package.json

@@ -36,6 +36,7 @@
     "emoji-mart": "^5.6.0",
     "fast-diff": "^1.3.0",
     "framer-motion": "^11.11.11",
+    "lodash": "^4.17.21",
     "lowlight": "^3.1.0",
     "lucide-react": "^0.454.0",
     "next-themes": "^0.4.3",
@@ -59,6 +60,7 @@
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/router-devtools": "^1.82.12",
     "@tanstack/router-plugin": "^1.82.10",
+    "@types/lodash": "^4.17.13",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",

apps/frontend/src/entities/user/model/useSyncedUsers.ts

@@ -2,15 +2,22 @@ import { useEffect } from "react";
 
 import { useUserStore, type User } from "./userStore";
 import { usePageStore } from "@/entities/page";
+import { useUserConnection } from "./useUserConnection";
+import useConnectionStore from "@/shared/model/useConnectionStore";
 
 export const useSyncedUsers = () => {
   const { currentPage } = usePageStore();
-  const { provider, currentUser, setCurrentUser, setUsers } = useUserStore();
+  useUserConnection();
+  const { user } = useConnectionStore();
+  const { currentUser, setCurrentUser, setUsers } = useUserStore();
 
   const updateUsersFromAwareness = () => {
+    if (!user.provider) return;
+
     const values = Array.from(
-      provider.awareness.getStates().values(),
+      user.provider.awareness.getStates().values(),
     ) as User[];
+
     setUsers(values);
   };
 
@@ -21,32 +28,36 @@ export const useSyncedUsers = () => {
 
   useEffect(() => {
     if (currentPage === null) return;
+    if (!user.provider) return;
 
     const updatedUser: User = {
       ...currentUser,
       currentPageId: currentPage.toString(),
     };
 
     setCurrentUser(updatedUser);
-    provider.awareness.setLocalState(updatedUser);
-  }, [currentPage]);
+    user.provider.awareness.setLocalState(updatedUser);
+  }, [currentPage, user.provider]);
 
   useEffect(() => {
+    if (!user.provider) return;
+
     const localStorageUser = getLocalStorageUser();
 
     if (!localStorageUser) {
       localStorage.setItem("currentUser", JSON.stringify(currentUser));
     } else {
       setCurrentUser(localStorageUser);
-      provider.awareness.setLocalState(localStorageUser);
+      user.provider.awareness.setLocalState(localStorageUser);
     }
 
     updateUsersFromAwareness();
 
-    provider.awareness.on("change", updateUsersFromAwareness);
+    user.provider.awareness.on("change", updateUsersFromAwareness);
 
     return () => {
-      provider.awareness.off("change", updateUsersFromAwareness);
+      if (!user.provider) return;
+      user.provider.awareness.off("change", updateUsersFromAwareness);
     };
-  }, []);
+  }, [user.provider]);
 };

apps/frontend/src/entities/user/model/useUserConnection.ts

@@ -0,0 +1,32 @@
+// provider: createSocketIOProvider("users", new Y.Doc()),
+import * as Y from "yjs";
+import { createSocketIOProvider } from "@/shared/api";
+import useConnectionStore from "@/shared/model/useConnectionStore";
+import { useEffect } from "react";
+
+export const useUserConnection = () => {
+  const { user, setProvider, setConnectionStatus } = useConnectionStore();
+
+  useEffect(() => {
+    if (user.provider) {
+      user.provider.destroy();
+    }
+
+    setConnectionStatus("user", "connecting");
+
+    const provider = createSocketIOProvider("users", new Y.Doc());
+    setProvider("user", provider);
+
+    provider.on(
+      "status",
+      ({ status }: { status: "connected" | "disconnected" }) => {
+        setConnectionStatus("user", status);
+      },
+    );
+
+    return () => {
+      provider.doc.destroy();
+      provider.destroy();
+    };
+  }, []);
+};

apps/frontend/src/entities/user/model/userStore.ts

@@ -1,8 +1,5 @@
 import { create } from "zustand";
-import * as Y from "yjs";
-import { SocketIOProvider } from "y-socket.io";
 
-import { createSocketIOProvider } from "@/shared/api";
 import { getRandomColor, getRandomHexString } from "@/shared/lib";
 
 export interface User {
@@ -12,15 +9,13 @@ export interface User {
 }
 
 interface UserStore {
-  provider: SocketIOProvider;
   users: User[];
   currentUser: User;
   setUsers: (users: User[]) => void;
   setCurrentUser: (user: User) => void;
 }
 
 export const useUserStore = create<UserStore>((set) => ({
-  provider: createSocketIOProvider("users", new Y.Doc()),
   users: [],
   currentUser: {
     clientId: getRandomHexString(10),