덱 목록 무한 스크롤과 WebP 썸네일 최적화 추가

- 내 덱·공개 덱 목록을 무한 스크롤로 전환(공용 페이저 모듈 추가)
- 즐겨찾기 토글 시 카드만 in-place 갱신해 스크롤 위치 유지
- 저장 시 420px WebP 썸네일 생성·전송, 목록은 썸네일 우선 사용
- 삭제·미참조 정리에서 원본 PNG와 썸네일 함께 처리

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/changelog.md

@@ -1,5 +1,17 @@
 # 변경사항
 
+## v4.0.19
+
+### 덱 목록 무한 스크롤
+
+`내 덱 관리`와 `공개 덱` 목록이 무한 스크롤로 바뀌었습니다. 화면을 아래로 내리면 덱이 자동으로 이어서 나타나, 덱이 많아도 목록이 훨씬 가볍게 열립니다. 특정 덱은 검색으로 빠르게 찾을 수 있습니다.
+
+### 목록 이미지 로딩 최적화
+
+목록에서는 원본 대신 가벼운 썸네일 이미지를 사용하도록 개선했습니다. 이미지 용량이 크게 줄어 목록이 더 빠르게 표시되며, 썸네일을 길게 누르면 기존처럼 원본 크기로 크게 볼 수 있습니다.
+
+> 썸네일은 덱을 새로 저장할 때 생성됩니다. 이전에 저장한 덱은 다시 저장하면 최적화된 썸네일이 적용됩니다.
+
 ## v4.0.18
 
 ### 관리자 덱 관리 편의 복구

docs/history.md

@@ -1,5 +1,10 @@
 # 의사결정 이력
 
+## 2026-07-02 v4.0.19 — 덱 목록은 무한 스크롤 + WebP 썸네일 이원화
+
+💡 페이지네이션 대신 무한 스크롤로 초기 DOM 부담을 줄이되, 원본 1200px PNG를 목록마다 내려받는 대역폭 낭비를 없애기 위함.
+🔧 목록은 420px WebP 썸네일을 별도 저장(`<code>.thumb.webp`)해 우선 사용하고 확대 시에만 원본 PNG 사용, 썸네일 인코딩은 브라우저 canvas로 처리하고 미지원 시 원본으로 폴백.
+
 ## 2026-06-25 v4.0.17 — 공유 덱 카드는 imgSrc를 기준으로 복원
 
 💡 동일 `Number`의 일반·패러렐·프로모가 공존해 번호만으로는 원본 카드를 안정적으로 식별할 수 없기 때문.

docs/map.md

@@ -89,6 +89,9 @@ api/src/routes/decks.js
 덱 썸네일 확대
 script/deck-preview-hold.js
 
+덱 목록 무한 스크롤 페이저
+script/deck-list-pager.js
+
 이미지 PNG 변환
 script/image-utils.js
 

docs/spec.md

@@ -3,7 +3,7 @@
 ## 프로젝트 개요
 
 - 서비스명: `UNIARE - Union Arena Deck Builder`
-- 현재 버전: `v4.0.18`
+- 현재 버전: `v4.0.19`
 - 프론트: 정적 HTML, CSS, JavaScript
 - 백엔드: Express, SQLite(`better-sqlite3`)
 - 운영: Docker Compose 기반 Nginx + API
@@ -72,7 +72,10 @@
 - 카드 목록·덱 결과 화면에서 카드 이미지 로드 실패 시 폴백 이미지를 표시한다.
 - 아바타와 덱 미리보기는 API 데이터 디렉터리에 저장하며 Git에 포함하지 않는다.
 - 덱 저장 미리보기는 1200px 기준 PNG로 정규화한다.
-- 덱 삭제 시 해당 공유 코드의 미리보기 PNG도 함께 삭제한다.
+- 덱 저장 시 목록용 축소 썸네일을 420px WebP(`<shareCode>.thumb.webp`)로 함께 생성한다. (브라우저 WebP 인코딩 미지원 시 썸네일 생략, 원본으로 폴백)
+- 목록 화면(내 덱·공개 덱·관리자)은 썸네일을 우선 표시하고, 길게 눌러 확대할 때만 원본 PNG를 사용한다.
+- 내 덱·공개 덱 목록은 클라이언트 무한 스크롤(청크 24개)로 렌더링한다.
+- 덱 삭제·미참조 정리 시 해당 공유 코드의 원본 PNG와 썸네일 WebP를 함께 삭제한다.
 - 관리자는 DB에서 참조하지 않는 미리보기 파일을 조회하고 일괄 삭제할 수 있다.
 
 ## 브라우저 상태
@@ -223,6 +226,7 @@
 |---|---|---|---|
 | GET | `/api/v1/decks/presets` | 공개 | 공개 사용자 덱 목록 |
 | GET | `/api/v1/decks/:shareCode/preview` | 공개 | 덱 미리보기 PNG |
+| GET | `/api/v1/decks/:shareCode/thumbnail` | 공개 | 덱 목록용 축소 WebP 썸네일 |
 | GET | `/api/v1/decks/:shareCode` | 조건부 | 공개 덱 또는 소유 덱 상세 |
 | GET | `/api/v1/decks` | 회원 | 내 덱 목록 |
 | POST | `/api/v1/decks` | 회원 | 내 덱 저장과 공개 링크 생성 |

docs/update.md

@@ -1,5 +1,20 @@
 # 업데이트 이력
 
+## 2026-07-02 / v4.0.19 — 덱 목록 무한 스크롤·WebP 썸네일
+
+### 수행 작업
+- 공용 무한 스크롤 페이저 모듈 `script/deck-list-pager.js` 추가 (IntersectionObserver 기반, 청크 24개, 하단 근접 시 이어붙임, 미지원 시 전체 렌더 폴백)
+- `preset.html`, `deckHistory.html` 덱 목록을 무한 스크롤로 전환해 대량 덱에서도 초기 DOM 렌더 부담 완화
+- 즐겨찾기 토글 시 전체 리렌더 대신 해당 카드만 in-place 갱신해 스크롤 위치 유지(즐겨찾기 필터 모드에서는 리렌더 유지)
+- 저장 시 클라이언트가 원본(1200px PNG)과 함께 목록용 축소 썸네일(420px WebP, 품질 0.82)을 생성·전송 (`result.html`)
+- API가 썸네일을 `<shareCode>.thumb.webp`로 저장하고 `GET /decks/:shareCode/thumbnail` 및 응답 `thumbnail_url`/`thumbnailUrl` 제공
+- 목록 화면(내 덱·공개 덱·관리자)은 썸네일 우선 표시, 길게 눌러 확대할 때만 원본 사용
+- 덱 삭제·미참조 정리(orphan)가 원본 PNG와 썸네일 WebP를 함께 처리하도록 확장
+
+### 검증
+- 서버 모듈 `node --check` 문법 검증 통과 (previewImage.js, decks.js, admin.js)
+- 프론트 lint 확인(신규/수정 파일 오류 없음, 기존 Tailwind 경고만 잔존)
+
 ## 2026-06-25 / v4.0.18 — 누락 이미지 폴백·공유 덱 매핑 보정
 
 ### 수행 작업