Gatsby 이미지로 Medium의 이미지 미리보기 구현

Medium에서 블로그에 사용하는 확대 이미지 미리보기 기능은 사용자가 프로젝트의 이미지를 더 자세히 볼 수 있는 정말 좋은 방법입니다. 내 포트폴리오 사이트에 과거 프로젝트를 표시하기 위해 이 기능을 사용하고 싶었지만 React Medium Image Zoom 라이브러리와 Gatsby Image 도구의 호환성 간에 문제가 발생했습니다.

목표

Medium에서 "이미지 미리보기"줌 기능을 본 적이 있습니까? 이를 통해 사용자는 전체 이미지의 라이트박스 버전을 볼 수 있으며 전체 이미지를 보는 동안 허용되는 크기만큼 큰 이미지로 브라우저를 채울 수 있습니다.

이 이미지 확대/축소 기능을 복제하는 여러 React 라이브러리가 있지만 가장 많은 사용자와 가장 큰 지원 커뮤니티가 있는 것으로 보이는 것은 react-medium-image-zoom 라이브러리(Robert Pierce가 구축)입니다.

문제

React Medium Image Zoom을 사용하는 단계는 매우 간단합니다. 라이브러리를 React 프로젝트( npm i react-medium-image-zoom )에 추가하여 시작한 다음 Zoom을 원하는 구성 요소로 가져오고 이미지를 래핑합니다.


예시:

import React from 'react'
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

const MyComponent = () => (
  <Zoom>
    <img src="../images/example.jpg" width="500" />
  </Zoom>
)

export default MyComponent

그러나 Gatsby와 함께 사용하면 Gatsby 이미지와 함께 줌 기능을 사용하는 문제가 빠르게 분명해집니다. 개츠비 이미지가 더 이상 나타나지 않습니다! 운 좋게도 이것은 CSS 문제일 뿐이며 둘 다의 일부 기본 스타일과 관련이 있습니다.

해결

결국 Gatsby Image와 React Medium Zoom 라이브러리에 미리 구워진 스타일을 디버깅하고 둘 다 함께 일관되게 작동할 수 있도록 수정 사항을 구현하는 것입니다.


필수 CSS

// Set Gatsby Image className to 100% width and height
gatsbyImage {
  width: '100%',
  height: '100%'
}

// React Medium Image Zoom styling update to work with Gatsby Images
[data-rmiz-wrap='visible'], [data-rmiz-wrap='hidden'] {
    width: 100%;
    height: 100%;
    display: block;
}

결론

미디엄에서 볼 수 있는 이미지 줌 기능을 구현하는 것은 간단하고 많은 프로젝트에서 사용자 경험을 향상시키는 좋은 방법입니다. Gatsby 이미지로 이 기능을 구현하려고 하는 일부 사용자에게 도움이 되기를 바랍니다. 수정하는 것이 생각보다 훨씬 간단하지만 수행해야 할 작업을 파악하는 데 시간이 걸렸습니다.


추가 리소스

Mikal Mantis's one-component solution to the React Medium Image Zoom with Gatsby Image issue