From 114aeb15d54b6382a9115f8d3875e5ad49977de9 Mon Sep 17 00:00:00 2001 From: "hehihoho3@gmail.com" Date: Tue, 14 Jul 2026 12:55:12 +0900 Subject: [PATCH] =?UTF-8?q?fix(comment-cards):=20=EC=A0=80=EC=9E=A5=20?= =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=ED=9A=8C=EC=83=89=20=ED=86=A4=EC=9D=B4=20?= =?UTF-8?q?=EB=8B=A4=ED=81=AC=20=ED=85=8C=EB=A7=88=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=95=88=20=EB=B3=B4=EC=9D=B4=EB=8D=98=20=EB=AC=B8=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - surface-2는 다크에서 배경과 거의 같아 color-mix로 텍스트색을 섞어 확실한 회색으로 - 왼쪽 accent 바 + 흐림(opacity)로 저장 여부를 한눈에 구분 - 렌더 루프에서 카드마다 lucide.createIcons()를 호출하던 것 제거(전체 스캔 반복 방지) Co-Authored-By: Claude Opus 4.8 (1M context) --- src/main/resources/static/js/comment-cards.js | 11 ++++++----- src/main/resources/templates/comment-cards.html | 11 +++++++---- 2 files changed, 13 insertions(+), 9 deletions(-) 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;