From b552231637e02bd2c9e104803641f538cc8eb102 Mon Sep 17 00:00:00 2001
From: leeminju <leemj4090@naver.com>
Date: Wed, 7 Feb 2024 12:29:07 +0900
Subject: [PATCH] =?UTF-8?q?update=20=20:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?=
 =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EC=82=AC=EC=A7=84=20css=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/templates/chat.html     | 38 ++++++++++++++++---
 src/main/resources/templates/userChat.html | 43 +++++++++++++++++-----
 2 files changed, 67 insertions(+), 14 deletions(-)

diff --git a/src/main/resources/templates/chat.html b/src/main/resources/templates/chat.html
index 2f2f2002..fbf34d3d 100644
--- a/src/main/resources/templates/chat.html
+++ b/src/main/resources/templates/chat.html
@@ -34,6 +34,35 @@
       padding: 10px;
     }
 
+    .message-content-sent {
+      float: right;
+      width: fit-content;
+      height: fit-content;
+      padding: 8px;
+      border-radius: 8px;
+      max-width: 70%;
+      background-color: #d3f5d3
+    }
+
+    .message-content-received {
+      width: fit-content;
+      height: fit-content;
+      padding: 8px;
+      border-radius: 8px;
+      max-width: 70%;
+      background-color: #e0e0e0;
+    }
+
+    .message-header-sent{
+      text-align: right;
+      margin-bottom: 10px;
+    }
+
+    .message-header-received{
+      margin-bottom: 10px;
+    }
+
+
     .chat-message {
       padding: 8px;
       border-radius: 8px;
@@ -42,12 +71,10 @@
 
     .sent {
       align-self: flex-end;
-      background-color: #d3f5d3; /* 내가 보낸 메시지 배경색 */
     }
 
     .received {
       align-self: flex-start;
-      background-color: #e0e0e0; /* 상대방이 보낸 메시지 배경색 */
     }
 
     .special {
@@ -66,6 +93,7 @@
     }
 
     .sender-nickname {
+      margin-left: 10px;
       font-size: 13px;
       font-weight: bold;
     }
@@ -311,11 +339,11 @@
     // 메시지를 표시할 HTML 생성
     var messageHtml = `
 <div class="chat-message ${senderId === myId ? 'sent' : 'received'}">
-    <div class="message-header">
+    <div class="message-header-${senderId === myId ? 'sent' : 'received'}">
         <img src="${senderImage}" alt="보낸 사람 이미지" class="sender-image">
         <span class="sender-nickname">${senderNickname}</span>
     </div>
-    <div class="message-content">${message}</div>
+    <div class="message-content-${senderId === myId ? 'sent' : 'received'}">${message}</div>
 </div>
   `;
 
@@ -526,7 +554,7 @@ <h5 class="modal-title" id="chatModalLabel">채팅창</h5>
       <div class="modal-body">
         <!-- 채팅창을 표시할 영역 -->
         <div id="chatContainer"
-             style="height: 200px; overflow-y: auto; word-wrap: break-word;"></div>
+             style="height: 400px; overflow-y: auto; word-wrap: break-word;"></div>
 
         <!-- 메시지 전송 버튼 -->
         <div class="input-group mb-3">
diff --git a/src/main/resources/templates/userChat.html b/src/main/resources/templates/userChat.html
index ccdc4b0c..446ed325 100644
--- a/src/main/resources/templates/userChat.html
+++ b/src/main/resources/templates/userChat.html
@@ -32,6 +32,35 @@
       padding: 10px;
     }
 
+    .message-content-sent {
+      float: right;
+      width: fit-content;
+      height: fit-content;
+      padding: 8px;
+      border-radius: 8px;
+      max-width: 70%;
+      background-color: #d3f5d3
+    }
+
+    .message-content-received {
+      width: fit-content;
+      height: fit-content;
+      padding: 8px;
+      border-radius: 8px;
+      max-width: 70%;
+      background-color: #e0e0e0;
+    }
+
+    .message-header-sent {
+      text-align: right;
+      margin-bottom: 10px;
+    }
+
+    .message-header-received {
+      margin-bottom: 10px;
+    }
+
+
     .chat-message {
       padding: 8px;
       border-radius: 8px;
@@ -40,12 +69,10 @@
 
     .sent {
       align-self: flex-end;
-      background-color: #d3f5d3; /* 내가 보낸 메시지 배경색 */
     }
 
     .received {
       align-self: flex-start;
-      background-color: #e0e0e0; /* 상대방이 보낸 메시지 배경색 */
     }
 
     .special {
@@ -309,15 +336,15 @@
     }
 
     // 메시지를 표시할 HTML 생성
-    var messageHtml = `
+        var messageHtml = `
 <div class="chat-message ${senderId === myId ? 'sent' : 'received'}">
-    <div class="message-header">
+    <div class="message-header-${senderId === myId ? 'sent' : 'received'}">
         <img src="${senderImage}" alt="보낸 사람 이미지" class="sender-image">
         <span class="sender-nickname">${senderNickname}</span>
     </div>
-    <div class="message-content">${message}</div>
+    <div class="message-content-${senderId === myId ? 'sent' : 'received'}">${message}</div>
 </div>
-`;
+  `;
     // 만약 senderId가 0이면 다른 CSS 적용
     if (senderId === 0) {
       messageHtml = `
@@ -511,7 +538,7 @@ <h5 class="modal-title" id="chatModalLabel">채팅창</h5>
       <div class="modal-body">
         <!-- 채팅창을 표시할 영역 -->
         <div id="chatContainer"
-             style="height: 200px; overflow-y: auto; word-wrap: break-word;"></div>
+             style="height: 400px; overflow-y: auto; word-wrap: break-word;"></div>
 
         <!-- 메시지 전송 버튼 -->
         <div class="input-group mb-3">
@@ -554,7 +581,5 @@ <h5 class="modal-title" id="chatModalLabel">채팅창</h5>
     </div>
   </div>
 </div>
-
-
 </body>
 </html>