fix: gate chat queries behind auth readiness

Author: YeongJae0114

src/app/chat/[roomId]/page.tsx

@@ -10,6 +10,7 @@ import { useChatRoom } from "@/hooks/useChatRoom";
 import { useChatRooms } from "@/hooks/useChatRooms";
 import { useChatSocket } from "@/hooks/useChatSocket";
 import { useMessages } from "@/hooks/useMessages";
+import { useRequireAuth } from "@/hooks/useRequireAuth";
 import { useSession } from "@/services/session";
 
 interface ChatRoomPageProps {
@@ -27,10 +28,12 @@ export default function ChatRoomPage({ params }: ChatRoomPageProps) {
   const id = Number(roomId);
 
   const { myUserId } = useSession();
+  const { isAuthReady, isAuthenticated } = useRequireAuth();
+  const canFetchRoom = isAuthReady && isAuthenticated && Number.isFinite(id);
 
   // 방 정보: 딥링크/새로고침 대비 상세 조회(useChatRoom) 우선, 없으면 방 목록 캐시 폴백.
-  const { data: roomDetail, isError: isRoomError, error: roomError } = useChatRoom(id);
-  const { data: roomsData } = useChatRooms();
+  const { data: roomDetail, isError: isRoomError, error: roomError } = useChatRoom(id, canFetchRoom);
+  const { data: roomsData } = useChatRooms(undefined, canFetchRoom);
   const roomListItem = useMemo(
     () => roomsData?.pages.flatMap(page => page.items).find(r => r.id === id),
     [roomsData, id]
@@ -56,9 +59,9 @@ export default function ChatRoomPage({ params }: ChatRoomPageProps) {
     isError: isMessagesError,
     error: messagesError,
     refetch: refetchMessages,
-  } = useMessages(id);
+  } = useMessages(id, undefined, canFetchRoom);
 
-  const canConnectSocket = Boolean(roomDetail || roomListItem);
+  const canConnectSocket = canFetchRoom && Boolean(roomDetail || roomListItem);
   const { sendMessage, markAsRead, lastError, isConnected } = useChatSocket(id, canConnectSocket);
 
   const messages = useMemo(
@@ -106,7 +109,7 @@ export default function ChatRoomPage({ params }: ChatRoomPageProps) {
         </div>
       )}
 
-      {isLoading ? (
+      {!canFetchRoom || isLoading ? (
         <div className="flex flex-1 items-center justify-center">
           <div className="text-body-1 text-text-secondary">메시지를 불러오는 중...</div>
         </div>

src/app/chat/page.tsx

@@ -6,13 +6,16 @@ import ChatListItem from "@/components/chat/ChatListItem";
 import EmptyChat from "@/components/chat/EmptyChat";
 import { CHAT_LIST_TITLE, CHAT_LOADING_MESSAGE } from "@/constants/chat";
 import { useChatRooms } from "@/hooks/useChatRooms";
+import { useRequireAuth } from "@/hooks/useRequireAuth";
 
 function getErrorMessage(error: unknown) {
   return error instanceof Error ? error.message : "채팅 목록을 불러오지 못했습니다.";
 }
 
 export default function ChatListPage() {
   const router = useRouter();
+  const { isAuthReady, isAuthenticated } = useRequireAuth();
+  const canFetchChatRooms = isAuthReady && isAuthenticated;
   const {
     data,
     isLoading,
@@ -22,7 +25,7 @@ export default function ChatListPage() {
     hasNextPage,
     fetchNextPage,
     refetch,
-  } = useChatRooms();
+  } = useChatRooms(undefined, canFetchChatRooms);
 
   const rooms = data?.pages.flatMap(page => page.items) ?? [];
 
@@ -32,7 +35,7 @@ export default function ChatListPage() {
         <h1 className="text-headline-1 text-text-primary font-semibold">{CHAT_LIST_TITLE}</h1>
       </header>
 
-      {isLoading ? (
+      {!canFetchChatRooms || isLoading ? (
         <div className="flex flex-1 items-center justify-center">
           <div className="text-body-1 text-text-secondary">{CHAT_LOADING_MESSAGE}</div>
         </div>

src/hooks/useChatRoom.ts

@@ -13,11 +13,11 @@ export function chatRoomKey(roomId: number) {
   return ["chat", "room", roomId] as const;
 }
 
-export function useChatRoom(roomId: number) {
+export function useChatRoom(roomId: number, enabled = true) {
   return useQuery<ChatRoom>({
     queryKey: chatRoomKey(roomId),
     queryFn: () => getChatRoom(roomId),
     // 토큰 없으면 401 확정, roomId 유효성도 함께 게이팅.
-    enabled: Boolean(getAccessToken()) && Number.isFinite(roomId),
+    enabled: enabled && Boolean(getAccessToken()) && Number.isFinite(roomId),
   });
 }

src/hooks/useChatRooms.ts

@@ -8,7 +8,7 @@ import type { ChatRoomListItem, CursorPage } from "@/types/chat";
 
 export const CHAT_ROOMS_KEY = ["chat", "rooms"] as const;
 
-export function useChatRooms(size?: number) {
+export function useChatRooms(size?: number, enabled = true) {
   const { accessToken } = useSession();
 
   return useInfiniteQuery<CursorPage<ChatRoomListItem>>({
@@ -18,6 +18,6 @@ export function useChatRooms(size?: number) {
     getNextPageParam: lastPage =>
       lastPage.hasNext ? (lastPage.nextCursor ?? undefined) : undefined,
     // 토큰이 없으면 401이 뻔하므로 호출하지 않는다.
-    enabled: Boolean(accessToken),
+    enabled: enabled && Boolean(accessToken),
   });
 }

src/hooks/useMessages.ts

@@ -13,7 +13,7 @@ export function messagesKey(roomId: number) {
   return ["chat", "messages", roomId] as const;
 }
 
-export function useMessages(roomId: number, size?: number) {
+export function useMessages(roomId: number, size?: number, enabled = true) {
   const { accessToken } = useSession();
 
   return useInfiniteQuery<CursorPage<Message>>({
@@ -22,6 +22,6 @@ export function useMessages(roomId: number, size?: number) {
     initialPageParam: undefined as string | undefined,
     getNextPageParam: lastPage =>
       lastPage.hasNext ? (lastPage.nextCursor ?? undefined) : undefined,
-    enabled: Boolean(accessToken) && Number.isFinite(roomId),
+    enabled: enabled && Boolean(accessToken) && Number.isFinite(roomId),
   });
 }