이미지와 PDF 업로드 및 미리보기 구현기

이미지와 PDF 업로드 및 미리보기 구현기

이번 프로젝트에서 이미지와 PDF 파일을 업로드하는 기능을 개발해야 했고, 특히 PDF 파일에 대한 미리보기를 구현하는 부분에서 고민이 많았다. 이미지는 비교적 간단히 처리할 수 있었지만, PDF 미리보기는 구현 경험이 없어서 새로운 접근법을 찾는 과정이 필요했다. 아래에서는 문제 해결 과정을 공유하고, 각 문제점과 해결 방안을 설명한다.

 

접근 방법

먼저 input 요소의 change 이벤트에서 파일 타입을 기준으로 이미지와 PDF 파일을 구분하여 상태(state)로 관리했다.

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

    setCerts((prevFiles) => [...prevFiles, ...selectedFiles])

    const updatedPreviews = selectedFiles.reduce<FilePreview[]>(
      (acc, cur) => [
        ...acc,
        {
          url: URL.createObjectURL(cur),
          type: cur.type.startsWith('image/') ? 'image' : 'pdf',
        },
      ],
      []
    )
    setPreviews((prevPreviews) => [...prevPreviews, ...updatedPreviews])
  }

이후 previews 상태를 사용하여 파일 유형에 따라 미리보기를 다르게 렌더링했다. 이미지 파일은 <img> 요소로, PDF 파일은 <iframe> 요소로 표시했다.

 

  {previews.map((preview, index) => (
    <div key={index}
      {preview.type === 'image' ? (
        <img
          src={preview.url}
          alt='미리보기'
        />
      ) : (
        <iframe
          src={preview.url}
          title='PDF 미리보기'
        />
      )}
    </div>
  ))}

다행히 iframe에서 내가 원하는대로 pdf가 그려졌다.

좋았어! pdf의 미리보기가 문제없... 아니네

 

iframe 미리보기의 문제점

그러나 iframe을 사용하면서 두 가지 문제점이 발생했다.

1. 좌우에 검은색 테두리
   PDF 파일이 iframe 안에서 예상치 못한 검은색 여백이 생겼다.
2. 스크롤 기능 활성화
   마우스 휠을 돌리면 iframe 내에서 스크롤이 가능했다.

 

문제 해결 - 검은색 테두리 제거 및 확대

처음에는 iframe의 border나 outline을 제거하면 해결될 것이라 생각했으나, 원인은 PDF 문서 자체의 여백이었다. 이 문제를 해결하기 위해 transform: scale()을 사용하여 iframe을 확대하고, overflow 속성을 조정했다.

<div key={index} className='overflow-hidden rounded-2xl'>
    <iframe
      src={preview.url}
      title='PDF 미리보기'
      className='h-[100px] w-[100px] scale-110'
  	/>
</div>

 

문제 해결 - 인터랙션 방지

iframe 안에서 스크롤이 발생하지 않도록, pointer-events: none 속성을 사용해 사용자 인터랙션을 차단했다.

<div key={index} className='overflow-hidden rounded-2xl'>
    <iframe
      src={preview.url}
      title='PDF 미리보기'
      className='h-[100px] w-[100px] scale-110 pointer-events-none'
  	/>
</div>

 

마무리

이 과정에서 PDF 미리보기에 필요한 여러 문제를 해결할 수 있었다. 앞으로도 이미지와 PDF를 자주 업로드하거나 미리보기하는 기능이 요구된다면, 이를 최적화할 플러그인을 도입하는 것도 좋은 방법일 것이다.