Merge pull request #152 from 2024WISCOM/feature/guestbook

🐛 MaxLength 함수 추가

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>