MHLab blog

Light

23년 4월 26일 흑우집합소 개발노트 (React-Quill과 TailWinCss 사용 시 Html 폰트 적용 문제)

Posted by @MHLab, May 04, 2023
TIL흑우집합소
Series ofTIL

thumbnail

React-Quill을 사용하다가...

공지사항과 게시판 기능 때문에 React Quill을 사용하게 되었다.
그리고 게시글을 등록하면 잘 되었다.

근데 입력을 한 뒤에 열람을 하려 했더니 다음과 같이 출력되었다.

img01

내가 분명 h1이랑 h2 등을 적절하게 섞어서 사용했음에도 저렇게 뜨게 되었다.
그래서 뭐가 문제일까 고민을 좀 했었다.

답은 간단했다.

React Quill을 사용해서 글을 작성하면, Html로 코드가 뿌려진다.

<h1>폰트 테스트</h1>
<p><br /></p>
<h2>포온트 테스트</h2>
<p><br /></p>
<p><span style="color: rgb(230, 0, 0);">컬러테스트</span></p>
<p><br /></p>
<p><span style="background-color: rgb(255, 194, 102);">배경색 테스트</span></p>
<p><br /></p>
<p>ㅇㅇㅇㅇㅇ</p>
<p>일반 퐅느</p>
<p><br /></p>
<p><br /></p>
<h2>ㅇㄴㅁㄴㅁㅇㄴㅁㅇㅗ2</h2>
<p><br /></p>
<p>ㅇㄴㅇㅁㄴㅇ</p>
<p><br /></p>

그리고 이것을 열람 페이지에서 올릴 때 아래와 같이 코드를 작성해준다.

<div
  dangerouslySetInnerHTML={{
    __html: DOMPurify.sanitize(contents),
  }}
/>

근데 저렇게 적용이 안되는 것은 html 내의 태그가 씹힌다고 유추했다.
그래서 이것저것 찾다가 내가 사용하는 TailWindCss가 문제일 것 같단 생각이 들었다.

대표적인게 Html 태그 중 h1이라는 태그가 있다.
근데 TailWindCss를 쓰면서 저 태그를 쓰면 태그가 동작하지 않는다.

보통은 다음과 같이 클래스 값을 준다.

<div className="text-4xl">h1</div>

그럼 저것 때문 아닐까?
역시 예상대로였다.
globals.css에 아래와 같은 내용을 적용했다.

@layer base {
  h1 {
    @apply text-4xl;
    @apply font-bold;
  }
  h2 {
    @apply text-3xl;
    @apply font-bold;
  }
  h3 {
    @apply text-2xl;
    @apply font-bold;
  }
  h4 {
    @apply text-xl;
    @apply font-semibold;
  }
}

이렇게 하고 나니 잘 동작했다.

img02