Merge pull request #104 from boostcampwm-2024/fix-fe-#49

노드 백스페이스 삭제 기능 개선

Author: pkh0106

apps/frontend/src/entities/page/index.ts

@@ -1,5 +1,6 @@
 export { createPage, deletePage } from "./api/pageApi";
 export { useCreatePage, useDeletePage } from "./model/pageMutations";
 
+export { useDeletePageStore } from "./model/deletePageStore";
 export { usePageStore } from "./model/pageStore";
 export { type Page, type CreatePageRequest } from "./model/pageTypes";

apps/frontend/src/entities/page/model/deletePageStore.ts

@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+interface DeletePageStore {
+  noteIdToDelete: number | null;
+  setNoteIdToDelete: (noteIdToDelete: number | null) => void;
+  isModalOpen: boolean;
+  setIsModalOpen: () => void;
+}
+
+export const useDeletePageStore = create<DeletePageStore>((set) => ({
+  noteIdToDelete: null,
+  setNoteIdToDelete: (noteIdToDelete: number | null) => set({ noteIdToDelete }),
+  isModalOpen: false,
+  setIsModalOpen: () => set((state) => ({ isModalOpen: !state.isModalOpen })),
+}));

apps/frontend/src/features/canvas/model/useCanvas.ts

@@ -20,6 +20,7 @@ import { useWorkspace } from "@/shared/lib";
 import { useUserStore } from "@/entities/user";
 import { useCanvasConnection } from "./useCanvasConnection";
 import useConnectionStore from "@/shared/model/useConnectionStore";
+import { useNoteList } from "@/shared/model/useNoteList";
 
 export interface YNode extends Node {
   isHolding: boolean;
@@ -41,6 +42,7 @@ export const useCanvas = () => {
   const holdingNodeRef = useRef<string | null>(null);
 
   const { currentPage, setCurrentPage } = usePageStore();
+  const { openModal } = useNoteList();
   const { users } = useUserStore();
 
   const { fitView } = useReactFlow();
@@ -239,7 +241,15 @@ export const useCanvas = () => {
         }
       });
 
-      onNodesChange(changes);
+      const changesWithoutRemove = changes.filter((change) => {
+        if (change.type !== "remove") return true;
+        else {
+          openModal(Number(change.id));
+          return false;
+        }
+      });
+
+      onNodesChange(changesWithoutRemove);
     },
     [nodes, edges, onNodesChange, provider],
   );

apps/frontend/src/features/canvas/ui/Canvas/index.tsx

@@ -11,10 +11,12 @@ import {
 import "@xyflow/react/dist/style.css";
 
 import { CollaborativeCursors } from "../CollaborativeCursors";
+import { RemoveNoteModal } from "../RemoveNoteModal";
 import { useCanvas } from "../../model/useCanvas";
 import { MemoizedGroupNode, NoteNode, NoteNodeType } from "@/entities/node";
 import { cn } from "@/shared/lib";
 import { useConnectionStatus } from "@/shared/model/useConnectionStatus";
+import { useNoteList } from "@/shared/model/useNoteList";
 
 interface CanvasProps {
   className?: string;
@@ -37,6 +39,8 @@ export function Canvas({ className }: CanvasProps) {
     onNodeDragStop,
     onConnect,
   } = useCanvas();
+  const { isModalOpen, onConfirm, onCloseModal } = useNoteList();
+
   const status = useConnectionStatus();
 
   const proOptions = { hideAttribution: true };
@@ -61,6 +65,11 @@ export function Canvas({ className }: CanvasProps) {
 
   return (
     <div className={cn(className)} onMouseMove={handleMouseMove}>
+      <RemoveNoteModal
+        isOpen={isModalOpen}
+        onConfirm={onConfirm}
+        onCloseModal={onCloseModal}
+      />
       <ReactFlow
         nodes={nodes}
         edges={edges}

apps/frontend/src/features/pageSidebar/ui/RemoveNoteModal/index.tsx apps/frontend/src/features/canvas/ui/RemoveNoteModal/index.tsx

@@ -1,7 +1,6 @@
 import { Trash2 } from "lucide-react";
 
-import { RemoveNoteModal } from "../RemoveNoteModal";
-import { useNoteList } from "../../model/useNoteList";
+import { useNoteList } from "@/shared/model/useNoteList";
 import { cn } from "@/shared/lib";
 import { Button, Emoji } from "@/shared/ui";
 
@@ -10,22 +9,10 @@ interface NoteListProps {
 }
 
 export function NoteList({ className }: NoteListProps) {
-  const {
-    pages,
-    isModalOpen,
-    handleNoteClick,
-    openModal,
-    onConfirm,
-    onCloseModal,
-  } = useNoteList();
+  const { pages, handleNoteClick, openModal } = useNoteList();
 
   return (
     <div className={cn("flex flex-col gap-0.5 text-sm font-medium", className)}>
-      <RemoveNoteModal
-        isOpen={isModalOpen}
-        onConfirm={onConfirm}
-        onCloseModal={onCloseModal}
-      />
       {pages &&
         pages.map(({ id, title, emoji }) => (
           <Button

apps/frontend/src/features/pageSidebar/ui/NoteList/index.tsx

@@ -1,7 +1,11 @@
 import { useEffect, useState } from "react";
 
 import { Node, NoteNodeData } from "@/entities/node";
-import { useDeletePage, usePageStore } from "@/entities/page";
+import {
+  useDeletePage,
+  useDeletePageStore,
+  usePageStore,
+} from "@/entities/page";
 import useConnectionStore from "@/shared/model/useConnectionStore";
 
 export const useNoteList = () => {
@@ -31,8 +35,8 @@ export const useNoteList = () => {
     };
   }, [canvas.provider]);
 
-  const [noteIdToDelete, setNoteIdToDelete] = useState<number | null>(null);
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { noteIdToDelete, setNoteIdToDelete, isModalOpen, setIsModalOpen } =
+    useDeletePageStore();
 
   const deleteMutation = useDeletePage();
 
@@ -42,7 +46,7 @@ export const useNoteList = () => {
 
   const openModal = (noteId: number) => {
     setNoteIdToDelete(noteId);
-    setIsModalOpen(true);
+    setIsModalOpen();
   };
 
   const onConfirm = () => {
@@ -56,12 +60,12 @@ export const useNoteList = () => {
     nodesMap.delete(noteIdToDelete.toString());
     deleteMutation.mutate({ id: noteIdToDelete });
 
-    setIsModalOpen(false);
+    setIsModalOpen();
     setCurrentPage(null);
   };
 
   const onCloseModal = () => {
-    setIsModalOpen(false);
+    setIsModalOpen();
   };
 
   return {