🐛 사파리 브라우저 QR 복사 실패 관련 코드 수정

src/app/components/common/ShareModal.tsx

@@ -1,6 +1,6 @@
 import { Modal, Button } from 'antd'
-import React, { useRef } from 'react'
-import UrlInput from '@/app/components/accompany/UrlInput' // UrlInput 컴포넌트 임포트
+import React, { useRef, useState } from 'react'
+import UrlInput from '@/app/components/accompany/UrlInput'
 import { useCustomMessage } from '@/app/utils/alertUtils'
 import { usePathname } from 'next/navigation'
 import { QRCode } from 'antd'
@@ -17,34 +17,50 @@ const ShareModal: React.FC<ShareModalProps> = ({
   isOpen,
   onClose,
   customUrl,
-  // customUrlQrPath,
 }) => {
-  const { contextHolder, showSuccess } = useCustomMessage()
+  const { contextHolder, showSuccess, showWarning } = useCustomMessage()
   const pathname = usePathname()
   const defaultUrl = `${process.env.NEXT_PUBLIC_SELF_URL}${pathname}`
   const qrCodeRef = useRef<HTMLDivElement>(null)
+  const [qrCodeBlob, setQrCodeBlob] = useState<Blob | null>(null)
 
-  const handleCopyQRCode = async () => {
+  // 미리 QR 코드 이미지를 생성해놓습니다.
+  const generateQRCodeBlob = async () => {
     if (qrCodeRef.current) {
       try {
         const canvas = await html2canvas(qrCodeRef.current)
-        canvas.toBlob(async (blob) => {
+        canvas.toBlob((blob) => {
           if (blob) {
-            try {
-              const item = new ClipboardItem({ 'image/png': blob })
-              await navigator.clipboard.write([item])
-              showSuccess('QR 코드가 클립보드에 복사되었습니다!')
-            } catch (error) {
-              showSuccess('클립보드에 복사할 수 없습니다: ' + error)
-            }
+            setQrCodeBlob(blob)
           }
         })
       } catch (error) {
-        showSuccess(`${error}, QR 코드를 복사하는 중 오류가 발생했습니다.`)
+        showWarning('QR 코드를 생성하는 중 오류가 발생했습니다.')
       }
     }
   }
 
+  // 클릭 이벤트에서 직접 복사하도록 합니다.
+  const handleCopyQRCode = async () => {
+    if (qrCodeBlob) {
+      try {
+        const item = new ClipboardItem({ 'image/png': qrCodeBlob })
+        await navigator.clipboard.write([item])
+        showSuccess('QR 코드가 클립보드에 복사되었습니다!')
+      } catch (error) {
+        showWarning(
+          'Safari 브라우저가 클립보드 복사를 지원하지 않습니다. Chrome 브라우저를 사용해주세요.'
+        )
+      }
+    } else {
+      showWarning('QR 코드 이미지가 아직 준비되지 않았습니다.')
+    }
+  }
+
+  React.useEffect(() => {
+    generateQRCodeBlob()
+  }, [isOpen])
+
   return (
     <>
       {contextHolder}
@@ -68,7 +84,6 @@ const ShareModal: React.FC<ShareModalProps> = ({
             className='w-52 h-52 mx-auto flex items-center justify-center'
             ref={qrCodeRef} // QR 코드 영역을 참조
           >
-            {/* TODO : QR 내부에 우리 아이콘 넣기 */}
             <QRCode errorLevel='H' value={defaultUrl} icon='' size={200} />
           </div>
         </div>