From c1b10c49380bcff2f60fb2307a36187033cb1717 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Tue, 3 Sep 2024 05:53:35 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix(#63):=201=EC=B4=88=EB=92=A4=20=EC=B1=84?= =?UTF-8?q?=ED=8C=85=EB=B0=A9=20=EB=AA=A9=EB=A1=9D=20=EB=B6=88=EB=9F=AC?= =?UTF-8?q?=EC=98=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/chatting/page.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/chatting/page.tsx b/src/app/chatting/page.tsx index 5be4807..fe4cfc4 100644 --- a/src/app/chatting/page.tsx +++ b/src/app/chatting/page.tsx @@ -63,7 +63,9 @@ const Chatting = () => { useEffect(() => { if (userInfo) { - fetchChatRoomsAndConnectSockets() + setTimeout(() => { + fetchChatRoomsAndConnectSockets() + }, 1000) } }, [userInfo]) From 54d982813955097e5863969bec564d2ee90f96e6 Mon Sep 17 00:00:00 2001 From: parkyejin Date: Tue, 3 Sep 2024 06:00:47 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix(#63):=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0=20?= =?UTF-8?q?=EC=A0=84=EC=97=AD=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/chatting/page.tsx | 62 +++++++++++++++++++----------------- src/app/worry/[id]/page.tsx | 30 ++++++++++++----- src/recoil/chatRoomsState.ts | 7 ++++ 3 files changed, 62 insertions(+), 37 deletions(-) create mode 100644 src/recoil/chatRoomsState.ts diff --git a/src/app/chatting/page.tsx b/src/app/chatting/page.tsx index fe4cfc4..4dfcf73 100644 --- a/src/app/chatting/page.tsx +++ b/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([]) + const [chatRooms, setChatRooms] = useRecoilState(chatRoomsState) const [currentChatRoomId, setCurrentChatRoomId] = useState( 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) @@ -63,18 +66,16 @@ const Chatting = () => { useEffect(() => { if (userInfo) { - setTimeout(() => { - fetchChatRoomsAndConnectSockets() - }, 1000) + fetchChatRoomsAndConnectSockets() } }, [userInfo]) /* 채팅방 변경 시 메시지 불러오기 */ 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 () => { @@ -127,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) @@ -147,20 +148,21 @@ const Chatting = () => { 채팅 목록
    - {chatRooms.map((room) => ( -
  • - setCurrentChatRoomId(room.chatRoomId)} - current={room.chatRoomId === currentChatRoomId} - /> -
    • - ))} + {chatRooms && + chatRooms.map((room) => ( +
  • + setCurrentChatRoomId(room.chatRoomId)} + current={room.chatRoomId === currentChatRoomId} + /> +
    • + ))}
@@ -179,9 +181,11 @@ const Chatting = () => {
{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 (
{ 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) } } }, diff --git a/src/recoil/chatRoomsState.ts b/src/recoil/chatRoomsState.ts new file mode 100644 index 0000000..9f1344b --- /dev/null +++ b/src/recoil/chatRoomsState.ts @@ -0,0 +1,7 @@ +import { ChattingRoomI } from '@/model/Chatting' +import { atom } from 'recoil' + +export const chatRoomsState = atom({ + key: 'chatRoomsState', + default: null, +})