마크다운 게시판에 드래그 앤 드랍으로 이미지 올리기 - 플리맨 프로젝트

해당 포스팅은 플리맨(FleaMan) 프로젝트의 광고 겸 개발일지입니다.
시간되실때 플리맨(https://fleaman.shop) 서비스 한번 사용해주시고 피드백주시면 감사하겠습니다.

이전 포스팅

해당 포스팅은 이전 포스팅 내용에 이어서 진행되는 포스팅이다. 이전 포스팅은 리액트로 마크다운 게시판 글쓰기 페이지를 만드는 내용이었는데 드래그 앤 드랍 관련 내용만 필요하다면 해당 포스팅으로 충분하다.
혹시 이전 포스팅이 궁금한 사람은 아래 링크를 참고하길 바란다.
Velog 비슷한 마크다운 게시판 만들기 - 플리맨 프로젝트

이번에도..

이전 포스팅에 이어 이번 포스팅에서 마무리가 가능할줄 알았는데.. 아무래도 다음 포스팅까지 써야할것 같다. 드래그 앤 드랍을 적용하는 방법에 이어 백엔드에서 이미지를 올리고 경로를 반환하는 작업까지 설명하려니 너무 길어지더라. 이번 포스팅에서는 드래그 앤 드랍으로 이미지 데이터를 백엔드에 요청하는 것까지 해보겠다. 백엔드에서 이미지 처리와 이미지 경로 반환은 다음 포스팅에 작성하려고 하니 이해해줬으면 좋겠다.

드래그 앤 드랍

말 그대로 마우스로 이미지를 드래그해서 페이지에 드랍하는 것이다. 글쓰기 페이지에 올리고 싶은 이미지를 드래그 앤 드랍하는 내용을 다뤄보겠다.

뭘로 만들까?

역시 이번에도 친절하게 만들어져 있는 리액트 라이브러리를 가져가다 쓸것이다. 사용하려고 하는 라이브러리는 'react-file-drop'이다. 해당 포스팅에서 다루지 않는 자세한 내용은 https://www.npmjs.com/package/react-file-drop 여기서 확인할 수 있다.

우리가 필요한 라이브러리 기능에 대해 간단하게 설명하자면,

• 라이브러리 설치 후 FileDrop 컴포넌트를 선언할 수 있다.
• FileDrop 컴포넌트에서 발생하는 onDragOver, onDragLeave, onDrop 등의 이벤트를 감지할 수 있다.
• onDragOver로 드랍할 수 있는 상태임을 알려줄 수 있다.
• onDragLeave로 드랍할 수 없는 상태임을 알려줄 수 있다.
• onDrop 이벤트가 발생했을 때 이미지 파일 정보를 감지할 수 있다.

어떻게 만들까?

설치 및 선언

간단하다. npm으로 설치해주자.

npm i react-file-drop

import { FileDrop } from 'react-file-drop'

FileDrop

조금 긴데 천천히 읽어보면 별거없다.
주요 기능을 정리해보면,

• onDragOver가 발생하면 boardColor를 true로 바꿔서 업로드 가능한 상태임을 표현한다.
• onDragLeave가 발생하면 boardColor를 false로 바꿔서 마우스가 목표 위치에서 이탈했음을 표현한다.
• onDrop가 발생하면 입력된 드랍된 이미지의 용량과 타입을 체크해 조건을 충족하면 api요청을, 충족하지 못하면 알럿을 띄워준다.

(MDEditor의 style을 보면 boardColor에 따라 색이 다르게 지정된 것을 확인할 수 있다.)

style={{
        backgroundColor: boardColor ? "#adb5bd": null
      }}

<FileDrop
onDragOver={(event) => {
  setBoardColor(true)
}}
onDragLeave={(event) => {
  setBoardColor(false)
}}

onDrop={(files, event) => {
  const formdata = new FormData();
  formdata.append(
    "file",
    files[0],
  )
  const headers={'Content-Type': files[0].type}
  if (files[0].size >= 5000000){
    alert("5MB 이상 파일은 업로드가 불가능합니다.")  
  }
  else if (files[0].type == 'image/png' || files[0].type == 'image/jpeg' || files[0].type == 'image/jpg' ){
    axios.post("api url을 입력하세요.", 
               formdata, headers)
      .then(function (response) {
      let imageName = response.data

      let newValue = value + "\n\n !["+ files[0].name +"](https://image.fleaman.shop/"+ imageName + ")"
      setValue(newValue)
    });
  }
  else {
    alert("png, jpg, jpeg 파일이 아닙니다.")
  }

  setBoardColor(false)
}}
  >
    <MDEditor
      value={value}
      onChange={setValue}
      preview="edit"
      height={500}
      style={{
        backgroundColor: boardColor ? "#adb5bd": null
      }}
    />
</FileDrop>

아래는 이미지를 드랍했을 때 정상적으로 업로드되고 미리보기까지 보여지는 이미지이다. 드래그 했을때 색이 변하는 것도 캡쳐하고 싶었는데 잘 안되더라. 궁금한 사람은 플리 게시판 글쓰기에서 한번 테스트해보길 바란다.

마무리

오늘은 마크다운 글쓰기 페이지에서 드래그 앤 드랍 이벤트를 사용하는 방법에 대해서 알아보았다. 역시나 잘 구성되어 있는 라이브러리가 있어서 쉽게 구현할 수 있었다. 다음 포스팅에서는 드랍된 이미지를 api를 이용해 백엔드 서버로 전송한 뒤 백엔드에서 이미지 처리, 저장하고 이미지 경로를 반환하는 부분을 다뤄보겠다. 궁금하거나 잘못된 부분이 있다면 언제든지 댓글 남겨주길 바란다!