[React] 🧾textarea 유동적인 높이 조절

🧾 textarea 유동적인 높이 조절

const PostContent = () => {
  const autoResizeTextarea = () => {
    let textarea = document.querySelector('.autoTextarea');

    if (textarea) {
      textarea.style.height = 'auto';
      let height = textarea.scrollHeight;
      let maxHeight = window.innerHeight * 0.74; // 뷰포트 높이의 74%로 최대 높이 지정
      textarea.style.height = `${Math.min(height + 8, maxHeight)}px`; // 높이가 최대 높이를 초과하지 않도록 함
    }
  };

  return (
    <>
      <PostContentBlock>
          <PostContent>
            <div className='top-txt-box'>
              <span className='post-txt'>포스트 쓰기</span>
              <span className='artist-txt'>BTS</span>
            </div>
            <form className='post-form'>
              <textarea
                className='autoTextarea'
                onKeyDown={autoResizeTextarea}
                onKeyUp={autoResizeTextarea}
                type='text'
                placeholder='내용을 입력해 주세요'
                name='content'
                autoComplete='off'
                required
              />
            </form>
            <div className='submit-box'>
              <button>등록</button>
            </div>
          </PostContent>
          <div className='delete-btn'>
            <img src={deleteBtn} alt='delete-button' />
          </div>
       </PostContentBlock>
    </>
  );
};