feat: 에디터 content 자동 저장 구현

Author: djk01281

frontend/src/api/page.ts

@@ -34,9 +34,9 @@ export const deletePage = async (id: number) => {
   return res.data;
 };
 
-export const updatePage = async (id: number, pageData: PageRequest) => {
+export const updatePage = async (id: number, pageData: JSONContent) => {
   const url = `/page/${id}`;
 
-  const res = await Patch<null, PageRequest>(url, pageData);
+  const res = await Patch<null, JSONContent>(url, pageData);
   return res.data;
 };

frontend/src/components/editor/index.tsx

@@ -24,6 +24,8 @@ import { ColorSelector } from "./selectors/color-selector";
 
 import { useDebouncedCallback } from "use-debounce";
 
+import { useUpdatePage } from "@/hooks/usePages";
+
 const extensions = [...defaultExtensions, slashCommand];
 
 interface EditorProp {
@@ -41,30 +43,14 @@ const Editor = ({ pageId, initialValue }: EditorProp) => {
   const [openColor, setOpenColor] = useState(false);
   const [openLink, setOpenLink] = useState(false);
 
-  const highlightCodeblocks = (content: string) => {
-    const doc = new DOMParser().parseFromString(content, "text/html");
-    doc.querySelectorAll("pre code").forEach((el) => {
-      // @ts-expect-error - highlightElement is not in the types
-      // https://highlightjs.readthedocs.io/en/latest/api.html?highlight=highlightElement#highlightelement
-      hljs.highlightElement(el);
-    });
-    return new XMLSerializer().serializeToString(doc);
-  };
+  const updatePageMutation = useUpdatePage();
 
   const debouncedUpdates = useDebouncedCallback(
     async (editor: EditorInstance) => {
       if (pageId === undefined) return;
 
       const json = editor.getJSON();
-      window.localStorage.setItem(
-        "html-content",
-        highlightCodeblocks(editor.getHTML()),
-      );
-      window.localStorage.setItem(pageId.toString(), JSON.stringify(json));
-      window.localStorage.setItem(
-        "markdown",
-        editor.storage.markdown.getMarkdown(),
-      );
+      updatePageMutation.mutate({ id: pageId, pageData: json });
     },
 
     500,
@@ -75,8 +61,6 @@ const Editor = ({ pageId, initialValue }: EditorProp) => {
     if (content) setInitialContent(JSON.parse(content));
   }, [pageId]);
 
-  console.log(initialContent);
-
   return (
     <EditorRoot>
       <EditorContent

frontend/src/hooks/usePages.ts

@@ -6,6 +6,7 @@ import {
   updatePage,
   type PageRequest,
 } from "@/api/page";
+import { JSONContent } from "novel";
 
 export const usePages = () => {
   const { data, isError } = useQuery({
@@ -41,7 +42,7 @@ export const useDeletePage = () => {
 
 export const useUpdatePage = () => {
   return useMutation({
-    mutationFn: ({ id, pageData }: { id: number; pageData: PageRequest }) =>
+    mutationFn: ({ id, pageData }: { id: number; pageData: JSONContent }) =>
       updatePage(id, pageData),
   });
 };