feat: 스티커 삭제, 수정 API 연동

Author: gs0428

apps/web/src/components/topic/edit-topic-sidebar/index.tsx

@@ -1,13 +1,17 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 
 import Sidebar from "@/components/sidebar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { TOPIC } from "@/constants/topic";
 import { invalidateMany, invalidateQueries } from "@/lib/tanstack";
+import {
+  useRemoveCustomSticker,
+  useUpdateCustomSticker,
+} from "@/lib/tanstack/mutation/custom-sticker";
 import { useRemoveTopic, useUpdateTopic } from "@/lib/tanstack/mutation/topic";
 import { useTopicStore } from "@/lib/zustand/topic-store";
 import { containsMarkdown, markdownToHtml } from "@/utils/markdown";
@@ -29,16 +33,31 @@ import RemoveDialogContent from "../remove-dialog-content";
 
 export default function EditTopicSidebar() {
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const topicId = searchParams.get("id");
 
   const [title, setTitle] = useState("");
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
+  // 토픽 관련 hook
   const { mutateAsync: updateTopic, isPending: isUpdatePending } = useUpdateTopic();
   const { mutateAsync: removeTopic, isPending: isDeletePending } = useRemoveTopic();
+
+  // 스티커 관련 hook
+  const { mutateAsync: updateCustomSticker, isPending: isUpdateCustomStickerPending } =
+    useUpdateCustomSticker();
+  const { mutateAsync: removeCustomSticker, isPending: isDeleteCustomStickerPending } =
+    useRemoveCustomSticker();
+
   const { setEditingTopic, setShowEditTopicSidebar, editingTopic, showEditTopicSidebar } =
     useTopicStore();
 
-  const buttonDisabled = isUpdatePending || isDeletePending;
+  const buttonDisabled =
+    isUpdatePending ||
+    isDeletePending ||
+    isUpdateCustomStickerPending ||
+    isDeleteCustomStickerPending;
+  const currentType = editingTopic?.type === "custom_sticker" ? "스티커" : "토픽";
 
   const onClose = () => {
     setEditingTopic(null);
@@ -109,28 +128,42 @@ export default function EditTopicSidebar() {
   }, [editingTopic, editor]);
 
   const onSave = async () => {
-    if (!editingTopic || !editor) return errorToast("토픽 정보가 없어요.");
+    if (!editingTopic || !editor) return errorToast(`${currentType} 정보가 없어요.`);
 
     try {
       const content = editor.getHTML();
       // TODO: editingTopic.type에 따라 API 요청 다르게
-      await updateTopic(
-        {
-          id: editingTopic.id,
-          title,
-          content,
-        },
-        {
-          onSuccess: async () => {
-            successToast("토픽이 성공적으로 수정되었어요.");
-            await invalidateMany([
-              [TOPIC.GET_ALL_TOPICS],
-              [TOPIC.GET_TOPIC_BY_ID, editingTopic?.id.toString()],
-            ]);
-            onClose();
+      if (editingTopic.type === "topic") {
+        await updateTopic(
+          {
+            id: editingTopic.id,
+            title,
+            content,
           },
-        }
-      );
+          {
+            onSuccess: async () => {
+              successToast("토픽이 성공적으로 수정되었어요.");
+              await invalidateMany([[TOPIC.GET_ALL_TOPICS], [TOPIC.GET_TOPIC_BY_ID, topicId]]);
+              onClose();
+            },
+          }
+        );
+      } else if (editingTopic.type === "custom_sticker") {
+        await updateCustomSticker(
+          {
+            customStickerId: editingTopic.id,
+            title,
+            content,
+          },
+          {
+            onSuccess: async () => {
+              successToast("스티커가 성공적으로 수정되었어요.");
+              invalidateQueries([TOPIC.GET_TOPIC_BY_ID, topicId]);
+              onClose();
+            },
+          }
+        );
+      }
     } catch {
       errorToast("토픽 수정에 실패했어요.");
     }
@@ -143,26 +176,39 @@ export default function EditTopicSidebar() {
   };
 
   const onDelete = async (id: number) => {
-    await removeTopic(id, {
-      onSuccess: () => {
-        successToast("토픽이 성공적으로 삭제되었어요.");
-        onCloseSidebar();
-        invalidateQueries([TOPIC.GET_ALL_TOPICS]);
-        revalidatePath(`/topic?id=${id}`);
-        router.back();
-      },
-      onError: () => {
-        errorToast("토픽 삭제에 실패했어요.");
-      },
-    });
+    if (editingTopic?.type === "topic") {
+      await removeTopic(id, {
+        onSuccess: () => {
+          successToast("토픽이 성공적으로 삭제되었어요.");
+          onCloseSidebar();
+          invalidateQueries([TOPIC.GET_ALL_TOPICS]);
+          revalidatePath(`/topic?id=${id}`);
+          router.back();
+        },
+        onError: () => {
+          errorToast("토픽 삭제에 실패했어요.");
+        },
+      });
+    } else if (editingTopic?.type === "custom_sticker") {
+      await removeCustomSticker(id, {
+        onSuccess: () => {
+          successToast("스티커가 성공적으로 삭제되었어요.");
+          onCloseSidebar();
+          invalidateQueries([TOPIC.GET_ALL_TOPICS]);
+        },
+        onError: () => {
+          errorToast("스티커 삭제에 실패했어요.");
+        },
+      });
+    }
   };
 
   return (
     <Sidebar isOpen={showEditTopicSidebar} onClose={onClickOutside}>
       <div className="flex h-full flex-col">
         {/* 헤더 */}
         <div className="flex items-center justify-between border-b p-6">
-          <h2 className="text-xl font-semibold">토픽 편집</h2>
+          <h2 className="text-xl font-semibold">{currentType} 편집</h2>
           <Button variant="ghost" size="icon" onClick={onCloseSidebar} aria-label="사이드바 닫기">
             <X size={24} />
           </Button>
@@ -176,7 +222,7 @@ export default function EditTopicSidebar() {
             <Input
               value={title}
               onChange={(e) => setTitle(e.target.value)}
-              placeholder="토픽 제목을 입력하세요"
+              placeholder={`${currentType} 제목을 입력하세요`}
               className="text-base"
             />
           </div>

apps/web/src/components/topic/remove-user-sticker-dialog.tsx

@@ -0,0 +1,46 @@
+import { TOPIC } from "@/constants/topic";
+import { invalidateQueries } from "@/lib/tanstack";
+import { useRemoveCustomSticker } from "@/lib/tanstack/mutation/custom-sticker";
+import { errorToast, successToast } from "@/utils/toast";
+import { DialogClose, DialogContent, useDialog } from "@repo/ui/components/dialog";
+
+import { Loader2 } from "lucide-react";
+
+import { Button } from "../ui/button";
+
+export default function RemoveUserStickerDialog({ topicId }: { topicId: number }) {
+  const { mutateAsync, isPending } = useRemoveCustomSticker();
+  const { close } = useDialog();
+
+  const onRemoveTopic = async () => {
+    await mutateAsync(topicId, {
+      onSuccess: () => {
+        successToast("스티커가 삭제되었어요.");
+        invalidateQueries([TOPIC.GET_TOPIC_BY_ID, topicId.toString()]);
+        close();
+      },
+      onError: () => {
+        errorToast("스티커 삭제에 실패했어요.");
+      },
+    });
+  };
+
+  return (
+    <DialogContent>
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-foreground text-lg font-semibold">삭제</h2>
+          <p className="text-muted-foreground text-sm">스티커를 삭제 하시겠습니까?</p>
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" asChild disabled={isPending}>
+            <DialogClose>취소</DialogClose>
+          </Button>
+          <Button onClick={onRemoveTopic} disabled={isPending}>
+            {isPending ? <Loader2 size={16} className="animate-spin" /> : "삭제"}
+          </Button>
+        </div>
+      </div>
+    </DialogContent>
+  );
+}

apps/web/src/components/topic/summarize-dialog.tsx

@@ -79,6 +79,7 @@ function SummarizeDialogContent({ topicId, selectedNodeIds }: SummarizeDialogPro
           invalidateQueries([TOPIC.GET_TOPIC_BY_ID, topicId]);
           setEditingTopic({
             ...data.result,
+            content: data.result.draftMd,
             type: "custom_sticker",
           });
           setShowEditTopicSidebar(true);

apps/web/src/components/topic/user-sticker.tsx

@@ -5,7 +5,7 @@ import { Dialog, DialogTrigger } from "@repo/ui/components/dialog";
 
 import { Edit, Sticker, Trash2 } from "lucide-react";
 
-import RemoveTopicDialog from "./remove-topic-dialog";
+import RemoveUserStickerDialog from "./remove-user-sticker-dialog";
 import { Button } from "../ui/button";
 
 export default function UserSticker({ item }: { item: TopicDTO }) {
@@ -53,7 +53,7 @@ export default function UserSticker({ item }: { item: TopicDTO }) {
                 <Trash2 size={16} />
               </DialogTrigger>
             </Button>
-            <RemoveTopicDialog topicId={item.id} />
+            <RemoveUserStickerDialog topicId={item.id} />
           </Dialog>
         </div>
       </div>

apps/web/src/constants/topic.ts

@@ -1,6 +1,5 @@
 export const TOPIC = {
   GET_TOPIC_BY_ID: "get-topic-by-id",
   GET_ALL_TOPICS: "get-all-topics",
-  GET_TOPIC_CONTENT_BY_ID: "get-topic-content-by-id",
   GET_ALL_CONTENTS: "get-all-contents",
 };

apps/web/src/lib/tanstack/mutation/custom-sticker.ts

@@ -1,5 +1,8 @@
 import {
+  createCustomSticker,
+  removeCustomSticker,
   summarizeTopicContent,
+  updateCustomSticker,
   updateCustomStickerPosition,
   updateCustomStickerSize,
 } from "@/services/custom-sticker";
@@ -22,3 +25,21 @@ export const useUpdateCustomStickerSize = () => {
     mutationFn: updateCustomStickerSize,
   });
 };
+
+export const useRemoveCustomSticker = () => {
+  return useMutation({
+    mutationFn: removeCustomSticker,
+  });
+};
+
+export const useCreateCustomSticker = () => {
+  return useMutation({
+    mutationFn: createCustomSticker,
+  });
+};
+
+export const useUpdateCustomSticker = () => {
+  return useMutation({
+    mutationFn: updateCustomSticker,
+  });
+};

apps/web/src/models/topic.ts

@@ -8,6 +8,12 @@ export interface TopicDTO {
   content: string;
 }
 
+export interface SummarizeContentDTO {
+  id: number;
+  title: string;
+  draftMd: string;
+}
+
 export interface TopicDetailDTO {
   nodes: {
     data: {

apps/web/src/page/topic/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import ContentList from "@/components/topic/content-list";
 import CustomNode from "@/components/topic/custom-node";
@@ -308,7 +308,9 @@ export default function TopicBoardPage({ id, type }: TopicBoardPageProps) {
       </div>
 
       {/* Edit Topic Sidebar */}
-      <EditTopicSidebar />
+      <Suspense>
+        <EditTopicSidebar />
+      </Suspense>
     </div>
   );
 }

apps/web/src/services/custom-sticker.ts

@@ -1,5 +1,5 @@
 import { AIModelDTO } from "@/models/custom-sticker";
-import { TopicDTO } from "@/models/topic";
+import { SummarizeContentDTO } from "@/models/topic";
 import { BaseResponseDTO } from "@repo/types";
 
 import { clientApi } from ".";
@@ -13,7 +13,7 @@ export const summarizeTopicContent = async (props: {
   selectedContentIds: number[];
   requirements: string;
   modelAlias: string;
-}): Promise<BaseResponseDTO<TopicDTO>> => {
+}): Promise<BaseResponseDTO<SummarizeContentDTO>> => {
   return clientApi.post(`custom-stickers/summarize`, props);
 };
 
@@ -34,3 +34,26 @@ export const updateCustomStickerSize = async (props: {
   const { customStickerId, ...restProps } = props;
   return clientApi.put(`custom-stickers/${customStickerId}/resize`, restProps);
 };
+
+export const removeCustomSticker = async (
+  customStickerId: number
+): Promise<BaseResponseDTO<unknown>> => {
+  return clientApi.delete(`custom-stickers/${customStickerId}`);
+};
+
+export const createCustomSticker = async (props: {
+  topicId: number;
+  title: string;
+  content: string;
+}): Promise<BaseResponseDTO<unknown>> => {
+  return clientApi.post(`custom-stickers`, props);
+};
+
+export const updateCustomSticker = async (props: {
+  customStickerId: number;
+  title: string;
+  content: string;
+}): Promise<BaseResponseDTO<unknown>> => {
+  const { customStickerId, ...restProps } = props;
+  return clientApi.put(`custom-stickers/${customStickerId}`, restProps);
+};