diff --git a/src/app/message/page.tsx b/src/app/message/page.tsx index 2c54d0f8..f86e7fb0 100644 --- a/src/app/message/page.tsx +++ b/src/app/message/page.tsx @@ -10,7 +10,7 @@ const INITIAL_PAGE_SIZE = 10; export default async function MessagePage() { const cookieStore = await cookies(); const userId = Number(cookieStore.get('userId')?.value || 0); - + const accessToken = cookieStore.get('accessToken')?.value || null; const queryClient = new QueryClient(); // 첫 페이지 우선 prefetch @@ -35,7 +35,7 @@ export default async function MessagePage() { return ( - + ); } diff --git a/src/components/pages/chat/chat-list/index.tsx b/src/components/pages/chat/chat-list/index.tsx index d027d2ac..b44b18aa 100644 --- a/src/components/pages/chat/chat-list/index.tsx +++ b/src/components/pages/chat/chat-list/index.tsx @@ -2,23 +2,22 @@ import Image from 'next/image'; import { useRouter } from 'next/navigation'; -import { useEffect } from 'react'; +import { useMemo } from 'react'; -import { useQueryClient } from '@tanstack/react-query'; import { DEFAULT_PROFILE_IMAGE } from 'constants/default-images'; -import { useGetChatList } from '@/hooks/use-chat/use-chat-list'; +import { useChatListSocket, useGetChatList } from '@/hooks/use-chat'; import { cn } from '@/lib/utils'; import { ChattingNone } from '../chat-none'; interface IProps { userId: number; + accessToken: string | null; } -export const ChatList = ({ userId }: IProps) => { +export const ChatList = ({ userId, accessToken }: IProps) => { const router = useRouter(); - const queryClient = useQueryClient(); const handleClick = (chatId: number) => { router.push(`/chat/${chatId}`); }; @@ -26,11 +25,17 @@ export const ChatList = ({ userId }: IProps) => { console.log(chatList); - // 현재 방식은 tanstack query를 이용해서 단지 목록 조회 - // but, 소켓 통신을 하고 있는 상황이므로 목록 역시 소켓을 열어서 페이지에 머물러 있을 때도 실시간으로 확인 가능하도록 - useEffect(() => { - queryClient.invalidateQueries({ queryKey: ['chatList', userId] }); - }, [chatList, userId]); + // 채팅방 ID 목록 추출 + const chatRoomIds = useMemo(() => { + return chatList?.chatRooms?.map((chat) => chat.chatRoomId) || []; + }, [chatList]); + + // 모든 채팅방 구독하여 실시간 갱신 + useChatListSocket({ + userId, + accessToken, + chatRoomIds, + }); return (