fix: merge 충돌 해결

Author: yewonJin

frontend/src/api/page.ts

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

frontend/src/components/canvas/index.tsx

@@ -13,46 +13,13 @@ import {
   ConnectionMode,
   type OnConnect,
   type Node,
-  type Edge,
 } from "@xyflow/react";
 
 import "@xyflow/react/dist/style.css";
 
 import { useEffect } from "react";
 import { usePages } from "@/hooks/usePages";
-import { type NoteNodeType, NoteNode } from "./NoteNode";
-
-// 테스트용 초기값
-const initialNodes: NoteNodeType[] = [
-  {
-    id: "1",
-    position: { x: 100, y: 100 },
-    type: "note",
-    data: {
-      id: 0,
-      title: "Node 1",
-    },
-  },
-  {
-    id: "2",
-    position: { x: 400, y: 200 },
-    type: "note",
-    data: {
-      id: 1,
-      title: "Node 2",
-    },
-  },
-];
-
-const initialEdges: Edge[] = [
-  {
-    id: "e1-2",
-    source: "1",
-    target: "2",
-    sourceHandle: "top",
-    targetHandle: "left",
-  },
-];
+import { NoteNode } from "./NoteNode";
 
 const proOptions = { hideAttribution: true };
 
@@ -61,11 +28,10 @@ interface CanvasProps {
 }
 
 export default function Canvas({ className }: CanvasProps) {
-  const [nodes, setNodes, onNodesChange] = useNodesState<Node>(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-  const { data } = usePages();
-  const pages = data?.data;
+  const { data: pages } = usePages();
 
   useEffect(() => {
     if (!pages) {
@@ -75,7 +41,8 @@ export default function Canvas({ className }: CanvasProps) {
     const newNodes = pages.map((page, index) => ({
       id: page.id.toString(),
       position: { x: 100 * index, y: 100 },
-      data: { label: page.title, id: page.id },
+      data: { title: page.title, id: page.id },
+      type: "note",
     }));
     setNodes(newNodes);
   }, [pages, setNodes]);

frontend/src/components/editor/index.tsx

@@ -25,8 +25,6 @@ import { ColorSelector } from "./selectors/color-selector";
 import { useDebouncedCallback } from "use-debounce";
 import { useUpdatePage } from "@/hooks/usePages";
 
-import { useUpdatePage } from "@/hooks/usePages";
-
 const extensions = [...defaultExtensions, slashCommand];
 
 interface EditorProp {
@@ -40,23 +38,26 @@ const Editor = ({ pageId, initialValue }: EditorProp) => {
   const [initialContent, setInitialContent] = useState<null | JSONContent>(
     initialValue === undefined ? null : initialValue,
   );
-  const updateMutation = useUpdatePage(pageId);
+
+  const updatePageMutation = useUpdatePage(pageId);
 
   const [openNode, setOpenNode] = useState(false);
   const [openColor, setOpenColor] = useState(false);
   const [openLink, setOpenLink] = useState(false);
   const [saveStatus, setSaveStatus] = useState("Saved");
 
-  const updatePageMutation = useUpdatePage();
-
   const debouncedUpdates = useDebouncedCallback(
     async (editor: EditorInstance) => {
       if (pageId === undefined) return;
 
       const json = editor.getJSON();
+
       const response = await updatePageMutation.mutateAsync({
         id: pageId,
-        pageData: json,
+        pageData: {
+          title: "제목 없음",
+          content: json,
+        },
       });
       if (response) {
         setSaveStatus("Saved");

frontend/src/hooks/usePages.ts

@@ -14,7 +14,6 @@ import {
   getPage,
   CreatePageRequest,
 } from "@/api/page";
-import { JSONContent } from "novel";
 
 export const usePage = (currentPage: number | null) => {
   const { data, isError } = useQuery({
@@ -61,7 +60,7 @@ export const useUpdatePage = (pageId: number) => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({ id, pageData }: { id: number; pageData: JSONContent }) =>
+    mutationFn: ({ id, pageData }: { id: number; pageData: PageRequest }) =>
       updatePage(id, pageData),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["page", pageId] });