Project: 🚩codefolio - Toast UI Editor 사진 업로드

🎯목적 :

에디터 기존의 문제점 개선
(사진 업로드 시 뷰어에서 이미지가 string 형식으로 출력되어짐)

개선 : image url과 file name으로 보여질 수 있도록

 

** 최종 프로젝트 기간 매우 바쁜 관계로 우선 중요 코드만 적어놓았음**

---

1.  UI tag

 

<Editor
  ref={editorRef}
  initialValue={postContent ?? null}
  previewStyle="vertical"
  // previewHighlight={false}
  height="600px"
  initialEditType="markdown"
  useCommandShortcut
  toolbarItems={toolbarItems}
  language="ko-KR"
  plugins={[colorSyntax]}
  hooks={{
    // @ts-ignore
    addImageBlobHook: addImage,
  }}
  onChange={() => handleOnEditorChange()}
/>

hooks 사용하여 addImage 라는 함수를 커스텀하여 만들어 주었다.

 

---

2. addImage (이미지 생성 전체 과정)

  const addImage = async (blob: File, dropImage: HookCallback) => {
    const img = await compressImg(blob); // 이미지 압축
    if (!img) return;
    const url = await uploadImage(img); // 업로드된 이미지 서버 url
    if (!url) return;
    dropImage(url, `${blob.name}`); // 에디터에 이미지 추가
  };

이미지 사이즈가 너무 크면 에러 발생 위험과, 1회성으로 보여줄 내용을 수시로 서버통신하는 데에

부담이 있기 때문에 이미지 압축을 했고, url 에는 서버통신이 된 img를 받고있다.

 

---

3. uploadImage (업로드)

 

  // 이미지 업로드
  const uploadImage = async (blob: File) => {
    try {
      const imgPath = crypto.randomUUID();
      await supabase.storage.from("post-image").upload(imgPath, blob);

      // 이미지 올리기
      const urlResult = await supabase.storage
        .from("post-image")
        .getPublicUrl(imgPath);
      return urlResult.data.publicUrl;
    } catch (error) {
      console.log(error);
      return false;
    }
  };

해당 함수는 에디터에서 사용하는 사진을 supabase를 활용하여

데이터형태를 저장해 준다.

 

---

4. compressImg (압축)

 

// 이미지 압축
const compressImg = async (blob: File): Promise<File | void> => {
const options = {
  maxSize: 1,
  initialQuality: 0.55, // initial 0.7
};
const result = await imageCompression(blob, options)
  .then((res) => res)
  .catch((e) => console.log(e, "압축 에러"));
return result;
};

이미지를 압축하려면 imageCompression이라는 라이브러리를 import 한 후 사용해야 한다.

 

 

 

---

5. handleOnEditorChange

 

  const handleOnEditorChange = () => {
    // 유효성 검사
    const editorText = editorRef.current?.getInstance().getMarkdown();
    if (editorText === " " || editorText === "" || editorText === undefined) {
      return;
    }
    // HTML 대신에 Markdown으로 저장합니다.
    setPostContent(editorText);
  };

유효성 검사는 해당 에디터가 아무런 타이핑 없이

posting 했을 때를 잡아준다. 이후 문제 없다면 state로 editorText를 전송한다.