import React, { useState, useRef } from "react";import { useForm } from "react-hook-form";
import { MainCategory } from "@/types/categorys";import { subCategoryListMap } from "@/variable";import { useCreatePost } from "@/hooks/bbs/useCreatePost";import WysiwygEditor from "../wysiwygEditor";
import styles from "./index.module.scss";
interface PostWriteProps {  mainCategory: MainCategory;}
const CreatePost = ({ mainCategory }: PostWriteProps) => {  const subCategoryList = subCategoryListMap[mainCategory].filter((item) => item !== "All");
  const [currentCategory, setCurrentCategory] = useState<string>(subCategoryList[0]);  const editorRef = useRef<any>(null);
  const mutationHandler = useCreatePost(mainCategory);  const { register, handleSubmit } = useForm({ mode: "onChange" });
  const submitHandler = {    onSubmit: (data: any) => {      const content = editorRef.current;      const req = {        subCategory: currentCategory,        title: data.title,        content,      };      console.log(req);      // mutationHandler.mutate(req);    },    onError: (error: any) => {      console.log(error);    },  };
  return (    <form onSubmit={handleSubmit(submitHandler.onSubmit, submitHandler.onError)} className={styles["create-post"]}>      <p className={styles["create-post__main-category"]}>{mainCategory}</p>      <div className={styles["create-post__header"]}>        <input          {...register("title", { required: "필수 값 입니다." })}          placeholder="제목"          className={styles["create-post__title"]}        />        <div className={styles["create-post__details"]}>          <p className={styles["create-post__writer"]}>작성자<span>운영자</span></p>          <div className={styles["create-post__sub-category-list"]}>            <p className={styles["create-post__division"]}>분류</p>            {subCategoryList.map((item: string, index: number) => (              <p                key={index}                onClick={() => setCurrentCategory(item)}                className={`${currentCategory === item ?                  styles["create-post__sub-category--selected"] :                  styles["create-post__sub-category"]                }`}              >                {item}              </p>            ))}          </div>        </div>      </div>      <div className={styles["create-post__content"]}>        <WysiwygEditor ref={editorRef} />      </div>      <button type="submit" className={styles["create-post__submit-btn"]}>등록</button>    </form>  );};
export default CreatePost;

import dynamic from "next/dynamic";import React, { useRef, forwardRef } from "react";
import "@toast-ui/editor/dist/toastui-editor.css";
const Editor = dynamic(() => import("@toast-ui/react-editor").then((mod) => mod.Editor), { ssr: false });
const WysiwygEditor = forwardRef((props, ref) => {  const editorRef = useRef<any>(null);
  return (    <Editor      ref={editorRef}      height="400px"      initialEditType="wysiwyg"      previewStyle="vertical"      initialValue="내용을 입력해주세요"      hideModeSwitch={true}      useCommandShortcut={true}    />  );});
export default WysiwygEditor;

코드가 길어서 죄송합니다. 전체를 보여드리는게 좋을 것 같아서..

첫번째 코드가 페이지 컴포넌트고, 두번째 코드가 페이지컴포넌트에서 쓰는 커스텀 컴포넌트입니다.

toast가 ssr에서는 작동을 안한다길래 dynamic사용하니 에러없이 브라우저에 렌더링이 잘 됩니다. 그런데

에디터에 글을 작성하고 submit을 하면 에디터를 참고하고 있는 ref.current에 retry라는 함수만 들어가있더라고요.

렌더링이랑 useRef 타이밍이 안맞아서 그러는걸까요..? 어떻게 고쳐야하는지.. 3일동안 혼자 생각해도 모르겠네요 ㅠ 여기저기 물어봐도 다들 모르시겠다고만..ㅠ

아 그런데 위 코드블럭 제 노트북에서만 이상하게 보이는걸까요..?

community image

이렇게 보이는데..