보투게더 사용성 개선하기 (1) - 이미지 복사 붙여 넣기 업로드

문제점

1. 게시글 작성 시 이미지를 올릴 때 너무 불편하다.
2. 이미지 업로드가 불편해서 이미지 업로드 기능을 잘 사용하지 않게 된다.

해결 방법

다른 커뮤니티 게시글 작성처럼 이미지 복사 붙여 넣기로 이미지를 올릴 수 있으면 편하겠다는 생각이 들었다.

구현 방법

1. ClipboardEvent 이벤트를 이용하여 클립보드의 파일이 있는지 확인한다.
2. 파일이 있다면 이미지 타입인지 또 한 번 확인한다.
3. input ref에는 file의 값을 입력해 주고, 미리보기를 보여준다면 state의 값도 변경해 줍니다.

input의 파일을 교체하는 자세한 내용 링크

사용자가 업로드 한 이미지 압축하여 서버로 보내기 (feat.Browser Image Compression, Upload Images Converter, webp)

이미지 미리보기와 붙여 넣기 이벤트 커스텀 훅

export const useContentImage = (imageUrl: string = '') => {
  const [contentImage, setContentImage] = useState(imageUrl);
  const contentInputRef = useRef<HTMLInputElement | null>(null);

  const handlePasteImage = (event: ClipboardEvent<HTMLTextAreaElement>) => {
    const file = event.clipboardData.files[0];

    if (!file) return;

    if (file.type.slice(0, 5) === 'image') {
      event.preventDefault();

      uploadImage({
        imageFile: file,
        inputElement: contentInputRef.current,
        setPreviewImageUrl: setContentImage,
      });
    }
  };

textarea의 onPaste 이벤트에 적용

            <S.Content // textarea
			 ... ,
              onPaste={handlePasteImage}
            />

이미지를 직접 올리는 상황 사진

복사 붙여넣기 하는 Gif