From 1f2c4e8e95674fbefa69754e9a413b3e5347872e Mon Sep 17 00:00:00 2001 From: "hehihoho3@gmail.com" Date: Tue, 21 Jul 2026 10:50:46 +0900 Subject: [PATCH] =?UTF-8?q?feat(comment-cards):=20=EB=82=B4=EC=9A=A9=20?= =?UTF-8?q?=EA=B8=80=EC=9E=90=20=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=88=20?= =?UTF-8?q?+=20=EB=B0=B0=EA=B2=BD=EC=83=89(=ED=9D=B0/=EA=B2=80)=20?= =?UTF-8?q?=EC=98=B5=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 카드 레이아웃은 유지한 채 댓글 내용 텍스트만 확대/축소하는 A−/A+ 스테퍼와, 배경을 기본→흰색→검정 순환하는 토글 추가. 검정 배경일 때 글자는 흰색으로 대비 확보. 배율은 카드 인라인 변수(--cc-text-scale)로 지정해 재렌더·PNG 캡처에도 그대로 반영됨. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/main/resources/static/js/comment-cards.js | 32 +++++++++++++++++++ .../resources/templates/comment-cards.html | 22 +++++++++++-- 2 files changed, 52 insertions(+), 2 deletions(-) diff --git a/src/main/resources/static/js/comment-cards.js b/src/main/resources/static/js/comment-cards.js index b35d13f..c2c241d 100644 --- a/src/main/resources/static/js/comment-cards.js +++ b/src/main/resources/static/js/comment-cards.js @@ -5,6 +5,8 @@ let mosaicOn = true; // 프로필·아이디 모자이크 기본 ON let roundedOn = false; // 모서리 둥글게 토글(기본: 각진 모서리) let wordMaskOn = true; // 단어 가리기 기본 ON(단어 클릭=가림). 끄면 카드 클릭=복사. + let textScale = 1; // 내용 글자 크기 배율(카드 크기는 유지, .cc-text만 확대/축소) + let bgMode = 'default'; // 카드 배경: default|white|black (black이면 글자 흰색) let dirHandle = null; // 저장 폴더(File System Access API). null이면 브라우저 다운로드 폴백. let dirOptOut = false; // 사용자가 폴더 지정을 직접 해제 → '전체 저장' 시 다시 묻지 않음 const savedIds = new Set(); // 이미 저장한 댓글 id(재렌더·필터 변경에도 표시 유지) @@ -120,7 +122,9 @@ card.className = 'comment-card' + (mosaicOn ? ' mosaic' : '') + (roundedOn ? ' rounded' : '') + + (bgMode === 'white' ? ' bg-white' : bgMode === 'black' ? ' bg-black' : '') + (savedIds.has(c.__id) ? ' saved' : ''); // 이미 저장한 카드는 회색 톤 유지 + if (textScale !== 1) card.style.setProperty('--cc-text-scale', String(textScale)); card.dataset.index = i; card.dataset.cid = c.__id; @@ -630,6 +634,34 @@ $('cardGrid').classList.toggle('wordmask', wordMaskOn); }); + // 내용 글자 크기: 카드는 그대로, .cc-text만 배율 조정(재렌더·캡처에도 유지되도록 카드 인라인 변수) + function applyTextScale() { + $('ccFontLabel').textContent = Math.round(textScale * 100) + '%'; + document.querySelectorAll('#cardGrid .comment-card').forEach(el => + el.style.setProperty('--cc-text-scale', String(textScale))); + } + $('ccFontDown').addEventListener('click', () => { + textScale = Math.max(0.6, +(textScale - 0.1).toFixed(2)); + applyTextScale(); + }); + $('ccFontUp').addEventListener('click', () => { + textScale = Math.min(2, +(textScale + 0.1).toFixed(2)); + applyTextScale(); + }); + + // 배경색: 기본 → 흰색 → 검정 순환. 검정이면 글자는 흰색(대비). + const BG_MODES = ['default', 'white', 'black']; + const BG_LABEL = { default: '배경: 기본', white: '배경: 흰색', black: '배경: 검정' }; + $('ccBg').addEventListener('click', () => { + bgMode = BG_MODES[(BG_MODES.indexOf(bgMode) + 1) % BG_MODES.length]; + $('ccBg').textContent = BG_LABEL[bgMode]; + setToggle($('ccBg'), bgMode !== 'default'); + document.querySelectorAll('#cardGrid .comment-card').forEach(el => { + el.classList.toggle('bg-white', bgMode === 'white'); + el.classList.toggle('bg-black', bgMode === 'black'); + }); + }); + $('ccPickDir').addEventListener('click', pickDir); $('ccSaveAll').addEventListener('click', saveAllVisible); // 폴더 저장 미지원 브라우저(파이어폭스/사파리)면 폴더 버튼 숨김 → 전체 저장은 다운로드 폴백 diff --git a/src/main/resources/templates/comment-cards.html b/src/main/resources/templates/comment-cards.html index 7b6174a..4167527 100644 --- a/src/main/resources/templates/comment-cards.html +++ b/src/main/resources/templates/comment-cards.html @@ -41,7 +41,19 @@ .cc-meta { flex:1; min-width:0; } .cc-author { font-weight:600; font-size:13.5px; color:var(--text); } .cc-time { font-size:11.5px; color:var(--text-2); margin-left:.4rem; } - .cc-text { font-size:14px; color:var(--text); margin-top:.35rem; white-space:pre-wrap; word-break:break-word; line-height:1.5; } + /* 내용 글자 크기: 카드 레이아웃은 그대로 두고 텍스트만 확대/축소(--cc-text-scale, 카드 인라인에 지정) */ + .cc-text { font-size:calc(14px * var(--cc-text-scale, 1)); color:var(--text); margin-top:.35rem; white-space:pre-wrap; word-break:break-word; line-height:1.5; } + /* 배경색 옵션: 흰색/검정. 검정이면 글자는 흰색 계열로 대비 확보 */ + .comment-card.bg-white { background:#ffffff; border-color:#e5e5e5; } + .comment-card.bg-white .cc-author, .comment-card.bg-white .cc-text { color:#0f0f0f; } + .comment-card.bg-white .cc-time, .comment-card.bg-white .cc-stats { color:#606060; } + .comment-card.bg-black { background:#000000; border-color:#333333; } + .comment-card.bg-black .cc-author, .comment-card.bg-black .cc-text { color:#ffffff; } + .comment-card.bg-black .cc-time, .comment-card.bg-black .cc-stats { color:#aaaaaa; } + /* 글자 크기 스테퍼 */ + .cc-fontsize { display:inline-flex; align-items:center; gap:.35rem; } + .cc-fontsize .cc-btn { min-width:38px; padding:.55rem .6rem; } + .cc-fontsize #ccFontLabel { font-size:12px; color:var(--text-2); min-width:3.2ch; text-align:center; font-variant-numeric:tabular-nums; } .cc-stats { font-size:12px; color:var(--text-2); margin-top:.5rem; display:flex; gap:1rem; font-variant-numeric:tabular-nums; } .comment-card { cursor:pointer; } /* 저장 버튼 — cc-noexport라 캡처 이미지에서 제외됨 */ @@ -137,6 +149,12 @@ + + + 100% + + + @@ -152,7 +170,7 @@ - +