feature: 유저가 보낸 메시지 UI 구별

gyehyun-bak · Jan 5, 2025 · 42be816 · 42be816
1 parent e6d178b
commit 42be816
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 23 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -7,16 +7,18 @@ interface MessageRequestDto {
   content: string;
 }
 
-interface MessageResonseDto {
+interface MessageResponseDto {
   content: string;
+  sessionId: string;
 }
 
 // 서버 웹소켓 엔드포인트트
 const SOCKET_URL = "http://localhost:8080/ws";
 
 function App() {
   const [message, setMessage] = useState("");
-  const [messages, setMessages] = useState<MessageResonseDto[]>([]);
+  const [messages, setMessages] = useState<MessageResponseDto[]>([]);
+  const [sessionId, setSessionId] = useState(""); // 유저가 보낸 메시지 식별용 Session Id
   const stompClientRef = useRef<Client | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -26,12 +28,18 @@ function App() {
       webSocketFactory: () => socket as any,
       debug: (msg: string) => console.log("[STOMP]:", msg),
       onConnect: () => {
+        // 세션 아이디 추출
+        const sessionId = (socket as any)._transport.url
+          .split("/")
+          .slice(-2, -1)[0]; // 세션 ID는 URL의 뒤에서 두 번째 부분에 위치
+        setSessionId(sessionId);
+
         console.log("[STOMP] 연결 성공: ", stompClient);
         // 채팅 토픽 구독
         const callback = (message: any) => {
           if (message.body) {
             console.log("[STOMP] 메시지 수신: ", message.body);
-            const newMessage: MessageResonseDto = JSON.parse(message.body);
+            const newMessage: MessageResponseDto = JSON.parse(message.body);
             setMessages((prevMessages) => [...prevMessages, newMessage]);
           }
         };
@@ -86,18 +94,17 @@ function App() {
   return (
     <div className="flex justify-center w-screen h-screen">
       <div className="flex flex-col max-w-screen-sm w-full h-full bg-neutral-50">
-        {/* Header */}
-        <div className="p-4 font-bold text-xl bg-neutral-200 flex justify-center">
-          Simple Chat Example
-        </div>
-
         {/* Body */}
         <div className="flex-1 overflow-auto p-4">
           <div className="flex flex-col gap-1">
             {messages.map((message, index) => (
               <div
                 key={index}
-                className="p-2 my-1 rounded-lg w-fit bg-white shadow-md"
+                className={`px-4 py-3 my-1 rounded-xl w-fit shadow-md ${
+                  message.sessionId === sessionId
+                    ? "bg-blue-600 text-white self-end" // 자신의 메시지
+                    : "bg-white self-start" // 다른 사람의 메시지
+                }`}
               >
                 {message.content}
               </div>
@@ -106,18 +113,18 @@ function App() {
         </div>
 
         {/* Input */}
-        <div className="p-4 bg-neutral-200 flex items-center w-full">
+        <div className="px-10 pb-10 pt-5 flex items-center w-full">
           <input
             ref={inputRef}
             type="text"
-            className="flex-1 p-3 rounded-lg mr-2"
+            className="flex-1 p-4 rounded-xl mr-2 shadow-lg"
             placeholder="메시지를 입력하세요..."
             value={message}
             onChange={(e) => setMessage(e.target.value)}
             onKeyDown={handleKeyPress}
           />
           <button
-            className="p-3 bg-neutral-900 text-white rounded-lg"
+            className="p-4 bg-blue-600 text-white rounded-xl shadow-lg"
             onClick={sendMessage}
           >
             전송
@@ -128,4 +135,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
diff --git a/server/src/main/java/com/example/spring_websocket/controller/ChatController.java b/server/src/main/java/com/example/spring_websocket/controller/ChatController.java
@@ -2,20 +2,21 @@
 
 import com.example.spring_websocket.dto.request.MessageRequestDto;
 import com.example.spring_websocket.dto.response.MessageResponseDto;
-import com.example.spring_websocket.service.MessageService;
+import com.example.spring_websocket.service.ChatService;
 import lombok.RequiredArgsConstructor;
 import org.springframework.messaging.handler.annotation.MessageMapping;
 import org.springframework.messaging.handler.annotation.SendTo;
+import org.springframework.messaging.simp.SimpMessageHeaderAccessor;
 import org.springframework.stereotype.Controller;
 
 @Controller
 @RequiredArgsConstructor
 public class ChatController {
-    private final MessageService messageService;
+    private final ChatService chatService;
 
     @MessageMapping("/chat")
     @SendTo("/topic/chat")
-    public MessageResponseDto sendChatMessage(MessageRequestDto requestDto) {
-        return messageService.processMessage(requestDto);
+    public MessageResponseDto sendChatMessage(MessageRequestDto requestDto, SimpMessageHeaderAccessor accessor) {
+        return chatService.processMessage(requestDto, accessor.getSessionId());
     }
 }
diff --git a/server/src/main/java/com/example/spring_websocket/dto/response/MessageResponseDto.java b/server/src/main/java/com/example/spring_websocket/dto/response/MessageResponseDto.java
@@ -11,4 +11,5 @@
 @Setter
 public class MessageResponseDto {
     private String content;
+    private String sessionId;
 }
diff --git a/...ing_websocket/service/MessageService.java → ...spring_websocket/service/ChatService.java b/...ing_websocket/service/MessageService.java → ...spring_websocket/service/ChatService.java
@@ -3,6 +3,6 @@
 import com.example.spring_websocket.dto.request.MessageRequestDto;
 import com.example.spring_websocket.dto.response.MessageResponseDto;
 
-public interface MessageService {
-    MessageResponseDto processMessage(MessageRequestDto requestDto);
+public interface ChatService {
+    MessageResponseDto processMessage(MessageRequestDto requestDto, String sessionId);
 }
diff --git a/...cket/service/impl/MessageServiceImpl.java → ...bsocket/service/impl/ChatServiceImpl.java b/...cket/service/impl/MessageServiceImpl.java → ...bsocket/service/impl/ChatServiceImpl.java
@@ -2,12 +2,12 @@
 
 import com.example.spring_websocket.dto.request.MessageRequestDto;
 import com.example.spring_websocket.dto.response.MessageResponseDto;
-import com.example.spring_websocket.service.MessageService;
+import com.example.spring_websocket.service.ChatService;
 import org.springframework.stereotype.Service;
 
 @Service
-public class MessageServiceImpl implements MessageService {
-    public MessageResponseDto processMessage(MessageRequestDto requestDto) {
-        return new MessageResponseDto(requestDto.getContent());
+public class ChatServiceImpl implements ChatService {
+    public MessageResponseDto processMessage(MessageRequestDto requestDto, String sessionId) {
+        return new MessageResponseDto(requestDto.getContent(), sessionId);
     }
 }