From 27f364a3c72c0095df8da9c119923a86ecfaf83f Mon Sep 17 00:00:00 2001
From: mmjjaa <96505287+mmjjaa@users.noreply.github.com>
Date: Thu, 26 Dec 2024 13:50:57 +0900
Subject: [PATCH] =?UTF-8?q?fix=20:=20=ED=82=A4=EC=9B=8C=EB=93=9C=20?=
 =?UTF-8?q?=ED=8E=B8=EC=A7=80=20=EC=83=81=EC=84=B8=EB=B3=B4=EA=B8=B0=20?=
 =?UTF-8?q?=EB=A1=9C=EB=94=A9=20=EC=8B=9C=EA=B0=84=20=EB=8B=A8=EC=B6=95=20?=
 =?UTF-8?q?(#440)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../KeywordLetterDetail.tsx                   | 45 ++++++++-----------
 1 file changed, 18 insertions(+), 27 deletions(-)

diff --git a/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx b/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx
index 5775dc7..4126b84 100644
--- a/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx
+++ b/src/components/LetterDetailPage/LetterDatail/KeywordLetterDetail/KeywordLetterDetail.tsx
@@ -4,11 +4,12 @@ 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';
+import { useGetKeywordReplyList } from '@/hooks/useGetKeywordReplyList';
+import { ReplyList } from '../../ReplyList/ReplyList';
 import { ReportButton } from '../../Report/ReportButton';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Label } from '@/components/Common/BottleLetter/Label/Label';
+import { Loading } from '@/components/Common/Loading/Loading';
 
 type KeywordLetterDetailProps = {
     letterData: {
@@ -42,24 +43,16 @@ export const KeywordLetterDetail = ({
         isReplied
     } = letterData;
 
-    // const {
-    //     data: keywordReplyListData,
-    //     isLoading: isKeywordReplyListDataLoading,
-    //     error: keywordReplyListDataError
-    // } = useGetKeywordReplyList({
-    //     letterId: Number(letterId) || 0,
-    //     page: 1,
-    //     size: 1,
-    //     sort: 'createdAt'
-    // });
-
-    // if (isKeywordReplyListDataLoading) {
-    //     return <div>로딩 중...</div>;
-    // }
-
-    // if (keywordReplyListDataError instanceof Error) {
-    //     return <div>오류...: {keywordReplyListDataError.message}</div>;
-    // }
+    const {
+        data: keywordReplyListData,
+        isLoading: isKeywordReplyListDataLoading
+    } = useGetKeywordReplyList({
+        letterId: Number(letterId) || 0,
+        page: 1,
+        size: 1,
+        sort: 'createdAt'
+    });
+    const replyList = keywordReplyListData?.content || [];
 
     return (
         <div className={clsx(font ? font : 'font-sans')}>
@@ -87,13 +80,11 @@ export const KeywordLetterDetail = ({
                 </div>
                 {keywords && <KeywordList keywords={keywords} />}
                 <Margin bottom={5} />
-                {/* {dataType === 'sent' && keywordReplyListData?.content ? (
-                    <div className="mx-auto mt-16">
-                        <ReplyList
-                            keywordReplyListData={keywordReplyListData.content}
-                        />
-                    </div>
-                ) : null} */}
+                {dataType === 'sent' && isKeywordReplyListDataLoading ? (
+                    <Loading />
+                ) : (
+                    <ReplyList title={title} keywordReplyListData={replyList} />
+                )}
 
                 {dataType === 'received' &&
                     letterType === 'LETTER' &&