Merge pull request #126 from boostcampwm-2024/bug-fe-#125

여러 에디터에서 동시 편집이 안되는 문제 해결

Author: yewonJin

backend/src/main.ts

@@ -8,7 +8,7 @@ async function bootstrap() {
   const app = await NestFactory.create(AppModule);
   app.useWebSocketAdapter(new WsAdapter(app));
   app.useGlobalFilters(new HttpExceptionFilter());
-  
+
   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";
 

frontend/src/components/EditorView.tsx

@@ -1,16 +1,126 @@
 import usePageStore from "@/store/usePageStore";
 import Editor from "./editor";
-import { usePage } from "@/hooks/usePages";
+import {
+  usePage,
+  useUpdatePage,
+  useOptimisticUpdatePage,
+} from "@/hooks/usePages";
+import EditorLayout from "./layout/EditorLayout";
+import EditorTitle from "./editor/EditorTitle";
+import { EditorInstance } from "novel";
+import { useEffect, useRef, useState } from "react";
+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 } = usePage(currentPage);
+  const { page, isLoading } = usePage(currentPage);
+  const [editorKey, setEditorKey] = useState(0);
+  const [saveStatus, setSaveStatus] = useState<"saved" | "unsaved">("saved");
 
-  if (!page) {
-    return <div></div>;
+  const ydoc = useRef<Y.Doc>();
+  const provider = useRef<WebsocketProvider>();
+
+  useEffect(() => {
+    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(
+      "ws://localhost:1234",
+      `document-${currentPage}`,
+      doc,
+    );
+
+    ydoc.current = doc;
+    provider.current = wsProvider;
+
+    setEditorKey((prev) => prev + 1);
+
+    return () => {
+      wsProvider.disconnect();
+      wsProvider.destroy();
+      doc.destroy();
+    };
+  }, [currentPage]);
+
+  const pageTitle = page?.title ?? "제목없음";
+  const pageContent = page?.content ?? {};
+
+  const updatePageMutation = useUpdatePage();
+  const optimisticUpdatePageMutation = useOptimisticUpdatePage({
+    id: currentPage ?? 0,
+  });
+
+  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (currentPage === null) return;
+
+    setSaveStatus("unsaved");
+
+    optimisticUpdatePageMutation.mutate(
+      {
+        pageData: { title: e.target.value, content: pageContent },
+      },
+      {
+        onSuccess: () => setSaveStatus("saved"),
+        onError: () => setSaveStatus("unsaved"),
+      },
+    );
+  };
+
+  const handleEditorUpdate = useDebouncedCallback(
+    async ({ editor }: { editor: EditorInstance }) => {
+      if (currentPage === null) {
+        return;
+      }
+
+      const json = editor.getJSON();
+
+      setSaveStatus("unsaved");
+      updatePageMutation.mutate(
+        { id: currentPage, pageData: { title: pageTitle, content: json } },
+        {
+          onSuccess: () => setSaveStatus("saved"),
+          onError: () => setSaveStatus("unsaved"),
+        },
+      );
+    },
+    500,
+  );
+
+  if (isLoading || !page || currentPage === null) {
+    return (
+      <div>
+        {isLoading && <div>"isLoading"</div>}
+        {!page && <div>"!page"</div>}
+        {currentPage === null && <div>"currrentPage === null"</div>}
+      </div>
+    );
   }
 
+  if (!ydoc.current || !provider.current) return <div>로딩중</div>;
+
   return (
-    <Editor key={page.id} initialContent={page.content} pageId={page.id} />
+    <EditorLayout>
+      <SaveStatus saveStatus={saveStatus} />
+      <EditorTitle title={pageTitle} onTitleChange={handleTitleChange} />
+      <Editor
+        key={editorKey}
+        initialContent={pageContent}
+        pageId={currentPage}
+        ydoc={ydoc.current}
+        provider={provider.current}
+        onEditorUpdate={handleEditorUpdate}
+      />
+    </EditorLayout>
   );
 }

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/EditorView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import {
   EditorRoot,
   EditorCommand,
@@ -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/components/editor/index.tsx

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