feat : 보낸 지도 편지 상세 보기 페이지 삭제 API연동 (#325)

src/components/LetterDetailPage/Delete/DeleteModal.tsx

@@ -1,6 +1,7 @@
 import { Margin } from '@/components/Common/Margin/Margin';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { useDeleteKeywordLetter } from '@/hooks/useDeleteKeywordLetter';
+import { useDeleteMapSentLetter } from '@/hooks/useDeleteMapSentLetter';
 import { useToastStore } from '@/hooks';
 
 type DeleteModalProps = {
@@ -9,32 +10,41 @@ type DeleteModalProps = {
 
 export const DeleteModal = ({ closeModal }: DeleteModalProps) => {
     const navigate = useNavigate();
+    const { pathname } = useLocation();
+    const letterType = pathname.split('/')[2];
     const { dataType, letterId } = useParams<{
         dataType: string;
         letterId: string;
     }>();
     const transformedLetterType = dataType === 'sent' ? 'SEND' : 'RECEIVE';
 
-    const mutation = useDeleteKeywordLetter({
+    const keywordMutation = useDeleteKeywordLetter({
         letterId: Number(letterId),
         boxType: transformedLetterType
     });
 
+    const mapMutation = useDeleteMapSentLetter({
+        letterIds: [Number(letterId)]
+    });
+    const mutation = letterType === 'keyword' ? keywordMutation : mapMutation;
     const { addToast } = useToastStore();
 
     const handleDelete = () => {
         mutation.mutate(undefined, {
             onSuccess: () => {
                 closeModal();
                 addToast('편지 삭제에 성공했습니다.', 'success');
-                navigate('/storage/keyword');
+                navigate(
+                    letterType === 'keyword'
+                        ? '/storage/keyword'
+                        : '/storage/map'
+                );
             },
             onError: () => {
                 addToast('편지 삭제에 실패했습니다.', 'error');
             }
         });
     };
-
     return (
         <div className="flex flex-col bg-white rounded-2xl items-center justify-center w-full h-full p-4">
             <Margin top={10} />

src/hooks/useDeleteMapSentLetter.ts

@@ -0,0 +1,21 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { deleteMapSentLetter } from '@/service/MapLetter/deleteMapSentLetter';
+
+type UseDeleteMapSentLettersProps = {
+    letterIds: number[];
+};
+
+export const useDeleteMapSentLetter = (
+    { letterIds }: UseDeleteMapSentLettersProps,
+    options?: UseMutationOptions<number[], Error, void>
+) => {
+    return useMutation<number[], Error, void>({
+        mutationFn: async () => {
+            const response = await deleteMapSentLetter({
+                letterIds
+            });
+            return response.result;
+        },
+        ...options
+    });
+};

src/service/MapLetter/deleteMapSentLetter.ts

@@ -0,0 +1,22 @@
+import { defaultApi } from '@/service/api';
+import { ApiResponseType } from '@/types/apiResponse';
+
+type deleteMapSentLettersRequestProps = {
+    letterIds: number[];
+};
+
+type deleteMapSentLettersResponse = ApiResponseType<number[]>;
+
+export async function deleteMapSentLetter({
+    letterIds
+}: deleteMapSentLettersRequestProps): Promise<deleteMapSentLettersResponse> {
+    const api = defaultApi();
+
+    const response = await api.delete<deleteMapSentLettersResponse>('/map', {
+        data: {
+            letterIds
+        }
+    });
+
+    return response.data;
+}