공유하기 페이지의 저장하기 기능을 구현하는것에 외부 라이브러리를 사용했습니다.

html-to-image 1.11.3v

보통 html2canvas를 사용하나, html2canvas에 비해 가볍고 타입스크립트를 지원하고, 리액트 컴포넌트를 이미지로 반환하는것에 최적화 되어있어 이를 선택했습니다.

import { type RefObject } from 'react';
import { toPng } from 'html-to-image';

/**
 * DOM 요소를 이미지로 캡처하고 다운로드하는 훅
 * @param elementRef 캡처할 DOM 요소의 ref
 * @param filename 다운로드할 파일명 (기본값: 'capture.png')
 * @returns 캡처 및 다운로드를 실행하는 함수
 */
export const useCaptureImage = (
  elementRef: RefObject<HTMLElement>,
  filename: string = 'capture.png',
) => {
  const captureImage = async () => {
    if (!elementRef.current) {
      console.error('캡처할 요소를 찾을 수 없습니다.');
      return;
    }

    try {
      const dataUrl = await toPng(elementRef.current, {
        quality: 1.0,
        pixelRatio: 2,
        backgroundColor: '#ffffff',
      });

      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } catch (error) {
      console.error('이미지 캡처 중 오류 발생:', error);
      alert('이미지 저장 중 오류가 발생했습니다.');
    }
  };

  return captureImage;
};

다음과 같이 커스텀훅 파일을 구현했습니다.

이후 타입파일을 따로 만들어

캡쳐 옵션 인터페이스, toPng 등의 타입을 지정하였습니다.

그리고 이를 useRef를 사용하여 SharingPage에 연결하였습니다.

+리턴값에 복사하기 기능도 추가하여, 함께 구현완료 하였습니다.