feat : 키워드 편지 상세 조회 답장 리스트 api 연동 (#315)

* chore : daycounter 로직 수정 * refactor : 폴더 및 로직 수정 * feat : 컨테이너 및 상세 개발 * story : 스토리 삭제 * feat : 라우팅 설정 * feat : api 호출 로직 작성 * chore : 폴더 경로 수정 * chore : UseNearbyLettersDetailProps 타입 변경 * story : 바뀐 유틸에 맞게 스토리 수정 * chore: simple layout 수정 * style : 전역 스타일 수정 * chore : ; 제거 및 안 쓰는 import 제거 * chore : url 수정 * chore : url 수정으로 인한 변경 * feat : 키워드 편지 상세 조회 삭제 기능 api 연동 * feat : id props 삭제 및 api 연동 * chore : 스토리북 수정 * chore : 키워드 편지 상세 조회 답장 리스트 타입 지정 * feat : 키워드 편지 상세 조회 답장 리스트 api 연동 * feat : 키워드 편지 상세 조회 답장 리스트 데이터 바인딩 --------- Co-authored-by: 남정욱 <[email protected]>
prgrms-web-devcourse-final-project · Dec 7, 2024 · 2b15111 · 2b15111
1 parent 93ad24a
commit 2b15111
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 24 deletions.
diff --git a/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx b/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx
@@ -4,6 +4,8 @@ import { Margin } from '@/components/Common/Margin/Margin';
 import { KeywordList } from '../../Keyword/KeywordList';
 import { DeleteButton } from '../../Delete/DeleteButton';
 import clsx from 'clsx';
+import { useGetKeywordReplyList } from '@/hooks/useGetKeywordReplyList';
+import { ReplyList } from '../../ReplyList/ReplyList';
 
 type KeywordLetterDetailProps = {
     letterData: {
@@ -19,8 +21,27 @@ type KeywordLetterDetailProps = {
 export const KeywordLetterDetail = ({
     letterData
 }: KeywordLetterDetailProps) => {
+    const { letterId, title, content, keywords, createdAt, font } = letterData;
+
+    const {
+        data: keywordReplyListData,
+        isLoading: isKeywordReplyListDataLoading,
+        error: keywordReplyListDataError
+    } = useGetKeywordReplyList({
+        letterId: letterId || 0,
+        page: 1,
+        size: 1,
+        sort: 'createdAt'
+    });
+
+    if (isKeywordReplyListDataLoading) {
+        return <div>로딩 중...</div>;
+    }
+
+    if (keywordReplyListDataError instanceof Error) {
+        return <div>오류...: {keywordReplyListDataError.message}</div>;
+    }
 
-    const { title, content, keywords, createdAt, font } = letterData;
 
     return (
         <div className={clsx(font ? font : 'font-sans')}>
@@ -44,6 +65,14 @@ export const KeywordLetterDetail = ({
                 <KeywordList keywords={keywords} />
                 <Margin bottom={30} />
             </div>
+
+            {keywordReplyListData?.content ? (
+                <div className="mt-16  mx-auto">
+                    <ReplyList
+                        keywordReplyListData={keywordReplyListData.content}
+                    />
+                </div>
+            ) : null}
         </div>
     );
 };

diff --git a/src/components/LetterDetailPage/ReplyList/ReplyList.tsx b/src/components/LetterDetailPage/ReplyList/ReplyList.tsx
@@ -1,40 +1,38 @@
-import { NavLink } from 'react-router-dom';
+import { KeywordReplyListResponseType } from '@/types/letter';
+import { formatDate } from '@/util/formatDate';
+import { NavLink, useLocation } from 'react-router-dom';
+
 type ReplyListProps = {
-    replies: {
-        id: number;
-        title: string;
-        date: string;
-    }[];
+    keywordReplyListData: KeywordReplyListResponseType['content'];
 };
 
-export const ReplyList = ({ replies }: ReplyListProps) => {
+export const ReplyList = ({ keywordReplyListData }: ReplyListProps) => {
+    const location = useLocation();
+    const basePath = location.pathname.split('/')[2];
+
     return (
-        <NavLink
-            to="/letter/reply/:id"
-            className="bg-gray-300 rounded-2xl w-auto"
-        >
-            {replies.map((reply, index) => (
-                <div
-                    key={reply.id}
+        <div className="bg-gray-300 rounded-2xl w-auto">
+            {keywordReplyListData.map((reply, index) => (
+                <NavLink
+                    key={reply.replyLetterId}
+                    to={`/letter/${basePath}/reply/${reply.replyLetterId}`}
                     className={`flex items-center cursor-pointer h-1 p-6 ${
-                        index < replies.length - 1
+                        index < keywordReplyListData.length - 1
                             ? 'border-b border-l-neutral-300'
                             : ''
                     }`}
                 >
-                    <div
-                        className={`flex items-center justify-between w-full hover:opacity-70 `}
-                    >
+                    <div className="flex items-center justify-between w-full hover:opacity-70">
                         <span className="font-bold w-44 truncate mr-4">
-                            Re: {reply.title}
+                            {reply.title}
                         </span>
                         <span className="text-sm truncate flex-1 text-gray-600">
-                            {reply.date}
+                            {formatDate(reply.createdAt)}
                         </span>
                         <div className="text-2xl">{'>'}</div>
                     </div>
-                </div>
+                </NavLink>
             ))}
-        </NavLink>
+        </div>
     );
 };
diff --git a/src/hooks/useGetKeywordReplyList.ts b/src/hooks/useGetKeywordReplyList.ts
@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query';
+import { getKeywordReplyList } from '@/service/keyword/getKeywordReplyList';
+import { KeywordReplyListResponseType } from '@/types/letter';
+
+type KeywordReplyListRequestProps = {
+    letterId: number;
+    page: number;
+    size: number;
+    sort: string;
+};
+
+export const useGetKeywordReplyList = ({
+    letterId,
+    page,
+    size,
+    sort
+}: KeywordReplyListRequestProps) => {
+    return useQuery<KeywordReplyListResponseType, Error>({
+        queryKey: ['getKeywordReplyLists', letterId, page, size, sort],
+        queryFn: async () => {
+            const response = await getKeywordReplyList({
+                letterId,
+                page,
+                size,
+                sort
+            });
+            return response.result;
+        },
+        enabled: !!letterId
+    });
+};
diff --git a/src/router.tsx b/src/router.tsx
@@ -158,7 +158,6 @@ export const router = createBrowserRouter([
                 element: <MapLetterDetailPage />
             },
             {
-
                 path: '/letter/map/:dataType/:letterId',
                 element: <MapLetterArchieveDetailContainerPage />
             },

diff --git a/src/service/keyword/getKeywordReplyList.ts b/src/service/keyword/getKeywordReplyList.ts
@@ -0,0 +1,28 @@
+import { defaultApi } from '@/service/api';
+import { ApiResponseType } from '@/types/apiResponse';
+import { KeywordReplyListResponseType } from '@/types/letter';
+
+type KeywordReplyListRequestProps = {
+    letterId: number;
+    page: number;
+    size: number;
+    sort: string;
+};
+
+type KeywordReplyListResponse = ApiResponseType<KeywordReplyListResponseType>;
+
+export async function getKeywordReplyList({
+    letterId,
+    page,
+    size,
+    sort
+}: KeywordReplyListRequestProps): Promise<KeywordReplyListResponse> {
+    const api = defaultApi();
+    const response = await api.get<KeywordReplyListResponse>(
+        `/letters/replies/${letterId}`,
+        {
+            params: { page, size, sort }
+        }
+    );
+    return response.data;
+}
diff --git a/src/types/letter.ts b/src/types/letter.ts
@@ -102,3 +102,23 @@ export type GetArchivedMapLetterResponseType = {
     message: string;
     result: getArchivedMapLetterResultType;
 };
+
+
+export type KeywordReply = {
+    replyLetterId: number;
+    title: string;
+    label: string;
+    createdAt: string;
+};
+
+export type KeywordReplyListResponseType = {
+    content: KeywordReply[];
+    page: number;
+    size: number;
+    totalElements: number;
+    totalPages: number;
+};
+export type KeywordReplyListProps = {
+    keywordReplyListData: KeywordReplyListResponseType[];
+};
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -158,7 +158,6 @@ export const router = createBrowserRouter([ @@
                     element: <MapLetterDetailPage />
                 },
                 {
                     path: '/letter/map/:dataType/:letterId',
                     element: <MapLetterArchieveDetailContainerPage />
                 },
@@ Expand Down @@