feat : 지도 편지 신고 API 연동 (#352)

prgrms-web-devcourse-final-project · Dec 8, 2024 · a38655e · a38655e
1 parent 796d80a
commit a38655e
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 44 deletions.
diff --git a/src/components/LetterDetailPage/LetterDatail/MapLetterDetail/MapLetterDetail.tsx b/src/components/LetterDetailPage/LetterDatail/MapLetterDetail/MapLetterDetail.tsx
@@ -8,6 +8,7 @@ import { getLetter } from '@/service/storage/getLetter';
 import clsx from 'clsx';
 import { useParams } from 'react-router-dom';
 import { useEffect, useState } from 'react';
+import { ReportButton } from '../../Report/ReportButton';
 
 type MapLetterDetailProps = {
     letterData: {
@@ -89,50 +90,59 @@ export const MapLetterDetail = ({ letterData }: MapLetterDetailProps) => {
     };
 
     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">
-                <img
-                    src={profileImg}
-                    className="w-[15%] h-[15%] absolute top-[-7%] "
-                />
-                <h1>{title}</h1>
-                <img src={'/to_line.f4c129e6.svg'} className="w-full" />
+        <>
+            <div className="absolute top-8 right-16 cursor-pointer">
+                <ReportButton />
+            </div>
+            <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">
+                    <img
+                        src={profileImg}
+                        className="w-[15%] h-[15%] absolute top-[-7%] "
+                    />
+                    <h1>{title}</h1>
+                    <img src={'/to_line.f4c129e6.svg'} className="w-full" />
 
-                <div className="relative">
-                    <TextArea value={content} font={font} isReadonly={true} />
-                </div>
+                    <div className="relative">
+                        <TextArea
+                            value={content}
+                            font={font}
+                            isReadonly={true}
+                        />
+                    </div>
 
-                <Margin top={30} />
-                <div className="flex justify-between w-full ">
-                    <p className="font-bold ">장소 힌트</p>
-                    <div>
-                        <p className="">{formatDate(createdAt)}</p>
+                    <Margin top={30} />
+                    <div className="flex justify-between w-full ">
+                        <p className="font-bold ">장소 힌트</p>
+                        <div>
+                            <p className="">{formatDate(createdAt)}</p>
+                        </div>
                     </div>
+                    <div className="flex justify-between">
+                        <span className="block w-9/12 break-words whitespace-normal">
+                            {description}
+                        </span>
+                        <span>{DayCounter({ createdAt })}</span>
+                    </div>
+                    <Margin bottom={30} />
                 </div>
-                <div className="flex justify-between">
-                    <span className="block w-9/12 break-words whitespace-normal">
-                        {description}
-                    </span>
-                    <span>{DayCounter({ createdAt })}</span>
-                </div>
-                <Margin bottom={30} />
+                {!isOwner && (
+                    <>
+                        <div className="flex">
+                            <button
+                                className="btn-base flex-center rounded-3xl h-[40px]"
+                                onClick={onStorageClick}
+                            >
+                                {isStored ? '보관됨' : '보관하기'}
+                            </button>
+                            <button className="btn-base flex-center rounded-3xl h-[40px]">
+                                편지에 답장하기
+                            </button>
+                        </div>
+                    </>
+                )}
             </div>
-            {!isOwner && (
-                <>
-                    <div className="flex">
-                        <button
-                            className="btn-base flex-center rounded-3xl h-[40px]"
-                            onClick={onStorageClick}
-                        >
-                            {isStored ? '보관됨' : '보관하기'}
-                        </button>
-                        <button className="btn-base flex-center rounded-3xl h-[40px]">
-                            편지에 답장하기
-                        </button>
-                    </div>
-                </>
-            )}
-        </div>
+        </>
     );
 };
diff --git a/src/components/LetterDetailPage/Report/ReportModal.tsx b/src/components/LetterDetailPage/Report/ReportModal.tsx
@@ -7,6 +7,7 @@ import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { useToastStore } from '@/hooks';
 import { postReportKeywordLetter } from '@/service/Report/postReportKeywordLetter';
 import { postReportKeywordReplyLetter } from '@/service/Report/postReportKeywordReplyLetter';
+import { postReportMapLetter } from '@/service/Report/postReportMapLetter';
 
 type ReportModalProps = {
     closeModal: () => void;
@@ -17,7 +18,7 @@ export const ReportModal = ({ closeModal }: ReportModalProps) => {
     const [customReason, setCustomReason] = useState<string>('');
     const { pathname } = useLocation();
     const letterType = pathname.split('/')[3];
-    const { letterId } = useParams<{ letterId: string }>();
+    const { letterId, lat } = useParams<{ letterId: string; lat: string }>();
     const navigate = useNavigate();
     const { addToast } = useToastStore();
 
@@ -51,12 +52,44 @@ export const ReportModal = ({ closeModal }: ReportModalProps) => {
         }
     });
 
+    const reportMapLetterMutation = useMutation<
+        ApiResponseType<PostReportKeywordLetterResponseType>,
+        Error,
+        void
+    >({
+        mutationFn: async () => {
+            const description =
+                selectedReason === '기타' ? customReason : selectedReason;
+            return await postReportMapLetter({
+                letterId: Number(letterId),
+                description
+            });
+        }
+    });
+
     const onReport = () => {
-        if (letterType === 'LETTER') {
+        if (lat) {
+            reportMapLetterMutation.mutate(undefined, {
+                onSuccess: () => {
+                    closeModal();
+                    addToast(
+                        '지도 편지가 성공적으로 신고되었습니다.',
+                        'success'
+                    );
+                    navigate('/mapexplorer');
+                },
+                onError: () => {
+                    addToast('이미 신고가 접수되었습니다.', 'error');
+                }
+            });
+        } else if (letterType === 'LETTER') {
             reportKeywordLetterMutation.mutate(undefined, {
                 onSuccess: () => {
                     closeModal();
-                    addToast('신고가 성공적으로 접수되었습니다.', 'success');
+                    addToast(
+                        '키워드 편지가 성공적으로 신고되었습니다.',
+                        'success'
+                    );
                     navigate('/storage/keyword');
                 },
                 onError: () => {
@@ -67,7 +100,10 @@ export const ReportModal = ({ closeModal }: ReportModalProps) => {
             reportKeywordReplyLetterMutation.mutate(undefined, {
                 onSuccess: () => {
                     closeModal();
-                    addToast('신고가 성공적으로 접수되었습니다.', 'success');
+                    addToast(
+                        '키워드 답장이 성공적으로 신고되었습니다.',
+                        'success'
+                    );
                     navigate('/storage/keyword');
                 },
                 onError: () => {

diff --git a/src/hooks/usePostReportMapLetter.ts b/src/hooks/usePostReportMapLetter.ts
@@ -0,0 +1,19 @@
+import { postReportMapLetter } from '@/service/Report/postReportMapLetter';
+import { ApiResponseType } from '@/types/apiResponse';
+import { PostReportKeywordLetterResponseType } from '@/types/report';
+import { useMutation } from '@tanstack/react-query';
+
+export const usePostReportMapLetter = (
+    letterId: number,
+    description: string
+) => {
+    return useMutation<
+        ApiResponseType<PostReportKeywordLetterResponseType>,
+        Error,
+        void
+    >({
+        mutationFn: async () => {
+            return await postReportMapLetter({ letterId, description });
+        }
+    });
+};
diff --git a/src/service/Report/postReportMapLetter.ts b/src/service/Report/postReportMapLetter.ts
@@ -0,0 +1,27 @@
+import { defaultApi } from '@/service/api';
+import { ApiResponseType } from '@/types/apiResponse';
+import { PostReportKeywordLetterResponseType } from '@/types/report';
+
+type postReportMapLetterRequestProps = {
+    letterId: number;
+    description: string;
+};
+
+type postMapKeywordLetterResponse =
+    ApiResponseType<PostReportKeywordLetterResponseType>;
+
+export async function postReportMapLetter({
+    letterId,
+    description
+}: postReportMapLetterRequestProps): Promise<postMapKeywordLetterResponse> {
+    const api = defaultApi();
+    const response = await api.post<postMapKeywordLetterResponse>(
+        `/map/${letterId}/complaint`,
+        {
+            data: {
+                description
+            }
+        }
+    );
+    return response.data;
+}