feat: 워크 스페이스에 따른 Y.Doc, 소켓룸 분리

Author: djk01281

apps/frontend/src/app/App.tsx

@@ -6,12 +6,24 @@ import { CanvasView } from "@/widgets/CanvasView";
 import { EditorView } from "@/widgets/EditorView";
 import { PageSideBarView } from "@/widgets/PageSideBarView";
 import { CanvasToolsView } from "@/widgets/CanvasToolsView";
+import { useWorkspace } from "@/shared/lib/useWorkspace";
+import { useEffect } from "react";
+import * as Y from "yjs";
+import useYDocStore from "@/shared/model/ydocStore";
 
 const queryClient = new QueryClient();
 
 function App() {
   useSyncedUsers();
 
+  const workspace = useWorkspace();
+  const { setYDoc } = useYDocStore();
+
+  useEffect(() => {
+    const doc = new Y.Doc({ guid: workspace });
+    setYDoc(doc);
+  }, [workspace, setYDoc]);
+
   return (
     <QueryClientProvider client={queryClient}>
       <div className="fixed inset-0 bg-white">

apps/frontend/src/features/canvas/model/useCanvas.ts

@@ -21,6 +21,8 @@ import { createSocketIOProvider } from "@/shared/api/socketProvider";
 import { useCollaborativeCursors } from "./useCollaborativeCursors";
 import { getSortedNodes } from "./sortNodes";
 import { usePageStore } from "@/features/pageSidebar/model/pageStore";
+import { useWorkspace } from "@/shared/lib/useWorkspace";
+
 export interface YNode extends Node {
   isHolding: boolean;
 }
@@ -32,10 +34,12 @@ export const useCanvas = () => {
   const queryClient = useQueryClient();
   const { ydoc } = useYDocStore();
 
+  const workspace = useWorkspace();
+
   const { cursors, handleMouseMove, handleNodeDrag, handleMouseLeave } =
     useCollaborativeCursors({
       ydoc,
-      roomName: "flow-room",
+      roomName: `flow-room-${workspace}`,
     });
 
   const provider = useRef<SocketIOProvider>();

apps/frontend/src/features/canvas/model/useCollaborativeCursors.ts

@@ -6,6 +6,8 @@ import { useReactFlow, type XYPosition } from "@xyflow/react";
 import { createSocketIOProvider } from "@/shared/api/socketProvider";
 import { useUserStore } from "@/entities/user/model";
 
+import { useWorkspace } from "@/shared/lib/useWorkspace";
+
 export interface AwarenessState {
   cursor: XYPosition | null;
   color: string;
@@ -28,9 +30,10 @@ export function useCollaborativeCursors({
   );
   const { currentUser } = useUserStore();
   const { color, clientId } = currentUser;
+  const workspace = useWorkspace();
 
   useEffect(() => {
-    const wsProvider = createSocketIOProvider("flow-room", ydoc);
+    const wsProvider = createSocketIOProvider(`flow-room-${workspace}`, ydoc);
     provider.current = wsProvider;
 
     wsProvider.awareness.setLocalState({