Merge pull request #4 from venus-lion/be/test/#00-pubsub-chat-test

Feat(fe). Redis Pub/Sub 채팅 기능 초안
venus-lion · Jan 16, 2025 · 21a297a · 21a297a
2 parents a21f174 + 0e39b03
commit 21a297a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/be/src/main/java/movlit/be/pub_sub/message/presentation/dto/response/ChatMessageDto.java b/be/src/main/java/movlit/be/pub_sub/message/presentation/dto/response/ChatMessageDto.java
@@ -2,17 +2,19 @@
 
 import java.time.LocalDateTime;
 import lombok.Getter;
+import lombok.ToString;
 import movlit.be.common.util.ids.MemberId;
 
 @Getter
+@ToString
 public class ChatMessageDto {
 
     private Long roomId;
     private MemberId senderId;
     private String message;
     private LocalDateTime regDt;
 
-    public ChatMessageDto(Long roomId, MemberId senderId, MemberId recipientId, String message) {
+    public ChatMessageDto(Long roomId, MemberId senderId, String message) {
         this.roomId = roomId;
         this.senderId = senderId;
         this.message = message;

diff --git a/fe/src/pages/ChatPage.jsx b/fe/src/pages/ChatPage.jsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Client } from '@stomp/stompjs';
+import React, {useState, useEffect, useRef} from 'react';
+import {Client} from '@stomp/stompjs';
 import SockJS from 'sockjs-client';
 import axiosInstance from '../axiosInstance'; // axios 인스턴스 import
 import './ChatPage.css'; // CSS 파일 import
@@ -18,7 +18,7 @@ function ChatPage() {
             setRoomId(roomIdFromParams);
         } else {
             // roomId가 없을 경우 기본값 또는 생성 로직 추가
-            const generatedRoomId = 'test'; // 임시로 test로 설정.
+            const generatedRoomId = 1; // 임시로 test로 설정.
             setRoomId(generatedRoomId);
         }
     }, []);
@@ -74,7 +74,7 @@ function ChatPage() {
             const chatMessage = {
                 roomId: roomId, // roomId 사용
                 senderId: 'currentUserId', // 현재 사용자 ID (실제로는 인증 정보에서 가져와야 함)
-                content: newMessage,
+                message: newMessage,
             };
 
             stompClient.publish({
@@ -97,7 +97,7 @@ function ChatPage() {
 
     // 새 메시지가 추가될 때마다 스크롤을 맨 아래로 이동
     useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+        messagesEndRef.current?.scrollIntoView({behavior: 'smooth'});
     }, [messages]);
 
     return (
@@ -117,7 +117,8 @@ function ChatPage() {
                         <div className="message-content">{message.content}</div>
                     </div>
                 ))}
-                <div ref={messagesEndRef} /> {/* 스크롤을 위한 빈 div */}
+                <div ref={messagesEndRef}/>
+                {/* 스크롤을 위한 빈 div */}
             </div>
             <div className="chat-input">
                 <input