fix: restore auth before protected chat access

YeongJae0114 · YeongJae0114 · commit ae2d7bb4e697 · 2026-06-11T23:23:50.000+09:00
diff --git a/src/app/chat/[roomId]/page.tsx b/src/app/chat/[roomId]/page.tsx
@@ -17,14 +17,19 @@ interface ChatRoomPageProps {
   params: Promise<{ roomId: string }>;
 }
 
+function getRoomAccessErrorMessage(error: unknown) {
+  if (error instanceof Error && error.message) return error.message;
+  return "채팅방을 볼 수 없습니다.";
+}
+
 export default function ChatRoomPage({ params }: ChatRoomPageProps) {
   const { roomId } = use(params);
   const id = Number(roomId);
 
   const { myUserId } = useSession();
 
   // 방 정보: 딥링크/새로고침 대비 상세 조회(useChatRoom) 우선, 없으면 방 목록 캐시 폴백.
-  const { data: roomDetail } = useChatRoom(id);
+  const { data: roomDetail, isError: isRoomError, error: roomError } = useChatRoom(id);
   const { data: roomsData } = useChatRooms();
   const roomListItem = useMemo(
     () => roomsData?.pages.flatMap(page => page.items).find(r => r.id === id),
@@ -48,9 +53,13 @@ export default function ChatRoomPage({ params }: ChatRoomPageProps) {
     hasNextPage,
     isFetchingNextPage,
     fetchNextPage,
+    isError: isMessagesError,
+    error: messagesError,
+    refetch: refetchMessages,
   } = useMessages(id);
 
-  const { sendMessage, markAsRead, lastError, isConnected } = useChatSocket(id);
+  const canConnectSocket = Boolean(roomDetail || roomListItem);
+  const { sendMessage, markAsRead, lastError, isConnected } = useChatSocket(id, canConnectSocket);
 
   const messages = useMemo(
     () => messagesData?.pages.flatMap(page => page.items) ?? [],
@@ -64,6 +73,24 @@ export default function ChatRoomPage({ params }: ChatRoomPageProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, isConnected]);
 
+  if (!Number.isFinite(id) || isRoomError) {
+    return (
+      <div className="bg-bg-primary flex h-screen flex-col">
+        <ChatHeader title={null} />
+        <div className="flex flex-1 flex-col items-center justify-center gap-3 px-5 text-center">
+          <p className="text-body-1 text-text-primary font-medium">
+            {!Number.isFinite(id)
+              ? "올바르지 않은 채팅방입니다."
+              : getRoomAccessErrorMessage(roomError)}
+          </p>
+          <p className="text-body-2 text-text-secondary">
+            채팅방 참여자만 대화 내용을 볼 수 있습니다.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="bg-bg-primary flex h-screen flex-col">
       <ChatHeader title={counterpartyNickname} />
@@ -83,6 +110,19 @@ export default function ChatRoomPage({ params }: ChatRoomPageProps) {
         <div className="flex flex-1 items-center justify-center">
           <div className="text-body-1 text-text-secondary">메시지를 불러오는 중...</div>
         </div>
+      ) : isMessagesError ? (
+        <div className="flex flex-1 flex-col items-center justify-center gap-3 px-5 text-center">
+          <p className="text-body-1 text-text-primary font-medium">
+            {getRoomAccessErrorMessage(messagesError)}
+          </p>
+          <button
+            type="button"
+            onClick={() => void refetchMessages()}
+            className="border-border-primary text-body-2 text-text-primary h-9 rounded-lg border px-4 font-medium"
+          >
+            다시 불러오기
+          </button>
+        </div>
       ) : (
         <MessageList
           messages={messages}
diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
@@ -7,9 +7,22 @@ import EmptyChat from "@/components/chat/EmptyChat";
 import { CHAT_LIST_TITLE, CHAT_LOADING_MESSAGE } from "@/constants/chat";
 import { useChatRooms } from "@/hooks/useChatRooms";
 
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : "채팅 목록을 불러오지 못했습니다.";
+}
+
 export default function ChatListPage() {
   const router = useRouter();
-  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useChatRooms();
+  const {
+    data,
+    isLoading,
+    isError,
+    error,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+    refetch,
+  } = useChatRooms();
 
   const rooms = data?.pages.flatMap(page => page.items) ?? [];
 
@@ -23,6 +36,17 @@ export default function ChatListPage() {
         <div className="flex flex-1 items-center justify-center">
           <div className="text-body-1 text-text-secondary">{CHAT_LOADING_MESSAGE}</div>
         </div>
+      ) : isError ? (
+        <div className="flex flex-1 flex-col items-center justify-center gap-3 px-5 text-center">
+          <p className="text-body-1 text-text-primary font-medium">{getErrorMessage(error)}</p>
+          <button
+            type="button"
+            onClick={() => void refetch()}
+            className="border-border-primary text-body-2 text-text-primary h-9 rounded-lg border px-4 font-medium"
+          >
+            다시 불러오기
+          </button>
+        </div>
       ) : rooms.length === 0 ? (
         <EmptyChat />
       ) : (
diff --git a/src/hooks/useChatSocket.ts b/src/hooks/useChatSocket.ts
@@ -46,7 +46,7 @@ export interface UseChatSocketResult {
   markAsRead: () => void;
 }
 
-export function useChatSocket(roomId: number): UseChatSocketResult {
+export function useChatSocket(roomId: number, enabled = true): UseChatSocketResult {
   const queryClient = useQueryClient();
   const { accessToken, myUserId } = useSession();
   const socketRef = useRef<ChatRoomSocket | null>(null);
@@ -55,7 +55,7 @@ export function useChatSocket(roomId: number): UseChatSocketResult {
 
   useEffect(() => {
     // 토큰/유저 없으면 연결하지 않는다(WEBSOCKET_UNAUTHORIZED 방지).
-    if (!accessToken || myUserId === null || !Number.isFinite(roomId)) {
+    if (!enabled || !accessToken || myUserId === null || !Number.isFinite(roomId)) {
       return;
     }
 
@@ -86,7 +86,7 @@ export function useChatSocket(roomId: number): UseChatSocketResult {
       void socket.dispose();
     };
     // roomId/인증이 바뀌면 재연결. queryClient는 안정적.
-  }, [roomId, accessToken, myUserId, queryClient]);
+  }, [roomId, enabled, accessToken, myUserId, queryClient]);
 
   return {
     isConnected,
diff --git a/src/hooks/useRequireAuth.ts b/src/hooks/useRequireAuth.ts
@@ -4,9 +4,11 @@ import { useEffect, useState } from "react";
 
 import { useRouter } from "next/navigation";
 
+import { getMe, reissue } from "@/services/authApi";
 import { useAuthStore } from "@/stores/useAuthStore";
 
 const AUTH_STORAGE_KEY = "refit-auth";
+let restoreAuthPromise: Promise<boolean> | null = null;
 
 interface StoredAuthState {
   accessToken: string | null;
@@ -36,27 +38,66 @@ function getStoredAuthState(): StoredAuthState | null {
   }
 }
 
+function restoreAuthFromRefreshCookie() {
+  if (!restoreAuthPromise) {
+    restoreAuthPromise = (async () => {
+      try {
+        const tokenData = await reissue();
+        if (!tokenData.accessToken) return false;
+
+        useAuthStore.setState({ accessToken: tokenData.accessToken });
+
+        const me = await getMe();
+        useAuthStore.setState({ userId: me.userId });
+
+        return true;
+      } catch {
+        useAuthStore.getState().clearAuth();
+        return false;
+      }
+    })().finally(() => {
+      restoreAuthPromise = null;
+    });
+  }
+
+  return restoreAuthPromise;
+}
+
 export function useRequireAuth(redirectTo = "/auth") {
   const router = useRouter();
   const accessToken = useAuthStore(state => state.accessToken);
   const [hasStoredAccessToken, setHasStoredAccessToken] = useState(false);
   const [isAuthReady, setIsAuthReady] = useState(false);
 
   useEffect(() => {
+    let cancelled = false;
+
     const syncStoredAuth = () => {
       const storedAuth = getStoredAuthState();
       const currentAuth = useAuthStore.getState();
 
+      if (currentAuth.accessToken) {
+        setHasStoredAccessToken(false);
+        setIsAuthReady(true);
+        return;
+      }
+
       setHasStoredAccessToken(Boolean(storedAuth?.accessToken));
 
-      if (!currentAuth.accessToken && storedAuth?.accessToken) {
+      if (storedAuth?.accessToken) {
         useAuthStore.setState({
           accessToken: storedAuth.accessToken,
           userId: storedAuth.userId,
         });
+        setIsAuthReady(true);
+        return;
       }
 
-      setIsAuthReady(true);
+      void restoreAuthFromRefreshCookie().finally(() => {
+        if (!cancelled) {
+          setIsAuthReady(true);
+        }
+      });
     };
 
     const unsubscribe = useAuthStore.persist?.onFinishHydration?.(syncStoredAuth);
@@ -68,7 +109,10 @@ export function useRequireAuth(redirectTo = "/auth") {
       useAuthStore.persist?.rehydrate?.();
     }
 
-    return unsubscribe;
+    return () => {
+      cancelled = true;
+      unsubscribe?.();
+    };
   }, []);
 
   useEffect(() => {
