feat(comment-cards): 카드 PNG 클립보드 복사 추가

modern-screenshot로 카드 캡처→클립보드(투명배경, 모자이크 반영), 미지원 시 다운로드 폴백

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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;

src/main/resources/templates/comment-cards.html

@@ -64,7 +64,7 @@
 <th:block layout:fragment="script">
     <!-- DOM→이미지 캡처 (Task 5에서 사용). blur 필터 지원 위해 modern-screenshot 사용. -->
     <script src="https://cdn.jsdelivr.net/npm/modern-screenshot@4/dist/index.js"></script>
-    <script th:src="@{/js/comment-cards.js(v=20260629)}"></script>
+    <script th:src="@{/js/comment-cards.js(v=20260629b)}"></script>
 </th:block>
 </body>
 </html>