feat : 지도 편지 상세 조회 답장 리스트 api 연동 (#319)

* chore : 타입명 수정 * feat : 지도 편지 상세 조회 답장 리스트 api 연동 * feat : 지도 편지 상세 조회 답장 리스트 데이터 바인딩 * chore : 지도 편지 상세 조회 답장 리스트 타입 수정 * fix : 빌드 에러 수정 * fix : letterId 빌드 에러 수정 * chore : 스토리북 삭제
prgrms-web-devcourse-final-project · Dec 8, 2024 · 791ddda · 791ddda
1 parent 06ba208
commit 791ddda
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 195 deletions.
diff --git a/...ponents/LetterDetailPage/LetterDatail/MapLetterArchieveDetail/MapLetterArchieveDetail.tsx b/...ponents/LetterDetailPage/LetterDatail/MapLetterArchieveDetail/MapLetterArchieveDetail.tsx
@@ -4,6 +4,8 @@ import { formatDate } from '@/util/formatDate';
 import clsx from 'clsx';
 import { DeleteButton } from '../../Delete/DeleteButton';
 import { TextArea } from '@/components/Common/TextArea/TextArea';
+import { useGetMapReplyList } from '@/hooks/useGetMapReplyList';
+import { ReplyList } from '../../ReplyList/ReplyList';
 
 type MapLetterDetailProps = {
     letterData: {
@@ -21,10 +23,31 @@ type MapLetterDetailProps = {
 };
 
 export const MapLetterArchieveDetail = ({
-    letterData
+    letterData,
+    letterId
 }: MapLetterDetailProps) => {
     const { title, content, createdAt, font, description, profileImg } =
         letterData;
+
+    const {
+        data: mapReplyListData,
+        isLoading: isMapReplyListDataLoading,
+        error: mapReplyListDataError
+    } = useGetMapReplyList({
+        letterId: Number(letterId) || 0,
+        page: 1,
+        size: 9
+    });
+
+    console.log(mapReplyListData);
+    if (isMapReplyListDataLoading) {
+        return <div>로딩 중...</div>;
+    }
+
+    if (mapReplyListDataError instanceof Error) {
+        return <div>오류...: {mapReplyListDataError.message}</div>;
+    }
+
     return (
         <div className={clsx(font ? font : 'font-sans')}>
             <Margin top={20} />
@@ -58,6 +81,15 @@ export const MapLetterArchieveDetail = ({
                 </div>
                 <Margin bottom={30} />
             </div>
+
+            {mapReplyListData?.content ? (
+                <div className="mt-16 mx-auto">
+                    <ReplyList
+                        title={title}
+                        keywordReplyListData={mapReplyListData.content}
+                    />
+                </div>
+            ) : null}
         </div>
     );
 };
diff --git a/src/components/LetterDetailPage/ReplyList/ReplyList.tsx b/src/components/LetterDetailPage/ReplyList/ReplyList.tsx
@@ -1,12 +1,13 @@
-import { KeywordReplyListResponseType } from '@/types/letter';
+import { ReplyListResponseType } from '@/types/letter';
 import { formatDate } from '@/util/formatDate';
 import { NavLink, useLocation } from 'react-router-dom';
 
 type ReplyListProps = {
-    keywordReplyListData: KeywordReplyListResponseType['content'];
+    title?: string;
+    keywordReplyListData: ReplyListResponseType['content'];
 };
 
-export const ReplyList = ({ keywordReplyListData }: ReplyListProps) => {
+export const ReplyList = ({ title, keywordReplyListData }: ReplyListProps) => {
     const location = useLocation();
     const basePath = location.pathname.split('/')[2];
 
@@ -24,7 +25,7 @@ export const ReplyList = ({ keywordReplyListData }: ReplyListProps) => {
                 >
                     <div className="flex items-center justify-between w-full hover:opacity-70">
                         <span className="font-bold w-44 truncate mr-4">
-                            {reply.title}
+                            RE: {title}
                         </span>
                         <span className="text-sm truncate flex-1 text-gray-600">
                             {formatDate(reply.createdAt)}

diff --git a/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx b/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx
@@ -1,4 +1,3 @@
-import { DayCounter } from '@/components/Common/DayCounter/DayCounter';
 import { NavLink } from 'react-router-dom';
 
 type LetterInfoContainerProps = {
@@ -31,7 +30,11 @@ export const LetterInfoContainer = ({
                 <div className="flex flex-col h-20">
                     <div className="gap-2 flex-center">
                         <p className="text-sm text-gray-600">작성일: {date}</p>
-                        <DayCounter width="40px" createdAt={String(daysLeft)} />
+                        <div className="p-1 bg-gray-100 flex-center rounded-xl">
+                            <p className="text-sm  font-bold text-gray-500 text-nowrap">
+                                D-{daysLeft}
+                            </p>
+                        </div>
                     </div>
 
                     <h3 className="text-lg font-semibold">{title}</h3>

diff --git a/src/components/MapPage/Maplibre/Maplibre.stories.tsx b/src/components/MapPage/Maplibre/Maplibre.stories.tsx
diff --git a/src/components/MapPage/Maplibre/Maplibre.tsx b/src/components/MapPage/Maplibre/Maplibre.tsx
diff --git a/src/hooks/useGetKeywordReplyList.ts b/src/hooks/useGetKeywordReplyList.ts
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { getKeywordReplyList } from '@/service/keyword/getKeywordReplyList';
-import { KeywordReplyListResponseType } from '@/types/letter';
+import { ReplyListResponseType } from '@/types/letter';
 
 type KeywordReplyListRequestProps = {
     letterId: number;
@@ -15,7 +15,7 @@ export const useGetKeywordReplyList = ({
     size,
     sort
 }: KeywordReplyListRequestProps) => {
-    return useQuery<KeywordReplyListResponseType, Error>({
+    return useQuery<ReplyListResponseType, Error>({
         queryKey: ['getKeywordReplyLists', letterId, page, size, sort],
         queryFn: async () => {
             const response = await getKeywordReplyList({

diff --git a/src/hooks/useGetMapReplyList.ts b/src/hooks/useGetMapReplyList.ts
@@ -0,0 +1,28 @@
+import { useQuery } from '@tanstack/react-query';
+import { getMapReplyList } from '@/service/MapLetter/getMapReplyList';
+import { ReplyListResponseType } from '@/types/letter';
+
+type MapReplyListRequestProps = {
+    letterId: number;
+    page?: number;
+    size?: number;
+};
+
+export const useGetMapReplyList = ({
+    letterId,
+    page,
+    size
+}: MapReplyListRequestProps) => {
+    return useQuery<ReplyListResponseType, Error>({
+        queryKey: ['getMapReplyList', letterId, page, size],
+        queryFn: async () => {
+            const response = await getMapReplyList({
+                letterId,
+                page,
+                size
+            });
+            return response.result || { content: [] };
+        },
+        enabled: !!letterId
+    });
+};
diff --git a/src/service/MapLetter/getMapReplyList.ts b/src/service/MapLetter/getMapReplyList.ts
@@ -0,0 +1,26 @@
+import { defaultApi } from '@/service/api';
+import { ApiResponseType } from '@/types/apiResponse';
+import { ReplyListResponseType } from '@/types/letter';
+
+type MapReplyListRequestProps = {
+    letterId: number;
+    page?: number;
+    size?: number;
+};
+
+type MapReplyListResponse = ApiResponseType<ReplyListResponseType>;
+
+export async function getMapReplyList({
+    letterId,
+    page,
+    size
+}: MapReplyListRequestProps): Promise<MapReplyListResponse> {
+    const api = defaultApi();
+    const response = await api.get<MapReplyListResponse>(
+        `/map/${letterId}/reply`,
+        {
+            params: { page, size }
+        }
+    );
+    return response.data;
+}
diff --git a/src/service/detail/getKeywordLetterDetail.ts b/src/service/detail/getKeywordLetterDetail.ts
@@ -17,6 +17,5 @@ export async function getKeywordLetterDetail({
     const response = await api.get<KeywordLetterDetailResponse>(
         `/letters/detail/${letterId}`
     );
-
     return response.data;
 }
diff --git a/src/service/keyword/getKeywordReplyList.ts b/src/service/keyword/getKeywordReplyList.ts
@@ -1,6 +1,6 @@
 import { defaultApi } from '@/service/api';
 import { ApiResponseType } from '@/types/apiResponse';
-import { KeywordReplyListResponseType } from '@/types/letter';
+import { ReplyListResponseType } from '@/types/letter';
 
 type KeywordReplyListRequestProps = {
     letterId: number;
@@ -9,7 +9,7 @@ type KeywordReplyListRequestProps = {
     sort: string;
 };
 
-type KeywordReplyListResponse = ApiResponseType<KeywordReplyListResponseType>;
+type KeywordReplyListResponse = ApiResponseType<ReplyListResponseType>;
 
 export async function getKeywordReplyList({
     letterId,