[URH-71] useImagePreSetup 신규

[foresec]

👾 Pull Request

• 티켓: useImagePreSetup 신규

• 상태: 신규

1️⃣ Spec

• 여러개의 이미지 파일들을 받아 미리보기를 제공하며, WebP 형식으로의 변환 및 품질을 조절할 수 있는 훅
• API 통신 등의 로직 전 이미지 파일 관리

2️⃣ 변경 사항

• 없음

3️⃣ 예시 코드

  const { previewUrls, isLoading, isError, webpImages } = useImagePreSetup({
    imageFiles: selectedFiles,
    convertToWebP: true,
    webPQuality: 0.5,
  });

props

• imageFiles : 처리할 이미지 파일 배열
• convertToWebP : WebP 형식으로 변환 여부
• webPQuality : WebP 형식으로 변환할 때의 품질 설정값(0~1, Default=0.8)

returns

• previewUrls : 이미지 파일의 미리보기 URL 배열
• isLoading : 로딩 여부
• isError : 오류 발생 여부
• webpImages : WebP로 변환된 이미지 blob 배열. 변환하지 않은 경우 null
• originalImages : 원본 이미지 파일 배열(props의 imageFIles와 동일)

사용 예시

import React, { useState } from 'react';
import useImagePreSetup from './hooks/useImagePreSetup';

function App() {
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);

  const { previewUrls, isLoading, isError, webpImages } = useImagePreSetup({
    imageFiles: selectedFiles,
    convertToWebP: true,
    webPQuality: 0.5,
  });

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files || []);
    setSelectedFiles(files);
  };

  return (
    <div>
      <input
        type="file"
        accept="image/*"
        multiple
        onChange={handleFileChange}
      />
      {isLoading && <p>Loading...</p>}
      {isError && <p>이미지 처리 중 오류가 발생했습니다.</p>}

      {previewUrls.length > 0 && (
        <div>
          <h2>Image Previews</h2>
          {previewUrls.map((url, idx) => (
            <div key={idx}>
              <img
                src={url || undefined}
                style={{ maxWidth: '300px', maxHeight: '300px' }}
              />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

4️⃣ 관련 문서 (선택 사항)

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob
• https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static

[bicochan]

고생하셨어요 소현 님👍🏻✨ 리뷰 확인 부탁드려요!

[bicochan]

승인이 너무 늦어져서 죄송합니다 ㅠㅠ
추가적인 내용은 다음 리팩토링 때 진행해 보시죠! 고생하셨어요 소현 님!👍🏻