diff --git a/src/main/resources/static/js/comment-cards.js b/src/main/resources/static/js/comment-cards.js
index ffa887e..b35d13f 100644
--- a/src/main/resources/static/js/comment-cards.js
+++ b/src/main/resources/static/js/comment-cards.js
@@ -160,7 +160,7 @@
saveBtn.type = 'button';
saveBtn.className = 'cc-iconbtn';
saveBtn.addEventListener('click', (e) => { e.stopPropagation(); window.downloadCard(card, c); });
- setSaveBtn(saveBtn, savedIds.has(c.__id));
+ setSaveBtn(saveBtn, savedIds.has(c.__id), false);
actions.appendChild(saveBtn);
card.appendChild(head);
@@ -371,15 +371,16 @@
/* ------------------------- 캡처/복사/저장 ------------------------- */
- // 카드 저장 버튼의 저장 전/후 모습
- function setSaveBtn(btn, saved) {
+ // 카드 저장 버튼의 저장 전/후 모습.
+ // renderCards 루프에서는 renderIcons=false — 아이콘은 렌더 끝에 한 번만 그린다(카드 수만큼 전체 스캔 방지).
+ function setSaveBtn(btn, saved, renderIcons) {
btn.classList.toggle('saved', saved);
btn.innerHTML = saved
? ' 저장됨'
: ' 저장';
btn.setAttribute('aria-label', saved ? '저장 완료 (다시 저장하려면 클릭)' : 'PNG 파일로 저장');
btn.title = saved ? '이미 저장한 카드 · 다시 저장하려면 클릭' : 'PNG 파일로 저장 (캡컷에서 불러오기)';
- if (window.lucide) window.lucide.createIcons();
+ if (renderIcons && window.lucide) window.lucide.createIcons();
}
// 저장 완료 표시: 카드 회색 톤(.saved) + 버튼 '저장됨'. 캡처 이미지엔 반영 안 됨(captureBlob에서 제외).
@@ -388,7 +389,7 @@
if (cid !== undefined) savedIds.add(Number(cid));
cardEl.classList.add('saved');
const btn = cardEl.querySelector('.cc-actions .cc-iconbtn');
- if (btn) setSaveBtn(btn, true);
+ if (btn) setSaveBtn(btn, true, true);
}
async function captureBlob(cardEl) {
diff --git a/src/main/resources/templates/comment-cards.html b/src/main/resources/templates/comment-cards.html
index 00f6625..7b6174a 100644
--- a/src/main/resources/templates/comment-cards.html
+++ b/src/main/resources/templates/comment-cards.html
@@ -50,10 +50,13 @@
border-radius:6px; font-size:12px; font-weight:600; padding:.4rem .6rem; cursor:pointer;
line-height:1; min-height:32px; display:inline-flex; align-items:center; gap:.25rem; }
.cc-iconbtn:hover { color:var(--text); border-color:var(--primary, #6366f1); }
- /* 저장 완료 표시 — 화면 전용(캡처 시 .saved를 벗겨서 찍으므로 PNG엔 안 남음) */
- .comment-card.saved { background:var(--surface-2); border-color:var(--border);
- box-shadow:inset 3px 0 0 var(--text-3); opacity:.9; }
- .cc-iconbtn.saved { background:var(--surface); color:var(--text-3); }
+ /* 저장 완료 표시 — 화면 전용(캡처 시 .saved를 벗겨서 찍으므로 PNG엔 안 남음)
+ surface-2는 다크 테마에서 차이가 거의 없어, 텍스트 색을 섞어 두 테마 모두에서 확실히 회색이 되게 함 */
+ .comment-card.saved { background:var(--surface-2);
+ background:color-mix(in srgb, var(--text) 14%, var(--surface));
+ border-color:var(--text-3); box-shadow:inset 4px 0 0 var(--primary); opacity:.72; }
+ .comment-card.saved:hover { opacity:.9; }
+ .cc-iconbtn.saved { background:var(--surface); color:var(--text-3); border-color:var(--text-3); }
/* 복사 완료 토스트 — 카드 밖(body)에 떠서 캡처 이미지에 안 찍힘 */
.cc-toast { position:fixed; left:50%; bottom:2rem; transform:translateX(-50%) translateY(1rem);
background:var(--text); color:var(--surface); padding:.6rem 1.1rem; border-radius:999px;