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} /> @@ -82,6 +90,7 @@ const MessageInputSection = ({ onSendMessage, onViewGuestBook }) => { placeholder="보내는 사람" value={newMessage.from} onChange={(e) => setNewMessage({ ...newMessage, from: e.target.value })} + onInput={maxLengthCheck} maxLength={8} />