이미지 파일을 다루어 보자! (Base64, Blob, File)

const handleProfile = (e: ChangeEvent<HTMLInputElement>) => {
  let file: File | undefined;
  if (e.target.files) {
    // input의 이미지 파일을 가지고 옵니다.
    file = e.target.files[0];
    // Cropper 라이브러리를 활성화 시키는 state 값을 true로 변경합니다.
    setIsViewImageCropper(true);
    const reader = new FileReader();
    // file 객체를 Base64로 인코딩을 진행하여 web 상에서 이미지 파일을 볼 수 있도록 합니다.
    reader.readAsDataURL(file);
    return new Promise<void

const getCropData = async () => {
  try {
    const cropper = cropperRef.current?.cropper;
    if (cropper) {
      // 파일 변환 과정 동안 loding 창을 보여줍니다.
      setIsLoading(true);
 
      // cropper Canvas img를 base64로 변환합니다.
      const image = cropper.getCroppedCanvas().toDataURL();
 
      // fileRedear를 통해 보여주는 이미지를 state로 저장합니다.
      setImage(image);
 
      // file 형태로 변환
      const cropfile = await fetch(cropper.getCroppedCanvas().

import imageCompression from 'browser-image-compression';
import { ChangeEvent, useState, useRef } from 'react';
import Cropper, { ReactCropperElement } from 'react-cropper';
import Button from '../../../common/button/Button.tsx';
import Popup from '../../../common/popup/Popup.tsx';
import Profile from '../../../common/profile/Profile.tsx';
import { option } from '../../../util/imageCompressOption.ts';
import Spin from '../../spin/Spin.tsx';
import {
  ButtonBox,
  CropDiv,
  Label,
  PetProfileDiv,
  ProfileHeader,
  ProfileTail,
  ProfileText,
}