From e6b131e6cca111ef4b25e0f06c2c6c5febab471c Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Thu, 30 May 2024 16:51:52 +0900
Subject: [PATCH] fix: Set max width of chatting message, Change chatting
 message layout (#117)

---
 src/components/chat/ChattingRoom.tsx    |  2 ++
 src/components/chat/ReceiverMessage.tsx | 16 ++++++++--------
 src/components/chat/SenderMessage.tsx   | 19 +++++++++----------
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/chat/ChattingRoom.tsx b/src/components/chat/ChattingRoom.tsx
index 906e825..6546f21 100644
--- a/src/components/chat/ChattingRoom.tsx
+++ b/src/components/chat/ChattingRoom.tsx
@@ -88,6 +88,7 @@ const styles = {
   senderFrame: styled.div`
     display: flex;
     width: 20rem;
+    max-width: 20rem;
     justify-content: flex-end;
     padding-right: 0.8rem;
     margin: 0.8rem 0 0.8rem 5rem;
@@ -95,6 +96,7 @@ const styles = {
   receiverFrame: styled.div`
     display: flex;
     width: 23rem;
+    max-width: 20rem;
     justify-content: flex-start;
     padding-left: 0.8rem;
     margin: 0.8rem 0;
diff --git a/src/components/chat/ReceiverMessage.tsx b/src/components/chat/ReceiverMessage.tsx
index 9b19449..71203b3 100644
--- a/src/components/chat/ReceiverMessage.tsx
+++ b/src/components/chat/ReceiverMessage.tsx
@@ -77,14 +77,14 @@ const styles = {
   `,
   messageBody: styled.div`
     display: flex;
+    flex-direction: column;
     align-items: flex-start;
-    gap: 0.5rem;
+    max-width: 20rem;
+    gap: 0.25rem;
   `,
   message: styled.div`
-    display: flex;
-    width: 80%;
-    flex-direction: column;
-    align-items: flex-start;
+    width: 100%;
+    max-width: 20rem;
     gap: 0.625rem;
     color: var(--Text-gray, #666668);
     font-family: 'Noto Sans KR';
@@ -92,6 +92,8 @@ const styles = {
     font-style: normal;
     font-weight: 400;
     line-height: 1.25rem;
+    word-break: break-word;
+    white-space: pre-wrap;
   `,
   time: styled.p`
     color: var(--Text-gray, #666668);
@@ -138,9 +140,7 @@ export function ReceiverMessage({
           <styles.messageFrame>
             <styles.messageBody>
               <styles.message>{message}</styles.message>
-              <styles.messageInfo>
-                <styles.time>{getLocalTime(time, type)}</styles.time>
-              </styles.messageInfo>
+              <styles.time>{getLocalTime(time, type)}</styles.time>
             </styles.messageBody>
           </styles.messageFrame>
         </styles.right>
diff --git a/src/components/chat/SenderMessage.tsx b/src/components/chat/SenderMessage.tsx
index 88045f1..dbc844e 100644
--- a/src/components/chat/SenderMessage.tsx
+++ b/src/components/chat/SenderMessage.tsx
@@ -24,21 +24,22 @@ const styles = {
   `,
   messageBody: styled.div`
     display: flex;
+    flex-direction: column;
     align-items: flex-end;
-    gap: 0.5rem;
+    max-width: 20rem;
+    gap: 0.25rem;
   `,
-  message: styled.div`
-    display: flex;
-    width: 85%;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.625rem;
+  message: styled.p`
+    width: 100%;
+    max-width: 20rem;
     color: var(--White, #fff);
     font-family: 'Noto Sans KR';
     font-size: 0.875rem;
     font-style: normal;
     font-weight: 400;
     line-height: 1.25rem;
+    word-break: break-word;
+    white-space: pre-wrap;
   `,
   messageInfo: styled.div`
     display: flex;
@@ -95,9 +96,7 @@ export function SenderMessage({
         <styles.messageFrame>
           <styles.messageBody>
             <styles.message>{message} </styles.message>
-            <styles.messageInfo>
-              <styles.time>{getLocalTime(time, type)}</styles.time>
-            </styles.messageInfo>
+            <styles.time>{getLocalTime(time, type)}</styles.time>
           </styles.messageBody>
         </styles.messageFrame>
       </styles.right>