chore : 보관함 경로 수정으로 인한 삭제 api 변경 (#433)

prgrms-web-devcourse-final-project · Dec 10, 2024 · 27d89a4 · 27d89a4
1 parent eceaa54
commit 27d89a4
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 14 deletions.
diff --git a/src/components/LetterDetailPage/Delete/DeleteModal.tsx b/src/components/LetterDetailPage/Delete/DeleteModal.tsx
@@ -3,9 +3,9 @@ import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { useDeleteKeywordLetter } from '@/hooks/useDeleteKeywordLetter';
 import { useDeleteMapSentLetter } from '@/hooks/useDeleteMapSentLetter';
 import { useDeleteKeywordReplyLetter } from '@/hooks/useDeleteKeywordReplyLetter';
-
 import { useToastStore } from '@/hooks';
 import { useDeleteMapReceivedLetter } from '@/hooks/useDeleteMapReceivedtLetter';
+import { useDeleteMapArchivedLetter } from '@/hooks/useDeleteMapArchivedLetter';
 
 type DeleteModalProps = {
     closeModal: () => void;
@@ -15,6 +15,7 @@ export const DeleteModal = ({ closeModal }: DeleteModalProps) => {
     const navigate = useNavigate();
     const { pathname } = useLocation();
     const letterType = pathname.split('/')[2];
+    const bookmarkType = pathname.split('/')[4];
     const { dataType, letterId, replyLetterId } = useParams<{
         dataType: string;
         letterId: string;
@@ -40,39 +41,57 @@ export const DeleteModal = ({ closeModal }: DeleteModalProps) => {
         letterIds: [Number(letterId) || Number(replyLetterId)]
     });
 
+    const mapArchivedMutation = useDeleteMapArchivedLetter({
+        archiveIds: [Number(letterId) || Number(replyLetterId)]
+    });
+
     const mutation =
-        letterType === 'keyword'
-            ? dataType === 'received'
-                ? keywordReplyMutation
-                : keywordMutation
-            : letterType === 'map' && dataType === 'received'
-              ? mapReceivedMutation
-              : mapMutation;
+        bookmarkType === 'bookmark'
+            ? mapArchivedMutation
+            : letterType === 'keyword'
+              ? dataType === 'received'
+                  ? keywordReplyMutation
+                  : keywordMutation
+              : letterType === 'map' && dataType === 'received'
+                ? mapReceivedMutation
+                : mapMutation;
 
     const { addToast } = useToastStore();
 
     const handleDelete = () => {
         mutation.mutate(undefined, {
             onSuccess: () => {
                 closeModal();
-                addToast('편지 삭제에 성공했습니다.', 'success');
+                addToast(
+                    bookmarkType === 'bookmark'
+                        ? '보관 취소에 성공했습니다.'
+                        : '편지 삭제에 성공했습니다.',
+                    'success'
+                );
                 navigate(
                     letterType === 'keyword'
                         ? '/storage?type=keyword'
-                        : 'storage?type=map'
+                        : '/storage?type=map'
                 );
             },
             onError: () => {
-                addToast('편지 삭제에 실패했습니다.', 'error');
+                addToast(
+                    bookmarkType === 'bookmark'
+                        ? '보관 취소에 실패했습니다.'
+                        : '편지 삭제에 실패했습니다.',
+                    'error'
+                );
             }
         });
     };
 
     return (
-        <div className="flex flex-col  font-sans bg-white rounded-2xl items-center justify-center w-60 h-28 p-4">
+        <div className="flex flex-col font-sans bg-white rounded-2xl items-center justify-center w-60 h-28 p-4">
             <Margin top={10} />
             <span className="font-bold mb-4 text-xl">
-                편지를 삭제하시겠습니까?
+                {bookmarkType === 'bookmark'
+                    ? '보관을 취소하시겠습니까?'
+                    : '편지를 삭제하시겠습니까?'}
             </span>
 
             <div className="flex-center gap-2">

diff --git a/src/components/StoragePage/StorageList.tsx b/src/components/StoragePage/StorageList.tsx
@@ -215,7 +215,7 @@ export const StorageList = ({ type = 'keyword' }: StorageListProps) => {
                                                     ? 'sent'
                                                     : 'received';
                                             navigate(
-                                                `/letter/map/${dataType}/${letter.letterId}`
+                                                `/letter/map/${dataType}/bookmark/${letter.letterId}`
                                             );
                                         }}
                                     >

diff --git a/src/hooks/useDeleteMapArchivedLetter.ts b/src/hooks/useDeleteMapArchivedLetter.ts
@@ -0,0 +1,21 @@
+import { deleteMapArchivedLetter } from '@/service/MapLetter/deleteMapArchivedLetter';
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+
+type UseDeleteMapArchivedLettersProps = {
+    archiveIds: number[];
+};
+
+export const useDeleteMapArchivedLetter = (
+    { archiveIds }: UseDeleteMapArchivedLettersProps,
+    options?: UseMutationOptions<number[], Error, void>
+) => {
+    return useMutation<number[], Error, void>({
+        mutationFn: async () => {
+            const response = await deleteMapArchivedLetter({
+                archiveIds
+            });
+            return response.result;
+        },
+        ...options
+    });
+};
diff --git a/src/service/MapLetter/deleteMapArchivedLetter.ts b/src/service/MapLetter/deleteMapArchivedLetter.ts
@@ -0,0 +1,25 @@
+import { defaultApi } from '@/service/api';
+import { ApiResponseType } from '@/types/apiResponse';
+
+type deleteMapArchivedLettersRequestProps = {
+    archiveIds: number[];
+};
+
+type deleteMapArchivedLettersResponse = ApiResponseType<number[]>;
+
+export async function deleteMapArchivedLetter({
+    archiveIds
+}: deleteMapArchivedLettersRequestProps): Promise<deleteMapArchivedLettersResponse> {
+    const api = defaultApi();
+
+    const response = await api.delete<deleteMapArchivedLettersResponse>(
+        '/map/archived',
+        {
+            data: {
+                archiveIds
+            }
+        }
+    );
+
+    return response.data;
+}