Merge pull request #108 from boostcampwm-2024/fix-fe-#107

API 명세 변경에 따른 쿼리 수정

Author: djk01281

frontend/src/api/node.ts

@@ -11,10 +11,15 @@ export interface NodeCoors {
   y: number;
 }
 
+interface NodeResponse {
+  message: string;
+  coordinate: NodeCoors;
+}
+
 export const getNodeCoors = async (id: number) => {
   const url = `/node${id}`;
 
-  const res = await Get<NodeCoors>(url);
+  const res = await Get<NodeResponse>(url);
   return res.data;
 };
 

frontend/src/api/page.ts

@@ -2,36 +2,46 @@ import { JSONContent } from "novel";
 
 import { Get, Post, Delete, Patch } from "@/lib/axios";
 
-export type Page = {
+export interface Page {
   id: number;
   title: string;
   content: JSONContent;
-};
+}
 
-export type CreatePageRequest = {
+export interface CreatePageRequest {
   title: string;
   content: JSONContent;
   x: number;
   y: number;
-};
+}
 
-export type PageRequest = {
+export interface PageRequest {
   title: string;
   content: JSONContent;
-};
+}
+
+export interface PageResponse {
+  message: string;
+  page: Page;
+}
+
+export interface PagesResponse {
+  message: string;
+  pages: Omit<Page, "content">[];
+}
 
 export const getPage = async (id: number) => {
   const url = `/page/${id}`;
 
-  const res = await Get<Page>(url);
-  return res.data;
+  const res = await Get<PageResponse>(url);
+  return res.data.page;
 };
 
 export const getPages = async () => {
   const url = "/page";
 
-  const res = await Get<Page[]>(url);
-  return res.data;
+  const res = await Get<PagesResponse>(url);
+  return res.data.pages;
 };
 
 export const createPage = async (pageData: CreatePageRequest) => {

frontend/src/components/EditorView.tsx

@@ -4,11 +4,13 @@ import { usePage } from "@/hooks/usePages";
 
 export default function EditorView() {
   const { currentPage } = usePageStore();
-  const { data } = usePage(currentPage);
+  const { page } = usePage(currentPage);
 
-  if (!data) {
+  if (!page) {
     return <div></div>;
   }
 
-  return <Editor key={data.id} initialValue={data.content} pageId={data.id} />;
+  return (
+    <Editor key={page.id} initialContent={page.content} pageId={page.id} />
+  );
 }

frontend/src/components/canvas/index.tsx

@@ -31,7 +31,7 @@ export default function Canvas({ className }: CanvasProps) {
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-  const { data: pages } = usePages();
+  const { pages } = usePages();
 
   useEffect(() => {
     if (!pages) {

frontend/src/components/editor/EditorView.tsx

@@ -14,9 +14,9 @@ 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 { page, isLoading } = usePage(currentPage);
+  const pageTitle = page?.title ?? "제목없음";
+  const pageContent = page?.content ?? {};
 
   const updatePageMutation = useUpdatePage();
   const optimisticUpdatePageMutation = useOptimisticUpdatePage({
@@ -59,8 +59,14 @@ export default function EditorView() {
     500,
   );
 
-  if (isLoading || !data || currentPage === null) {
-    return <div>로딩 중,,</div>;
+  if (isLoading || !page || currentPage === null) {
+    return (
+      <div>
+        {isLoading && <div>"isLoading"</div>}
+        {!page && <div>"!page"</div>}
+        {currentPage === null && <div>"currrentPage === null"</div>}
+      </div>
+    );
   }
 
   return (

frontend/src/components/sidebar/NoteList.tsx

@@ -12,15 +12,15 @@ interface NoteListProps {
 
 export default function NoteList({ className }: NoteListProps) {
   const {
-    data,
+    pages,
     isModalOpen,
     handleNoteClick,
     openModal,
     onConfirm,
     onCloseModal,
   } = useNoteList();
 
-  if (!data) {
+  if (!pages) {
     return <div>로딩중</div>;
   }
 
@@ -31,7 +31,7 @@ export default function NoteList({ className }: NoteListProps) {
         onConfirm={onConfirm}
         onCloseModal={onCloseModal}
       />
-      {data.map(({ id, title }) => (
+      {pages.map(({ id, title }) => (
         <Button
           onClick={() => handleNoteClick(id)}
           key={id}

frontend/src/components/sidebar/Tools.tsx

@@ -7,10 +7,10 @@ import Button from "../commons/button";
 // TODO: 에디터 렌더링할 때 필요한 id 받아오는 방법 수정 해야할듯
 export default function Tools() {
   const { setCurrentPage } = usePageStore();
-  const { data } = usePages();
+  const { pages } = usePages();
   const createMutation = useCreatePage();
 
-  if (!data) {
+  if (!pages) {
     return <div>로딩중...</div>;
   }
 
@@ -32,7 +32,7 @@ export default function Tools() {
           x: 0,
           y: 0,
         });
-        setCurrentPage(data[data.length - 1].id);
+        setCurrentPage(pages[pages.length - 1].id);
       }}
     >
       <div>

frontend/src/hooks/useNodes.ts

@@ -12,7 +12,7 @@ import {
 //     queryFn: () => getNodeCoors(id),
 //   });
 
-//   return { data, isError };
+//   return { coors:data?.coordinates, isError };
 // };
 
 export const useCreateNode = () => {

frontend/src/hooks/useNoteList.ts

@@ -5,7 +5,7 @@ import { useDeletePage, usePages } from "./usePages";
 
 export const useNoteList = () => {
   const { setCurrentPage } = usePageStore();
-  const { data } = usePages();
+  const { pages } = usePages();
 
   const [noteIdToDelete, setNoteIdToDelete] = useState<number | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -36,7 +36,7 @@ export const useNoteList = () => {
   };
 
   return {
-    data,
+    pages,
     isModalOpen,
     handleNoteClick,
     openModal,

frontend/src/hooks/usePages.ts

@@ -16,12 +16,16 @@ import {
 } from "@/api/page";
 
 export const usePage = (currentPage: number | null) => {
-  const { data, isError, isLoading } = useQuery({
+  const {
+    data: page,
+    isError,
+    isLoading,
+  } = useQuery({
     queryKey: ["page", currentPage],
     queryFn: currentPage ? () => getPage(currentPage) : skipToken,
   });
 
-  return { data, isError, isLoading };
+  return { page, isError, isLoading };
 };
 
 export const useCreatePage = () => {
@@ -48,12 +52,12 @@ export const useDeletePage = () => {
 };
 
 export const usePages = () => {
-  const { data, isError } = useQuery({
+  const { data: pages, isError } = useQuery({
     queryKey: ["pages"],
     queryFn: getPages,
   });
 
-  return { data, isError };
+  return { pages, isError };
 };
 
 export const useUpdatePage = () => {
@@ -90,7 +94,7 @@ export const useOptimisticUpdatePage = ({ id }: { id: number }) => {
       rollback?.();
     },
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ["page", id] });
+      // queryClient.invalidateQueries({ queryKey: ["page", id] });
       queryClient.invalidateQueries({ queryKey: ["pages"] });
     },
   });