From ed0ba7b1823b022d79e6aa661c9212ad9b17bb74 Mon Sep 17 00:00:00 2001
From: d0dam <smallkdb@gmail.com>
Date: Thu, 13 Feb 2025 19:48:42 +0900
Subject: [PATCH] =?UTF-8?q?hotfix:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?=
 =?UTF-8?q?=EC=97=A3=EC=A7=80=20=EC=BC=80=EC=9D=B4=EC=8A=A4=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hooks/useChatroomQuery.ts                 | 19 +++++++++++++++----
 src/pages/Articles/LostItemChatPage/index.tsx |  9 +++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/pages/Articles/LostItemChatPage/hooks/useChatroomQuery.ts b/src/pages/Articles/LostItemChatPage/hooks/useChatroomQuery.ts
index 48b73dcd..460f3cbf 100644
--- a/src/pages/Articles/LostItemChatPage/hooks/useChatroomQuery.ts
+++ b/src/pages/Articles/LostItemChatPage/hooks/useChatroomQuery.ts
@@ -1,5 +1,14 @@
-import { skipToken, useQuery, useSuspenseQuery } from '@tanstack/react-query';
-import { getLostItemChatroomDetail, getLostItemChatroomDetailMessages, getLostItemChatroomList } from 'api/articles';
+import {
+  keepPreviousData,
+  skipToken,
+  useQuery,
+  useSuspenseQuery,
+} from '@tanstack/react-query';
+import {
+  getLostItemChatroomDetail,
+  getLostItemChatroomDetailMessages,
+  getLostItemChatroomList,
+} from 'api/articles';
 
 const useChatroomQuery = (
   token: string,
@@ -11,20 +20,22 @@ const useChatroomQuery = (
     queryFn: () => getLostItemChatroomList(token),
   });
 
-  const defaultChatroomId = chatroomId || chatroomList[0].chat_room_id;
-  const defaultArticleId = articleId || chatroomList[0].article_id;
+  const defaultChatroomId = chatroomId || chatroomList[0]?.chat_room_id;
+  const defaultArticleId = articleId || chatroomList[0]?.article_id;
 
   const { data: chatroomDetail } = useQuery({
     queryKey: ['chatroom', 'lost-item', articleId, chatroomId],
     queryFn: (articleId && chatroomId)
       ? () => getLostItemChatroomDetail(token, Number(articleId), Number(defaultChatroomId))
       : skipToken,
+    placeholderData: keepPreviousData,
   });
   const { data: messages } = useQuery({
     queryKey: ['chatroom', 'lost-item', articleId, chatroomId, 'messages'],
     queryFn: (articleId && chatroomId)
       ? () => getLostItemChatroomDetailMessages(token, Number(articleId), Number(defaultChatroomId))
       : skipToken,
+    placeholderData: keepPreviousData,
   });
 
   return {
diff --git a/src/pages/Articles/LostItemChatPage/index.tsx b/src/pages/Articles/LostItemChatPage/index.tsx
index 00ad794a..c69f9ea0 100644
--- a/src/pages/Articles/LostItemChatPage/index.tsx
+++ b/src/pages/Articles/LostItemChatPage/index.tsx
@@ -58,6 +58,15 @@ function LostItemChatPage() {
   const isCouncil = user && user.student_number === COUNCIL_STUDENT_NUMBER;
 
   const connectChatroom = () => {
+    if (!chatroomList || chatroomList.length === 0) {
+      return;
+    }
+
+    if (!articleId || !chatroomId) {
+      showToast('error', '채팅방 정보를 불러오는데 실패했습니다.');
+      return;
+    }
+
     if (client) {
       client.deactivate();
     }