From 005c64e82732fa62d28a23fe21b13d8615850b9c Mon Sep 17 00:00:00 2001
From: Sukyeong Sung <skyeong258@gmail.com>
Date: Tue, 11 Mar 2025 16:31:10 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B1=84=ED=8C=85=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=EC=9E=90=20=ED=94=84=EB=A1=9C=ED=95=84=20=EC=82=AC=EC=A7=84?=
 =?UTF-8?q?=EC=A7=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChatRoom.jsx      | 12 +++++++++++-
 src/components/ChatStyles.css    | 11 +++++++++++
 src/services/WebSocketService.js |  1 +
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/ChatRoom.jsx b/src/components/ChatRoom.jsx
index 90eb827..d6b82b1 100644
--- a/src/components/ChatRoom.jsx
+++ b/src/components/ChatRoom.jsx
@@ -176,6 +176,7 @@ const ChatRoom = ({ roomId: propRoomId, onLeaveRoom, refreshRooms }) => {
                 userId: userData.id,
                 username: userData.username,
                 nickname: userData.nickname || userData.username,
+                avatarUrl: userData.avatarUrl, // 프로필 이미지 URL 추가
                 message: messageText,
                 sendAt: new Date().toISOString()
             };
@@ -347,6 +348,7 @@ const ChatRoom = ({ roomId: propRoomId, onLeaveRoom, refreshRooms }) => {
                 chatMsgId: message.id || Date.now(),
                 userId: parseInt(message.userId),
                 nickname: message.nickname || message.from || '알 수 없는 사용자',
+                avatarUrl: message.avatarUrl, // avatarUrl 추가
                 message: message.message,
                 sendAt: message.sendAt || new Date().toISOString()
             };
@@ -637,7 +639,15 @@ const ChatRoom = ({ roomId: propRoomId, onLeaveRoom, refreshRooms }) => {
                                             className={`message ${msg.userId === userInfo.id ? 'sent' : 'received'} ${msg.failed ? 'failed' : ''}`}
                                         >
                                             <div className="avatar">
-                                                {/* 실제 사용자 아바타가 있으면 추가 */}
+                                                {msg.avatarUrl ? (
+                                                    <img 
+                                                        src={msg.avatarUrl} 
+                                                        alt={msg.nickname} 
+                                                        className="user-avatar"
+                                                    />
+                                                ) : (
+                                                    <i className="fas fa-user"></i>
+                                                )}
                                             </div>
                                             <div className="content">
                                                 <div className="sender">{msg.nickname}</div>
diff --git a/src/components/ChatStyles.css b/src/components/ChatStyles.css
index 66cd721..c05e4f9 100644
--- a/src/components/ChatStyles.css
+++ b/src/components/ChatStyles.css
@@ -603,6 +603,17 @@
     overflow: hidden;
 }
 
+.message .avatar img.user-avatar {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.message .avatar i.fa-user {
+    font-size: 20px;
+    color: #fff;
+}
+
 .message.sent .avatar {
     display: none;
 }
diff --git a/src/services/WebSocketService.js b/src/services/WebSocketService.js
index c2e270c..6e0dba7 100644
--- a/src/services/WebSocketService.js
+++ b/src/services/WebSocketService.js
@@ -342,6 +342,7 @@ class WebSocketService {
         userId: parseInt(userData.id), // userId를 숫자로 변환
         nickname: userData.username,
         from: userData.username,
+        avatarUrl: userData.avatarUrl, // 사용자 아바타 URL 추가
         message: message,
         sendAt: new Date().toISOString(),
         isLocalMessage: true // 로컬에서 보낸 메시지 표시