diff --git a/src/pages/Chat.tsx b/src/pages/Chat.tsx index d0eaa9e..02c359c 100644 --- a/src/pages/Chat.tsx +++ b/src/pages/Chat.tsx @@ -62,7 +62,6 @@ const Chat = () => { const [isOpen, setIsOpen] = useState(false); const [isConnected, setIsConnected] = useState(false); const bottomRef = useRef(null); - const nicknameRef = useRef(nickname); const wsCleanupRef = useRef<{ messageCleanup?: () => void; connectionCleanup?: () => void; @@ -75,92 +74,83 @@ const Chat = () => { const isTopicChat = mode === "topicChat"; - // nickname이 변경되면 ref 업데이트 - useEffect(() => { - nicknameRef.current = nickname; - }, [nickname]); - - const handleWebSocketMessage = useCallback((wsMessage: WebSocketMessage) => { - console.log("WebSocket 메시지 수신 처리:", wsMessage); + const handleWebSocketMessage = useCallback( + (wsMessage: WebSocketMessage) => { + console.log("📨 WebSocket 메시지 수신 처리:", wsMessage); - if (wsMessage.type === "ERROR") { // 에러 메시지 처리 - const errorMessage: Message = { - role: "assistant", - content: wsMessage.message, - messageType: "system" - }; + if (wsMessage.type === "ERROR") { + const errorMessage: Message = { + role: "assistant", + content: wsMessage.message, + messageType: "system" + }; + setMessages((prev) => { + const last = prev[prev.length - 1]; + if ( + last?.messageType === "system" && + last.content === wsMessage.message + ) { + return prev; + } + return [...prev, errorMessage]; + }); + } - // 중복 시스템 메시지 방지 - setMessages((prev) => { - const lastMessage = prev[prev.length - 1]; - if ( - lastMessage?.messageType === "system" && - lastMessage.content === wsMessage.message - ) { - return prev; - } - return [...prev, errorMessage]; - }); - } else if (wsMessage.type === "NOTICE") { - // 시스템 알림 메시지 처리 (입장/퇴장) - const systemMessage: Message = { - role: "assistant", - content: wsMessage.message, - messageType: "system" - }; + // 입장/퇴장 알림 (NOTICE) + else if (wsMessage.type === "NOTICE" && wsMessage.message) { + const noticeMessage: Message = { + role: "assistant", + content: wsMessage.message, + messageType: "system" + }; + setMessages((prev) => { + const last = prev[prev.length - 1]; + if ( + last?.messageType === "system" && + last.content === wsMessage.message + ) { + return prev; + } + return [...prev, noticeMessage]; + }); + } - // 중복 시스템 메시지 방지 - setMessages((prev) => { - const lastMessage = prev[prev.length - 1]; - if ( - lastMessage?.messageType === "system" && - lastMessage.content === wsMessage.message - ) { - return prev; + // 일반 채팅 메시지 (MESSAGE) + else if ( + wsMessage.type === "MESSAGE" && + wsMessage.nickname && + wsMessage.message + ) { + // 자신이 보낸 메시지는 이미 화면에 추가했으므로 무시 + if (wsMessage.nickname === nickname) { + return; } - return [...prev, systemMessage]; - }); - } else if ( - wsMessage.type === null && - wsMessage.nickname && - wsMessage.message - ) { - // ref를 사용해서 최신 nickname 참조 - const currentNickname = nicknameRef.current; - console.log("메시지 비교:", { - received: wsMessage.nickname, - current: currentNickname, - isOwn: wsMessage.nickname === currentNickname - }); - - // 자신이 보낸 메시지는 이미 화면에 추가했으므로 무시 - if (wsMessage.nickname === currentNickname) { - console.log("자신의 메시지 스킵"); - return; + + console.log( + "💬 다른 사용자 메시지 추가:", + wsMessage.nickname, + wsMessage.message + ); + + const newMessage: Message = { + role: "assistant", + content: wsMessage.message, + nickname: wsMessage.nickname, + mbti: wsMessage.mbti || undefined, + messageType: "text" + }; + + setMessages((prev) => [...prev, newMessage]); } - // 다른 사용자의 메시지만 화면에 추가 - console.log( - "다른 사용자 메시지 추가:", - wsMessage.nickname, - wsMessage.message - ); - const newMessage: Message = { - role: "assistant", - content: wsMessage.message, - nickname: wsMessage.nickname, - mbti: wsMessage.mbti || undefined, - messageType: "text" - }; - setMessages((prev) => { - console.log("메시지 추가 전:", prev.length); - const newMessages = [...prev, newMessage]; - console.log("메시지 추가 후:", newMessages.length); - return newMessages; - }); - } - }, []); // dependency 없음 - ref를 사용하므로 + // 예상치 못한 메시지 형식 로그 + else { + console.warn("알 수 없는 WebSocket 메시지:", wsMessage); + } + }, + [nickname] + ); useEffect(() => { if (!isTopicChat) { diff --git a/src/types/openChat.ts b/src/types/openChat.ts index 2542d99..b3db12e 100644 --- a/src/types/openChat.ts +++ b/src/types/openChat.ts @@ -36,7 +36,7 @@ export interface WebSocketRequestMessage { // 웹소켓 응답 메시지 형태 export interface WebSocketMessage { - type: "ERROR" | "NOTICE" | null; + type: "ERROR" | "NOTICE" | "MESSAGE" | null; mbti: string | null; nickname: string | null; message: string;