hehihoho3@gmail.com
20a7c0c0a2
카드가 수백~수천 장이라 원하는 댓글을 눈으로 찾기 어려웠다. 패널마다 검색창을 두고 모든 카드 섹션이 자기 전체 목록에서 필터링한다 — '더보기'로 안 펼친 카드도 검색되면 나온다. 캡처 누락 방지: 빌드/캡처는 wrapOf() 로 DOM에서 카드를 찾고 없으면 조용히 건너뛴다. 검색으로 선택 카드가 DOM에서 빠질 수 있으므로 buildAll 과 ytCC.capture 시작 시 clearSearch() 로 강제 해제한다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
41 lines
2.2 KiB
Markdown
41 lines
2.2 KiB
Markdown
# 댓글 선택 화면 검색(필터) — 설계
|
|
|
|
날짜: 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에서 빠진 채
|
|
빌드하면 카드가 누락되므로:
|
|
|
|
1. 섹션은 검색 전 렌더 수(`baseShown`)를 기억하고, 검색 해제 시 그만큼 복원한다.
|
|
(선택은 렌더된 카드에서만 가능 → 복원하면 선택 카드가 항상 DOM에 있음)
|
|
2. `buildAll` 시작 시(각 ID)와 `ytCC.capture` 시작 시 해당 패널의 검색을
|
|
강제 초기화(`clearSearch(hlId)`)한 뒤 캡처한다.
|
|
|
|
## 구현 구조
|
|
|
|
- `SECS = {hlId: [setFilter,…]}` — 패널별 섹션 필터 레지스트리.
|
|
`searchBar(hlId)`가 패널 생성 때 배열을 초기화하고, `cardSection()`이 자기
|
|
`setFilter(q)`를 등록한다(재렌더: grid 비우고 필터된 목록으로 다시 페이징).
|
|
- `cardSection` 소폭 리팩터: `more.remove()` → `display:none` 토글
|
|
(필터 해제 후 다시 필요할 수 있으므로).
|
|
- CSS: `.ccsearch` 몇 줄 (index.html).
|