Feature/162 debug

package.json

@@ -33,6 +33,7 @@
     "next": "^13.4.5",
     "quill-image-compress": "^1.2.32",
     "quill-image-resize": "^3.0.9",
+    "quill-image-resize-module": "^3.0.0",
     "quill-image-resize-module-react": "^3.0.0",
     "quill-image-resize-module-ts": "^3.0.3",
     "react": "^18.2.0",

src/@types/quill.d.ts

@@ -0,0 +1,4 @@
+declare module 'quill-image-resize';
+declare module 'quill-image-resize-module';
+declare module 'quill-image-resize-module-ts';
+declare module 'quill-image-resize-module-react';

src/components/molecules/editor/index.tsx

@@ -1,39 +1,36 @@
-import React, { Dispatch, SetStateAction, useMemo, useRef } from 'react';
+import React, { Dispatch, forwardRef, SetStateAction, useMemo, useRef } from 'react';
 import 'react-quill/dist/quill.snow.css';
-import dynamic from 'next/dynamic';
 import { fetchUploadImage } from '../../../api/image';
+import RQ, { Quill } from "react-quill";
+import ImageCompress from 'quill-image-compress'
+import ImageResize from 'quill-image-resize-module-react';
+
+Quill.register('modules/imageCompress', ImageCompress);
+Quill.register('modules/resize', ImageResize);
+
+const EditorContainer = forwardRef<RQ, any>(function getEditor(props, ref) {
+  console.log("ref", ref)
+
+  const newProps = {
+    ...props,
+    modules: {
+      ...props.modules,
+      // imageResize: {
+      //   parchment: RQ.Quill.import('parchment'),
+      //   modules: ['Resize', 'DisplaySize', 'Toolbar'],
+      // },
+      // imageCompress: {
+      //   quality: 0.9, // default
+      //   imageType: 'image/*', // default
+      //   debug: true, // default
+      //   suppressErrorLogging: false, // default
+      //   insertIntoEditor: true, // default
+      // },
+    },
+  };
+  return <RQ ref={ref} {...newProps} />;
+})
 
-const ReactQuill = dynamic(
-  async () => {
-    const { default: RQ } = await import('react-quill');
-    const { default: ImageResize } = await import('quill-image-resize');
-    const { default: ImageCompress } = await import('quill-image-compress');
-
-    RQ.Quill.register('modules/imageCompress', ImageCompress);
-    RQ.Quill.register('modules/imageResize', ImageResize);
-
-    return function forwardRef({ forwardedRef, ...props }: React.Ref<RQ>) {
-      const newProps = {
-        ...props,
-        modules: {
-          ...props.modules,
-          imageResize: {
-            parchment: RQ.Quill.import('parchment'),
-            modules: ['Resize', 'DisplaySize', 'Toolbar'],
-          },
-          imageCompress: {
-            quality: 0.9,
-            debug: true,
-            suppressErrorLogging: false,
-            insertIntoEditor: undefined,
-          },
-        },
-      };
-      return <RQ ref={forwardedRef} {...newProps} />;
-    };
-  },
-  { ssr: false, loading: () => <div>*에디터를 불러오는 중입니다...</div> }
-);
 
 const Editor = ({
   description,
@@ -42,7 +39,7 @@ const Editor = ({
   description: string;
   setDescription: Dispatch<SetStateAction<FormData | null>>;
 }) => {
-  const quillRef = useRef<HTMLDivElement>(null);
+  const quillRef = useRef<RQ | null>(null);
 
   const uploadImage = async (blob: FormData) => {
     if (blob === null) return '';
@@ -57,28 +54,47 @@ const Editor = ({
     return '';
   };
 
+  console.log("quillRef", quillRef)
+
   const imageHandler = () => {
     const input = document.createElement('input');
     input.setAttribute('type', 'file');
     input.setAttribute('accept', 'image/*');
     input.click();
 
-    input.addEventListener('change', async () => {
+    console.log("input", input)
+
+    input.onchange = async () => {
       try {
         const file = input.files?.[0];
+
+        console.log("file", file)
         const formData = new FormData();
-        formData.append('images', file, file.name);
-        const imageURL = await uploadImage(formData);
-        const range = quillRef.current.getEditorSelection();
-        quillRef.current
-          .getEditor()
-          .insertEmbed(range.index, 'image', imageURL);
-        quillRef.current.getEditor().setSelection(range.index + 1);
-        document.body.querySelector(':scope > input').remove();
+
+        if (file && quillRef.current) {
+          formData.append('images', file);
+          const imageURL = await uploadImage(formData);
+          const range = quillRef.current.getEditorSelection() ?? null;
+
+          if (range && range.index) {
+            quillRef.current
+              .getEditor()
+              .insertEmbed(range.index, 'image', imageURL);
+
+            quillRef.current.getEditor().setSelection(range.index + 1, range.length);
+            document.body.querySelector(":scope > input")?.remove()
+          } else {
+            console.log("quill range undeinfed")
+            throw new Error('quill range undeinfed')
+          }
+        } else {
+          console.log("file undefined")
+          throw new Error('file undefined')
+        }
       } catch (error) {
         console.log(error);
       }
-    });
+    }
   };
 
   const modules = useMemo(() => {
@@ -101,11 +117,11 @@ const Editor = ({
 
   return (
     <div className="form__content">
-      <ReactQuill
+      <EditorContainer
+        ref={quillRef}
         style={{ width: '100%', height: '500px', paddingTop: '10px' }}
         placeholder="내용을 입력해주세요. *드래그하면 이미지가 추가됩니다..."
         theme="snow"
-        forwardedRef={quillRef}
         value={description}
         onChange={setDescription}
         modules={modules}

src/components/organisms/event/Form.tsx

@@ -10,6 +10,7 @@ import ContentDate from '../../molecules/form/ContentDate';
 import ContentDescription from '../../molecules/form/ContentDescription';
 import Tag from '../../molecules/form/Tag';
 import Editor from '../../molecules/editor';
+import dynamic from 'next/dynamic';
 
 const Form = ({
   title,
@@ -40,6 +41,8 @@ const Form = ({
 }: EventForm & EventTime) => {
   const eventTags = useAtomValue(eventTagsAtom);
 
+  const DynamicEditor = dynamic(() => import('./../../molecules/editor/index'), { ssr: false })
+
   return (
     <div className="list">
       <form className="form--large">
@@ -75,7 +78,7 @@ const Form = ({
             isModify={isModify}
           />
           <ImageUpload setBlob={setBlob} coverImageUrl={coverImageUrl} />
-          <Editor
+          <DynamicEditor
             description={description}
             changeDescription={changeDescription}
           />