hehihoho3/h-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(comment-cards): 댓글 내용 실시간 검색 필터 추가

Browse Source 
필터바에 검색 입력창 추가 → 입력 즉시 댓글 내용에 그 단어가 포함된 카드만 노출
(작성자 제외, 내용만 매칭). 클라이언트 필터라 추가 API 호출 없음. JS 캐시버스터 갱신.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
hehihoho3@gmail.com 2026-07-02 12:41:20 +09:00
parent 3a3eeef87a
commit b1b23a45f2
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/main/resources/static/js/comment-cards.js
View File

@ -28,7 +28,12 @@
const sort = $('ccSort').value;
const minLikes = parseInt($('ccMinLikes').value, 10) || 0;
const repliesOnly = $('ccRepliesOnly').checked;
let list = cards.filter(c => (c.likeCount || 0) >= minLikes && (!repliesOnly || (c.replyCount || 0) > 0));
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));
@ -200,7 +205,7 @@
document.addEventListener('DOMContentLoaded', () => {
$('ccFetch').addEventListener('click', fetchComments);
$('ccUrl').addEventListener('keydown', (e) => { if (e.key === 'Enter') fetchComments(); });
['ccSort', 'ccMinLikes', 'ccRepliesOnly'].forEach(id =>
['ccSearch', 'ccSort', 'ccMinLikes', 'ccRepliesOnly'].forEach(id =>
$(id).addEventListener('input', () => window.renderCards()));
$('ccMosaic').addEventListener('click', () => {
mosaicOn = !mosaicOn;

3
src/main/resources/templates/comment-cards.html
View File

@ -56,6 +56,7 @@
</div>
<div class="cc-toolbar" id="ccFilters" style="display:none;">
<input type="text" id="ccSearch" placeholder="🔍 댓글 내용 검색" style="min-width:180px;" />
<select id="ccSort">
<option value="likes">좋아요순</option>
<option value="replies">답글순</option>
@ -76,7 +77,7 @@
<th:block layout:fragment="script">
<!-- DOM→이미지 캡처 (Task 5에서 사용). blur 필터 지원 위해 modern-screenshot 사용. -->
<script src="https://cdn.jsdelivr.net/npm/modern-screenshot@4/dist/index.js"></script>
<script th:src="@{/js/comment-cards.js(v=20260630)}"></script>
<script th:src="@{/js/comment-cards.js(v=20260702)}"></script>
</th:block>
</body>
</html>