결정하기까지

Next.js에서 쓸 수 있어야 하고, 자료가 많고, 공식문서가 잘 되어 있고... 등의 조건으로 찾다가 Draft와 Quill 이 두 가지로 좁혔다.
그 중에서 Quill로 최종 결정한 이유는 초기 설정이 쉬워 보여서였다.

Quill 깃허브
Quill 공식문서
사용 블로그

적용 과정

AdminTabEditor.tsx

export default function AdminTabEditor({ userid, tid }: Props) {
  const [value, setValue] = useState("value");
  const modules = {
    toolbar: [
      [{ header: [1, 2, false] }],
      ["bold", "italic", "underline", "strike", "blockquote"],
      [
        { list: "ordered" },
        { list: "bullet" },
        { indent: "-1" },
        { indent: "+1" },
      ],
      ["link", "image"],
      [{ align: [] }, { color: [] }, { background: [] }],
      ["clean"],
    ],
  };
  const formats = [
    "header",
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "list",
    "bullet",
    "indent",
    "link",
    "image",
    "align",
    "color",
    "background",
    "clean",
  ];
  
  const [contents, setContents] = useState<TabContent[]>([]);
  const addColumn = () => {
    setContents([
      ...contents,
      {
        userid,
        tid,
        cid: Math.floor(Math.random() * 10000000),
        type: "description",
        ccontent: value,
        corder: contents.length,
      },
    ]);
  
    axios
      .put("/api/put/contents", contents)
      .then((res) => {
        alert("저장되었습니다.");
      })
      .catch((err) => {
        alert(err);
        console.log(err);
      });
  };
  
  return (
    <AdminTabEditorStyle>
      <Button variant="dark" onClick={addColumn}>
        Submit
      </Button>
      <ReactQuill
        style={{ height: "600px" }}
        theme="snow"
        modules={modules}
        formats={formats}
        value={value}
        onChange={setValue}
      />
    </AdminTabEditorStyle>
  );
}

이렇게 쉽다니...
react-quill 을 설치하고 ReactQuill 컴포넌트를 가져와서 쓰기만 하면 된다.
내용물은 html 태그로 저장되기 때문에 저장된 글을 불러올 때는

<div dangerouslySetInnerHTML={{ __html: content.ccontent }}></div>

이렇게 html 태그를 (위험을 감수하고) 적용하는 옵션을 넣어줘야 한다.

데이터베이스 수정

text라는 타입을 사용하면 제한 없이 텍스트를 저장할 수 있어서 게시글 내용 등을 저장할 때 유용하다.
아직 기존 tabcontents 테이블은 삭제 안 했고 그냥 새 테이블을 만들어서 거기다 연결...아니 잠깐만

이제 문단별로 저장할 필요가 없어서 탭 하나 당 페이지(내용물) 딱 하나씩만 생기는 거니까 그냥 tabs 테이블에다가 contents라는 column 하나 추가해도 되는 거잖아...?

그래서 블로그 글 쓰다 말고 바로 실행에 옮겼다

ALTER TABLE tabs
ADD COLUMN contents TEXT;

쿼리도 이런 식으로 다 바꿔주고

SELECT contents FROM tabs WHERE userid = $1 AND tid = $2

리뷰

다른 사람들이 라이브러리 적용한 블로그 글들을 읽어볼 때는 꽤 어려워 보였는데, 직접 해보니 너무 쉬워서 허무했다.
더 허무한 건 이전의 Easiest CV Weekly Progress 8 - 저장하고 로그아웃 에서 Draggable도 만들고 순서 저장하고 했던 모든 노력들이 물거품이 되어버렸다는 것이다.
최대한 쉽게 쓸 수 있는 시스템을 만드려고 나름대로 머리를 굴리면서 만들어봤는데 결국 그냥 라이브러리 써서 남들 다 하는 방식대로 하는 게 제일 직관적이고 쉽더라. 남들이 다 이렇게 하는 데는 이유가 있었던 거지.
근데 이러니까 너무 간단하잖아 이걸 어떻게 내 포트폴리오라고.... 아니야 괜찮아 더 업그레이드 할 수 있을거야 아직 고칠 점이 많으니까

To be continued

• UI 개선: 한글 폰트 더 예쁜 거 없나, home에도 텍스트 에디터 적용할까?
• DB와 소통하는 속도 개선
• 이름 h1 클릭하면 홈으로 이동
• 로그인 시 엔터 쳐도 로그인 됐으면 좋겠음
• 비밀번호 규칙 만들기