fix: 한 사용자만 노드를 따로 움직일 수 있는 문제 수정

Author: djk01281

frontend/src/components/canvas/index.tsx

@@ -86,7 +86,10 @@ export default function Canvas({ className }: CanvasProps) {
               return [...nds, node];
             }
             const newNodes = [...nds];
-            newNodes[index] = node;
+            newNodes[index] = {
+              ...newNodes[index],
+              position: node.position,
+            };
             return newNodes;
           });
         } else if (change.action === "delete") {
@@ -122,20 +125,22 @@ export default function Canvas({ className }: CanvasProps) {
 
     pages.forEach((page) => {
       const pageId = page.id.toString();
-      //if (!existingPageIds.current.has(pageId)) {
+      const existingNode = nodesMap.get(pageId) as Node | undefined;
+
       const newNode = {
         id: pageId,
-        position: {
+        position: existingNode?.position || {
           x: Math.random() * 500,
           y: Math.random() * 500,
         },
         data: { title: page.title, id: page.id },
         type: "note",
       };
 
-      nodesMap.set(pageId, newNode);
-      existingPageIds.current.add(pageId);
-      //}
+      if (!existingNode) {
+        nodesMap.set(pageId, newNode);
+        existingPageIds.current.add(pageId);
+      }
     });
   }, [pages]);
 
@@ -144,22 +149,22 @@ export default function Canvas({ className }: CanvasProps) {
       if (!ydoc) return;
       const nodesMap = ydoc.getMap("nodes");
 
-      onNodesChange(changes);
-
       changes.forEach((change) => {
         if (change.type === "position" && change.position) {
-          const node = nodes.find((n) => n.id === change.id);
-          if (node) {
+          const existingNode = nodesMap.get(change.id) as Node | undefined;
+          if (existingNode) {
             const updatedNode = {
-              ...node,
+              ...existingNode,
               position: change.position,
             };
             nodesMap.set(change.id, updatedNode);
           }
         }
       });
+
+      onNodesChange(changes);
     },
-    [nodes, onNodesChange],
+    [onNodesChange],
   );
 
   const handleEdgesChange = useCallback(