fix: quill editor 반영중

src/views/biz/board/PublicBoardForm.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 // material-ui
 import { Button, Divider, FormControlLabel, Grid, InputAdornment, Radio, RadioGroup, TextField } from '@mui/material';
@@ -18,12 +18,14 @@ import * as React from 'react';
 import SaveParkingSimsaForm from '../parking/SaveParkingSimsaForm';
 import CmmModal from '../../form/Modal/CmmModal';
 import * as PropTypes from 'prop-types';
+import axios from 'axios';
 
 const PublicBoardForm = (props) => {
   console.log(props);
   const { inCode, inBgubun, inTitle, inHit, inName, inNalja, inFileName, inContents, setOpen } = props;
+  const quillRef = useRef();
   const [contents, setContents] = useState(inContents);
-  // const [editorState, setEditorState] = useState(() => EditorState.createWithContent(ContentState.createFormText(inContents)));
+
   const onList = (e) => {
     setOpen(false);
   };
@@ -41,7 +43,70 @@ const PublicBoardForm = (props) => {
   const onEditorStateChange = (editorState) => {};
   // (editorState) => setEditorState(editorState)
 
-  useEffect(() => {}, []);
+  // useEffect(() => {}, []);
+
+  const imageHandler = () => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    input.setAttribute('accept', 'image/*');
+    input.click();
+
+    input.onchange = async () => {
+      if (input.files) {
+        const file = input.files[0];
+        const formData = new FormData();
+        formData.append('image', file);
+        const fileName = file.name;
+
+        console.log(formData);
+
+        // 파일이 input 태그에 담기면 실행 될 함수
+        input.onchange = async () => {
+          const file = input.files;
+          if (file !== null) {
+            formData.append('image', file[0]);
+
+            try {
+              // 서저 저장
+              const res = await axios.get('/');
+              //
+              const url = '/Users/minuk/Pictures/test.png';
+
+              // 이미지 태그 생성
+              const range = quillRef.current?.getEditor().getSelection()?.index;
+              if (range !== null && range !== undefined) {
+                const quill = quillRef.current?.getEditor();
+
+                quill?.setSelection(range, 1);
+
+                quill?.clipboard.dangerouslyPasteHTML(range, `<img src=${url} alt="이미지 태그가 삽입됩니다." />`);
+              }
+            } catch (error) {
+              console.log(error);
+            }
+          }
+        };
+      }
+    };
+  };
+
+  const modules = useMemo(
+    () => ({
+      toolbar: {
+        container: [
+          ['bold', 'italic', 'underline', 'strike', 'blockquote'],
+          [{ size: ['small', false, 'large', 'huge'] }, { color: [] }],
+          [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }, { align: [] }],
+          // ['image']
+          ['image', 'video']
+        ],
+        handlers: {
+          image: imageHandler
+        }
+      }
+    }),
+    []
+  );
 
   return (
     <>
@@ -68,7 +133,18 @@ const PublicBoardForm = (props) => {
           <TextField label="첨부파일" value={inFileName} fullWidth />
         </Grid>
         <Grid item xs={12}>
-          <ReactQuill value={contents} onChange={setContents} />
+          <ReactQuill
+            ref={(element) => {
+              if (element !== null) {
+                quillRef.current = element;
+              }
+            }}
+            value={contents}
+            onChange={setContents}
+            modules={modules}
+            theme="snow"
+            placeholder="내용을 입력해주세요."
+          />
         </Grid>
       </Grid>
       <Grid item xs={12} sx={{ marginTop: 3, justifyContent: 'right' }}>