ReactQuill에서 겹치는 UI 요소 처리

이슈

React와 ReactQuill을 이용해 웹 애플리케이션을 개발하던 도중, 일기를 작성하는 페이지에서 에디터와 버튼 그룹이 겹치는 문제에 부딪혔다. 처음에는 웹 에디터의 높이 설정이 문제인 줄 알고 이리 저리 바꿔가며 구조도 변경해보고 여러 대응을 해봤으니 결국 해결하지 못했다,,,

자꾸 저 밑에 제출하는 버튼이 에디터 안쪽으로 들어가 있는 상태였다..

그런데 뭔가 저 붕뜬 사이즈가 눈에 익은 느낌이라 잘 살펴보니????

원인

그렇다,,, 알고보니 이 문제의 근본 원인은 웹 에디터의 높이를 설정할 때 툴바의 높이를 고려하지 않았기 때문이었다....😂
웹 에디터의 높이를 설정하면, 툴바가 포함되어 실제로 편집 영역은 설정한 높이와 달라진다. 따라서 툴바 아래 영역에 버튼처럼 다른 요소가 위치하게 되면 겹치게 되었던 것이다.

해결

원인을 알고나니 해결하는 건 큰 문제가 아니였다. 이 문제를 해결하기 위해서는, 웹 에디터의 높이를 조정하거나 버튼의 위치를 툴바의 길이만큼 내려주면 해결되는 것이었다. 그래서 실제로 툴바의 길이를 확인 후에 margin값으로 버튼의 길이를 내려주었다.

결론적으로, 웹 에디터의 높이를 설정할 때는 내부 요소인 툴바의 높이가 제외되어서 설정되기 때문에 툴바 주변에 다른 요소를 넣을 때 고려해야 한다는 사실을 깨달았다,,

되게 사소한 부분인데 처음에 생각을 못하다보니 생각보다 시간을 잡아먹게 되었고
다시는 비슷한 실수를 하지 않기 위해 이렇게 기록으로 남긴다

틀린 내용이나 추가적인 피드백이 있다면 부탁드립니다. 🙇‍♂️