웹에디터

https://www.npmjs.com/package/react-quill
https://www.npmjs.com/package/react-draft-wysiwyg

각각을 다운받자.

react-quill 같은 경우 얘네를 임포트해야한다.

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

import dynamic from "next/dynamic";
-> 넥스트의 경우 이런식으로 임포트해야한다.
const ReactQuill = dynamic(() => import("react-quill", {ssr: false}))
-> 다이나믹 임포트 해야함

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

const ReactQuill = dynamic(() => import("react-quill", { ssr: false }));

export default function WebEditorPate() {
  function handleChange(value: string) {
    console.log(value);
  }

  // if (process.browser) {
  //   console.log("나는 브라우저다");
  // } else {
  //   console.log("나는 프론트엔드 서버다");
  // }

  return (
    <>
      작성자: <input type="text" /> <br />
      비밀번호: <input type="password" /> <br />
      제목: <input type="text" /> <br />
      내용: <ReactQuill onChange={handleChange} />
      <br />
      <button> 등록하기 </button>
    </>
  );
}

이렇게 하면 나올것임.