ReactQuill 커스터마이징 하기

[fzdf0613]

상품 게시물을 등록하기 위해서 게시물을 작성하는 라이브러리를 찾아보았고, 그 중 ReactQuill를 이용하게 되었다

하지만, 상품 등록을 위한 요소를 추가하기 위한 커스터마이징이 필요하였고, 이 글은 그 구현을 간단히 정리하기 위함이다.

위와 같이, 메이커스의 상품 게시물에는 요약, 스토리와 같이 태그(이하 타이틀바라 칭함)같이 글을 나누는 것이 있다.
처음 구상한대로 구현하려면, 타이틀바들을 추가할 수 있는 커스텀 기능이 필요하였다.

Quill 자체의 커스텀 기능 추가는 customtoolbar를 정의하고 추가된 커스텀 버튼을 핸들링하는 함수를 추가하여 구현할 수 있었다.
그러나, 이 프로젝트에선 tailwind를 사용하고 있고 tailwind로는 quill의 라이브러리에 내장된 css를 변경할 수 없기 때문에( css의 클래스명을 임의로 정의할 수 없기 때문. ), 해당 부분을 수정하기 위해서 EditorToolBar.css를 생성하여 커스터마이징 한 부분에 적용될 css를 작성하였다.

<타이틀바의 이미지를 추가할 수 있는 커스터마이징 에디터 기능>

작성된 게시물에서는 타이틀바를 클릭하여 해당 부분으로 이동할 수 있도록 하는 기능이 있다.
이 기능을 구현하기 위한 구상은 다음과 같다.
→ 타이틀바 목록의 타이틀바를 클릭하면, 타이틀바 이미지 중 클릭한 이름과 같은 alt 값을 갖고있는 타이틀바 이미지로 스크롤을 이동

게시판 에디터에 추가한 타이틀바 이미지 추가 기능엔 img 태그의 alt를 설정하는 기능이 없었기 때문에, 구상한대로 구현하려면 이 부분도 커스터마이징 할 필요가 있었다.
이것은 Quill의 에디터자체에 커스터마이징 기능을 추가하는 것과 달리 복잡하였는데, Quill의 format/image라는 내장 이미지 처리 Blot을 수정하여 에디터에 적용할 필요가 있었기 때문이다. 이와 같은 문제를 해결하기 위한, 좋은 참고 사례를 발견할 수 있었고, 해당 코드를 적용하였다. ( # nextjs에서 Quill Editor 이미지 최적화하기 )

<img 태그의 alt가 적용됨>