← 패치노트 목록으로
메이플스토리 연동
[코디엔진] 인기 코디 랭킹 목록 무한 스크롤(레이지 로딩) 및 스크롤 레이아웃 고도화
인기 코디 랭킹 목록에서 스크롤이 멈추거나 1페이지만 조회되던 현상을 해결하고, IntersectionObserver 기반의 초경량 레이지 로딩(무한 스크롤) 시스템을 적용하여 전체 650여 종의 랭킹 아이템을 매끄럽게 스크롤하며 확인할 수 있도록 개선했습니다.
작업 중
상태 변경 기록
변경 시점을 클릭하면 그때 게시된 내용을 볼 수 있습니다. 스냅샷 기능 도입(2026년 8월 25일) 이전 기록은 내용 복원이 불가합니다.
### 1. 무한 스크롤(레이지 로딩) 시스템 구축
- **IntersectionObserver 연동**: 랭킹 목록 하단에 뷰포트 센티넬을 배치하여, 사용자가 스크롤을 내릴 때마다 다음 페이지의 아이템(30개 단위)을 끊김 없이 부드럽게 자동 로드합니다.
- **스크롤 이벤트 보조 감지**: 빠른 휠 스크롤 시에도 잔여 높이를 계산하여 즉각적으로 다음 데이터를 이어 붙이는 듀얼 트리거 방식을 적용했습니다.
- **추가 로딩 인디케이터**: 추가 순위를 불러올 때 하단에 미니멀한 펄스 인디케이터를 표출하여 직관적인 로딩 피드백을 제공합니다.
### 2. 스크롤 컨테이너 및 Grid 제약 버그 개선
- CSS Grid 내부의 `min-h-0` 높이 제약과 독립 스크롤(`overflow-y-auto`, `overscroll-contain`)을 완벽히 보정하여 좌측 인기 아이템 목록과 우측 연관 캐릭터 갤러리가 각각 독립적으로 매끄럽게 스크롤되도록 최적화했습니다.

