fix: msw 대신 구현된 api를 활용하도록 수정 (#1123)

Author: AHHYUNJU

frontend/src/domains/chat/hooks/useChat.ts

@@ -1,65 +1,73 @@
 import { useCallback, useState } from 'react';
 
+import type { UserRole } from '@/domains/auth/types/api.types';
 import { useWebSocket } from '@/libs/websocket/hooks/useWebSocket';
 
-import type { ChatIncomingMessageType } from '../types/api.types';
+import type { ChatMessageResponse } from '../types/api.types';
 import type { ChatMessageType } from '../types/chat.types';
 
-const WS_CHAT_URL = `${process.env.REACT_APP_API_URL?.replace(/^http/, 'ws') ?? 'ws://localhost:8080'}/ws/chat/v1`;
+const WS_CHAT_URL = `${process.env.REACT_APP_API_URL?.replace(/^http/, 'ws') ?? 'ws://localhost:8080'}/ws/v1`;
 
 interface UseChatParams {
   routieSpaceUuid: string;
   accessToken: string;
   myNickname: string;
+  myRole: UserRole;
 }
 
-const useChat = ({ routieSpaceUuid, accessToken, myNickname }: UseChatParams) => {
+const useChat = ({
+  routieSpaceUuid,
+  accessToken,
+  myNickname,
+  myRole,
+}: UseChatParams) => {
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
   const [isConnected, setIsConnected] = useState(false);
 
-  const handleMessage = useCallback(
-    (data: ChatIncomingMessageType) => {
-      if (data.type === 'CHAT_ACK') {
-        setMessages((prev) =>
-          prev.map((msg) =>
+  const handleMessage = useCallback((data: ChatMessageResponse) => {
+    setMessages((prev) => {
+      if (data.tempId) {
+        const pendingIndex = prev.findIndex(
+          (msg) => msg.tempId === data.tempId,
+        );
+        if (pendingIndex !== -1) {
+          return prev.map((msg) =>
             msg.tempId === data.tempId
-              ? { ...msg, messageId: data.messageId, timestamp: data.timestamp, status: 'sent', tempId: undefined }
+              ? {
+                  ...msg,
+                  messageId: data.messageId,
+                  timestamp: data.timestamp,
+                  status: 'sent',
+                  tempId: undefined,
+                }
               : msg,
-          ),
-        );
-        return;
+          );
+        }
       }
 
-      if (data.type === 'CHAT') {
-        setMessages((prev) => {
-          const alreadyExists = prev.some(
-            (msg) => msg.messageId === data.messageId || msg.tempId === data.messageId,
-          );
-          if (alreadyExists) return prev;
+      if (prev.some((msg) => msg.messageId === data.messageId)) return prev;
 
-          return [
-            ...prev,
-            {
-              messageId: data.messageId,
-              senderId: data.senderId,
-              senderName: data.senderName,
-              content: data.content,
-              timestamp: data.timestamp,
-              status: 'sent',
-              isMine: data.senderId === myNickname,
-            },
-          ];
-        });
-      }
-    },
-    [myNickname],
-  );
+      return [
+        ...prev,
+        {
+          messageId: data.messageId,
+          senderId: data.senderId,
+          senderRole: data.senderRole,
+          senderName: data.senderName,
+          content: data.content,
+          timestamp: data.timestamp,
+          status: 'sent',
+          isMine: false,
+        },
+      ];
+    });
+  }, []);
 
-  const { send } = useWebSocket<ChatIncomingMessageType>({
+  const { send } = useWebSocket<ChatMessageResponse>({
     url: WS_CHAT_URL,
     token: accessToken,
-    subscribeDestination: `/topic/chat/${routieSpaceUuid}`,
-    publishDestination: `/app/chat/${routieSpaceUuid}`,
+    subscribeDestination: `/topic/chat/room/${routieSpaceUuid}`,
+    publishDestination: `/app/chat/room/${routieSpaceUuid}`,
     onMessage: handleMessage,
     onConnect: useCallback(() => setIsConnected(true), []),
     onDisconnect: useCallback(() => setIsConnected(false), []),
@@ -75,6 +83,7 @@ const useChat = ({ routieSpaceUuid, accessToken, myNickname }: UseChatParams) =>
           messageId: tempId,
           tempId,
           senderId: myNickname,
+          senderRole: myRole,
           senderName: myNickname,
           content,
           timestamp: new Date().toISOString(),
@@ -88,12 +97,12 @@ const useChat = ({ routieSpaceUuid, accessToken, myNickname }: UseChatParams) =>
         return;
       }
 
-      const isSent = send({ type: 'CHAT', routieSpaceId: routieSpaceUuid, tempId, content });
+      const isSent = send({ type: 'CHAT', tempId, content });
       if (!isSent) {
         setMessages((prev) => prev.filter((msg) => msg.tempId !== tempId));
       }
     },
-    [send, myNickname, isConnected, routieSpaceUuid],
+    [send, myNickname, myRole, isConnected],
   );
 
   return { messages, sendMessage };

frontend/src/domains/chat/types/api.types.ts

@@ -1,31 +1,20 @@
+import type { UserRole } from '@/domains/auth/types/api.types';
+
 interface ChatSendRequest {
   type: 'CHAT';
-  routieSpaceId: string;
   tempId: string;
   content: string;
 }
 
-interface ChatAckResponse {
-  type: 'CHAT_ACK';
-  tempId: string;
-  messageId: string;
-  timestamp: string;
-}
-
 interface ChatMessageResponse {
   type: 'CHAT';
+  tempId: string;
   messageId: string;
   senderId: string;
+  senderRole: UserRole;
   senderName: string;
   content: string;
   timestamp: string;
 }
 
-type ChatIncomingMessageType = ChatAckResponse | ChatMessageResponse;
-
-export type {
-  ChatSendRequest,
-  ChatAckResponse,
-  ChatMessageResponse,
-  ChatIncomingMessageType,
-};
+export type { ChatSendRequest, ChatMessageResponse };

frontend/src/domains/chat/types/chat.types.ts

@@ -1,9 +1,12 @@
+import type { UserRole } from '@/domains/auth/types/api.types';
+
 type ChatMessageStatus = 'pending' | 'sent';
 
 interface ChatMessageType {
   messageId: string;
   tempId?: string;
   senderId: string;
+  senderRole: UserRole;
   senderName: string;
   content: string;
   timestamp: string;

frontend/src/index.tsx

@@ -22,16 +22,5 @@ if (process.env.NODE_ENV === 'production') {
   });
 }
 
-async function enableMocking() {
-  if (window.location.hostname !== 'localhost') {
-    return;
-  }
-
-  const { worker } = await import('./mocks/browser');
-  return worker.start();
-}
-
-enableMocking().then(() => {
-  const root = createRoot(document.getElementById('root')!);
-  root.render(<Route />);
-});
+const root = createRoot(document.getElementById('root')!);
+root.render(<Route />);

frontend/src/libs/websocket/hooks/__tests__/useWebSocket.test.ts

@@ -64,6 +64,12 @@ const useWebSocket = <T>({
         console.error('[WS] STOMP 오류:', frame.headers['message']);
         onErrorRef.current?.(frame);
       },
+      onWebSocketError: (event) => {
+        console.error('[WS] WebSocket 오류:', event);
+      },
+      onWebSocketClose: (event) => {
+        console.warn('[WS] WebSocket 닫힘:', event.code, event.reason);
+      },
     });
 
     client.activate();