React CKEditor 이미지 업로드 시 새로고침 문제

게시물 수정 , 삭제는 로그인 필요

아래의 코드는 공식 가이드와 블로그를 참고해서 작성한 로직인데 이미지를 업로드 하면 10번중에 9번은 페이지가 새로고침 됩니다.. 어디서 생기는 오류일까요??

업로드 하는 파일의 이름은 한국어+영어+숫자+특수문자 등이 섞여있습니다

import { CKEditor } from '@ckeditor/ckeditor5-react';

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const TextEditorInCommunity = ({ textData, textDataFun, img, setImgList }) => {

  const customUploadAdapter = (loader) => {

    return {

      upload() {

        return new Promise((resolve, reject) => {

          const data = new FormData();

          loader.file.then((file) => {

            data.append('name', file.name);

            data.append('file', file);

            axios

              .post(`${axiosInstance}api/multer/community/upload`, data, {

                headers: { 'content-type': 'multipart/form-data' },

              })

              .then((res) => {

                resolve({

                  default: `${res.data.imagePathName}`,

                });

              })

              .catch((err) => reject(err));

          });

        });

      },

    };

  };

  function uploadPlugin(editor) {

    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {

      return customUploadAdapter(loader);

    };

  }

  return (

    <MainStyle>

      <CKEditor

        editor={ClassicEditor}

        config={{

          extraPlugins: [uploadPlugin],

        }}

        onChange={(event, editor) => {

          const data = editor.getData();

          textDataFun(data);

        }}

      />

    </MainStyle>

  );

};

export default TextEditorInCommunity;

--------------

Node.js

router.post("/community/upload", async (req, res) => {

  const storage = multer.diskStorage({

    destination: (req, file, cb) => {

      cb(null, `../client/public/img/community`);

    },

    filename: (req, file, cb) => {

      cb(null, `${uuid()}.${mime.extension(file.mimetype)}`);

    },

  });

  const upload = multer({

    storage,

    fileFilter: (req, file, cb) => {

      if (["image/jpeg", "image/jpg", "image/png"].includes(file.mimetype)) cb(null, true);

      else cb(new Error("해당 파일의 형식을 지원하지 않습니다."), false);

    },

    limits: {

      fileSize: 1024 * 1024 * 5,

    },

  }).array("file");

  upload(req, res, (err) => {

    if (err) {

      return res.status(400).json({ success: false, error: err.message });

    }

    const imgs = req.files.map((file) => ({

      fileName: file.filename,

    }));

    return res.json({

      success: true,

      imgs,

      image: req.files[0].path,

      imagePathName: `/img/community/${req.files[0].filename}`,

    });

  });

  router.use(`/img/community`, express.static(path.join(__dirname, `../client/public/img/community`)));

});