[Fix] 채팅방 목록 불러오기

src/app/chatting/page.tsx

@@ -8,10 +8,11 @@ import ChattingMessage from '@/components/chatting/ChattingMessage'
 import { ChattingMessageI, ChattingRoomI } from '@/model/Chatting'
 import { useWebSocket } from '@/hooks/useSocket'
 import { userInfoState } from '@/recoil/UserInfo'
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { chatRoomsState } from '@/recoil/chatRoomsState'
 
 const Chatting = () => {
-  const [chatRooms, setChatRooms] = useState<ChattingRoomI[]>([])
+  const [chatRooms, setChatRooms] = useRecoilState(chatRoomsState)
   const [currentChatRoomId, setCurrentChatRoomId] = useState<number | null>(
     null,
   )
@@ -47,7 +48,9 @@ const Chatting = () => {
         `https://ik7f6nxm8g.execute-api.ap-northeast-2.amazonaws.com/mssaem/chatroom?memberId=${userInfo?.id}`,
       )
       const rooms = response.data
-      setChatRooms(rooms)
+      if (rooms.length > 0) {
+        setChatRooms(rooms)
+      }
 
       if (rooms.length > 0 && currentChatRoomId === null) {
         setCurrentChatRoomId(rooms[0].chatRoomId)
@@ -70,9 +73,9 @@ const Chatting = () => {
   /* 채팅방 변경 시 메시지 불러오기 */
   useEffect(() => {
     if (currentChatRoomId) {
-      const selectedRoom = chatRooms.find(
-        (room) => room.chatRoomId === currentChatRoomId,
-      )
+      const selectedRoom =
+        chatRooms &&
+        chatRooms.find((room) => room.chatRoomId === currentChatRoomId)
 
       if (selectedRoom) {
         const fetchMessages = async () => {
@@ -125,12 +128,12 @@ const Chatting = () => {
       await axios.delete(
         `https://ik7f6nxm8g.execute-api.ap-northeast-2.amazonaws.com/mssaem/chatroom?chatRoomId=${chatRoomId}&memberId=${userInfo?.id}`,
       )
-      setChatRooms((prevRooms) =>
-        prevRooms.filter((room) => room.chatRoomId !== chatRoomId),
+      setChatRooms((prevRooms: any) =>
+        prevRooms.filter((room: any) => room.chatRoomId !== chatRoomId),
       )
       setMessages([])
       setCurrentChatRoomId(
-        chatRooms.length > 1 ? chatRooms[0].chatRoomId : null,
+        chatRooms && chatRooms.length > 1 ? chatRooms[0].chatRoomId : null,
       )
     } catch (error) {
       console.error('Failed to leave the chat room:', error)
@@ -145,20 +148,21 @@ const Chatting = () => {
             채팅 목록
           </div>
           <ul>
-            {chatRooms.map((room) => (
-              <li
-                key={room.chatRoomId}
-                className="border-b last:border-none box-border"
-              >
-                <ChattingProfile
-                  user={room.memberSimpleInfo}
-                  lastMessage={room.lastMessage}
-                  lastSendAt={room.lastSendAt}
-                  onClick={() => setCurrentChatRoomId(room.chatRoomId)}
-                  current={room.chatRoomId === currentChatRoomId}
-                />
-              </li>
-            ))}
+            {chatRooms &&
+              chatRooms.map((room) => (
+                <li
+                  key={room.chatRoomId}
+                  className="border-b last:border-none box-border"
+                >
+                  <ChattingProfile
+                    user={room.memberSimpleInfo}
+                    lastMessage={room.lastMessage}
+                    lastSendAt={room.lastSendAt}
+                    onClick={() => setCurrentChatRoomId(room.chatRoomId)}
+                    current={room.chatRoomId === currentChatRoomId}
+                  />
+                </li>
+              ))}
           </ul>
         </div>
 
@@ -177,9 +181,11 @@ const Chatting = () => {
           <div className="flex-1 overflow-y-auto box-border">
             {messages.length > 0 ? (
               messages.map((msg, index) => {
-                const currentRoom = chatRooms.find(
-                  (room) => room.chatRoomId === currentChatRoomId,
-                )
+                const currentRoom =
+                  chatRooms &&
+                  chatRooms.find(
+                    (room) => room.chatRoomId === currentChatRoomId,
+                  )
                 return (
                   <div key={index} className="my-2 p-2 box-border">
                     <ChattingMessage

src/app/worry/[id]/page.tsx

@@ -12,6 +12,9 @@ import WorryProfile from '@/components/user/WorryProfile'
 import { useUserInfo } from '@/service/user/useUserService'
 import { useToast } from '@/hooks/useToast'
 import { useWebSocket } from '@/hooks/useSocket'
+import axios from 'axios'
+import { useSetRecoilState } from 'recoil'
+import { chatRoomsState } from '@/recoil/chatRoomsState'
 
 const WorryDetail = () => {
   const { id } = useParams()
@@ -23,6 +26,21 @@ const WorryDetail = () => {
   const { data: userInfo } = useUserInfo()
   const { mutate: postChattingRoom } = usePostChattingRoom()
   const { connectSocket, socketRefs } = useWebSocket()
+  const setChatRooms = useSetRecoilState(chatRoomsState)
+
+  /* 채팅방 목록 불러오기 */
+  const fetchChatRoomsAndConnectSockets = async () => {
+    try {
+      const response = await axios.get(
+        `https://ik7f6nxm8g.execute-api.ap-northeast-2.amazonaws.com/mssaem/chatroom?memberId=${userInfo?.id}`,
+      )
+      const rooms = response.data
+      setChatRooms(rooms)
+      router.push(`/chatting`)
+    } catch (error) {
+      console.error('Failed to fetch chat rooms:', error)
+    }
+  }
 
   const handleChattingStartClick = () => {
     if (userInfo?.id === worryDetail?.memberSimpleInfo.id) {
@@ -46,15 +64,11 @@ const WorryDetail = () => {
             connectSocket(wsUrlOwner, ownerKey)
 
             if (socketRefs[userKey]) {
-              socketRefs[userKey]!.onopen = () => {
+              socketRefs[userKey]!.onopen = async () => {
                 console.log('User WebSocket is connected')
-                router.push(`/chatting`)
-              }
-              socketRefs[userKey]!.onclose = () => {
-                console.log('User WebSocket is closed')
-              }
-              socketRefs[userKey]!.onerror = (error: any) => {
-                console.error('User WebSocket error:', error)
+                setTimeout(() => {
+                  fetchChatRoomsAndConnectSockets()
+                }, 1000)
               }
             }
           },

src/recoil/chatRoomsState.ts

@@ -0,0 +1,7 @@
+import { ChattingRoomI } from '@/model/Chatting'
+import { atom } from 'recoil'
+
+export const chatRoomsState = atom<ChattingRoomI[] | null>({
+  key: 'chatRoomsState',
+  default: null,
+})