chore : 키워드 지도 편지 상세조회 페이지 수정 (#297)

* chore : 타입 수정

* chore : 경로 수정 및 지도, 키워드 편지 수정

src/components/LetterDetailPage/LetterDetailContainer/LetterDetailContainer.tsx

@@ -4,46 +4,76 @@ import { ThemeWrapper } from '@/components/CreatLetterPage/ThemeWrapper/ThemeWra
 import { useToastStore } from '@/hooks';
 import { useEffect } from 'react';
 import { KeywordLetterDetail } from '../LetterDatail/KeywordLetterDetail';
+import { MapLetterDetail } from '../LetterDatail/MapLetterDetail';
+import { useNearbyLettersDetail } from '@/hooks/useGetNearbyLettersDetail';
 
-type LetterDetailContainerProps = {
-    hasReplies?: boolean;
-};
-
-export const LetterDetailContainer = ({
-    hasReplies
-}: LetterDetailContainerProps) => {
-    const { type, letterId } = useParams<{
+export const LetterDetailContainer = () => {
+    const { type, letterId, lat, lot } = useParams<{
         type: 'map' | 'keyword';
         letterId: string;
+        lat: string;
+        lot: string;
     }>();
 
     const { addToast } = useToastStore();
+    const isMapType = type === 'map';
+
+    const {
+        data: keywordData,
+        isLoading: isKeywordLoading,
+        error: keywordError
+    } = useKeywordLetterDetail({
+        letterId: !isMapType ? letterId || '' : ''
+    });
 
-    const { data, error, isLoading } = useKeywordLetterDetail({
-        letterId: letterId || ''
+    const {
+        data: mapData,
+        isLoading: isMapLoading,
+        error: mapError
+    } = useNearbyLettersDetail({
+        letterId: isMapType ? Number(letterId) || 0 : 0,
+        longitude: lot || '',
+        latitude: lat || ''
     });
 
     useEffect(() => {
-        if (error) {
-            addToast(error.message, 'error');
+        if (keywordError) {
+            addToast(keywordError.message, 'error');
+        }
+        if (mapError) {
+            addToast(mapError.message, 'error');
         }
-    }, [error, addToast]);
+    }, [keywordError, mapError, addToast]);
 
-    if (isLoading) {
+    if (isKeywordLoading || isMapLoading) {
         return <div>로딩 중...</div>;
     }
 
-    if (!data) {
+    if (!isMapType && !keywordData) {
+        return (
+            <ThemeWrapper themeId={1}>
+                <div>키워드 편지가 존재하지 않습니다.</div>
+            </ThemeWrapper>
+        );
+    }
+
+    if (isMapType && !mapData) {
         return (
             <ThemeWrapper themeId={1}>
-                <div>데이터가 없습니다.</div>;
+                <div>지도 편지를 가져오는 중 문제가 발생했습니다.</div>
             </ThemeWrapper>
         );
     }
 
     return (
-        <ThemeWrapper themeId={Number(data.paper)}>
-            <KeywordLetterDetail letterData={data} />
+        <ThemeWrapper
+            themeId={Number(isMapType ? mapData?.paper : keywordData?.paper)}
+        >
+            {isMapType
+                ? mapData && <MapLetterDetail letterData={mapData} />
+                : keywordData && (
+                      <KeywordLetterDetail letterData={keywordData} />
+                  )}
         </ThemeWrapper>
     );
 };

src/router.tsx

@@ -130,7 +130,7 @@ export const router = createBrowserRouter([
             { path: 'select', element: <SelectItemPage /> },
             { path: 'success', element: <SuccessLetterPage /> },
             {
-                path: '/letter/:type/:letterId',
+                path: '/letter/:type/:lat?/:lot?/:letterId',
                 element: <LetterDetailPage />
             }
         ]

src/types/letter.ts

@@ -45,7 +45,7 @@ export type NearbyLettersDetailResponseType = {
     title: string;
     content: string;
     description: string;
-    profileImg?: string;
+    profileImg: string;
     font: string;
     paper: string;
     isOwner: boolean;