hehihoho3@gmail.com
20a7c0c0a2
카드가 수백~수천 장이라 원하는 댓글을 눈으로 찾기 어려웠다. 패널마다 검색창을 두고 모든 카드 섹션이 자기 전체 목록에서 필터링한다 — '더보기'로 안 펼친 카드도 검색되면 나온다. 캡처 누락 방지: 빌드/캡처는 wrapOf() 로 DOM에서 카드를 찾고 없으면 조용히 건너뛴다. 검색으로 선택 카드가 DOM에서 빠질 수 있으므로 buildAll 과 ytCC.capture 시작 시 clearSearch() 로 강제 해제한다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2.2 KiB
2.2 KiB
댓글 선택 화면 검색(필터) — 설계
날짜: 2026-08-04 · 대상: server/static/auto.js, server/static/index.html (서버 변경 없음)
목적
댓글 선택 화면(자동 탭 ID 패널 + 유튜브 구간 탭 댓글 매칭)에서 수백~수천 장 카드 중 원하는 댓글을 텍스트로 찾을 수 있게 한다.
동작 (필터 방식)
- 각 패널 상단(선택 요약 바 아래, 카드 섹션 위)에 검색창 1개 + 지우기 ✕.
- 입력(디바운스 150ms) 시 그 패널의 모든 카드 섹션(컷별 ⭐추천 / ➕채우기)이 자기 전체 목록에서 일치하는 카드만 다시 그린다 — "더보기"로 안 펼친 카드도 일치하면 나온다. 일치가 많으면 기존처럼 30장 + 더보기.
- 일치 기준: 댓글 본문(HTML→평문) + 작성자 이름, 대소문자 무시.
댓글마다 검색용 평문을 1회 만들어 캐시(
c._st). - 일치 0장 섹션은 헤더째 숨김. 검색어를 지우면 원래 화면 복원.
- 선택 로직 불변: 카드는 원래 컷 섹션 소속이므로 클릭하면 그 컷에 들어간다. 선택 링·사용중 배지·"선택한 것만 보기"는 기존 그대로(검색과 AND).
캡처 누락 방지 (중요)
빌드/캡처는 wrapOf()로 DOM에서 카드를 찾고 없으면 조용히 건너뛴다
(buildAll, window.ytCC.capture). 검색 필터로 선택 카드가 DOM에서 빠진 채
빌드하면 카드가 누락되므로:
- 섹션은 검색 전 렌더 수(
baseShown)를 기억하고, 검색 해제 시 그만큼 복원한다. (선택은 렌더된 카드에서만 가능 → 복원하면 선택 카드가 항상 DOM에 있음) buildAll시작 시(각 ID)와ytCC.capture시작 시 해당 패널의 검색을 강제 초기화(clearSearch(hlId))한 뒤 캡처한다.
구현 구조
SECS = {hlId: [setFilter,…]}— 패널별 섹션 필터 레지스트리.searchBar(hlId)가 패널 생성 때 배열을 초기화하고,cardSection()이 자기setFilter(q)를 등록한다(재렌더: grid 비우고 필터된 목록으로 다시 페이징).cardSection소폭 리팩터:more.remove()→display:none토글 (필터 해제 후 다시 필요할 수 있으므로).- CSS:
.ccsearch몇 줄 (index.html).