- Edit src/App.jsx and save to test HMR
-
- Click on the Vite and React logos to learn more -
- - ) +function downloadCard(cardEl, filename) { + if (window.html2canvas) { + window.html2canvas(cardEl, { + scale: 2, useCORS: true, backgroundColor: null, width: 800, height: 800 + }).then(canvas => { + const link = document.createElement("a"); + link.download = filename + ".png"; + link.href = canvas.toDataURL("image/png"); + link.click(); + }); + } } -export default App +const SHARE_MESSAGES = {}; + +function Card({ data, onClose }) { + const cardRef = useRef(null); + const [downloading, setDownloading] = useState(false); + const shareMsg = SHARE_MESSAGES[data.id] || ""; + const d = data; + + const handleDownload = useCallback(async () => { + if (!cardRef.current) return; + setDownloading(true); + + if (!window.html2canvas) { + await new Promise((resolve, reject) => { + const s = document.createElement("script"); + s.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"; + s.onload = resolve; + s.onerror = reject; + document.head.appendChild(s); + }); + } + + try { + const canvas = await window.html2canvas(cardRef.current, { + scale: 2, useCORS: true, backgroundColor: null, width: 800, height: 800 + }); + const link = document.createElement("a"); + link.download = `묵상_${d.month}월${d.day}일_${d.title}.png`; + link.href = canvas.toDataURL("image/png"); + link.click(); + } catch(e) { + console.error(e); + alert("이미지 저장에 실패했습니다. 브라우저 스크린샷을 이용해 주세요."); + } + setDownloading(false); + }, [d]); + + return ( ++ 카드를 클릭하면 SNS 공유용 이미지를 확인하고 저장할 수 있습니다 +
+