diff --git a/src/main/resources/static/js/comment-cards.js b/src/main/resources/static/js/comment-cards.js index ecd934c..022f469 100644 --- a/src/main/resources/static/js/comment-cards.js +++ b/src/main/resources/static/js/comment-cards.js @@ -75,6 +75,48 @@ if (window.lucide) window.lucide.createIcons(); }; + async function captureBlob(cardEl) { + // modern-screenshot UMD 전역: window.modernScreenshot + const ms = window.modernScreenshot; + if (!ms || !ms.domToBlob) throw new Error('캡처 라이브러리 로드 실패'); + // backgroundColor:null → 카드 바깥 투명. scale 2 → 또렷하게. + return await ms.domToBlob(cardEl, { backgroundColor: null, scale: 2 }); + } + + function downloadBlob(blob) { + const a = document.createElement('a'); + a.href = URL.createObjectURL(blob); + a.download = 'comment-card.png'; + a.click(); + URL.revokeObjectURL(a.href); + } + + window.copyCard = async function (cardEl, btnEl) { + const original = btnEl.textContent; + btnEl.disabled = true; btnEl.textContent = '복사 중…'; + try { + const blob = await captureBlob(cardEl); + if (navigator.clipboard && window.ClipboardItem) { + await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]); + btnEl.textContent = '복사됨 ✓'; + } else { + downloadBlob(blob); + btnEl.textContent = '다운로드됨'; + } + } catch (e) { + // 클립보드 권한 거부 등 → 다운로드 폴백 + try { + const blob = await captureBlob(cardEl); + downloadBlob(blob); + btnEl.textContent = '다운로드됨'; + } catch (e2) { + btnEl.textContent = '실패'; + } + } finally { + setTimeout(() => { btnEl.disabled = false; btnEl.textContent = original; }, 1500); + } + }; + async function fetchComments() { const url = $('ccUrl').value.trim(); if (!url) return; diff --git a/src/main/resources/templates/comment-cards.html b/src/main/resources/templates/comment-cards.html index 174de44..764123b 100644 --- a/src/main/resources/templates/comment-cards.html +++ b/src/main/resources/templates/comment-cards.html @@ -64,7 +64,7 @@ - +