From d63ff2f9c4de1b7c2d605a3aaaca7177e3ffe9ef Mon Sep 17 00:00:00 2001
From: esthel <esthel9026@naver.com>
Date: Thu, 7 Dec 2023 02:16:05 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EC=8B=9C=200/500=20=EB=82=98=EC=98=A4=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D,=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=ED=97=88=EC=9A=A9=20=EC=B6=94=EA=B0=80=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20=ED=95=84=EC=9A=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/components/Msg/Msg.tsx | 36 +++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/front/src/components/Msg/Msg.tsx b/front/src/components/Msg/Msg.tsx
index bc43a25..e358c9e 100644
--- a/front/src/components/Msg/Msg.tsx
+++ b/front/src/components/Msg/Msg.tsx
@@ -21,16 +21,22 @@ interface MsgColor {
 const StyledLetterBox = styled.div<MsgColor>`
   width: 80%;
   display: flex;
-  align-self: center;
+  flex-direction: column;
   font: ${props => props.theme.font['--normal-introduce-font']};
   text-shadow: ${props => props.theme.font['--text-shadow']};
-  flex-direction: column;
   border-radius: 1rem;
   padding: 1.5rem;
   gap: 1rem;
   background-color: ${props => props.color + '80'};
   margin: 1rem auto;
-  pointer-events: all;
+
+  //아래 수정 필요,, 왜 안돼돼
+  overflow: scroll;
+  touch-action: auto;
+  pointer-events: auto;
+  * {
+    pointer-events: auto;
+  }
 `;
 
 const StyledLetterPerson = styled.div`
@@ -154,15 +160,21 @@ const Msg = (props: MsgProps): JSX.Element => {
   };
 
   return (
-    <StyledLetterBox color={props.color}>
-        { props.isInput ? <StyledLetterInput>To. <StyledTo>{props.to}</StyledTo></StyledLetterInput> :
+    <StyledLetterBox color={props.color} onClick={() => alert('here')}>
+      {props.isInput ? (
+        <StyledLetterInput>
+          To. <StyledTo>{props.to}</StyledTo>
+        </StyledLetterInput>
+      ) : (
         <StyledLetterPerson>
-        <StyledToWrap>
-        To. <StyledTo>{props.to}</StyledTo>
-      </StyledToWrap>
-      { props.isDeco ? null : <StyledDeleteButton onClick={removeMsg}>X</StyledDeleteButton> }
-      </StyledLetterPerson>
-        }
+          <StyledToWrap>
+            To. <StyledTo>{props.to}</StyledTo>
+          </StyledToWrap>
+          {props.isDeco ? null : (
+            <StyledDeleteButton onClick={removeMsg}>X</StyledDeleteButton>
+          )}
+        </StyledLetterPerson>
+      )}
       {props.isInput ? (
         <StyledInputBox>
           <StyledTextArea
@@ -198,7 +210,7 @@ const Msg = (props: MsgProps): JSX.Element => {
           )}
         </StyledFrom>
 
-        {props.isInput && props.sender === '' ? `${wordCount} / 500` : null}
+        {props.isInput && props.sender === '익명' ? `${wordCount} / 500` : null}
       </StyledFromBox>
     </StyledLetterBox>
   );