12/28

import React, { useState, useEffect, useRef } from "react";
import styles from "./boarder.module.css";
export default function MyEditor() {
  const editorRef = useRef();
  const [editorLoaded, setEditorLoaded] = useState(false);
  const { CKEditor, ClassicEditor } = editorRef.current || {};
  const [boardContent, setBoardContent] = useState({
    title: "",
    content: "",
  });
  const [viewContent, setViewContent] = useState([]);

  useEffect(() => {
    editorRef.current = {
      // CKEditor: require('@ckeditor/ckeditor5-react'), // depricated in v3
      CKEditor: require("@ckeditor/ckeditor5-react").CKEditor, // v3+
      ClassicEditor: require("@ckeditor/ckeditor5-build-classic"),
    };
    setEditorLoaded(true);
  }, []);

  const getValue = (e) => {
    const { name, value } = e.target;
    setBoardContent({
      ...boardContent,
      [name]: value,
    });
    console.log(boardContent);
  };

  return editorLoaded ? (
    <div>
      <div className="center">
        <h1>Movie Review</h1>
        <div className={styles.movie_container}>
          {viewContent.map((e, i) => (
            <div>
              <h2>{e.title}</h2>
              <div>{e.content}</div>
            </div>
          ))}
          ;
        </div>

        <div className={styles.form_wrapper}>
          <input
            className={styles.title_input}
            type="text"
            placeholder="제목"
            onChange={getValue}
            name="title"
          />
        </div>
        <button
          className={styles.submit_button}
          onClick={() => {
            setViewContent(viewContent.concat({ ...boardContent }));
          }}
        >
          입력
        </button>
      </div>
      <CKEditor
        editor={ClassicEditor}
        data="<p>Hello from CKEditor 5!</p>"
        onChange={(event, editor) => {
          const data = editor.getData();
          console.log({ event, editor, data });
        }}
      />
    </div>
  ) : (
    <div>Editor loading</div>
  );
}

최적화 필요