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;