From 1d763eb9e55edf68aad1ddbb5553c8a6455b8a00 Mon Sep 17 00:00:00 2001
From: yoouyeon <jyeon.yoon59@gmail.com>
Date: Wed, 14 Feb 2024 14:59:47 +0900
Subject: [PATCH 1/2] Style: Add word-break property

---
 src/app/my-page/message/@detail/panel/MessageItem.style.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/my-page/message/@detail/panel/MessageItem.style.ts b/src/app/my-page/message/@detail/panel/MessageItem.style.ts
index 6d2a2572d..a6cbb6d70 100644
--- a/src/app/my-page/message/@detail/panel/MessageItem.style.ts
+++ b/src/app/my-page/message/@detail/panel/MessageItem.style.ts
@@ -20,12 +20,14 @@ const pcBase = {
   padding: '1rem 1.25rem',
   borderRadius: '0.75rem',
   maxWidth: '32.5rem',
+  wordBreak: 'break-all',
 }
 
 const mobileBase = {
   padding: '0.75rem',
   borderRadius: '0.75rem',
   maxWidth: '70%',
+  wordBreak: 'break-all',
 }
 
 const ownerBase = {

From ed25de539a28213dcfc34fcf0b93bf966608eca4 Mon Sep 17 00:00:00 2001
From: yoouyeon <jyeon.yoon59@gmail.com>
Date: Wed, 14 Feb 2024 15:29:16 +0900
Subject: [PATCH 2/2] Fix: Fix type error

---
 .../message/@detail/panel/MessageItem.style.ts     |  2 --
 .../my-page/message/@detail/panel/MessageItem.tsx  | 14 ++++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/my-page/message/@detail/panel/MessageItem.style.ts b/src/app/my-page/message/@detail/panel/MessageItem.style.ts
index a6cbb6d70..6d2a2572d 100644
--- a/src/app/my-page/message/@detail/panel/MessageItem.style.ts
+++ b/src/app/my-page/message/@detail/panel/MessageItem.style.ts
@@ -20,14 +20,12 @@ const pcBase = {
   padding: '1rem 1.25rem',
   borderRadius: '0.75rem',
   maxWidth: '32.5rem',
-  wordBreak: 'break-all',
 }
 
 const mobileBase = {
   padding: '0.75rem',
   borderRadius: '0.75rem',
   maxWidth: '70%',
-  wordBreak: 'break-all',
 }
 
 const ownerBase = {
diff --git a/src/app/my-page/message/@detail/panel/MessageItem.tsx b/src/app/my-page/message/@detail/panel/MessageItem.tsx
index 5ce78f878..be4f0d2a6 100644
--- a/src/app/my-page/message/@detail/panel/MessageItem.tsx
+++ b/src/app/my-page/message/@detail/panel/MessageItem.tsx
@@ -51,7 +51,12 @@ export const OwnerMessageItem = ({
       sx={style[`contentMargin${messageOption}`]}
     >
       <MessageDate date={message.date} />
-      <Box sx={isPc ? style.ownerPc : style.ownerMobile}>
+      <Box
+        sx={{
+          ...(isPc ? style.ownerPc : style.ownerMobile),
+          wordBreak: 'break-all',
+        }}
+      >
         <Typography variant={'Body1'}>{message.content}</Typography>
       </Box>
     </Stack>
@@ -81,7 +86,12 @@ export const TargetMessageItem = ({
           sx={style.targetAvatar}
         />
       )}
-      <Box sx={isPc ? style.targetPc : style.targetMobile}>
+      <Box
+        sx={{
+          ...(isPc ? style.targetPc : style.targetMobile),
+          wordBreak: 'break-all',
+        }}
+      >
         <Typography variant={'Body1'}>{message.content}</Typography>
       </Box>
       <MessageDate date={message.date} />