[Client] ─(1) GET /presigned-url→ [Backend]
    ↓
(2) PUT image.jpg → [S3 Bucket]
    ↓
(3) S3 Event Trigger → [Lambda Function]
    ↓
(4) Lambda uses Sharp to resize + convert WebP
    ↓
(5) Save to S3 /resized-image/ directory

interface PresignedUrlRequest {
  imageName: string;
  imageType: string;
}
 
interface PresignedUrlResponse {
  presignedUrl: string;
  filePath: string;
}
 
const getPresignedUrl = async (data: PresignedUrlRequest): Promise<PresignedUrlResponse> => {
  const response = await api.post('/storage/upload-url', data);
  return response.data.data;
};

export const uploadImageToS3 = async (presignedUrl: string, file: FileType): Promise<void> => {
  const response = await axios.put(presignedUrl, file, {
    headers: {
      'Content-Type': file.type,
    },
  });
 
  if (response.status !== 200) {
    throw new Error(`Failed to upload image: ${response.statusText}`);
  }
};

export const useFileUpload = ({ onImageChange }: UseFileUploadProps) => {
  const [uploadedImage, setUploadedImage] = useState<UploadedImage | null>(null);
  const [uploading, setUploading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
 
  const { mutateAsync: getPresignedUrl } = usePresignedUrlMutation();
 
  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files || []);
    if (files.length === 0) return;
 
    const file = files[0];
 
    setUploading(true);
    try {
      // 1) Presigned URL 발급
      const { presignedUrl, filePath } = await getPresignedUrl({
        imageName: file.name,
        imageType: file.type,
      });
 
      // 2) 즉시 사용자에게 로컬 미리보기를 보여줌
      const localPreviewUrl = window.URL.createObjectURL(file);
 
      const tempUploadedImage: UploadedImage = {
        file,
        imageUrl: filePath, // 업로드될 S3 원본 경로
        imageName: file.name,
        previewUrl: localPreviewUrl, // 먼저 Blob URL로 즉시 프리뷰
      };
 
      setUploadedImage(tempUploadedImage);
      onImageChange({ imageUrl: filePath, imageName: file.name });
 
      // 3) S3로 실제 업로드
      await uploadImageToS3(presignedUrl, file);
 
      // 4) 업로드 성공 시, 프리뷰를 S3 실제 URL로 교체
      setUploadedImage((prev) => ({ ...prev!, previewUrl: filePath }));
 
      // (선택) Blob URL 메모리 해제
      window.URL.revokeObjectURL(localPreviewUrl);
    } catch (error) {
      console.error('Failed to process image:', error);
      alert('이미지 처리에 실패했습니다. 다시 시도해주세요.');
    } finally {
      setUploading(false);
    }
 
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };
 
  const removeImage = () => {
    if (uploadedImage) {
      if (uploadedImage.previewUrl.startsWith('blob:')) {
        window.URL.revokeObjectURL(uploadedImage.previewUrl);
      }
      setUploadedImage(null);
      onImageChange(null);
    }
  };
 
  const triggerFileInput = () => fileInputRef.current?.click();
 
  return {
    uploadedImage,
    uploading,
    fileInputRef,
    handleFileSelect,
    removeImage,
    triggerFileInput,
    canAddImage: !uploadedImage && !uploading,
  };
};

// index.js
const { S3Client, GetObjectCommand, PutObjectCommand } = require('@aws-sdk/client-s3');
const { Readable } = require('stream');
const sharp = require('sharp');
 
const s3 = new S3Client({ region: 'ap-northeast-2' }); // 리전은 환경에 맞게 변경
 
exports.handler = async (event) => {
  const bucket = event.Records[0].s3.bucket.name;
  // decodeURIComponent를 사용해 한글 깨짐 방지
  const key = decodeURIComponent(event.Records[0].s3.object.key.replace(/\+/g, ' '));
 
  // 리사이즈된 이미지나 특정 경로의 이미지는 처리하지 않음 (무한업로드 방지)
  if (key.startsWith('resized-image/')) {
    return;
  }
 
  const fileName = key.split('/').pop();
  const baseFileName = fileName.split('.').slice(0, -1).join('.'); // 확장자를 제외한 파일명만 추출
  // resized-image 폴더에 리사이징 완료한 이미지(resized-{파일명}.webp) 형식으로 저장
  const dstKey = `resized-image/resized-${baseFileName}.webp`;
 
  try {
    const response = await s3.send(new GetObjectCommand({ Bucket: bucket, Key: key }));
    var stream = response.Body;
 
    if ((!stream) instanceof Readable) {
      console.log('Unknown object stream type');
      return;
    }
 
    const content_buffer = Buffer.concat(await stream.toArray());
 
    const width = 90; // 리사이징 후 너비
    const height = 90; // 리사이징 후 높이
 
    const output = await sharp(content_buffer)
      .resize(width, height, { fit: 'inside' }) // 비율을 유지하면서 꽉 차게 리사이즈
      .webp({ lossless: true }) // 무손실 webp로 변환
      .toBuffer();
 
    await s3.send(
      new PutObjectCommand({
        Bucket: bucket,
        Key: dstKey,
        Body: output,
        ContentType: 'image/webp',
      }),
    );
 
    console.log('Successfully resized and uploaded');
  } catch (error) {
    console.error('Error processing file', error);
  }
};

📦lambda-S3
 ┣ 📂node_modules
 ┣ 📜index.js
 ┣ 📜package-lock.json
 ┗ 📜package.json