From 0ee343ceca8fc38bf453be3e2bbf49860361623f Mon Sep 17 00:00:00 2001
From: "hehihoho3@gmail.com" <hehihoho3@gmail.com>
Date: Mon, 29 Jun 2026 17:07:13 +0900
Subject: [PATCH] =?UTF-8?q?feat(comment-cards):=20=EC=B9=B4=EB=93=9C=20PNG?=
 =?UTF-8?q?=20=ED=81=B4=EB=A6=BD=EB=B3=B4=EB=93=9C=20=EB=B3=B5=EC=82=AC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/main/resources/static/js/comment-cards.js | 42 +++++++++++++++++++
 .../resources/templates/comment-cards.html    |  2 +-
 2 files changed, 43 insertions(+), 1 deletion(-)

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 @@
 <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>