Merge pull request #69 from boostcampwm-2024/feature-fe-#17

페이지 query 및 mutation 구현

Author: djk01281

frontend/src/api/page.ts

@@ -8,22 +8,36 @@ export type Page = {
   content: JSONContent;
 };
 
+export type CreatePageRequest = {
+  title: string;
+  content: JSONContent;
+  x: number;
+  y: number;
+};
+
 export type PageRequest = {
   title: string;
   content: JSONContent;
 };
 
+export const getPage = async (id: number) => {
+  const url = `/page/${id}`;
+
+  const res = await Get<Page>(url);
+  return res.data;
+};
+
 export const getPages = async () => {
   const url = "/page";
 
   const res = await Get<Page[]>(url);
   return res.data;
 };
 
-export const createPage = async (id: number, pageData: PageRequest) => {
-  const url = `/page/${id}`;
+export const createPage = async (pageData: CreatePageRequest) => {
+  const url = `/page`;
 
-  const res = await Post<null, PageRequest>(url, pageData);
+  const res = await Post<null, CreatePageRequest>(url, pageData);
   return res.data;
 };
 

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/commons/button/index.tsx

@@ -0,0 +1,21 @@
+import { cn } from "@/lib/utils";
+
+interface ButtonProps {
+  className?: string;
+  onClick?: () => void;
+  children?: React.ReactNode;
+}
+
+export default function Button({ className, onClick, children }: ButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "rounded-md px-6 py-2 shadow-md transition-colors",
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+}

frontend/src/components/commons/dialog/index.tsx

@@ -0,0 +1,73 @@
+import { useRef } from "react";
+import { X } from "lucide-react";
+
+interface DialogTitleProps {
+  children: React.ReactNode;
+}
+
+function DialogTitle({ children }: DialogTitleProps) {
+  return <h2 className="text-lg font-semibold">{children}</h2>;
+}
+
+interface DialogCloseButtonProps {
+  onCloseModal: () => void;
+}
+
+function DialogCloseButton({ onCloseModal }: DialogCloseButtonProps) {
+  return (
+    <button
+      className="absolute right-4 top-4 text-neutral-400 transition-colors hover:text-neutral-700"
+      onClick={onCloseModal}
+    >
+      <X width={16} height={16} />
+    </button>
+  );
+}
+
+interface DialogMainProps {
+  isOpen: boolean;
+  onCloseModal: () => void;
+  children: React.ReactNode;
+}
+
+function DialogMain({ isOpen, onCloseModal, children }: DialogMainProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  const showModal = () => {
+    dialogRef.current?.showModal();
+  };
+
+  const closeModal = () => {
+    dialogRef.current?.close();
+  };
+
+  if (isOpen) {
+    showModal();
+  } else {
+    closeModal();
+  }
+
+  return (
+    <dialog
+      className="rounded-xl"
+      open={isOpen}
+      ref={dialogRef}
+      onClick={() => {
+        onCloseModal();
+        closeModal();
+      }}
+    >
+      <div
+        className="flex flex-col gap-4 px-12 py-10"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </dialog>
+  );
+}
+
+export const Dialog = Object.assign(DialogMain, {
+  Title: DialogTitle,
+  CloseButton: DialogCloseButton,
+});