효율적인 이미지 관리를 위한 코드 리팩토링

기존 코드의 문제점 : 각 부가서비스 컴포넌트에서 이미지 업로드 및 URL 저장 코드가 반복되어 있었습니다.

 

uploadImagesAndUpdateFirestore함수 도입 : 중복 코드를 제거하기 위해 이미지 업로드와 URL 저장을 담당하는 함수를 만들었습니다. 이 함수는 이미지 압축 및 저장, Firestore 문서 업데이트를 처리합니다.

// uploadUtils.js

import { updateDoc } from 'firebase/firestore';
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import imageCompression from 'browser-image-compression';
import { message } from 'antd';

export const uploadImagesAndUpdateFirestore = async (
  uploadedImages,
  BlockId,
  docRef,
  storage,
  storageLocation,
) => {
  const imageUrls = [];

  // 이미지 업로드 및 URL 저장
  for (const imageFile of uploadedImages) {
    if (typeof imageFile === 'string') {
      imageUrls.push(imageFile);
    } else {
      // 이미지 압축
      const compressedFile = await compressedImage(imageFile);

      if (compressedFile) {
        const imageRef = ref(
          storage,
          `${storageLocation}/${BlockId}/${imageFile.name}`,
        );
        await uploadBytes(imageRef, compressedFile);
        const imageUrl = await getDownloadURL(imageRef);
        imageUrls.push(imageUrl);
      }
    }
  }

  // 이미지 URL들을 Firestore 문서에 업데이트
  await updateDoc(docRef, {
    images: imageUrls,
  });
};

// 이미지 압축 설정 옵션
const options = {
  maxSizeMB: 2,
  maxWidthOrHeight: 1000,
  useWebWorker: true,
};

// 이미지 압축 함수
const compressedImage = async (imageFile) => {
  try {
    const compressedFile = await imageCompression(imageFile, options);
    return compressedFile;
  } catch (error) {
    message.error('이미지 압축 실패', error);
    return null;
  }
};

코드 리팩토링 적용 : 각 부가서비스 컴포넌트에서는 이제 'uploadImagesAndUpdateFirestore 함수'를 import하여 이미지 업로드 및 URL 저장 작업을 단순화하고 재사용성을 높였습니다.

// 각 부가서비스 컴포넌트에서 사용 예시
await uploadImagesAndUpdateFirestore(
  uploadedImages,
  blockId,
  docRef,
  storage,
  'bannerImages',
);

이를 통해 이미지 관련 작업을 중앙화하고 코드의 재사용성을 향상시켰으며, 이미지 압축을 통해 데이터 및 대역폭 비용을 절감할 것으로 기대합니다.