feat : 지도 편지 답장 확인 API연동 (#369)

* feat : 지도 편지 답장 확인 API연동 * chore : 빌드 오류 해결
prgrms-web-devcourse-final-project · Dec 9, 2024 · 4ded7c0 · 4ded7c0
1 parent 66f7625
commit 4ded7c0
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 5 deletions.
diff --git a/src/components/LetterDetailPage/LetterDatail/MapLetterDetail/MapLetterDetail.tsx b/src/components/LetterDetailPage/LetterDatail/MapLetterDetail/MapLetterDetail.tsx
@@ -5,8 +5,9 @@ import { useToastStore } from '@/hooks';
 import { usePostNearByLetterStorage } from '@/hooks/usePostNearByLetterStorage';
 import { formatDate } from '@/util/formatDate';
 import { getLetter } from '@/service/storage/getLetter';
+import { useGetCheckMapReplyLetter } from '@/hooks/useGetCheckMapReplyLetter';
 import clsx from 'clsx';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { ReportButton } from '../../Report/ReportButton';
 
@@ -35,9 +36,13 @@ export const MapLetterDetail = ({ letterData }: MapLetterDetailProps) => {
         font,
         isOwner
     } = letterData;
-
+    const navigate = useNavigate();
     const [isStored, setIsStored] = useState(false);
 
+    const { data: isReplied } = useGetCheckMapReplyLetter({
+        letterId: Number(letterId)
+    });
+
     useEffect(() => {
         const checkStoredLetter = async () => {
             const storedLetters = await getLetter({
@@ -89,6 +94,10 @@ export const MapLetterDetail = ({ letterData }: MapLetterDetailProps) => {
         }
     };
 
+    const onReplyClick = () => {
+        navigate('/letter/create');
+    };
+
     return (
         <>
             <div className="absolute top-8 right-16 cursor-pointer">
@@ -136,9 +145,14 @@ export const MapLetterDetail = ({ letterData }: MapLetterDetailProps) => {
                             >
                                 {isStored ? '보관됨' : '보관하기'}
                             </button>
-                            <button className="btn-base flex-center rounded-3xl h-[40px]">
-                                편지에 답장하기
-                            </button>
+                            {!isReplied && (
+                                <button
+                                    className="btn-base flex-center rounded-3xl h-[40px]"
+                                    onClick={onReplyClick}
+                                >
+                                    편지에 답장하기
+                                </button>
+                            )}
                         </div>
                     </>
                 )}

diff --git a/src/hooks/useGetCheckMapReplyLetter.ts b/src/hooks/useGetCheckMapReplyLetter.ts
@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+import { getCheckMapReplyLetter } from '@/service/MapLetter/getCheckMapReplyLetter';
+
+type UseCheckMapReplyLetterProps = {
+    letterId: number;
+};
+
+export const useGetCheckMapReplyLetter = ({
+    letterId
+}: UseCheckMapReplyLetterProps) => {
+    return useQuery<boolean, Error>({
+        queryKey: ['getCheckMapReplyLetter', letterId],
+        queryFn: async () => {
+            const response = await getCheckMapReplyLetter({ letterId });
+            return response.result;
+        },
+        enabled: !!letterId
+    });
+};
diff --git a/src/service/MapLetter/getCheckMapReplyLetter.ts b/src/service/MapLetter/getCheckMapReplyLetter.ts
@@ -0,0 +1,18 @@
+import { defaultApi } from '@/service/api';
+import { ApiResponseType } from '@/types/apiResponse';
+
+type getCheckMapReplyLetterRequestProps = {
+    letterId: number;
+};
+
+type getCheckMapReplyLetterResponse = ApiResponseType<boolean>;
+
+export async function getCheckMapReplyLetter({
+    letterId
+}: getCheckMapReplyLetterRequestProps): Promise<getCheckMapReplyLetterResponse> {
+    const api = defaultApi();
+    const response = await api.get<getCheckMapReplyLetterResponse>(
+        `/map/reply/check${letterId}`
+    );
+    return response.data;
+}