[React][Typescript] React-Quill 적용하기 / React-Quill CSS(border제거/테두리 제거)/

1. Quill

---

react-Quill은 위지윅(WYSIWIG) 게시판 중 하나로, rich text editor의 한 종류입니다!

디자인이 깔끔하고 입력 방식대로 잘 표현해준다는 소식에 추천을 받아

프로젝트를 진행하면서 Quill을 이용해보기로 했습니다.

먼저 공식사이트와 npm 사이트입니다.

• 공식 사이트

<https://quilljs.com/>

• npm

<https://www.npmjs.com/package/react-quill>

2. 장단점

---

장점

• API 기반 디자인으로 HTML이나 다른 DOM트리의 구문 분석이 필요 없습니다.
• 다양한 브라우저에서 적용되는 크로스 플랫폼 편집기 입니다.
• 기능이나 디자인의 사용자 설정이 편리합니다.

단점

• XSS 보안이 취약할 수 있습니다.
• 기능의 사용자 정의가 제한적입니다.

3. 적용

---

(1) 설치

$ npm install react-quill

(2) Import

import ReactQuill from 'react-quill';
import "react-quill/dist/quill.snow.css";

(3) 코드

function WriteQuestionCommunity() {
  return (
    <div>
// 그림으로 그린 박스 안에 넣어주기 위한 디자인 요소
      <img alt="line" src={DrawingLine} />
      <div className="flex flex-col items-center">
        <img alt="border" className="relative" src={InputBox} width="75%" />
        <div className="mt-[6rem] flex justify-center absolute  w-[42rem]">

//write라는 컴포넌트로 따로 빼서 관리했다.
          <Write />
        </div>
      </div>
      <div className="fixed top-[24rem] right-[6rem]">
        <atoms.ButtonDoodle
          innerValue="올리기"
          onClick={() => console.log('ButtonDoodle')}
        />
      </div>
    </div>
  )
}

function CommunityWrite() {
//제목 글자수 입력
  const [textCount, settextCount] = useState<string>('')

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const inputValue = event.target.value
    settextCount(inputValue)
  }
// 이미지 리사이징
  Quill.register('modules/ImageResize', ImageResize)

// quill에서 이용할 옵션만 골라서 넣어줬다.
  const modules = useMemo(
    () => ({
      toolbar: {
        container: [
          ['bold', 'blockquote'],
          [{ list: 'ordered' }, { list: 'bullet' }],
          ['link', 'image'],
        ],
        handlers: {
          // image: imageHandler,
        },
      },
      ImageResize: { modules: ['Resize'] },
    }),
    []
  )
  return (
    <div>
      <div className="flex">
//제목 입력
        <input
          className="w-[36rem] h-[2rem] mr-[2rem] bg-transparent text-title1-bold placeholder:text-title1-bold focus: outline-none"
          maxLength={25}
          placeholder="제목을 입력해주세요."
          type="text"
          onChange={onChange}
        />
        <span className="text-body-bold text-stone-300">
          {textCount.replace(/<br\\s*\\/?>/gm, '\\n').length} / 25
        </span>
      </div>
      <img alt="line" className="mb-2" src={StraitLine} />
// Quill을 적용한 입력
      <ReactQuill
        modules={modules}
        placeholder="내용을 입력해주세요."
        theme="snow"
      />
    </div>
  )
}

(4) 추가 디자인

// style/global.css 

.ql-container {
  box-sizing: border-box;
  border: none !important;
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 1.1rem;
  height: 45rem;
  margin: 0px;
  position: relative;
}

.ql-toolbar {
  border-bottom: none;
  border: none !important;
}

(5) 완성본

처음엔 bubble 테마가 깔끔해 보여서 적용하려고 했는데,

snow 테마에서 border없애고 적용하니까 원하는 디자인대로 잘 나와서 적용했습니다!