Merge pull request #82 from boostcampwm-2024/feature-fe-#81

EditorTitle 컴포넌트 추가

Author: yewonJin

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/EditorView";
+import EditorView from "./components/editor/EditorView";
 import SideWrapper from "./components/layout/SideWrapper";
 import Canvas from "./components/canvas";
 

frontend/src/components/editor/EditorTitle.tsx

@@ -0,0 +1,21 @@
+interface EditorTitleProps {
+  title?: string;
+  onTitleChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function EditorTitle({
+  title,
+  onTitleChange,
+}: EditorTitleProps) {
+  return (
+    <div className="p-12 pb-0">
+      <input
+        type="text"
+        className="w-full text-xl font-bold outline-none"
+        defaultValue={"제목없음"}
+        value={title}
+        onChange={onTitleChange}
+      />
+    </div>
+  );
+}

frontend/src/components/editor/EditorView.tsx

@@ -0,0 +1,78 @@
+import usePageStore from "@/store/usePageStore";
+import Editor from ".";
+import {
+  usePage,
+  useUpdatePage,
+  useOptimisticUpdatePage,
+} from "@/hooks/usePages";
+import EditorLayout from "../layout/EditorLayout";
+import EditorTitle from "./EditorTitle";
+import { EditorInstance } from "novel";
+import { useState } from "react";
+import SaveStatus from "./ui/SaveStatus";
+import { useDebouncedCallback } from "use-debounce";
+
+export default function EditorView() {
+  const { currentPage } = usePageStore();
+  const { data, isLoading } = usePage(currentPage);
+  const pageTitle = data?.title ?? "제목없음";
+  const pageContent = data?.content ?? {};
+
+  const updatePageMutation = useUpdatePage();
+  const optimisticUpdatePageMutation = useOptimisticUpdatePage({
+    id: currentPage ?? 0,
+  });
+
+  const [saveStatus, setSaveStatus] = useState<"saved" | "unsaved">("saved");
+
+  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    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 || !data || currentPage === null) {
+    return <div>로딩 중,,</div>;
+  }
+
+  return (
+    <EditorLayout>
+      <SaveStatus saveStatus={saveStatus} />
+      <EditorTitle title={pageTitle} onTitleChange={handleTitleChange} />
+      <Editor
+        key={currentPage}
+        initialContent={pageContent}
+        pageId={currentPage}
+        onEditorUpdate={handleEditorUpdate}
+      />
+    </EditorLayout>
+  );
+}

frontend/src/components/editor/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import {
   EditorRoot,
   EditorCommand,
@@ -22,127 +22,83 @@ import { MathSelector } from "./selectors/math-selector";
 import { TextButtons } from "./selectors/text-buttons";
 import { ColorSelector } from "./selectors/color-selector";
 
-import { useDebouncedCallback } from "use-debounce";
-import { useUpdatePage } from "@/hooks/usePages";
-
 const extensions = [...defaultExtensions, slashCommand];
 
+type EditorUpdateEvent = {
+  editor: EditorInstance;
+};
 interface EditorProp {
   pageId: number;
-  initialValue?: JSONContent;
-  onChange?: (value: JSONContent) => void;
+  initialContent?: JSONContent;
+  onEditorUpdate?: (event: EditorUpdateEvent) => void;
 }
 
-// TODO: 나중에 title input 추가해야함
-const Editor = ({ pageId, initialValue }: EditorProp) => {
-  const [initialContent, setInitialContent] = useState<null | JSONContent>(
-    initialValue === undefined ? null : initialValue,
-  );
-
-  const updatePageMutation = useUpdatePage(pageId);
-
+const Editor = ({ initialContent, onEditorUpdate }: EditorProp) => {
   const [openNode, setOpenNode] = useState(false);
   const [openColor, setOpenColor] = useState(false);
   const [openLink, setOpenLink] = useState(false);
-  const [saveStatus, setSaveStatus] = useState("Saved");
-
-  const debouncedUpdates = useDebouncedCallback(
-    async (editor: EditorInstance) => {
-      if (pageId === undefined) return;
-
-      const json = editor.getJSON();
-
-      const response = await updatePageMutation.mutateAsync({
-        id: pageId,
-        pageData: {
-          title: "제목 없음",
-          content: json,
-        },
-      });
-      if (response) {
-        setSaveStatus("Saved");
-      }
-    },
-    500,
-  );
-
-  useEffect(() => {
-    const content = window.localStorage.getItem(pageId.toString());
-    if (content) setInitialContent(JSON.parse(content));
-  }, [pageId]);
 
   return (
-    <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");
+    <EditorRoot>
+      <EditorContent
+        initialContent={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={onEditorUpdate}
+      >
+        <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"
         >
-          <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>
+          <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>
   );
 };
 

frontend/src/components/editor/ui/SaveStatus.tsx

@@ -0,0 +1,13 @@
+export interface SaveStatusProps {
+  saveStatus: "saved" | "unsaved";
+}
+
+export default function SaveStatus({ saveStatus }: SaveStatusProps) {
+  return (
+    <div className="absolute right-5 top-5 z-10">
+      <div className="rounded-lg bg-accent px-2 py-1 text-sm text-muted-foreground">
+        {saveStatus}
+      </div>
+    </div>
+  );
+}

frontend/src/components/layout/EditorLayout.tsx

@@ -0,0 +1,11 @@
+interface EditorLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function EditorLayout({ children }: EditorLayoutProps) {
+  return (
+    <div className="relative h-[720px] w-[520px] overflow-auto border-muted bg-background bg-white sm:rounded-lg sm:border sm:shadow-lg">
+      {children}
+    </div>
+  );
+}