Merge branch 'dev-fe' into feature-fe-#17

yewonJin · web-flow · commit ea057d130568 · 2024-11-07T21:48:14.000+09:00
diff --git a/frontend/src/api/page.ts b/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: 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;
 };
diff --git a/frontend/src/components/canvas/NoteNode.tsx b/frontend/src/components/canvas/NoteNode.tsx
@@ -0,0 +1,51 @@
+import { Handle, NodeProps, Position, type Node } from "@xyflow/react";
+import usePageStore from "@/store/usePageStore";
+
+export type NoteNodeData = { title: string; id: number };
+export type NoteNodeType = Node<NoteNodeData, "note">;
+
+export function NoteNode({ data }: NodeProps<NoteNodeType>) {
+  const { setCurrentPage } = usePageStore();
+
+  const handleNodeClick = () => {
+    const id = data.id;
+    if (id === undefined || id === null) {
+      return;
+    }
+
+    setCurrentPage(id);
+  };
+
+  return (
+    <div
+      className="rounded-md border-[1px] border-black bg-neutral-100 p-2"
+      onClick={handleNodeClick}
+    >
+      <Handle
+        type="source"
+        id="left"
+        position={Position.Left}
+        isConnectable={true}
+      />
+      <Handle
+        type="source"
+        id="top"
+        position={Position.Top}
+        isConnectable={true}
+      />
+      <Handle
+        type="source"
+        id="right"
+        position={Position.Right}
+        isConnectable={true}
+      />
+      <Handle
+        type="source"
+        id="bottom"
+        position={Position.Bottom}
+        isConnectable={true}
+      />
+      {data.title}
+    </div>
+  );
+}
diff --git a/frontend/src/components/canvas/index.tsx b/frontend/src/components/canvas/index.tsx
@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils";
 
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import {
   ReactFlow,
   MiniMap,
@@ -10,18 +10,49 @@ import {
   useEdgesState,
   addEdge,
   BackgroundVariant,
+  ConnectionMode,
   type OnConnect,
   type Node,
   type Edge,
 } from "@xyflow/react";
 
 import "@xyflow/react/dist/style.css";
 
-const initialNodes: Node[] = [
-  { id: "1", position: { x: 0, y: 0 }, data: { label: "1" } },
-  { id: "2", position: { x: 0, y: 100 }, data: { label: "2" } },
+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",
+  },
 ];
-const initialEdges: Edge[] = [{ id: "e1-2", source: "1", target: "2" }];
 
 const proOptions = { hideAttribution: true };
 
