From 83ae4575043a5257d27399b2fe7f0b99f417cc67 Mon Sep 17 00:00:00 2001
From: nadomolayohehe <siyun778@naver.com>
Date: Sun, 27 Oct 2024 10:23:47 +0900
Subject: [PATCH] =?UTF-8?q?:bug:=20MaxLength=20=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

maxLength 함수 추가
---
 src/components/guestBook/MessageInputSection.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/guestBook/MessageInputSection.jsx b/src/components/guestBook/MessageInputSection.jsx
index 1ed8ed7..609c660 100644
--- a/src/components/guestBook/MessageInputSection.jsx
+++ b/src/components/guestBook/MessageInputSection.jsx
@@ -14,7 +14,7 @@ const MessageInputSection = ({ onSendMessage, onViewGuestBook }) => {
   
   useEffect(()=> {
     const handleResize =() => {
-      setIsMobile(window.innerWidth <=767);
+      setIsMobile(window.innerWidth <=768);
     };
 
     window.addEventListener('resize', handleResize);
@@ -31,6 +31,13 @@ const MessageInputSection = ({ onSendMessage, onViewGuestBook }) => {
     setNewMessage({ to: '', from: '', message: '' });
   };
 
+  const maxLengthCheck = (e) =>{
+    const {maxLength, value} = e.target;
+    if(value.length>maxLength){
+      e.target.value = value.slice(0,maxLength);
+    }
+  };
+
   const handleViewGuestBook = () => {
     if(messageGridRef.current){ // messageGrid 존재 유무 확인
     messageGrid.scrollIntoView({ behavior: 'smooth' }); // 부드러운 스크롤
@@ -65,6 +72,7 @@ const MessageInputSection = ({ onSendMessage, onViewGuestBook }) => {
           placeholder="받는 사람" 
           value={newMessage.to}
           onChange={(e) => setNewMessage({ ...newMessage, to: e.target.value })}
+          onInput={maxLengthCheck}
           maxLength={8}
         />
         </Label>
@@ -82,6 +90,7 @@ const MessageInputSection = ({ onSendMessage, onViewGuestBook }) => {
           placeholder="보내는 사람" 
           value={newMessage.from}
           onChange={(e) => setNewMessage({ ...newMessage, from: e.target.value })}
+          onInput={maxLengthCheck}
           maxLength={8}
         />
         </Label>