refactor: 채팅방 페이지 불필요한 API 호출 제거

BoardSignal · May 17, 2024 · e9e8c65 · e9e8c65
1 parent 4756413
commit e9e8c65
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/src/pages/ChatRoom/components/ChatContainer/ChatAlert.tsx b/src/pages/ChatRoom/components/ChatContainer/ChatAlert.tsx
@@ -18,8 +18,9 @@ const ChatAlert = ({ message }: ChatAlertProps) => {
 
   return (
     <Alert variant={variant[type]} className='my-1.5'>
-      {type !== 'FIX' && type !== 'KICK' && nickname}
-      {content}
+      {type !== 'FIX' && type !== 'KICK' && nickname
+        ? nickname + content
+        : content.replace('님이', '참가자가')}
     </Alert>
   );
 };

diff --git a/src/pages/ChatRoom/components/ChatContainer/index.tsx b/src/pages/ChatRoom/components/ChatContainer/index.tsx
@@ -1,4 +1,6 @@
-import { useGetChatRoomMessagesApi } from '@/apis/chatRoomMessages';
+import { Fragment } from 'react';
+
+import { ChatMessage } from '@/apis/chatRoomMessages';
 import ReverseInfiniteScrollAutoFetch from '@/components/ReverseInfiniteScrollAutoFetch';
 import { EMPTY_CHAT_ROOM_MESSAGE } from '@/constants/messages/emptyScreens';
 import useGetLoggedInUserId from '@/hooks/useGetLoggedInUserId';
@@ -8,14 +10,16 @@ import ChatAlert from './ChatAlert';
 import ChatBubble, { ChatDate } from './ChatBubble';
 
 interface ChatContainerProps {
-  gatheringId: number;
+  messages: ChatMessage[];
+  hasNextPage: boolean;
+  fetchNextPage: () => void;
 }
 
-const ChatContainer = ({ gatheringId }: ChatContainerProps) => {
-  const { messages, hasNextPage, fetchNextPage } = useGetChatRoomMessagesApi(
-    gatheringId,
-    20,
-  );
+const ChatContainer = ({
+  messages,
+  hasNextPage,
+  fetchNextPage,
+}: ChatContainerProps) => {
   const currentUserId = useGetLoggedInUserId();
 
   if (messages.length === 0) {
@@ -38,16 +42,16 @@ const ChatContainer = ({ gatheringId }: ChatContainerProps) => {
 
         if (type !== 'CHAT') {
           return (
-            <>
+            <Fragment key={createdAt}>
               {index === messages.length - 1 ? (
-                <div key={createdAt}>
+                <div>
                   <ChatDate date={createdAt} />
                   <ChatAlert message={message} />
                 </div>
               ) : (
-                <ChatAlert key={createdAt} message={message} />
+                <ChatAlert message={message} />
               )}
-            </>
+            </Fragment>
           );
         }
 

diff --git a/src/pages/ChatRoom/index.tsx b/src/pages/ChatRoom/index.tsx
@@ -1,5 +1,6 @@
 import { useParams } from 'react-router-dom';
 
+import { useGetChatRoomMessagesApi } from '@/apis/chatRoomMessages';
 import { useGetGatheringDetailApi } from '@/apis/gatheringDetail';
 import GatheringListItem from '@/components/GatheringListItem';
 import TabBar from '@/components/TabBar';
@@ -14,7 +15,17 @@ const ChatRoomPage = () => {
   };
   const gatheringId = parseInt(rawGatheringId, 10);
 
-  const { sendMessage } = useSendChatMessage(gatheringId, true);
+  const {
+    messages: rawMessages,
+    hasNextPage,
+    fetchNextPage,
+  } = useGetChatRoomMessagesApi(gatheringId, 20);
+
+  const { messages, sendMessage } = useSendChatMessage({
+    rawMessages,
+    gatheringId,
+    isPublishExitMessage: true,
+  });
   const { gatheringListItem } = useGetGatheringDetailApi(
     gatheringId.toString(),
   );
@@ -27,7 +38,11 @@ const ChatRoomPage = () => {
         </TabBar.Left>
       </TabBar.Container>
       <GatheringListItem gathering={gatheringListItem} />
-      <ChatContainer gatheringId={gatheringId} />
+      <ChatContainer
+        messages={messages}
+        hasNextPage={hasNextPage}
+        fetchNextPage={fetchNextPage}
+      />
       <ChatTextarea onSend={sendMessage} />
     </div>
   );