지도(MapLibre) 위에 장소를 썸네일 카드로 얹어, 줌에 따라 연속적으로 뭉치고 풀리는(binary popping 없는) 오버레이 프로토타입. A prototype map overlay where places (as thumbnail cards) continuously cluster/decluster with zoom — no per-zoom-level popping.
npm install
npm run dev # 개발 서버(HMR) → http://localhost:5173
npm run build # 타입체크(tsc) + 프로덕션 번들 → dist/
npm run preview # 빌드 결과 로컬 서빙빌드·테스트(검증) 상세 → docs/BUILD_TEST.md
- 조작: 클릭=클러스터 펼침 / 빈 지도 클릭=전체 접힘 / Ctrl+드래그=카드 핀 / Space=진행 로드 시뮬 / m=빌드 측정.
- complete-linkage 응집형 덴드로그램을 1회 빌드 → 매 프레임 줌의 px 임계를 Mercator 높이로 환산해 연속 컷(union-find). compact · monotonic · continuous 동시 달성.
- 클라-측 클러스터링, 안정 id(멤버 다수결 상속), 전환(enter/exit/update), 공간해시 분리 O(K), frame-skip, clarity-zone 배치, 클릭 펼침, LOD(sector detail + overview 통합).
- 임시 프로토타입 — 정보의 표현/레이아웃만 다룸. 실데이터·검색·상세보기는 범위 밖. 더미 데이터(시드 고정)로 분포만 흉내.
- BUILD_TEST.md — 빌드 · 테스트(검증) 가이드
- HANDOFF.md — 동결 프로토타입 레퍼런스(성과·노브·버전·잔여)
- CLIENT.md — 클라 구현 세부(모듈·자료구조·파이프라인·노브) + 제품/테스트/도구 분류(§0.5)
- ADR-001-feedgrid-model.md — 서버·클라 모델 (확정본)
- DECISIONS.md — 프로토타입 클러스터 코어 결정(DEC-001 ~ 019)
| 파일 | 역할 |
|---|---|
src/clustering.ts |
ClusterEngine — 덴드로그램 빌드 + 연속 컷 + 안정 id + 클릭 펼침 |
src/layout.ts |
LabelLayout — 배치/충돌(공간해시)/전환, clarity-zone, 핀 |
src/overlay.ts |
DOM 카드(diff) + Canvas anchor/dot |
src/clusterWorker.ts |
off-thread 빌드(Web Worker) |
src/main.ts |
프레임 루프 · LOD · frame-skip · 인터랙션 · 노브 |
versions/ |
개발 스냅샷 히스토리 |