[FEAT] 토큰 만료 시 웹소켓 재연결 및 메시지 재전송 처리

frontend/src/pages/chatRoom/ChatRoom.tsx

@@ -9,17 +9,20 @@ import React, {
 import styled from '@emotion/styled';
 import { Client } from '@stomp/stompjs';
 import { useQuery } from '@tanstack/react-query';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import SockJS from 'sockjs-client';
 
 import ApiError from '../../common/apis/ApiError';
+import { postReissue } from '../../common/apis/postReissue';
+import { PAGE_URL } from '../../common/constants/url';
 
 import { getChatRoomInfo } from './apis/getChatRoomInfo';
 import ChatContent from './components/ChatContent/ChatContent';
 import ChatRoomForbidden from './components/ChatRoomForbidden/ChatRoomForbidden';
 import ChatRoomHeader from './components/ChatRoomHeader/ChatRoomHeader';
 import InputSection from './components/InputSection/InputSection';
 import MentoringActionPanel from './components/MentoringActionPanel/MentoringActionPanel';
+import { MESSAGE_TYPE } from './constants/message';
 import useInfiniteChatRoomMessage from './hooks/useInfiniteChatRoomMessage';
 import useScrollToBottomOnMessageSend from './hooks/useScrollToBottomOnMessageSend';
 import useUpwardInfiniteScroll from './hooks/useUpwardInfiniteScroll';
@@ -29,7 +32,10 @@ import type { Message } from './types/message';
 import type { IMessage } from '@stomp/stompjs';
 
 function ChatRoom() {
+  const navigate = useNavigate();
+
   const [messages, setMessages] = useState<Message[]>([]);
+  const messagesRef = useRef<Message[]>([]);
   const [message, setMessage] = useState('');
 
   const { chatRoomId } = useParams();
@@ -82,6 +88,10 @@ function ChatRoom() {
     isFetchingNextPage: false,
   });
 
+  useEffect(() => {
+    messagesRef.current = messages;
+  }, [messages]);
+
   useEffect(() => {
     stateRef.current.hasNextPage = !!hasNextPage;
     stateRef.current.isFetchingNextPage = !!isFetchingNextPage;
@@ -148,6 +158,7 @@ function ChatRoom() {
       chatMessageId: tempId,
       tempId,
       status: 'pending' as const,
+      messageType: MESSAGE_TYPE.TEXT,
     };
 
     setMessages((prev) => [...prev, optimisticMsg]);
@@ -188,6 +199,8 @@ function ChatRoom() {
 
   const stompClientRef = useRef<Client | null>(null);
 
+  const isRefreshingRef = useRef(false);
+
   useEffect(() => {
     const client = new Client({
       webSocketFactory: () => {
@@ -197,14 +210,33 @@ function ChatRoom() {
           withCredentials: true,
         });
       },
-      // onStompError: (frame) => console.error('STOMP protocol error:', frame),
-      onStompError: (frame) => {
-        console.error('[sockjs][STOMP ERROR]', {
-          command: frame.command,
-          headers: frame.headers,
-          body: frame.body, // 👈 여기에 보통 "token expired" / "invalid jwt" 들어있음
-        });
+      onStompError: async (frame) => {
+        const parsedBody = JSON.parse(frame.body);
+
+        if (parsedBody.code === 'TOKEN_EXPIRED') {
+          if (isRefreshingRef.current) {
+            return;
+          }
+
+          isRefreshingRef.current = true;
+
+          try {
+            await postReissue();
+
+            if (client.active) {
+              await client.deactivate();
+            }
+
+            client.activate();
+          } catch (e) {
+            navigate(PAGE_URL.LOGIN);
+            console.error('토큰 재발급 실패:', e);
+          } finally {
+            isRefreshingRef.current = false;
+          }
+        }
       },
+
       onWebSocketError: (e) => console.error('WebSocket error:', e),
       reconnectDelay: 5000,
       onConnect: () => {
@@ -243,6 +275,21 @@ function ChatRoom() {
             });
           },
         );
+
+        const pendingMessages = messagesRef.current.filter(
+          (m) => m.status === 'pending',
+        );
+
+        pendingMessages.forEach((msg) => {
+          client.publish({
+            destination: `/app/chatroom/${chatRoomId}`,
+            body: JSON.stringify({
+              content: msg.content,
+              tempId: msg.tempId,
+              messageType: msg.messageType,
+            }),
+          });
+        });
       },
     });
 
@@ -252,7 +299,7 @@ function ChatRoom() {
     return () => {
       client.deactivate();
     };
-  }, [capturePrevScroll, chatRoomId]);
+  }, [capturePrevScroll, chatRoomId, navigate]);
 
   if (error?.status === 403) {
     return <ChatRoomForbidden />;

frontend/src/pages/chatRoom/constants/message.ts

@@ -0,0 +1,4 @@
+export const MESSAGE_TYPE = {
+  TEXT: 'TEXT',
+  IMAGE: 'IMAGE',
+} as const;

frontend/src/pages/chatRoom/types/message.ts

@@ -1,11 +1,13 @@
+import type { MESSAGE_TYPE } from '../constants/message';
+
 export interface Message {
   // 서버와 클라이언트 공통
   content: string;
   createdAt: string;
   senderId: number;
   chatRoomId: number;
   tempId: number;
-
+  messageType: MessageType;
   // 서버에서 받는 id
   chatMessageId?: number;
 
@@ -18,3 +20,5 @@ export interface MessageResponse {
   nextCursorCode: string | null;
   hasNext: boolean;
 }
+
+export type MessageType = (typeof MESSAGE_TYPE)[keyof typeof MESSAGE_TYPE];