refactor : 편지 상세보기 페이지 신고 모달 리펙토링 (#447)

* chore : url 경로 수정정

* chore : url 변경으로 인한 수정

* refactor : 분산된 mutation 로직을 reportMutations 로 통합

src/components/LetterDetailPage/Delete/DeleteModal.tsx

@@ -70,8 +70,8 @@ export const DeleteModal = ({ closeModal }: DeleteModalProps) => {
                 );
                 navigate(
                     letterType === 'keyword'
-                        ? '/storage?type=keyword'
-                        : '/storage?type=map'
+                        ? '/storage/keyword?filtertype=sent'
+                        : '/storage/map?filtertype=sent'
                 );
             },
             onError: () => {

src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx

@@ -7,7 +7,7 @@ import clsx from 'clsx';
 import { useGetKeywordReplyList } from '@/hooks/useGetKeywordReplyList';
 import { ReplyList } from '../../ReplyList/ReplyList';
 import { ReportButton } from '../../Report/ReportButton';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { Label } from '@/components/Common/BottleLetter/Label/Label';
 import { Loading } from '@/components/Common/Loading/Loading';
 
@@ -27,6 +27,8 @@ type KeywordLetterDetailProps = {
 export const KeywordLetterDetail = ({
     letterData
 }: KeywordLetterDetailProps) => {
+    const { pathname } = useLocation();
+    const reportBtn = pathname.split('/')[4];
     const { dataType, letterType } = useParams<{
         dataType: string;
         letterType: string;
@@ -64,7 +66,7 @@ export const KeywordLetterDetail = ({
                         <Label imgSrc={label} />
                     </div>
                     <DeleteButton />
-                    {letterType === 'REPLY_LETTER' && <ReportButton />}
+                    {reportBtn === 'received' && <ReportButton />}
                 </div>
                 <h1>{title}</h1>
                 <img src={'/to_line.f4c129e6.svg'} className="w-full" />

src/components/LetterDetailPage/Report/ReportModal.tsx

@@ -1,8 +1,6 @@
 import { Margin } from '@/components/Common/Margin/Margin';
 import { useMutation } from '@tanstack/react-query';
-import { ApiResponseType } from '@/types/apiResponse';
-import { PostReportKeywordLetterResponseType } from '@/types/report';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { useToastStore } from '@/hooks';
 import { postReportKeywordLetter } from '@/service/Report/postReportKeywordLetter';
@@ -17,9 +15,8 @@ type ReportModalProps = {
 export const ReportModal = ({ closeModal }: ReportModalProps) => {
     const [selectedReason, setSelectedReason] = useState<string>('');
     const [customReason, setCustomReason] = useState<string>('');
+
     const { pathname } = useLocation();
-    const mapType = pathname.split('/')[2];
-    const letterType = pathname.split('/')[3];
     const { letterId, lat, replyLetterId } = useParams<{
         letterId: string;
         lat: string;
@@ -28,112 +25,98 @@ export const ReportModal = ({ closeModal }: ReportModalProps) => {
     const navigate = useNavigate();
     const { addToast } = useToastStore();
 
-    const reportKeywordLetterMutation = useMutation<
-        ApiResponseType<PostReportKeywordLetterResponseType>,
-        Error,
-        void
-    >({
-        mutationFn: async () => {
-            const description =
-                selectedReason === '기타' ? customReason : selectedReason;
-            return await postReportKeywordLetter({
-                letterId: Number(letterId || replyLetterId),
-                description
-            });
-        }
-    });
+    const mapType = pathname.split('/')[2];
+    const letterType = pathname.split('/')[3];
 
-    const reportKeywordReplyLetterMutation = useMutation<
-        ApiResponseType<PostReportKeywordLetterResponseType>,
-        Error,
-        void
-    >({
-        mutationFn: async () => {
-            const description =
-                selectedReason === '기타' ? customReason : selectedReason;
-            return await postReportKeywordReplyLetter({
-                replyLetterId: Number(letterId || replyLetterId),
-                description
-            });
+    const description =
+        selectedReason === '기타' ? customReason.trim() : selectedReason;
+
+    const onReasonChange = (reason: string) => {
+        setSelectedReason(reason);
+        if (reason !== '기타') {
+            setCustomReason('');
         }
-    });
+    };
 
-    const reportMapLetterMutation = useMutation<
-        ApiResponseType<PostReportKeywordLetterResponseType>,
-        Error,
-        void
-    >({
-        mutationFn: async () => {
-            const description =
-                selectedReason === '기타' ? customReason : selectedReason;
-            return await postReportMapLetter({
-                letterId: Number(letterId || replyLetterId),
-                description
-            });
+    const onMutationResult = (
+        isSuccess: boolean,
+        message: string,
+        path: string
+    ) => {
+        if (isSuccess) {
+            closeModal();
+            addToast(message, 'success');
+            navigate(path);
+        } else {
+            addToast('이미 신고가 접수되었습니다.', 'error');
         }
-    });
+    };
 
-    const reportMapReplyLetterMutation = usePostReportMapReplyLetter(
-        Number(letterId || replyLetterId),
-        selectedReason === '기타' ? customReason : selectedReason
-    );
+    const reportMutations = {
+        mapReply: usePostReportMapReplyLetter(
+            Number(letterId || replyLetterId),
+            description
+        ),
+        mapLetter: useMutation({
+            mutationFn: () =>
+                postReportMapLetter({ letterId: Number(letterId), description })
+        }),
+        keywordLetter: useMutation({
+            mutationFn: () =>
+                postReportKeywordLetter({
+                    letterId: Number(letterId),
+                    description
+                })
+        }),
+        keywordReply: useMutation({
+            mutationFn: () =>
+                postReportKeywordReplyLetter({
+                    replyLetterId: Number(replyLetterId),
+                    description
+                })
+        })
+    };
 
-    const onReport = () => {
+    const submitReport = () => {
         if (mapType === 'map' && letterType === 'received') {
-            reportMapReplyLetterMutation.mutate(undefined, {
-                onSuccess: () => {
-                    closeModal();
-                    addToast(
-                        '지도 답장이 성공적으로 신고되었습니다.',
-                        'success'
-                    );
-                    navigate('/storage?type=map');
-                },
-                onError: () => {
-                    addToast('이미 신고가 접수되었습니다.', 'error');
-                }
+            reportMutations.mapReply.mutate(undefined, {
+                onSuccess: () =>
+                    onMutationResult(
+                        true,
+                        '성공적으로 신고되었습니다.',
+                        '/storage/map?filtertype=received'
+                    ),
+                onError: () => onMutationResult(false, '', '')
             });
         } else if (lat) {
-            reportMapLetterMutation.mutate(undefined, {
-                onSuccess: () => {
-                    closeModal();
-                    addToast(
-                        '지도 편지가 성공적으로 신고되었습니다.',
-                        'success'
-                    );
-                    navigate('/mapexplorer');
-                },
-                onError: () => {
-                    addToast('이미 신고가 접수되었습니다.', 'error');
-                }
+            reportMutations.mapLetter.mutate(undefined, {
+                onSuccess: () =>
+                    onMutationResult(
+                        true,
+                        '성공적으로 신고되었습니다.',
+                        '/mapexplorer'
+                    ),
+                onError: () => onMutationResult(false, '', '')
             });
         } else if (letterType === 'LETTER') {
-            reportKeywordLetterMutation.mutate(undefined, {
-                onSuccess: () => {
-                    closeModal();
-                    addToast(
-                        '키워드 편지가 성공적으로 신고되었습니다.',
-                        'success'
-                    );
-                    navigate('/storage?type=keyword');
-                },
-                onError: () => {
-                    addToast('이미 신고가 접수되었습니다.', 'error');
-                }
+            reportMutations.keywordLetter.mutate(undefined, {
+                onSuccess: () =>
+                    onMutationResult(
+                        true,
+                        '성공적으로 신고되었습니다.',
+                        '/storage/keyword?filtertype=received'
+                    ),
+                onError: () => onMutationResult(false, '', '')
             });
         } else if (letterType === 'REPLY_LETTER') {
-            reportKeywordReplyLetterMutation.mutate(undefined, {
-                onSuccess: () => {
-                    closeModal();
-                    addToast(
-                        '키워드 답장이 성공적으로 신고되었습니다.',
-                        'success'
-                    );
-                    navigate('storage?type=keyword');
-                },
-                onError: () => {
-                    addToast('이미 신고가 접수되었습니다.', 'error');
-                }
+            reportMutations.keywordReply.mutate(undefined, {
+                onSuccess: () =>
+                    onMutationResult(
+                        true,
+                        '성공적으로 신고되었습니다.',
+                        '/storage/keyword?filtertype=sent'
+                    ),
+                onError: () => onMutationResult(false, '', '')
             });
         }
     };
@@ -148,19 +131,6 @@ export const ReportModal = ({ closeModal }: ReportModalProps) => {
         '기타'
     ];
 
-    const onReasonChange = (reason: string) => {
-        setSelectedReason(reason);
-        if (reason !== '기타') {
-            setCustomReason('');
-        }
-    };
-
-    const onCustomReasonChange = (
-        event: React.ChangeEvent<HTMLInputElement>
-    ) => {
-        setCustomReason(event.target.value);
-    };
-
     return (
         <div>
             <div className="flex flex-col bg-white rounded-2xl items-center justify-center w-52 h-full p-4">
@@ -186,7 +156,7 @@ export const ReportModal = ({ closeModal }: ReportModalProps) => {
                             type="text"
                             placeholder="신고 사유를 입력해주세요."
                             value={customReason}
-                            onChange={onCustomReasonChange}
+                            onChange={(e) => setCustomReason(e.target.value)}
                             className="border rounded-lg p-2 w-full mt-2"
                         />
                     )}
@@ -199,12 +169,11 @@ export const ReportModal = ({ closeModal }: ReportModalProps) => {
                         닫기
                     </button>
                     <button
-                        onClick={onReport}
+                        onClick={submitReport}
                         className="mt-6 bg-theme-skyblue w-24 text-white px-4 py-2 rounded-lg"
                         disabled={
                             !selectedReason ||
-                            (selectedReason === '기타' &&
-                                customReason.trim() === '')
+                            (selectedReason === '기타' && !description)
                         }
                     >
                         신고하기