feat: title 변경 시 노드 및 페이지에서 변경 반영

Author: yewonJin

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

@@ -17,7 +17,6 @@ import { usePages } from "@/features/pageSidebar/api/usePages";
 import useYDocStore from "@/shared/model/ydocStore";
 import { calculateBestHandles } from "@/features/canvas/model/calculateHandles";
 import { createSocketIOProvider } from "@/shared/api/socketProvider";
-import { initializeYText } from "@/shared/model/yjs";
 import { useCollaborativeCursors } from "./useCollaborativeCursors";
 import { getSortedNodes } from "./sortNodes";
 
@@ -43,16 +42,51 @@ export const useCanvas = () => {
   const holdingNodeRef = useRef<string | null>(null);
 
   useEffect(() => {
-    if (!pages) return;
-
     const yTitleMap = ydoc.getMap("title");
     const yEmojiMap = ydoc.getMap("emoji");
 
-    pages.forEach((page) => {
-      initializeYText(yTitleMap, `title_${page.id}`, page.title);
-      initializeYText(yEmojiMap, `emoji_${page.id}`, page.emoji || "");
+    const nodesMap = ydoc.getMap("nodes");
+
+    yTitleMap.observeDeep((event) => {
+      if (!event[0].path.length) return;
+
+      const pageId = event[0].path[0].toString().split("_")[1];
+      const value = event[0].target.toString();
+
+      const existingNode = nodesMap.get(pageId) as YNode;
+
+      const newNode: YNode = {
+        id: pageId,
+        type: "note",
+        data: { title: value, id: pageId, emoji: existingNode.data.emoji },
+        position: existingNode.position,
+        selected: false,
+        isHolding: false,
+      };
+
+      nodesMap.set(pageId, newNode);
+    });
+
+    yEmojiMap.observeDeep((event) => {
+      if (!event[0].path.length) return;
+
+      const pageId = event[0].path[0].toString().split("_")[1];
+      const value = event[0].target.toString();
+
+      const existingNode = nodesMap.get(pageId) as YNode;
+
+      const newNode: YNode = {
+        id: pageId,
+        type: "note",
+        data: { title: existingNode.data.title, id: pageId, emoji: value },
+        position: existingNode.position,
+        selected: false,
+        isHolding: false,
+      };
+
+      nodesMap.set(pageId, newNode);
     });
-  }, [pages]);
+  }, []);
 
   useEffect(() => {
     if (!ydoc) return;

apps/frontend/src/features/pageSidebar/ui/Tools/index.tsx

@@ -4,11 +4,14 @@ import Button from "@/shared/ui/Button";
 
 import { useCreatePage, usePages } from "@/features/pageSidebar/api/usePages";
 import { usePageStore } from "../../model/pageStore";
+import useYDocStore from "@/shared/model/ydocStore";
+import { initializeYText } from "@/shared/model";
 
 export function Tools() {
   const { setCurrentPage } = usePageStore();
   const { pages } = usePages();
   const createMutation = useCreatePage();
+  const { ydoc } = useYDocStore();
 
   return (
     <Button
@@ -30,7 +33,15 @@ export function Tools() {
             y: 0,
             emoji: null,
           })
-          .then((res) => setCurrentPage(res.pageId));
+          .then((res) => {
+            setCurrentPage(res.pageId);
+
+            const yTitleMap = ydoc.getMap("title");
+            const yEmojiMap = ydoc.getMap("emoji");
+
+            initializeYText(yTitleMap, `title_${res.pageId}`, "제목 없음");
+            initializeYText(yEmojiMap, `emoji_${res.pageId}`, "");
+          });
       }}
     >
       <div>