🌁 Presigned URL 이미지 업로드 구현하기

💡 Presigned URL ?

AWS S3에서 특정 파일을 업로드할 수 있도록 제한된 시간 동안 유효한 서명된 URL을 발급하는 기능
이를 활용하면 서버를 거치지 않고 클라이언트에서 직접 S3에 이미지를 업로드 할 수 있다.

• 서버로 파일을 전송하고 다시 S3로 업로드 하는 것이 아니라 클라이언트가 직접 S3로 업로드 할 수 있어 서버의 부하를 줄일 수 있고,
• 직접 업로드 할 경우 S3 권한이 노출될 위험이 있지만, Presigned URL을 통해 제한된 시간만 유효한 URL을 발급받아 사용하므로 보안을 강화할 수 있다.
• 또 서버를 거치지 않고 업로드 되므로 네트워크 지연을 최소화할 수 있다.

---

❓ Presigned URL 이미지 업로드 방식

• 클라이언트에서 파일 정보를 포함한 요청을 백엔드에 보냄
• 백엔드에서 Presigned URL을 생성하여 응답
• 클라이언트에서 해당 Presigned URL을 사용하여 S3에 직접 업로드
• 업로드가 완료되면 이미지 URL을 서버에 저장

---

❗️ Presigned URL 이미지 업로드 구현하기

📍 S3에 이미지 업로드 하기

// utils/uploadImageToS3.ts

const getPresignedUrl = async (file: File, type: string) => {
  try {
    const fileName = file.name;
    const fileType = file.type;

    const response = await axios.post(`${BASE_URL}/upload/${type}`, {
      fileName,
      fileType,
    });

    if (response.data) {
      const { presignedUrl, s3ObjectUrl } = response.data;
      return { presignedUrl, s3ObjectUrl };
    }
    throw new Error("Presigned URL not found in response.");
  } catch (error) {
    console.error("😭 Failed to fetch presigned URL: ", error);
    throw error;
  }
};


const uploadImageToS3 = async (file: File, type: string) => {
  try {
    const fileType = file.type;

    // Presigned URL 요청
    const { presignedUrl, s3ObjectUrl } = await getPresignedUrl(file, type);

    // Presigned URL을 이용해 파일 업로드
    await axios.put(presignedUrl, file, {
      headers: {
        "Content-Type": fileType,
      },
    });

    return s3ObjectUrl;
  } catch (error) {
    console.error("😭 Image upload failed: ", error);
    throw new Error("Image upload failed");
  }
};

export default uploadImageToS3;

📍 이미지 업로드 커스텀 훅

// 사용자가 이미지 선택시 실행
// hooks/useHandleImageChange.tsx
import { useState, useRef } from "react";
import { toast } from "react-toastify";

import uploadImageToS3 from "utils/uploadImageToS3";

const useHandleImageChange = (type: string) => {
  const imgInputRef = useRef<HTMLInputElement | null>(null);
  const [preview, setPreview] = useState<string>("");
  const [hasFile, setHasFile] = useState<boolean>(false);

  const handleImageChange = async () => {
    const files = imgInputRef.current?.files;

    if (!files || files.length === 0) {
      toast.error("이미지가 선택되지 않았습니다.");
      return;
    }

    const file = files[0];

    try {
      // ploadImageToS3를 호출하여 이미지를 업로드 후 미리보기 URL 업데이트
      const uploadedImageUrl = await uploadImageToS3(file, type);
      setPreview(uploadedImageUrl);
      setHasFile(true);
    } catch (error) {
      toast.error("이미지 업로드 중 오류가 발생했습니다.");
    }
  };

  return {
    imgInputRef,
    preview,
    hasFile,
    handleImageChange,
  };
};

export default useHandleImageChange;

📍 Presigned URL을 활용하여 이미지 업로드 하기

const { imgInputRef, preview, hasFile, handleImageChange } =
    useHandleImageChange("product");

 <S.UploadImgBox onClick={handleImgInputClick}>
	{hasFile ? (
		<>
			<S.UploadedImg src={preview} alt="미리보기" />
		</>
	) : (
		<>
            <S.UploadIcon />
            <S.UploadText>이미지 등록</S.UploadText>
            <S.Essential>필수 등록</S.Essential>
        </>
    )}
  <S.ImgUpload
    type="file"
    accept="image/jpg, image/jpeg"
    multiple
    ref={imgInputRef}
    onChange={handleImageChange}
    />
</S.UploadImgBox>
{hasFile && <S.EditImgBtn>사진 수정하기</S.EditImgBtn>}

사용자가 이미지를 선택하면 handleImageChange가 실행 !
이미지 업로드가 성공하면 preview 상태가 업데이트 되고, 미리보기 이미지가 표시된다.
이미지가 있으면 '사진 수정하기' 버튼이 나타난다.

✨ 구현 결과