feat: query를 이용한 페이지 생성, 제거 구현

Author: yewonJin

frontend/src/components/EditorView.tsx

@@ -1,77 +1,14 @@
 import usePageStore from "@/store/usePageStore";
 import Editor from "./editor";
-import { JSONContent } from "novel";
-
-interface Page {
-  title: string;
-  content?: JSONContent;
-}
-
-const pages: Page[] = [
-  {
-    title: "Page 1",
-    content: {
-      type: "doc",
-      content: [
-        {
-          type: "paragraph",
-          content: [{ type: "text", text: "This is page 1" }],
-        },
-      ],
-    },
-  },
-
-  {
-    title: "Page 2",
-    content: {
-      type: "doc",
-      content: [
-        {
-          type: "paragraph",
-          content: [{ type: "text", text: "This is page 2" }],
-        },
-      ],
-    },
-  },
-
-  {
-    title: "Page 3",
-    content: {
-      type: "doc",
-      content: [
-        {
-          type: "paragraph",
-          content: [{ type: "text", text: "This is page 3" }],
-        },
-      ],
-    },
-  },
-];
-
-const getPageFromID = (id: number) => {
-  return pages[id];
-};
+import { usePage } from "@/hooks/usePages";
 
 export default function EditorView() {
   const { currentPage } = usePageStore();
-  if (currentPage === null) {
-    return null;
-  }
+  const { data } = usePage(currentPage);
 
-  const defaultEditorContent = getPageFromID(currentPage).content;
-  if (!defaultEditorContent) {
-    return (
-      <div>
-        페이지를 로딩할 수 없었습니다<div className=""></div>
-      </div>
-    );
+  if (!data) {
+    return <div></div>;
   }
 
-  return (
-    <Editor
-      key={currentPage}
-      initialValue={defaultEditorContent}
-      pageId={currentPage}
-    />
-  );
+  return <Editor key={data.id} initialValue={data.content} pageId={data.id} />;
 }

frontend/src/components/sidebar/NoteList.tsx

@@ -1,33 +1,53 @@
-import { cn } from "@/lib/utils";
-import usePageStore from "@/store/usePageStore";
+import { Trash2 } from "lucide-react";
+
+import RemoveNoteModal from "./RemoveNoteModal";
 
-const noteList = [
-  { id: 0, icon: "🌳", title: "그라운드 룰" },
-  { id: 1, icon: "🚩", title: "커밋 컨벤션" },
-  { id: 2, icon: "🗂️", title: "데일리 스크럼" },
-];
+import { useNoteList } from "@/hooks/useNoteList";
+import { cn } from "@/lib/utils";
 
 interface NoteListProps {
   className?: string;
 }
 
 export default function NoteList({ className }: NoteListProps) {
-  const { setCurrentPage } = usePageStore();
+  const {
+    data,
+    isModalOpen,
+    handleNoteClick,
+    openModal,
+    onConfirm,
+    onCloseModal,
+  } = useNoteList();
 
-  const handleNoteClick = (id: number) => {
-    setCurrentPage(id);
-  };
+  if (!data) {
+    return <div>로딩중</div>;
+  }
 
   return (
     <div className={cn("flex flex-col gap-0.5 text-sm font-medium", className)}>
-      {noteList.map(({ id, icon, title }) => (
+      <RemoveNoteModal
+        isOpen={isModalOpen}
+        onConfirm={onConfirm}
+        onCloseModal={onCloseModal}
+      />
+      {data.map(({ id, title }) => (
         <button
           onClick={() => handleNoteClick(id)}
           key={id}
-          className="flex flex-row gap-1 rounded-sm px-2 py-1 hover:bg-neutral-100"
+          className="group flex flex-row justify-between rounded-sm px-2 py-1 hover:bg-neutral-100"
         >
-          <div>{icon}</div>
-          <div>{title}</div>
+          <div className="flex flex-row gap-1">
+            <div>{title}</div>
+          </div>
+          <span
+            className="hidden text-neutral-400 transition-colors hover:text-red-500 group-hover:block"
+            onClick={(e) => {
+              e.stopPropagation();
+              openModal(id);
+            }}
+          >
+            <Trash2 width={20} height={20} />
+          </span>
         </button>
       ))}
     </div>

frontend/src/components/sidebar/Tools.tsx

@@ -1,8 +1,39 @@
 import { PencilLine } from "lucide-react";
 
+import { useCreatePage, usePages } from "@/hooks/usePages";
+import usePageStore from "@/store/usePageStore";
+
+// TODO: 에디터 렌더링할 때 필요한 id 받아오는 방법 수정 해야할듯
 export default function Tools() {
+  const { setCurrentPage } = usePageStore();
+  const { data } = usePages();
+  const createMutation = useCreatePage();
+
+  if (!data) {
+    return <div>로딩중...</div>;
+  }
+
   return (
-    <button className="flex flex-row items-center gap-1 rounded-sm px-2 py-1 font-medium hover:bg-neutral-100">
+    <button
+      className="flex flex-row items-center gap-1 rounded-sm px-2 py-1 font-medium hover:bg-neutral-100"
+      onClick={() => {
+        createMutation.mutate({
+          title: "제목 없음",
+          content: {
+            type: "doc",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "This is page 1" }],
+              },
+            ],
+          },
+          x: 0,
+          y: 0,
+        });
+        setCurrentPage(data[data.length - 1].id);
+      }}
+    >
       <div>
         <PencilLine width={20} height={20} widths={1} />
       </div>