feat(comment-cards): 기본값을 검정 배경 + 둥근 모서리로 변경
카드 첫 렌더 시 배경 검정(글자 흰색) + 둥근 모서리가 적용되도록 초기값과 툴바 버튼 상태(활성 표시·레이블) 조정. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
1f2c4e8e95
commit
387cdc9400
@ -3,10 +3,10 @@
|
|||||||
window.__cards = []; // 호환용 별칭
|
window.__cards = []; // 호환용 별칭
|
||||||
window.__videoId = null; // 타임라인 링크용
|
window.__videoId = null; // 타임라인 링크용
|
||||||
let mosaicOn = true; // 프로필·아이디 모자이크 기본 ON
|
let mosaicOn = true; // 프로필·아이디 모자이크 기본 ON
|
||||||
let roundedOn = false; // 모서리 둥글게 토글(기본: 각진 모서리)
|
let roundedOn = true; // 모서리 둥글게 토글(기본: 둥근 모서리)
|
||||||
let wordMaskOn = true; // 단어 가리기 기본 ON(단어 클릭=가림). 끄면 카드 클릭=복사.
|
let wordMaskOn = true; // 단어 가리기 기본 ON(단어 클릭=가림). 끄면 카드 클릭=복사.
|
||||||
let textScale = 1; // 내용 글자 크기 배율(카드 크기는 유지, .cc-text만 확대/축소)
|
let textScale = 1; // 내용 글자 크기 배율(카드 크기는 유지, .cc-text만 확대/축소)
|
||||||
let bgMode = 'default'; // 카드 배경: default|white|black (black이면 글자 흰색)
|
let bgMode = 'black'; // 카드 배경 기본값: default|white|black (black이면 글자 흰색)
|
||||||
let dirHandle = null; // 저장 폴더(File System Access API). null이면 브라우저 다운로드 폴백.
|
let dirHandle = null; // 저장 폴더(File System Access API). null이면 브라우저 다운로드 폴백.
|
||||||
let dirOptOut = false; // 사용자가 폴더 지정을 직접 해제 → '전체 저장' 시 다시 묻지 않음
|
let dirOptOut = false; // 사용자가 폴더 지정을 직접 해제 → '전체 저장' 시 다시 묻지 않음
|
||||||
const savedIds = new Set(); // 이미 저장한 댓글 id(재렌더·필터 변경에도 표시 유지)
|
const savedIds = new Set(); // 이미 저장한 댓글 id(재렌더·필터 변경에도 표시 유지)
|
||||||
|
|||||||
@ -147,14 +147,14 @@
|
|||||||
<label style="font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:.3rem;">
|
<label style="font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:.3rem;">
|
||||||
<input type="checkbox" id="ccRepliesOnly" /> 답글 있는 것만</label>
|
<input type="checkbox" id="ccRepliesOnly" /> 답글 있는 것만</label>
|
||||||
<button class="cc-btn secondary active" id="ccMosaic" aria-pressed="true">모자이크 해제</button>
|
<button class="cc-btn secondary active" id="ccMosaic" aria-pressed="true">모자이크 해제</button>
|
||||||
<button class="cc-btn secondary" id="ccRounded" aria-pressed="false">모서리 둥글게</button>
|
<button class="cc-btn secondary active" id="ccRounded" aria-pressed="true">모서리 각지게</button>
|
||||||
<button class="cc-btn secondary active" id="ccWordMask" aria-pressed="true">단어 가리기: 켜짐</button>
|
<button class="cc-btn secondary active" id="ccWordMask" aria-pressed="true">단어 가리기: 켜짐</button>
|
||||||
<span class="cc-fontsize" role="group" aria-label="내용 글자 크기">
|
<span class="cc-fontsize" role="group" aria-label="내용 글자 크기">
|
||||||
<button class="cc-btn secondary" id="ccFontDown" aria-label="글자 작게" title="내용 글자 작게">A−</button>
|
<button class="cc-btn secondary" id="ccFontDown" aria-label="글자 작게" title="내용 글자 작게">A−</button>
|
||||||
<span id="ccFontLabel">100%</span>
|
<span id="ccFontLabel">100%</span>
|
||||||
<button class="cc-btn secondary" id="ccFontUp" aria-label="글자 크게" title="내용 글자 크게">A+</button>
|
<button class="cc-btn secondary" id="ccFontUp" aria-label="글자 크게" title="내용 글자 크게">A+</button>
|
||||||
</span>
|
</span>
|
||||||
<button class="cc-btn secondary" id="ccBg" aria-pressed="false" title="배경색: 기본 → 흰색 → 검정 순환">배경: 기본</button>
|
<button class="cc-btn secondary active" id="ccBg" aria-pressed="true" title="배경색: 기본 → 흰색 → 검정 순환">배경: 검정</button>
|
||||||
<button class="cc-btn secondary" id="ccPickDir" aria-pressed="false"
|
<button class="cc-btn secondary" id="ccPickDir" aria-pressed="false"
|
||||||
title="클릭: 저장 폴더 지정 · 다시 클릭: 해제(브라우저 다운로드 폴더로 저장)"><i data-lucide="folder"></i> <span id="ccPickDirName">저장 폴더</span></button>
|
title="클릭: 저장 폴더 지정 · 다시 클릭: 해제(브라우저 다운로드 폴더로 저장)"><i data-lucide="folder"></i> <span id="ccPickDirName">저장 폴더</span></button>
|
||||||
<button class="cc-btn secondary" id="ccSaveAll"><i data-lucide="download"></i> 전체 저장</button>
|
<button class="cc-btn secondary" id="ccSaveAll"><i data-lucide="download"></i> 전체 저장</button>
|
||||||
@ -170,7 +170,7 @@
|
|||||||
<th:block layout:fragment="script">
|
<th:block layout:fragment="script">
|
||||||
<!-- DOM→이미지 캡처 (Task 5에서 사용). blur 필터 지원 위해 modern-screenshot 사용. -->
|
<!-- DOM→이미지 캡처 (Task 5에서 사용). blur 필터 지원 위해 modern-screenshot 사용. -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/modern-screenshot@4/dist/index.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/modern-screenshot@4/dist/index.js"></script>
|
||||||
<script th:src="@{/js/comment-cards.js(v=20260721)}"></script>
|
<script th:src="@{/js/comment-cards.js(v=20260721b)}"></script>
|
||||||
</th:block>
|
</th:block>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user