feat : 키워드 편지 상세 조회 삭제 기능 api 연동 (#311)

* chore : daycounter 로직 수정 * refactor : 폴더 및 로직 수정 * feat : 컨테이너 및 상세 개발 * story : 스토리 삭제 * feat : 라우팅 설정 * feat : api 호출 로직 작성 * chore : 폴더 경로 수정 * chore : UseNearbyLettersDetailProps 타입 변경 * story : 바뀐 유틸에 맞게 스토리 수정 * chore: simple layout 수정 * style : 전역 스타일 수정 * chore : ; 제거 및 안 쓰는 import 제거 * chore : url 수정 * chore : url 수정으로 인한 변경 * feat : 키워드 편지 상세 조회 삭제 기능 api 연동 * feat : id props 삭제 및 api 연동 * chore : 스토리북 수정 --------- Co-authored-by: 남정욱 <[email protected]>
prgrms-web-devcourse-final-project · Dec 7, 2024 · 93ad24a · 93ad24a
1 parent e08305a
commit 93ad24a
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 28 deletions.
diff --git a/src/components/LetterDetailPage/Delete/DeleteButton.tsx b/src/components/LetterDetailPage/Delete/DeleteButton.tsx
@@ -1,11 +1,8 @@
 import { RiDeleteBin5Line } from 'react-icons/ri';
 import { useState } from 'react';
 import { DeleteModal } from './DeleteModal';
-type DeleteButtonProps = {
-    id: string;
-};
 
-export const DeleteButton = ({ id }: DeleteButtonProps) => {
+export const DeleteButton = () => {
     const [isModalOpen, setIsModalOpen] = useState(false);
 
     const openModal = () => {
@@ -31,7 +28,7 @@ export const DeleteButton = ({ id }: DeleteButtonProps) => {
                         onClick={(e) => e.stopPropagation()}
                         className="bg-white rounded-lg p-6"
                     >
-                        <DeleteModal id={id} closeModal={closeModal} />
+                        <DeleteModal closeModal={closeModal} />
                     </div>
                 </div>
             )}

diff --git a/src/components/LetterDetailPage/Delete/DeleteModal.stories.tsx b/src/components/LetterDetailPage/Delete/DeleteModal.stories.tsx
@@ -1,28 +1,24 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { DeleteModal } from './DeleteModal';
+import { MemoryRouter } from 'react-router-dom';
 
 const meta: Meta<typeof DeleteModal> = {
     component: DeleteModal,
     title: 'molecule/DeleteModal',
     tags: ['autodocs'],
-    argTypes: {
-        id: {
-            control: 'text',
-            description: '삭제할 편지 ID.',
-            defaultValue: '1234'
-        },
-        closeModal: {
-            action: 'closeModal',
-            description: '모달 닫기 이벤트 핸들러'
-        }
-    }
+    argTypes: {},
+    decorators: [
+        (Story) => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ]
 };
 export default meta;
 
 type Story = StoryObj<typeof DeleteModal>;
 
 export const Default: Story = {
-    args: {
-        id: '1234'
-    }
+    args: {}
 };
diff --git a/src/components/LetterDetailPage/Delete/DeleteModal.tsx b/src/components/LetterDetailPage/Delete/DeleteModal.tsx
@@ -1,16 +1,51 @@
 import { Margin } from '@/components/Common/Margin/Margin';
+import { useParams, useLocation, useNavigate } from 'react-router-dom';
+import { useDeleteKeywordLetterReplyKeywordLetter } from '@/hooks/useDeleteKeywordLetterReplyKeywordLetter';
+import { useToastStore } from '@/hooks';
 
 type DeleteModalProps = {
-    id: string;
     closeModal: () => void;
 };
 
-export const DeleteModal = ({ id, closeModal }: DeleteModalProps) => {
+export const DeleteModal = ({ closeModal }: DeleteModalProps) => {
+    const navigate = useNavigate();
+    const { dataType, letterId } = useParams<{
+        dataType: string;
+        letterId: string;
+    }>();
+    const location = useLocation();
+    const basePath = location.pathname.split('/')[2];
+
+    const transformedLetterType = dataType === 'sent' ? 'SEND' : 'RECEIVE';
+    const transformedBoxType =
+        basePath === 'keyword' ? 'LETTER' : 'REPLY_LETTER';
+
+    const mutation = useDeleteKeywordLetterReplyKeywordLetter({
+        letterId: Number(letterId),
+        boxType: transformedLetterType,
+        letterType: transformedBoxType
+    });
+
+    const { addToast } = useToastStore();
+
+    const handleDelete = () => {
+        mutation.mutate(undefined, {
+            onSuccess: () => {
+                closeModal();
+                addToast('편지 삭제에 성공했습니다.', 'success');
+                navigate('/storage/keyword');
+            },
+            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} />
             <span className="font-bold mb-4 text-2xl">
-                {id}편지를 삭제하시겠습니까?
+                편지를 삭제하시겠습니까?
             </span>
 
             <div className="flex-center gap-2">
@@ -20,7 +55,10 @@ export const DeleteModal = ({ id, closeModal }: DeleteModalProps) => {
                 >
                     닫기
                 </button>
-                <button className="mt-6 bg-slate-500 w-24 text-white px-4 py-2 rounded-lg">
+                <button
+                    onClick={handleDelete}
+                    className="mt-6 bg-slate-500 w-24 text-white px-4 py-2 rounded-lg"
+                >
                     삭제하기
                 </button>
             </div>

diff --git a/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx b/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx
@@ -19,13 +19,15 @@ type KeywordLetterDetailProps = {
 export const KeywordLetterDetail = ({
     letterData
 }: KeywordLetterDetailProps) => {
-    const { letterId, title, content, keywords, createdAt, font } = letterData;
+
+    const { title, content, keywords, createdAt, font } = letterData;
+
     return (
         <div className={clsx(font ? font : 'font-sans')}>
             <Margin top={20} />
             <div className="relative z-20 flex flex-col justify-center w-9/12 m-auto py-9">
                 <div className="absolute top-0 right-0">
-                    <DeleteButton id={String(letterId)} />
+                    <DeleteButton />
                 </div>
                 <h1>{title}</h1>
                 <img src={'/to_line.f4c129e6.svg'} className="w-full" />

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

diff --git a/src/hooks/useDeleteKeywordLetterReplyKeywordLetter.ts b/src/hooks/useDeleteKeywordLetterReplyKeywordLetter.ts
@@ -0,0 +1,29 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { deleteKeywordLetterReplyKeywordLetter } from '@/service/detail/deleteKeywordLetterReplyKeywordLetter';
+
+type UseDeleteKeywordLetterReplyKeywordLetterProps = {
+    letterId: number;
+    letterType: string;
+    boxType: string;
+};
+
+export const useDeleteKeywordLetterReplyKeywordLetter = (
+    {
+        letterId,
+        letterType,
+        boxType
+    }: UseDeleteKeywordLetterReplyKeywordLetterProps,
+    options?: UseMutationOptions<string, Error, void>
+) => {
+    return useMutation<string, Error, void>({
+        mutationFn: async () => {
+            const response = await deleteKeywordLetterReplyKeywordLetter({
+                letterId,
+                letterType,
+                boxType
+            });
+            return response.result;
+        },
+        ...options
+    });
+};
diff --git a/src/router.tsx b/src/router.tsx
@@ -158,11 +158,12 @@ export const router = createBrowserRouter([
                 element: <MapLetterDetailPage />
             },
             {
-                path: '/letter/map/:letterId',
+
+                path: '/letter/map/:dataType/:letterId',
                 element: <MapLetterArchieveDetailContainerPage />
             },
             {
-                path: '/letter/keyword/:letterId',
+                path: '/letter/keyword/:dataType/:letterId',
                 element: <KeywordLetterDetailPage />
             }
         ]

diff --git a/src/service/detail/deleteKeywordLetterReplyKeywordLetter.ts b/src/service/detail/deleteKeywordLetterReplyKeywordLetter.ts
@@ -0,0 +1,31 @@
+import { defaultApi } from '@/service/api';
+import { ApiResponseType } from '@/types/apiResponse';
+
+type deleteKeywordLettersRequestProps = {
+    letterId: number;
+    letterType: string;
+    boxType: string;
+};
+
+type deleteKeywordLettersResponse = ApiResponseType<string>;
+
+export async function deleteKeywordLetterReplyKeywordLetter({
+    letterId,
+    letterType,
+    boxType
+}: deleteKeywordLettersRequestProps): Promise<deleteKeywordLettersResponse> {
+    const api = defaultApi();
+
+    const response = await api.delete<deleteKeywordLettersResponse>(
+        '/letters',
+        {
+            data: {
+                letterId,
+                letterType,
+                boxType
+            }
+        }
+    );
+
+    return response.data;
+}