[FEATURE] 우클릭 시 삭제 기능 구현 (#67)

* feat: context menu에서 delete API 연동

* refactor: 토픽에서 콘텐츠 제거했을 때 성공, 실패에 대한 후속 처리 훅에서 관리하도록 리팩토링

Author: gs0428

apps/web/src/components/(with-side-bar)/topic/context-menu-provider.tsx

@@ -8,7 +8,7 @@ import {
   ContextMenuTrigger,
 } from "@/components/common/context-menu";
 import { TopicContext } from "@/context/topic-context";
-import { useCreateContent } from "@/lib/tanstack/mutation/topic-content";
+import { useCreateContent, useRemoveTopicContentById } from "@/lib/tanstack/mutation/topic-content";
 import type { CategoryContentDTO } from "@linkyboard/types";
 import type { Node } from "@xyflow/react";
 
@@ -33,11 +33,12 @@ export default function ContextMenuProvider({
     throw new Error("TopicContext not found");
   }
 
-  const { id, nodes, selectedNodeIds } = topicContext;
+  const { id, nodes, selectedNodeIds, onResetSelectedNodeIds } = topicContext;
 
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
 
   const { mutateAsync: createContent } = useCreateContent(id);
+  const { mutateAsync: removeContent } = useRemoveTopicContentById(id, onResetSelectedNodeIds);
 
   const onDuplicate = useCallback(() => {
     selectedNodeIds.forEach(async (nodeId) => {
@@ -69,10 +70,13 @@ export default function ContextMenuProvider({
     // 여기에 Summary 로직 추가
   }, []);
 
-  const onDelete = useCallback(() => {
-    console.log("Delete 실행");
-    // 여기에 Delete 로직 추가
-  }, []);
+  const onDelete = useCallback(async () => {
+    const contentIds = selectedNodeIds.map((id) => Number(id.split("-")[1]));
+    await removeContent({
+      topicId: id,
+      contentIds,
+    });
+  }, [id, removeContent, selectedNodeIds]);
 
   const onCloseContextMenu = useCallback(() => {
     setIsContextMenuOpen(false);

apps/web/src/components/(with-side-bar)/topic/remove-content-button.tsx

@@ -1,41 +1,28 @@
-import { TOPIC } from "@/constants/topic";
-import { invalidateQueries } from "@/lib/tanstack";
 import { useRemoveTopicContentById } from "@/lib/tanstack/mutation/topic-content";
-import { Button, errorToast } from "@linkyboard/components";
+import { Button } from "@linkyboard/components";
 
 import { Trash2 } from "lucide-react";
 
 interface RemoveContentButtonProps {
   topicId: string;
   selectedNodeIds: string[];
-  setSelectedNodeIds: React.Dispatch<React.SetStateAction<string[]>>;
+  onResetSelectedNodeIds: () => void;
 }
 
 export default function RemoveContentButton({
   topicId,
   selectedNodeIds,
-  setSelectedNodeIds,
+  onResetSelectedNodeIds,
 }: RemoveContentButtonProps) {
   const contentIds = selectedNodeIds.map((id) => Number(id.split("-")[1]));
 
-  const { mutateAsync, isPending } = useRemoveTopicContentById();
+  const { mutateAsync, isPending } = useRemoveTopicContentById(topicId, onResetSelectedNodeIds);
 
   const onRemoveContent = async () => {
-    await mutateAsync(
-      {
-        topicId,
-        contentIds,
-      },
-      {
-        onSuccess: () => {
-          invalidateQueries([TOPIC.GET_TOPIC_BOARD_BY_ID, topicId]);
-          setSelectedNodeIds([]);
-        },
-        onError: () => {
-          errorToast("토픽에서 콘텐츠를 제거하지 못했어요.");
-        },
-      }
-    );
+    await mutateAsync({
+      topicId,
+      contentIds,
+    });
   };
 
   return (

apps/web/src/components/(with-side-bar)/topic/summarize-dialog.tsx

@@ -26,7 +26,7 @@ import { summarizeSchema, type SummarizeSchemaType } from "../../../schemas/summ
 interface SummarizeDialogProps {
   topicId: string;
   selectedNodeIds: string[];
-  setSelectedNodeIds: React.Dispatch<React.SetStateAction<string[]>>;
+  onResetSelectedNodeIds: () => void;
 }
 
 const DEFAULT_VALUES = {
@@ -38,7 +38,7 @@ const DEFAULT_VALUES = {
 function SummarizeDialogContent({
   topicId,
   selectedNodeIds,
-  setSelectedNodeIds,
+  onResetSelectedNodeIds,
 }: SummarizeDialogProps) {
   const [isModelDropdownOpen, setIsModelDropdownOpen] = useState(false);
 
@@ -91,7 +91,7 @@ function SummarizeDialogContent({
           invalidateQueries([TOPIC.GET_TOPIC_BOARD_BY_ID, topicId]);
           router.push(`/topic/${topicId}/sticker?stickerId=${data.result.id}`);
           reset();
-          setSelectedNodeIds([]);
+          onResetSelectedNodeIds();
         },
         onError: (error) => {
           console.error(error);

apps/web/src/context/topic-context.tsx

@@ -15,6 +15,7 @@ interface TopicContextProps {
   onConnect: (params: Connection) => void;
   onEdgeClick: (e: React.MouseEvent, edge: Edge) => void;
   onNodeSelect: (nodeId: string) => void;
+  onResetSelectedNodeIds: () => void;
 }
 
 export const TopicContext = createContext<TopicContextProps | null>(null);

apps/web/src/lib/tanstack/mutation/topic-content.ts

@@ -5,7 +5,7 @@ import {
   updateContentPosition,
   updateContentSize,
 } from "@/services/topic-content";
-import { infoToast } from "@linkyboard/components";
+import { errorToast, infoToast } from "@linkyboard/components";
 import { useMutation } from "@tanstack/react-query";
 
 import { invalidateQueries } from "..";
@@ -43,8 +43,15 @@ export const useCreateContent = (id: string) => {
   });
 };
 
-export const useRemoveTopicContentById = () => {
+export const useRemoveTopicContentById = (topicId: string, onResetSelectedNodeIds: () => void) => {
   return useMutation({
     mutationFn: removeTopicContentById,
+    onSuccess: () => {
+      invalidateQueries([TOPIC.GET_TOPIC_BOARD_BY_ID, topicId]);
+      onResetSelectedNodeIds();
+    },
+    onError: () => {
+      errorToast("토픽에서 콘텐츠를 제거하지 못했어요.");
+    },
   });
 };

apps/web/src/page/topic/[id]/index.tsx

@@ -57,6 +57,10 @@ export default function TopicBoardPage({ id, type }: TopicBoardPageProps) {
     );
   }, []);
 
+  const onResetSelectedNodeIds = useCallback(() => {
+    setSelectedNodeIds([]);
+  }, []);
+
   const onConnect = useCallback(
     async (params: Connection) => {
       // 연결 유효성 검사: 같은 노드 간에는 하나의 연결만 허용
@@ -127,12 +131,12 @@ export default function TopicBoardPage({ id, type }: TopicBoardPageProps) {
               <RemoveContentButton
                 topicId={id}
                 selectedNodeIds={selectedNodeIds}
-                setSelectedNodeIds={setSelectedNodeIds}
+                onResetSelectedNodeIds={onResetSelectedNodeIds}
               />
               <SummarizeDialog
                 topicId={id}
                 selectedNodeIds={selectedNodeIds}
-                setSelectedNodeIds={setSelectedNodeIds}
+                onResetSelectedNodeIds={onResetSelectedNodeIds}
               />
             </>
           )}
@@ -160,6 +164,7 @@ export default function TopicBoardPage({ id, type }: TopicBoardPageProps) {
             onConnect,
             onEdgeClick,
             onNodeSelect,
+            onResetSelectedNodeIds,
           }}
         >
           <ReactFlowCanvas />