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 (
diff --git a/src/components/pages/message/message-following-content/index.tsx b/src/components/pages/message/message-following-content/index.tsx
index d7e5a19b..afbd4b36 100644
--- a/src/components/pages/message/message-following-content/index.tsx
+++ b/src/components/pages/message/message-following-content/index.tsx
@@ -17,9 +17,10 @@ const SOCIAL_TABS = [
interface FollowingContentProps {
initialUserId: number;
+ accessToken: string | null;
}
-export const FollowingContent = ({ initialUserId }: FollowingContentProps) => {
+export const FollowingContent = ({ initialUserId, accessToken }: FollowingContentProps) => {
const params = useSearchParams();
const tab = params.get('tab') || 'chat';
@@ -59,7 +60,7 @@ export const FollowingContent = ({ initialUserId }: FollowingContentProps) => {
- {tab === 'chat' && }
+ {tab === 'chat' && }
{tab === 'following' && (
<>
diff --git a/src/hooks/use-chat/index.ts b/src/hooks/use-chat/index.ts
index 2b8ad1e5..375e4e2b 100644
--- a/src/hooks/use-chat/index.ts
+++ b/src/hooks/use-chat/index.ts
@@ -1,5 +1,6 @@
export { useCreateDMChat } from './use-chat-dm';
export { useGetChatList } from './use-chat-list';
+export { useChatListSocket } from './use-chat-list-socket';
export { useLongText } from './use-chat-longText';
export { useGetChatMessages } from './use-chat-messages';
export { useChatSocket } from './use-chat-socket';
diff --git a/src/hooks/use-chat/use-chat-list-socket/index.ts b/src/hooks/use-chat/use-chat-list-socket/index.ts
new file mode 100644
index 00000000..e970cd66
--- /dev/null
+++ b/src/hooks/use-chat/use-chat-list-socket/index.ts
@@ -0,0 +1,72 @@
+import { useEffect, useRef } from 'react';
+
+import { Client, IMessage, StompSubscription } from '@stomp/stompjs';
+import { useQueryClient } from '@tanstack/react-query';
+import SockJS from 'sockjs-client';
+
+interface UseChatListSocketOptions {
+ userId: number;
+ accessToken: string | null;
+ chatRoomIds: number[]; // 구독할 채팅방 ID 목록
+}
+
+export const useChatListSocket = ({
+ userId,
+ accessToken,
+ chatRoomIds,
+}: UseChatListSocketOptions) => {
+ const clientRef = useRef(null);
+ const queryClient = useQueryClient();
+ const subscriptionsRef = useRef