fix: 여러 에디터에서 동시 편집 가능하게 수정

Co-authored-by: 진예원 <[email protected]>

Author: djk01281

backend/src/main.ts

@@ -8,7 +8,8 @@ async function bootstrap() {
   const app = await NestFactory.create(AppModule);
   app.useWebSocketAdapter(new WsAdapter(app));
   app.useGlobalFilters(new HttpExceptionFilter());
-  
+  app.enableCors();
+
   const config = new DocumentBuilder()
     .setTitle('OctoDocs')
     .setDescription('OctoDocs API 명세서')

frontend/src/App.tsx

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import Sidebar from "./components/sidebar";
 import HoverTrigger from "./components/HoverTrigger";
-import EditorView from "./components/editor/EditorView";
+import EditorView from "./components/EditorView";
 import SideWrapper from "./components/layout/SideWrapper";
 import Canvas from "./components/canvas";
 

…end/src/components/editor/EditorView.tsx frontend/src/components/EditorView.tsxfrontend/src/components/editor/EditorView.tsx renamed to frontend/src/components/EditorView.tsx frontend/src/components/editor/EditorView.tsx renamed to frontend/src/components/EditorView.tsx

@@ -1,28 +1,38 @@
 import usePageStore from "@/store/usePageStore";
-import Editor from ".";
+import Editor from "./editor";
 import {
   usePage,
   useUpdatePage,
   useOptimisticUpdatePage,
 } from "@/hooks/usePages";
-import EditorLayout from "../layout/EditorLayout";
-import EditorTitle from "./EditorTitle";
+import EditorLayout from "./layout/EditorLayout";
+import EditorTitle from "./editor/EditorTitle";
 import { EditorInstance } from "novel";
 import { useEffect, useRef, useState } from "react";
-import SaveStatus from "./ui/SaveStatus";
 import { useDebouncedCallback } from "use-debounce";
 import { WebsocketProvider } from "y-websocket";
 import * as Y from "yjs";
+import SaveStatus from "./editor/ui/SaveStatus";
 
 export default function EditorView() {
   const { currentPage } = usePageStore();
   const { page, isLoading } = usePage(currentPage);
+  const [editorKey, setEditorKey] = useState(0);
+  const [saveStatus, setSaveStatus] = useState<"saved" | "unsaved">("saved");
 
   const ydoc = useRef<Y.Doc>();
   const provider = useRef<WebsocketProvider>();
 
   useEffect(() => {
-    if (!currentPage) return;
+    if (currentPage === null) return;
+
+    if (provider.current) {
+      provider.current.disconnect();
+      provider.current.destroy();
+    }
+    if (ydoc.current) {
+      ydoc.current.destroy();
+    }
 
     const doc = new Y.Doc();
     const wsProvider = new WebsocketProvider(
@@ -33,6 +43,14 @@ export default function EditorView() {
 
     ydoc.current = doc;
     provider.current = wsProvider;
+
+    setEditorKey((prev) => prev + 1);
+
+    return () => {
+      wsProvider.disconnect();
+      wsProvider.destroy();
+      doc.destroy();
+    };
   }, [currentPage]);
 
   const pageTitle = page?.title ?? "제목없음";
@@ -43,9 +61,9 @@ export default function EditorView() {
     id: currentPage ?? 0,
   });
 
-  const [saveStatus, setSaveStatus] = useState<"saved" | "unsaved">("saved");
-
   const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (currentPage === null) return;
+
     setSaveStatus("unsaved");
 
     optimisticUpdatePageMutation.mutate(
@@ -96,7 +114,7 @@ export default function EditorView() {
       <SaveStatus saveStatus={saveStatus} />
       <EditorTitle title={pageTitle} onTitleChange={handleTitleChange} />
       <Editor
-        key={currentPage}
+        key={editorKey}
         initialContent={pageContent}
         pageId={currentPage}
         ydoc={ydoc.current}

frontend/src/components/editor/EditorTitle.tsx

@@ -7,6 +7,7 @@ export default function EditorTitle({
   title,
   onTitleChange,
 }: EditorTitleProps) {
+  console.log(title);
   return (
     <div className="p-12 pb-0">
       <input

frontend/src/components/editor/index.tsx

@@ -39,12 +39,7 @@ interface EditorProp {
   provider: WebsocketProvider;
 }
 
-const Editor = ({
-  initialContent,
-  onEditorUpdate,
-  ydoc,
-  provider,
-}: EditorProp) => {
+const Editor = ({ onEditorUpdate, ydoc, provider }: EditorProp) => {
   const [openNode, setOpenNode] = useState(false);
   const [openColor, setOpenColor] = useState(false);
   const [openLink, setOpenLink] = useState(false);
@@ -57,19 +52,17 @@ const Editor = ({
         onContentError={({ disableCollaboration }) => {
           disableCollaboration();
         }}
-        onCreate={({ editor: currentEditor }) => {
-          provider.on("synced", () => {
-            console.log(ydoc);
-
-            if (
-              !ydoc.getMap("config").get("initialContentLoaded") &&
-              currentEditor
-            ) {
-              ydoc.getMap("config").set("initialContentLoaded", true);
-              currentEditor.commands.setContent(initialContent as JSONContent);
-            }
-          });
-        }}
+        // onCreate={({ editor: currentEditor }) => {
+        //   provider.on("synced", () => {
+        //     if (
+        //       !ydoc.getMap("config").get("initialContentLoaded") &&
+        //       currentEditor
+        //     ) {
+        //       ydoc.getMap("config").set("initialContentLoaded", true);
+        //       ydoc.getMap("content").set("content", initialContent);
+        //     }
+        //   });
+        // }}
         extensions={[
           ...extensions,
           Collaboration.extend().configure({

frontend/src/hooks/useNoteList.ts

@@ -13,6 +13,7 @@ export const useNoteList = () => {
   const deleteMutation = useDeletePage();
 
   const handleNoteClick = (id: number) => {
+    console.log("handleNoteClick", id);
     setCurrentPage(id);
   };