@@ -30,14 +61,32 @@ interface CanvasProps {
 }
 
 export default function Canvas({ className }: CanvasProps) {
-  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
+  const { data } = usePages();
+  const pages = data?.data;
+
+  useEffect(() => {
+    if (!pages) {
+      return;
+    }
+
+    const newNodes = pages.map((page, index) => ({
+      id: page.id.toString(),
+      position: { x: 100 * index, y: 100 },
+      data: { label: page.title, id: page.id },
+    }));
+    setNodes(newNodes);
+  }, [pages, setNodes]);
+
   const onConnect: OnConnect = useCallback(
     (params) => setEdges((eds) => addEdge(params, eds)),
     [setEdges],
   );
 
+  const nodeTypes = useMemo(() => ({ note: NoteNode }), []);
+
   return (
     <div className={cn("", className)}>
       <ReactFlow
@@ -47,6 +96,8 @@ export default function Canvas({ className }: CanvasProps) {
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
         proOptions={proOptions}
+        nodeTypes={nodeTypes}
+        connectionMode={ConnectionMode.Loose}
       >
         <Controls />
         <MiniMap />
diff --git a/frontend/src/components/editor/index.tsx b/frontend/src/components/editor/index.tsx
@@ -25,6 +25,8 @@ 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 {
@@ -43,40 +45,23 @@ const Editor = ({ pageId, initialValue }: EditorProp) => {
   const [openNode, setOpenNode] = useState(false);
   const [openColor, setOpenColor] = useState(false);
   const [openLink, setOpenLink] = useState(false);
+  const [saveStatus, setSaveStatus] = useState("Saved");
 
-  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();
-      updateMutation.mutate({
+      const response = await updatePageMutation.mutateAsync({
         id: pageId,
-        pageData: {
-          title: "제목 없음",
-          content: json,
-        },
+        pageData: json,
       });
-      window.localStorage.setItem(
-        "html-content",
-        highlightCodeblocks(editor.getHTML()),
-      );
-      window.localStorage.setItem(pageId.toString(), JSON.stringify(json));
-      window.localStorage.setItem(
-        "markdown",
-        editor.storage.markdown.getMarkdown(),
-      );
+      if (response) {
+        setSaveStatus("Saved");
+      }
     },
-
     500,
   );
 
@@ -86,69 +71,77 @@ const Editor = ({ pageId, initialValue }: EditorProp) => {
   }, [pageId]);
 
   return (
-    <EditorRoot>
-      <EditorContent
-        initialContent={initialContent === null ? undefined : initialContent}
-        className="relative h-[720px] w-[520px] overflow-auto border-muted bg-background bg-white sm:rounded-lg sm:border sm:shadow-lg"
-        extensions={extensions}
-        editorProps={{
-          handleDOMEvents: {
-            keydown: (_view, event) => handleCommandNavigation(event),
-          },
-          attributes: {
-            class: `prose prose-lg prose-headings:font-title font-default focus:outline-none max-w-full`,
-          },
-        }}
-        slotAfter={<ImageResizer />}
-        onUpdate={({ editor }) => {
-          debouncedUpdates(editor);
-        }}
-      >
-        <EditorCommand className="z-50 h-auto max-h-[330px] overflow-y-auto rounded-md border border-muted bg-background px-1 py-2 shadow-md transition-all">
-          <EditorCommandEmpty className="px-2 text-muted-foreground">
-            No results
-          </EditorCommandEmpty>
-          <EditorCommandList>
-            {suggestionItems.map((item) => (
-              <EditorCommandItem
-                value={item.title}
-                onCommand={(val) => item.command?.(val)}
-                className="flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:cursor-pointer hover:bg-accent aria-selected:bg-accent"
-                key={item.title}
-              >
-                <div className="flex h-10 w-10 items-center justify-center rounded-md border border-muted bg-background">
-                  {item.icon}
-                </div>
-                <div>
-                  <p className="font-medium">{item.title}</p>
-                  <p className="text-xs text-muted-foreground">
-                    {item.description}
-                  </p>
-                </div>
-              </EditorCommandItem>
-            ))}
-          </EditorCommandList>
-        </EditorCommand>
-        <EditorBubble
-          tippyOptions={{
-            placement: "top",
+    <div className="relative h-[720px] w-[520px] overflow-auto border-muted bg-background bg-white sm:rounded-lg sm:border sm:shadow-lg">
+      <div className="absolute right-5 top-5 z-10 mb-5 flex gap-2">
+        <div className="rounded-lg bg-accent px-2 py-1 text-sm text-muted-foreground">
+          {saveStatus}
+        </div>
+      </div>
+      <EditorRoot>
+        <EditorContent
+          initialContent={initialContent === null ? undefined : initialContent}
+          className=""
+          extensions={extensions}
+          editorProps={{
+            handleDOMEvents: {
+              keydown: (_view, event) => handleCommandNavigation(event),
+            },
+            attributes: {
+              class: `prose prose-lg prose-headings:font-title font-default focus:outline-none max-w-full`,
+            },
+          }}
+          slotAfter={<ImageResizer />}
+          onUpdate={({ editor }) => {
+            debouncedUpdates(editor);
+            setSaveStatus("Unsaved");
           }}
-          className="flex w-fit max-w-[90vw] overflow-hidden rounded-md border border-muted bg-background shadow-xl"
         >
-          {" "}
-          <Separator orientation="vertical" />
-          <NodeSelector open={openNode} onOpenChange={setOpenNode} />
-          <Separator orientation="vertical" />
-          <LinkSelector open={openLink} onOpenChange={setOpenLink} />
-          <Separator orientation="vertical" />
-          <MathSelector />
-          <Separator orientation="vertical" />
-          <TextButtons />
-          <Separator orientation="vertical" />
-          <ColorSelector open={openColor} onOpenChange={setOpenColor} />
-        </EditorBubble>
-      </EditorContent>
-    </EditorRoot>
+          <EditorCommand className="z-50 h-auto max-h-[330px] overflow-y-auto rounded-md border border-muted bg-background px-1 py-2 shadow-md transition-all">
+            <EditorCommandEmpty className="px-2 text-muted-foreground">
+              No results
+            </EditorCommandEmpty>
+            <EditorCommandList>
+              {suggestionItems.map((item) => (
+                <EditorCommandItem
+                  value={item.title}
+                  onCommand={(val) => item.command?.(val)}
+                  className="flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:cursor-pointer hover:bg-accent aria-selected:bg-accent"
+                  key={item.title}
+                >
+                  <div className="flex h-10 w-10 items-center justify-center rounded-md border border-muted bg-background">
+                    {item.icon}
+                  </div>
+                  <div>
+                    <p className="font-medium">{item.title}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {item.description}
+                    </p>
+                  </div>
+                </EditorCommandItem>
+              ))}
+            </EditorCommandList>
+          </EditorCommand>
+          <EditorBubble
+            tippyOptions={{
+              placement: "top",
+            }}
+            className="flex w-fit max-w-[90vw] overflow-hidden rounded-md border border-muted bg-background shadow-xl"
+          >
+            {" "}
+            <Separator orientation="vertical" />
+            <NodeSelector open={openNode} onOpenChange={setOpenNode} />
+            <Separator orientation="vertical" />
+            <LinkSelector open={openLink} onOpenChange={setOpenLink} />
+            <Separator orientation="vertical" />
+            <MathSelector />
+            <Separator orientation="vertical" />
+            <TextButtons />
+            <Separator orientation="vertical" />
+            <ColorSelector open={openColor} onOpenChange={setOpenColor} />
+          </EditorBubble>
+        </EditorContent>
+      </EditorRoot>
+    </div>
   );
 };
 
diff --git a/frontend/src/hooks/usePages.ts b/frontend/src/hooks/usePages.ts
@@ -14,6 +14,7 @@ import {
   getPage,
   CreatePageRequest,
 } from "@/api/page";
+import { JSONContent } from "novel";
 
 export const usePage = (currentPage: number | null) => {
   const { data, isError } = useQuery({
@@ -60,7 +61,7 @@ export const useUpdatePage = (pageId: number) => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({ id, pageData }: { id: number; pageData: PageRequest }) =>
+    mutationFn: ({ id, pageData }: { id: number; pageData: JSONContent }) =>
       updatePage(id, pageData),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["page", pageId] });
