hehihoho3@gmail.com
af53219dcc
기본은 댓글 단어 클릭 시 해당 단어만 블러(다시 클릭 해제). '🖍 단어 가리기' 토글을 끄면 카드 클릭=이미지 복사로 전환. 블러는 캡처 PNG에도 그대로 반영됨. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
500 lines
21 KiB
JavaScript
500 lines
21 KiB
JavaScript
(function () {
|
|
window.__all = []; // 전체 수집 댓글(분석 기준)
|
|
window.__cards = []; // 호환용 별칭
|
|
window.__videoId = null; // 타임라인 링크용
|
|
let mosaicOn = true; // 프로필·아이디 모자이크 기본 ON
|
|
let roundedOn = false; // 모서리 둥글게 토글(기본: 각진 모서리)
|
|
let wordMaskOn = true; // 단어 가리기 기본 ON(단어 클릭=가림). 끄면 카드 클릭=복사.
|
|
|
|
const DISPLAY_CAP = 2000; // 카드 DOM 렌더 상한(브라우저 보호). 분석은 전체 기준.
|
|
|
|
const $ = (id) => document.getElementById(id);
|
|
|
|
function esc(s) {
|
|
const d = document.createElement('div');
|
|
d.textContent = String(s == null ? '' : s);
|
|
return d.innerHTML;
|
|
}
|
|
|
|
function timeAgo(iso) {
|
|
if (!iso) return '';
|
|
const then = new Date(iso).getTime();
|
|
if (isNaN(then)) return '';
|
|
const sec = Math.floor((Date.now() - then) / 1000);
|
|
const units = [['년', 31536000], ['개월', 2592000], ['일', 86400], ['시간', 3600], ['분', 60]];
|
|
for (const [label, s] of units) {
|
|
const v = Math.floor(sec / s);
|
|
if (v >= 1) return v + label + ' 전';
|
|
}
|
|
return '방금 전';
|
|
}
|
|
|
|
// YouTube textDisplay(HTML) → 안전한 평문 (태그 제거, <br>→줄바꿈)
|
|
function toPlainText(html) {
|
|
const tmp = document.createElement('div');
|
|
tmp.innerHTML = String(html).replace(/<br\s*\/?>/gi, '\n');
|
|
return tmp.textContent || '';
|
|
}
|
|
|
|
// URL/ID → videoId (백엔드 YoutubeVideoIdParser 미러)
|
|
function parseVideoId(s) {
|
|
s = (s || '').trim();
|
|
if (/^[A-Za-z0-9_-]{11}$/.test(s)) return s;
|
|
const pats = [
|
|
/[?&]v=([A-Za-z0-9_-]{11})/,
|
|
/youtu\.be\/([A-Za-z0-9_-]{11})/,
|
|
/\/shorts\/([A-Za-z0-9_-]{11})/,
|
|
/\/embed\/([A-Za-z0-9_-]{11})/,
|
|
];
|
|
for (const p of pats) { const m = s.match(p); if (m) return m[1]; }
|
|
return null;
|
|
}
|
|
|
|
// 제외 단어: 쉼표/공백으로 구분. 하나라도 포함된 댓글은 카드·분석 모두에서 제외.
|
|
function getExcludeTerms() {
|
|
const raw = ($('ccExclude') && $('ccExclude').value) || '';
|
|
return raw.split(/[,\s]+/).map(s => s.trim().toLowerCase()).filter(Boolean);
|
|
}
|
|
function excludeComments(list, terms) {
|
|
if (!terms || !terms.length) return list;
|
|
return list.filter(c => {
|
|
const t = toPlainText(c.text).toLowerCase();
|
|
return !terms.some(term => t.includes(term));
|
|
});
|
|
}
|
|
function debounce(fn, ms) {
|
|
let h = null;
|
|
return function () { clearTimeout(h); h = setTimeout(fn, ms); };
|
|
}
|
|
|
|
// 댓글 텍스트를 단어 span으로 분해(공백/줄바꿈 보존). 단어 가리기 ON일 때 클릭하면 해당 단어만 블러.
|
|
function buildWords(el, plain) {
|
|
el.textContent = '';
|
|
for (const p of plain.split(/(\s+)/)) {
|
|
if (!p) continue;
|
|
if (/^\s+$/.test(p)) { el.appendChild(document.createTextNode(p)); continue; }
|
|
const s = document.createElement('span');
|
|
s.className = 'cc-word';
|
|
s.textContent = p;
|
|
s.addEventListener('click', (e) => {
|
|
if (!wordMaskOn) return; // 꺼짐 모드: 무시 → 이벤트 버블 → 카드 클릭=복사
|
|
e.stopPropagation();
|
|
s.classList.toggle('masked');
|
|
});
|
|
el.appendChild(s);
|
|
}
|
|
}
|
|
|
|
function applyFilterSort(cards) {
|
|
const sort = $('ccSort').value;
|
|
const minLikes = parseInt($('ccMinLikes').value, 10) || 0;
|
|
const repliesOnly = $('ccRepliesOnly').checked;
|
|
const q = ($('ccSearch').value || '').trim().toLowerCase();
|
|
let list = cards.filter(c =>
|
|
(c.likeCount || 0) >= minLikes &&
|
|
(!repliesOnly || (c.replyCount || 0) > 0) &&
|
|
(!q || toPlainText(c.text).toLowerCase().includes(q)) // 내용에만 매칭
|
|
);
|
|
if (sort === 'likes') list.sort((a, b) => (b.likeCount || 0) - (a.likeCount || 0));
|
|
else if (sort === 'replies') list.sort((a, b) => (b.replyCount || 0) - (a.replyCount || 0));
|
|
else if (sort === 'latest') list.sort((a, b) => new Date(b.publishedAt) - new Date(a.publishedAt));
|
|
return list;
|
|
}
|
|
|
|
window.renderCards = function () {
|
|
const grid = $('cardGrid');
|
|
const base = excludeComments(window.__all, getExcludeTerms());
|
|
let list = applyFilterSort(base);
|
|
const total = list.length;
|
|
const capped = total > DISPLAY_CAP;
|
|
if (capped) list = list.slice(0, DISPLAY_CAP);
|
|
$('ccCount').textContent = total.toLocaleString() + '개'
|
|
+ (capped ? ' (상위 ' + DISPLAY_CAP.toLocaleString() + '개 표시)' : '');
|
|
grid.classList.toggle('wordmask', wordMaskOn);
|
|
grid.innerHTML = '';
|
|
list.forEach((c, i) => {
|
|
const card = document.createElement('div');
|
|
card.className = 'comment-card'
|
|
+ (mosaicOn ? ' mosaic' : '')
|
|
+ (roundedOn ? ' rounded' : '');
|
|
card.dataset.index = i;
|
|
|
|
const avatarSrc = c.profileImageUrl
|
|
? '/api/comment-cards/avatar?url=' + encodeURIComponent(c.profileImageUrl)
|
|
: '';
|
|
|
|
const head = document.createElement('div');
|
|
head.className = 'cc-head';
|
|
head.innerHTML =
|
|
'<img class="cc-avatar" crossorigin="anonymous" alt="" src="' + avatarSrc + '">' +
|
|
'<div class="cc-meta">' +
|
|
'<div><span class="cc-author"></span><span class="cc-time"></span></div>' +
|
|
'<div class="cc-text"></div>' +
|
|
'<div class="cc-stats"><span>👍 ' + (c.likeCount || 0).toLocaleString() + '</span>' +
|
|
'<span>💬 ' + (c.replyCount || 0).toLocaleString() + '</span></div>' +
|
|
'</div>';
|
|
head.querySelector('.cc-author').textContent = c.authorName || '';
|
|
head.querySelector('.cc-time').textContent = timeAgo(c.publishedAt);
|
|
buildWords(head.querySelector('.cc-text'), toPlainText(c.text));
|
|
|
|
// 단어 가리기 ON: 카드 클릭 복사 잠금(단어 클릭으로 가림). OFF: 카드 클릭=복사.
|
|
card.title = '단어 클릭 = 가리기 · 토글을 끄면 카드 클릭 = 복사';
|
|
card.addEventListener('click', () => { if (wordMaskOn) return; window.copyCard(card); });
|
|
|
|
// 저장(다운로드) 버튼 — cc-noexport라 캡처 이미지엔 안 찍힘. 캡컷엔 이 파일을 불러오기.
|
|
const actions = document.createElement('div');
|
|
actions.className = 'cc-actions cc-noexport';
|
|
const saveBtn = document.createElement('button');
|
|
saveBtn.type = 'button';
|
|
saveBtn.className = 'cc-iconbtn';
|
|
saveBtn.textContent = '⬇ 저장';
|
|
saveBtn.title = 'PNG 파일로 저장 (캡컷에서 불러오기)';
|
|
saveBtn.addEventListener('click', (e) => { e.stopPropagation(); window.downloadCard(card, c); });
|
|
actions.appendChild(saveBtn);
|
|
|
|
card.appendChild(head);
|
|
card.appendChild(actions);
|
|
grid.appendChild(card);
|
|
});
|
|
if (window.lucide) window.lucide.createIcons();
|
|
};
|
|
|
|
/* ---------------------------------------------------------------------
|
|
* 분석 (전부 클라이언트 계산 — 추가 API 쿼터 0)
|
|
* ------------------------------------------------------------------- */
|
|
|
|
const KO_STOP = new Set(('그리고 그런데 그래서 하지만 그러나 그냥 정말 진짜 너무 완전 이거 저거 그거 이건 저건 그건 근데 ' +
|
|
'이렇게 저렇게 그렇게 하는 하고 해서 있는 있고 없는 같아요 같은 같다 되게 무슨 어떤 이런 저런 그런 여기 저기 거기 ' +
|
|
'우리 저는 제가 요즘 지금 오늘 내가 니가 네가 저도 나도 이제 그리 그럼 아니 아마 많이 조금 그때 이때 대한 위해 ' +
|
|
'부분 사람 생각 때문 정도 그게 이게 저게 그건데 뭔가 거의 계속 진짜로 그거는').split(/\s+/));
|
|
const EN_STOP = new Set(('the a an and or but if is are was were be been to of in on for it this that with you your my ' +
|
|
'me we he she they i so just not no yes at as by from about into out up down all can will do does did have has had ' +
|
|
'im its lol').split(/\s+/));
|
|
|
|
// 조사 꼬리 제거(휴리스틱) — 긴 것부터
|
|
const JOSA = ['으로써', '으로서', '에서는', '에게서', '이라는', '이라고', '으로', '로써', '로서', '에서', '에게', '한테',
|
|
'까지', '부터', '조차', '마저', '밖에', '처럼', '만큼', '보다', '이나', '이랑', '라는', '라고', '다는', '에는', '에도',
|
|
'든지', '이며', '이고', '은', '는', '이', '가', '을', '를', '에', '의', '도', '로', '과', '와', '만', '랑', '님', '들']
|
|
.sort((a, b) => b.length - a.length);
|
|
|
|
function stripJosa(w) {
|
|
for (const j of JOSA) {
|
|
if (w.length > j.length + 1 && w.endsWith(j)) return w.slice(0, -j.length);
|
|
}
|
|
return w;
|
|
}
|
|
|
|
function tokenize(text) {
|
|
const t = toPlainText(text).toLowerCase().replace(/https?:\/\/\S+/g, ' ');
|
|
const raw = t.replace(/[^\p{L}\p{N}\sㄱ-ㅎㅏ-ㅣ]/gu, ' ').split(/\s+/);
|
|
const out = [];
|
|
for (let w of raw) {
|
|
if (!w) continue;
|
|
if (/^[0-9]+$/.test(w)) continue; // 순수 숫자 제외
|
|
if (/[가-힣]/.test(w)) w = stripJosa(w); // 한글 어절이면 조사 제거
|
|
if (w.length < 2) continue;
|
|
if (KO_STOP.has(w) || EN_STOP.has(w)) continue;
|
|
out.push(w);
|
|
}
|
|
return out;
|
|
}
|
|
|
|
function computeWords(all, weighted) {
|
|
const map = new Map();
|
|
for (const c of all) {
|
|
const wt = weighted ? (1 + (c.likeCount || 0)) : 1;
|
|
for (const w of tokenize(c.text)) map.set(w, (map.get(w) || 0) + wt);
|
|
}
|
|
return [...map.entries()].sort((a, b) => b[1] - a[1]).slice(0, 20);
|
|
}
|
|
|
|
// 댓글 속 타임스탬프(mm:ss / h:mm:ss) 추출
|
|
const TS_RE = /(?<!\d)(\d{1,2}):([0-5]\d)(?::([0-5]\d))?(?!\d)/g;
|
|
function fmtTime(s) {
|
|
const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), ss = s % 60;
|
|
return (h ? h + ':' + String(m).padStart(2, '0') : m) + ':' + String(ss).padStart(2, '0');
|
|
}
|
|
function computeTimeline(all) {
|
|
const map = new Map();
|
|
for (const c of all) {
|
|
const txt = toPlainText(c.text);
|
|
let m; TS_RE.lastIndex = 0;
|
|
const seen = new Set(); // 한 댓글 내 같은 시각 중복 제거
|
|
while ((m = TS_RE.exec(txt))) {
|
|
const sec = m[3] !== undefined
|
|
? (+m[1]) * 3600 + (+m[2]) * 60 + (+m[3])
|
|
: (+m[1]) * 60 + (+m[2]);
|
|
if (seen.has(sec)) continue; seen.add(sec);
|
|
map.set(sec, (map.get(sec) || 0) + 1);
|
|
}
|
|
}
|
|
return [...map.entries()]
|
|
.sort((a, b) => b[1] - a[1]).slice(0, 15)
|
|
.map(([sec, cnt]) => ({ sec, cnt, label: fmtTime(sec) }));
|
|
}
|
|
|
|
function computeStats(all) {
|
|
let likes = 0, max = null;
|
|
const byAuthor = new Map(), byMonth = new Map();
|
|
for (const c of all) {
|
|
likes += c.likeCount || 0;
|
|
if (!max || (c.likeCount || 0) > (max.likeCount || 0)) max = c;
|
|
byAuthor.set(c.authorName, (byAuthor.get(c.authorName) || 0) + 1);
|
|
const mo = (c.publishedAt || '').slice(0, 7);
|
|
if (mo) byMonth.set(mo, (byMonth.get(mo) || 0) + 1);
|
|
}
|
|
const topAuthor = [...byAuthor.entries()].sort((a, b) => b[1] - a[1])[0];
|
|
const months = [...byMonth.entries()].sort((a, b) => a[0].localeCompare(b[0]));
|
|
return {
|
|
count: all.length, likes, avg: all.length ? likes / all.length : 0,
|
|
max, authors: byAuthor.size, topAuthor, months,
|
|
};
|
|
}
|
|
|
|
function tile(l, v) {
|
|
return '<div class="cc-tile"><div class="cc-tile-v">' + esc(v) + '</div><div class="cc-tile-l">' + esc(l) + '</div></div>';
|
|
}
|
|
function bar(label, val, max, suffix) {
|
|
const pct = max ? Math.max(4, Math.round(val / max * 100)) : 0;
|
|
return '<div class="cc-bar-row">'
|
|
+ '<span class="cc-bar-label">' + esc(label) + '</span>'
|
|
+ '<span class="cc-bar-track"><span class="cc-bar-fill" style="width:' + pct + '%"></span></span>'
|
|
+ '<span class="cc-bar-val">' + esc(val.toLocaleString()) + (suffix || '') + '</span></div>';
|
|
}
|
|
|
|
function renderAnalytics(all) {
|
|
const box = $('ccAnalytics');
|
|
const exTerms = getExcludeTerms();
|
|
all = excludeComments(all || [], exTerms);
|
|
if (!all.length) { box.style.display = 'none'; box.innerHTML = ''; return; }
|
|
|
|
const weighted = !!($('ccWeighted') && $('ccWeighted').checked);
|
|
const tlSort = ($('ccTlSort') && $('ccTlSort').value) || 'count';
|
|
const stats = computeStats(all);
|
|
let tl = computeTimeline(all); // 언급 많은 순 top-N 선별
|
|
if (tlSort === 'time') tl = tl.slice().sort((a, b) => a.sec - b.sec); // 선별본을 시간순 재정렬
|
|
const words = computeWords(all, weighted);
|
|
const vid = window.__videoId;
|
|
|
|
let html = '<div class="cc-an-head"><b>📊 분석</b> '
|
|
+ '<span class="cc-an-sub">' + all.length.toLocaleString() + '개 댓글 기준'
|
|
+ (exTerms.length ? ' · 제외어 적용' : '') + '</span>'
|
|
+ '<button type="button" class="cc-iconbtn" id="ccAnToggle">접기</button></div>'
|
|
+ '<div id="ccAnBody">';
|
|
|
|
html += '<div class="cc-tiles">'
|
|
+ tile('총 댓글', stats.count.toLocaleString())
|
|
+ tile('총 좋아요', stats.likes.toLocaleString())
|
|
+ tile('평균 좋아요', stats.avg.toFixed(1))
|
|
+ tile('참여자', stats.authors.toLocaleString() + '명')
|
|
+ '</div>';
|
|
|
|
// 타임라인
|
|
html += '<div class="cc-an-sec"><div class="cc-an-sechead"><h4>⏱ 많이 언급된 타임라인</h4>'
|
|
+ '<select id="ccTlSort" class="cc-mini-select">'
|
|
+ '<option value="count"' + (tlSort === 'count' ? ' selected' : '') + '>언급순</option>'
|
|
+ '<option value="time"' + (tlSort === 'time' ? ' selected' : '') + '>시간순</option>'
|
|
+ '</select></div>';
|
|
if (tl.length) {
|
|
const mx = tl[0].cnt;
|
|
html += '<div class="cc-bars">' + tl.map(t => {
|
|
const inner = bar(t.label, t.cnt, mx, '회');
|
|
return vid
|
|
? '<a class="cc-tl-link" href="https://www.youtube.com/watch?v=' + encodeURIComponent(vid) + '&t=' + t.sec + 's" target="_blank" rel="noopener">' + inner + '</a>'
|
|
: inner;
|
|
}).join('') + '</div>';
|
|
} else {
|
|
html += '<p class="cc-an-empty">댓글에 타임스탬프 언급이 없습니다.</p>';
|
|
}
|
|
html += '</div>';
|
|
|
|
// 단어
|
|
html += '<div class="cc-an-sec"><div class="cc-an-sechead"><h4>🔤 자주 나온 단어</h4>'
|
|
+ '<label class="cc-wlabel"><input type="checkbox" id="ccWeighted"' + (weighted ? ' checked' : '') + '> 좋아요 가중</label></div>';
|
|
if (words.length) {
|
|
const mx = words[0][1];
|
|
html += '<div class="cc-bars">' + words.map(([w, n]) => bar(w, Math.round(n), mx)).join('') + '</div>';
|
|
} else {
|
|
html += '<p class="cc-an-empty">분석할 단어가 부족합니다.</p>';
|
|
}
|
|
html += '</div>';
|
|
|
|
// 최다 좋아요 댓글
|
|
if (stats.max) {
|
|
html += '<div class="cc-an-sec"><h4>🏆 최다 좋아요 댓글</h4>'
|
|
+ '<div class="cc-top-comment"><b>' + esc(stats.max.authorName) + '</b> · 👍 '
|
|
+ (stats.max.likeCount || 0).toLocaleString()
|
|
+ '<div class="cc-top-text">' + esc(toPlainText(stats.max.text).slice(0, 200)) + '</div></div></div>';
|
|
}
|
|
|
|
// 월별 댓글량
|
|
if (stats.months.length > 1) {
|
|
const mx = Math.max(...stats.months.map(m => m[1]));
|
|
html += '<div class="cc-an-sec"><h4>📅 월별 댓글량</h4><div class="cc-months">'
|
|
+ stats.months.slice(-18).map(([mo, n]) =>
|
|
'<div class="cc-mo" title="' + esc(mo) + ': ' + n + '">'
|
|
+ '<span class="cc-mo-bar" style="height:' + Math.max(6, Math.round(n / mx * 70)) + 'px"></span>'
|
|
+ '<span class="cc-mo-lb">' + esc(mo.slice(2)) + '</span></div>').join('')
|
|
+ '</div></div>';
|
|
}
|
|
|
|
html += '</div>'; // #ccAnBody
|
|
box.innerHTML = html;
|
|
box.style.display = 'block';
|
|
|
|
const tgl = $('ccAnToggle');
|
|
if (tgl) tgl.addEventListener('click', () => {
|
|
const b = $('ccAnBody');
|
|
const hidden = b.style.display === 'none';
|
|
b.style.display = hidden ? '' : 'none';
|
|
tgl.textContent = hidden ? '접기' : '펼치기';
|
|
});
|
|
const wt = $('ccWeighted');
|
|
if (wt) wt.addEventListener('change', () => renderAnalytics(window.__all));
|
|
const tls = $('ccTlSort');
|
|
if (tls) tls.addEventListener('change', () => renderAnalytics(window.__all));
|
|
}
|
|
|
|
/* ------------------------- 캡처/복사/저장 ------------------------- */
|
|
|
|
async function captureBlob(cardEl) {
|
|
const ms = window.modernScreenshot;
|
|
if (!ms || !ms.domToBlob) throw new Error('캡처 라이브러리 로드 실패');
|
|
return await ms.domToBlob(cardEl, {
|
|
backgroundColor: null,
|
|
scale: 2,
|
|
filter: (node) => !(node instanceof Element && node.classList.contains('cc-noexport')),
|
|
});
|
|
}
|
|
|
|
function downloadBlob(blob) {
|
|
const a = document.createElement('a');
|
|
a.href = URL.createObjectURL(blob);
|
|
a.download = 'comment-card.png';
|
|
a.click();
|
|
URL.revokeObjectURL(a.href);
|
|
}
|
|
|
|
let toastTimer = null;
|
|
function showToast(msg) {
|
|
let t = document.getElementById('ccToast');
|
|
if (!t) {
|
|
t = document.createElement('div');
|
|
t.id = 'ccToast';
|
|
t.className = 'cc-toast';
|
|
document.body.appendChild(t);
|
|
}
|
|
t.textContent = msg;
|
|
t.classList.add('show');
|
|
if (toastTimer) clearTimeout(toastTimer);
|
|
toastTimer = setTimeout(() => t.classList.remove('show'), 1500);
|
|
}
|
|
|
|
function buildFileName(c) {
|
|
var who = (c && c.authorName) ? c.authorName.replace(/[^\w가-힣]+/g, '').slice(0, 20) : 'card';
|
|
return 'comment-' + (who || 'card') + '.png';
|
|
}
|
|
|
|
window.downloadCard = async function (cardEl, c) {
|
|
if (cardEl.dataset.busy === '1') return;
|
|
cardEl.dataset.busy = '1';
|
|
try {
|
|
const blob = await captureBlob(cardEl);
|
|
const a = document.createElement('a');
|
|
a.href = URL.createObjectURL(blob);
|
|
a.download = buildFileName(c);
|
|
a.click();
|
|
URL.revokeObjectURL(a.href);
|
|
showToast('저장됨 ⬇ (캡컷에서 불러오기)');
|
|
} catch (e) {
|
|
showToast('저장 실패');
|
|
} finally {
|
|
setTimeout(() => { delete cardEl.dataset.busy; }, 600);
|
|
}
|
|
};
|
|
|
|
window.copyCard = async function (cardEl) {
|
|
if (cardEl.dataset.copying === '1') return; // 중복 클릭 방지
|
|
cardEl.dataset.copying = '1';
|
|
try {
|
|
const blob = await captureBlob(cardEl);
|
|
if (navigator.clipboard && window.ClipboardItem) {
|
|
await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
|
|
showToast('복사됨 ✓');
|
|
} else {
|
|
downloadBlob(blob);
|
|
showToast('다운로드됨');
|
|
}
|
|
} catch (e) {
|
|
// 클립보드 권한 거부 등 → 다운로드 폴백
|
|
try {
|
|
const blob = await captureBlob(cardEl);
|
|
downloadBlob(blob);
|
|
showToast('다운로드됨');
|
|
} catch (e2) {
|
|
showToast('복사 실패');
|
|
}
|
|
} finally {
|
|
setTimeout(() => { delete cardEl.dataset.copying; }, 600);
|
|
}
|
|
};
|
|
|
|
async function fetchComments() {
|
|
const url = $('ccUrl').value.trim();
|
|
if (!url) return;
|
|
window.__videoId = parseVideoId(url);
|
|
const btn = $('ccFetch');
|
|
btn.disabled = true; btn.textContent = '수집 중…';
|
|
$('ccEmpty').textContent = '전체 댓글을 모으는 중입니다. 댓글이 많으면 시간이 걸릴 수 있어요…';
|
|
try {
|
|
const res = await fetch('/api/comment-cards/fetch', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ url })
|
|
});
|
|
const json = await res.json();
|
|
if (!json.success) throw new Error(json.message || '가져오기 실패');
|
|
window.__all = json.data || [];
|
|
window.__cards = window.__all;
|
|
$('ccFilters').style.display = window.__all.length ? 'flex' : 'none';
|
|
$('ccEmpty').textContent = window.__all.length ? '' : '댓글이 없습니다.';
|
|
renderAnalytics(window.__all);
|
|
window.renderCards();
|
|
} catch (e) {
|
|
$('ccFilters').style.display = 'none';
|
|
$('ccAnalytics').style.display = 'none';
|
|
$('cardGrid').innerHTML = '';
|
|
$('ccEmpty').textContent = '⚠️ ' + e.message;
|
|
} finally {
|
|
btn.disabled = false; btn.textContent = '가져오기';
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
$('ccFetch').addEventListener('click', fetchComments);
|
|
$('ccUrl').addEventListener('keydown', (e) => { if (e.key === 'Enter') fetchComments(); });
|
|
['ccSearch', 'ccSort', 'ccMinLikes', 'ccRepliesOnly'].forEach(id =>
|
|
$(id).addEventListener('input', () => window.renderCards()));
|
|
// 제외 단어는 카드+분석 둘 다 갱신. 대량 댓글 대비 디바운스.
|
|
$('ccExclude').addEventListener('input', debounce(() => {
|
|
window.renderCards();
|
|
renderAnalytics(window.__all);
|
|
}, 250));
|
|
$('ccMosaic').addEventListener('click', () => {
|
|
mosaicOn = !mosaicOn;
|
|
$('ccMosaic').textContent = mosaicOn ? '모자이크 해제' : '전체 모자이크';
|
|
document.querySelectorAll('.comment-card').forEach(el => el.classList.toggle('mosaic', mosaicOn));
|
|
});
|
|
$('ccRounded').addEventListener('click', () => {
|
|
roundedOn = !roundedOn;
|
|
$('ccRounded').textContent = roundedOn ? '모서리 각지게' : '모서리 둥글게';
|
|
document.querySelectorAll('.comment-card').forEach(el => el.classList.toggle('rounded', roundedOn));
|
|
});
|
|
$('ccWordMask').addEventListener('click', () => {
|
|
wordMaskOn = !wordMaskOn;
|
|
$('ccWordMask').textContent = wordMaskOn ? '🖍 단어 가리기: 켜짐' : '🖍 단어 가리기: 꺼짐(복사)';
|
|
$('cardGrid').classList.toggle('wordmask', wordMaskOn);
|
|
});
|
|
});
|
|
})();
|