페이지 로딩 모달이 사라지지 않는 문제
/stats/ 페이지에서 페이지 로딩 모달이 닫히지 않는 현상의 핵심 원인과 직접 적용한 해결책 요약
원인 분석
1) 중복된 Chart.js 로딩 (가장 큰 원인)
1
2
| <!-- stats/index.html에서 중복 로딩 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- 이 줄이 문제였음 -->
|
- 문제:
base.html에서 이미 Chart.js를 로딩하는데, stats에서 한 번 더 로딩함 - 결과: 스크립트 로딩 지연 →
window.load가 끝나도 실제 준비 미완료 - 해결: 중복 스크립트 태그 제거
2) Bootstrap Modal 내부 상태 충돌
1
2
3
| // 문제 상황
loadingModal._isTransitioning: true // 아직 전환 중
loadingModal._isShown: true // 보이는 상태
|
- 문제: 전환(transition) 중이라
hide()가 호출돼도 실제로 숨겨지지 않음 - 해결:
_isTransitioning이 끝날 때까지 대기 후 hide() 실행
3) window.load 이벤트의 한계
1
2
3
4
| // 잘못된 가정
window.addEventListener('load', function() {
// 모든 리소스가 완전히 로딩되었다고 가정 ❌
});
|
- 문제:
window.load는 동적 스크립트/차트 렌더 완료까지 보장하지 않음 - 해결: **
checkIfStillLoading()**으로 실제 로딩 상태를 확인
4) Stats 페이지의 Chart.js 의존성
1
2
3
4
5
6
| // Stats 페이지에서만 발생
if (pathname.includes('/stats/')) {
if (typeof Chart === 'undefined') {
return true; // 아직 로딩 중
}
}
|
- 문제: Chart.js 로딩 및 차트 렌더까지 시간이 필요
- 결과: Dashboard는 정상, Stats에서만 모달 지속
- 해결: Chart 객체 존재 여부로 준비 상태 확인
해결 방법
1단계: 중복 제거
1
2
| <!-- 제거된 코드 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
stats 폴더의 index.html에 포함되어 있는 chart.js 스크립트 호출을 삭제. base.html에만 남겨둠
2단계: 실제 로딩 상태 체크
1
2
3
4
| function checkIfStillLoading() {
// Document, 이미지, 스크립트, CSS, Chart.js 등 종합 체크
return false; // 모든 것이 완료되었을 때만
}
|
3단계: Bootstrap Modal 상태 대기
1
2
3
4
| if (loadingModal._isTransitioning) {
await waitForTransition; // 전환 완료까지 대기
}
loadingModal.hide();
|
4단계: 안전장치
1
2
3
| setTimeout(() => {
// 3초 후 강제 숨김
}, 3000);
|
결론
문제의 주된 원인은 Chart.js 중복 로딩과 Modal 전환 상태 관리 미흡이었다. 중복 로딩을 제거하고, 실제 준비 상태를 확인한 뒤, 전환 완료 후 모달을 숨기며, 타임아웃을 안전장치로 두어 해결