Merge pull request #58 from frontend-opensource-project/URH-71/use-image-pre-setup

foresec · web-flow · commit 930c483a448d · 2024-09-10T03:03:19.000+09:00
[URH-71] useImagePreSetup 신규
diff --git a/src/hooks/useImagePreSetup.test.ts b/src/hooks/useImagePreSetup.test.ts
@@ -0,0 +1,159 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import useImagePreSetup, {
+  convertFile,
+  DEFAULT_WEBP_QUALITY,
+  urlFromFileHandler,
+  validateWebPQuality,
+} from './useImagePreSetup';
+
+import { imgTo } from '../utils';
+
+jest.mock('../utils/imgTo');
+
+describe('useImagePreSetup', () => {
+  let consoleWarnSpy: jest.SpyInstance;
+  let consoleErrorSpy: jest.SpyInstance;
+  let mockFiles: File[];
+  const mockUrls: string[] = ['mock-url1', 'mock-url2', 'mock-url3'];
+
+  beforeEach(() => {
+    mockFiles = [
+      new File(['content1'], 'example1.png', { type: 'image/png' }),
+      new File(['content2'], 'example2.png', { type: 'image/jpeg' }),
+      new File(['content3'], 'example3.png', { type: 'image/gif' }),
+    ];
+
+    global.URL.createObjectURL = jest.fn(() => mockUrls.shift() || 'mock-url');
+    global.URL.revokeObjectURL = jest.fn();
+
+    consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    consoleWarnSpy.mockRestore();
+  });
+
+  test('파일이 주어지면 변환함수가 올바르게 호출되고 로딩 상태가 정상적으로 변경된다.', async () => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (imgTo as jest.Mock).mockImplementation((_url: string) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      return (_type: string) => {
+        return Promise.resolve(new Blob());
+      };
+    });
+
+    const { result } = renderHook(() =>
+      useImagePreSetup({ imageFiles: mockFiles, convertToWebP: true })
+    );
+
+    expect(result.current.isLoading).toBe(true);
+
+    await waitFor(() => {
+      expect(imgTo).toHaveBeenCalledTimes(mockFiles.length);
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(imgTo).toHaveBeenCalledTimes(mockFiles.length);
+    expect(result.current.isError).toBe(false);
+    expect(result.current.previewUrls.length).toBe(mockFiles.length);
+    expect(result.current.webpImages.length).toBe(mockFiles.length);
+  });
+
+  test('파일이 주어졌을 때, URL이 생성되어 반환된다.', async () => {
+    for (const file of mockFiles) {
+      const result = await urlFromFileHandler(file);
+
+      expect(global.URL.createObjectURL).toHaveBeenCalledWith(file);
+
+      expect(result).toEqual({
+        webpBlob: null,
+        previewUrl: 'mock-url',
+      });
+    }
+  });
+
+  test('파일이 없거나 빈 배열이 주어지면 처리하지 않는다.', () => {
+    const { result: resultNull } = renderHook(() =>
+      useImagePreSetup({ imageFiles: null, convertToWebP: true })
+    );
+
+    expect(resultNull.current.isLoading).toBe(false);
+    expect(resultNull.current.isError).toBe(false);
+    expect(resultNull.current.previewUrls).toEqual([]);
+    expect(resultNull.current.webpImages).toEqual([]);
+
+    const { result: resultEmpty } = renderHook(() =>
+      useImagePreSetup({ imageFiles: [], convertToWebP: true })
+    );
+
+    expect(resultEmpty.current.isLoading).toBe(false);
+    expect(resultEmpty.current.isError).toBe(false);
+    expect(resultEmpty.current.previewUrls).toEqual([]);
+    expect(resultEmpty.current.webpImages).toEqual([]);
+  });
+
+  test('컴포넌트 언마운트 시 URL이 적절히 해제된다.', async () => {
+    const { unmount } = renderHook(() =>
+      useImagePreSetup({ imageFiles: mockFiles, convertToWebP: true })
+    );
+
+    expect(global.URL.revokeObjectURL).not.toHaveBeenCalled();
+
+    act(() => {
+      unmount();
+    });
+
+    mockUrls.forEach((url) => {
+      expect(global.URL.revokeObjectURL).toHaveBeenCalledWith(url);
+    });
+    expect(global.URL.revokeObjectURL).toHaveBeenCalledTimes(mockUrls.length);
+  });
+
+  test('convertToWebP가 false일 때 경고가 출력된다.', () => {
+    const webPQuality = 0.5;
+
+    validateWebPQuality(false, webPQuality);
+
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      'webPQuality`는 WebP로의 변환 품질을 설정하는 옵션입니다. `convertToWebP`를 true로 설정해야만 `webPQuality`가 적용됩니다.'
+    );
+  });
+
+  test('유효 범위를 벗어난 webPQuality 값이 주어졌을 때, 이 값이 반환된다.', () => {
+    const validWebPQuality = 1.5;
+
+    const result = validateWebPQuality(true, validWebPQuality);
+
+    expect(result).toBe(0.8);
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      `webPQuality 값이 유효 범위(0 ~ 1)를 벗어나 기본값(${DEFAULT_WEBP_QUALITY})이 사용됩니다.`
+    );
+  });
+
+  test('convertHandler가 실패할 경우, console.error가 호출되고 올바른 반환값을 가지는지 검증한다.', async () => {
+    consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const mockFile = new File(['content'], 'example.png', {
+      type: 'image/png',
+    });
+
+    const failingHandler = jest
+      .fn()
+      .mockRejectedValue(new Error('Conversion error'));
+
+    const result = await convertFile(mockFile, failingHandler, 0);
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      '1번째 파일 처리 중 오류 발생:',
+      new Error('Conversion error')
+    );
+
+    expect(result).toEqual({ webpBlob: null, previewUrl: null });
+
+    consoleErrorSpy.mockRestore();
+  });
+});
diff --git a/src/hooks/useImagePreSetup.ts b/src/hooks/useImagePreSetup.ts
@@ -0,0 +1,152 @@
+import { useEffect, useState } from 'react';
+import { imgTo } from '../utils';
+
+interface UseImagePreSetupProps {
+  imageFiles: File[] | null;
+  convertToWebP?: boolean;
+  webPQuality?: number;
+}
+
+interface UseImagePreSetupReturns {
+  previewUrls: (string | null)[];
+  isLoading: boolean;
+  isError: boolean;
+  webpImages: (Blob | null)[];
+  originalImages: File[] | null;
+}
+
+export interface ProcessedFileResult {
+  webpBlob: Blob | null;
+  previewUrl: string | null;
+}
+
+export const convertFile = async (
+  file: File,
+  convertHandler: (file: File) => Promise<ProcessedFileResult>,
+  idx: number
+): Promise<ProcessedFileResult> => {
+  try {
+    return await convertHandler(file);
+  } catch (error) {
+    console.error(`${idx + 1}번째 파일 처리 중 오류 발생:`, error);
+    return { webpBlob: null, previewUrl: null };
+  }
+};
+
+export const urlFromFileHandler = async (
+  file: File
+): Promise<ProcessedFileResult> => {
+  const url = URL.createObjectURL(file);
+  return { webpBlob: null, previewUrl: url };
+};
+
+export const convertToWebPHandler = async (
+  file: File,
+  quality: number
+): Promise<ProcessedFileResult> => {
+  const url = URL.createObjectURL(file);
+  const imgToUrl = imgTo(url);
+  const imgToWebP = await imgToUrl('image/webp', quality);
+  const webpUrl = URL.createObjectURL(imgToWebP);
+  return { webpBlob: imgToWebP, previewUrl: webpUrl };
+};
+
+export const DEFAULT_WEBP_QUALITY = 0.8;
+
+export const validateWebPQuality = (
+  convertToWebP: boolean,
+  webPQuality: number
+) => {
+  if (!convertToWebP) {
+    if (webPQuality !== DEFAULT_WEBP_QUALITY) {
+      console.warn(
+        'webPQuality`는 WebP로의 변환 품질을 설정하는 옵션입니다. `convertToWebP`를 true로 설정해야만 `webPQuality`가 적용됩니다.'
+      );
+    }
+    return DEFAULT_WEBP_QUALITY;
+  }
+  if (webPQuality < 0 || webPQuality > 1) {
+    console.warn(
+      `webPQuality 값이 유효 범위(0 ~ 1)를 벗어나 기본값(${DEFAULT_WEBP_QUALITY})이 사용됩니다.`
+    );
+    return DEFAULT_WEBP_QUALITY;
+  }
+  return webPQuality;
+};
+
+/**
+ * 이미지 파일을 처리하고 WebP 변환 또는 URL 생성을 수행하는 커스텀 훅.
+ * @param {File[] | null} [props.imageFiles=null] - 처리할 이미지 파일의 배열.
+ * @param {boolean} [props.convertToWebP=false] - WebP 형식으로 변환할지 여부. 기본값=false.
+ * @param {number} [props.webPQuality=0.8] - WebP 변환 품질. 기본값=0.8. 유효 범위는 0에서 1 사이입니다.
+ *
+ * @returns {string[] | null[]} previewUrls - 처리된 이미지의 미리보기 URL 배열. 오류가 발생한 경우 null이 포함될 수 있음.
+ * @returns {boolean} isLoading - 이미지 처리 진행 여부를 나타내는 상태.
+ * @returns {boolean} isError - 이미지 처리 중 오류 발생 여부를 나타내는 상태.
+ * @returns {Blob[] | null[]} webpImages - WebP 형식으로 변환된 이미지 Blob 배열. 변환되지 않았거나 오류가 발생한 경우 null이 포함될 수 있음.
+ * @returns {File[] | null} originalImages - 원본 이미지 파일의 배열.
+ *
+ * @description
+ * 주어진 이미지 파일을 처리하여 미리보기 URL을 생성하거나 WebP 형식으로 변환합니다.
+ * 처리 상태를 나타내는 로딩과 오류 상태를 관리하며, 변환된 WebP 이미지와 원본 이미지 파일을 반환합니다.
+ */
+const useImagePreSetup = ({
+  imageFiles = [],
+  convertToWebP = false,
+  webPQuality = DEFAULT_WEBP_QUALITY,
+}: UseImagePreSetupProps): UseImagePreSetupReturns => {
+  const validatedWebPQuality = validateWebPQuality(convertToWebP, webPQuality);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [previewUrls, setPreviewUrls] = useState<(string | null)[]>([]);
+  const [webpImages, setWebpImages] = useState<(Blob | null)[]>([]);
+
+  const processImages = async (imageFiles: File[]) => {
+    setIsLoading(true);
+    setIsError(false);
+
+    try {
+      const convertHandler = convertToWebP
+        ? (file: File) => convertToWebPHandler(file, validatedWebPQuality)
+        : urlFromFileHandler;
+
+      const convertResults = await Promise.all(
+        imageFiles.map((file, idx) => convertFile(file, convertHandler, idx))
+      );
+
+      const previewUrlsList = convertResults.map((result) => result.previewUrl);
+      const webpImagesList = convertResults.map((result) => result.webpBlob);
+
+      setPreviewUrls(previewUrlsList);
+      setWebpImages(webpImagesList);
+    } catch (error) {
+      setIsError(true);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!imageFiles || imageFiles.length === 0) return;
+
+    processImages(imageFiles);
+
+    return () => {
+      previewUrls.forEach((url) => {
+        if (url) URL.revokeObjectURL(url);
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imageFiles, convertToWebP]);
+
+  return {
+    previewUrls,
+    isLoading,
+    isError,
+    webpImages,
+    originalImages: imageFiles,
+  };
+};
+
+export default useImagePreSetup;
diff --git a/src/utils/imgTo.ts b/src/utils/imgTo.ts
@@ -0,0 +1,34 @@
+export const imgTo =
+  (path: string) =>
+  (type: string, quality?: number): Promise<Blob> => {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+
+      img.crossOrigin = 'Anonymous';
+
+      img.onload = () => {
+        URL.revokeObjectURL(path);
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        canvas.width = img.naturalWidth;
+        canvas.height = img.naturalHeight;
+        ctx?.drawImage(img, 0, 0);
+        canvas.toBlob(
+          (blob) => {
+            blob
+              ? resolve(blob)
+              : reject(new Error('Failed to convert image to blob'));
+          },
+          type,
+          quality
+        );
+      };
+
+      img.onerror = () => {
+        URL.revokeObjectURL(path);
+        reject(new Error('...'));
+      };
+
+      img.src = path;
+    });
+  };
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -4,3 +4,4 @@ export { isClient, hasNavigator } from './isClient';
 export { isTouchDevice } from './isTouchDevice';
 export { validators, MatchError } from './validators';
 export { imgToBlob } from './imgToBlob';
+export { imgTo } from './imgTo';
