IOS safari 환경의 clipboard API 제한 대응

clipboard.js

  const [imageBlob, setImageBlob] = useState<Blob | null>(null);
  const imageRef = useRef<HTMLDivElement>(null);

  const image = imageRef.current;
  const getImage = async (): Promise<Blob | null> => {
    if (!image) return null;
    try {
      const canvas = await html2canvas(image, { scale: 2 });
      return new Promise((resolve) => {
        canvas.toBlob((blob) => {
          if (!blob) {
            alert("이미지 파일이 생성되지 않았습니다.");
            resolve(null);
          } else {
            resolve(blob);
          }
        }, "image/png");
      });
    } catch (err) {
      console.log(`이미지 생성 중 에러 발생`, err);
      return null;
    }
  };

  useEffect(() => {
    if (image) getImage().then((blob) => setImageBlob(blob));
  }, [image]);
  
  // 버튼 onClick handler
  const handleCopyToClipboard = () => {
    if (!imageBlob) return;

    try {
      navigator.clipboard.write([
        new ClipboardItem({
          "image/png": imageBlob,
        }),
      ]);
      alert("이미지가 클립보드에 저장되었습니다.");
    } catch (err) {
      console.error("클립보드 복사 실패:", err);
      alert("클립보드 복사에 실패했습니다.");
    }
  };

  return (
    <button
      type="button"
      id="copy-button"
      onClick={handleCopyToClipboard}
    >
      클립보드에 복사
    </button>
    )