feat: Lottie 애니메이션 라이브러리 로컬 통합

- lottie-web 라이브러리를 로컬에 다운로드 (CDN 차단 문제 해결)
- AI 분석 로딩 애니메이션을 커스텀 JSON 파일로 변경
- 외부 CDN 의존성 제거로 안정성 향상

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-23 22:30:16 +09:00
parent 914bc08c6c
commit a3252f7f17
3 changed files with 242 additions and 25 deletions

View File

@@ -1363,32 +1363,30 @@
return;
}
// Lottie 로딩 애니메이션 표시
// Lottie 애니메이션 로딩 표시 (로컬)
document.getElementById('aiAnalysisContent').innerHTML = `
<div id="lottie-container" style="text-align: center; padding: 40px;">
<div id="lottie-animation" style="width: 200px; height: 200px; margin: 0 auto;"></div>
<div style="font-size: 16px; color: #495057; font-weight: 600; margin-top: 16px;">
<div style="text-align: center; padding: 60px;">
<div id="lottie-animation" style="width: 200px; height: 200px; margin: 0 auto 24px;"></div>
<div style="font-size: 16px; color: #495057; font-weight: 600; margin-bottom: 8px;">
AI가 구매 패턴을 분석하고 있습니다...
</div>
<div style="font-size: 14px; color: #868e96; margin-top: 8px;">
<div style="font-size: 14px; color: #868e96;">
최대 10-15초 소요될 수 있습니다
</div>
</div>
`;
// Lottie 애니메이션 초기화 (무료 AI/로봇 애니메이션)
if (lottieAnimation) {
lottieAnimation.destroy();
// Lottie 애니메이션 로드
if (window.lottie) {
lottieAnimation = lottie.loadAnimation({
container: document.getElementById('lottie-animation'),
renderer: 'svg',
loop: true,
autoplay: true,
path: '/static/animations/ai-loading.json'
});
}
lottieAnimation = lottie.loadAnimation({
container: document.getElementById('lottie-animation'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'https://lottie.host/d5cb5c0e-1b0f-4f0a-8e5f-9c3e9d6e5a3a/3R3xKR0P0r.json' // AI 로봇 애니메이션
});
// API 호출
fetch(`/admin/ai-analyze-user/${userId}`, {
method: 'POST',
@@ -1398,11 +1396,6 @@
})
.then(response => response.json())
.then(data => {
if (lottieAnimation) {
lottieAnimation.destroy();
lottieAnimation = null;
}
if (data.success) {
// 캐시 저장
aiAnalysisCache[cacheKey] = {
@@ -1415,10 +1408,6 @@
}
})
.catch(error => {
if (lottieAnimation) {
lottieAnimation.destroy();
lottieAnimation = null;
}
showAIAnalysisError('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
console.error('AI Analysis Error:', error);
});
@@ -1540,5 +1529,8 @@
}
});
</script>
<!-- Lottie 애니메이션 라이브러리 (로컬) -->
<script src="/static/js/lottie.min.js"></script>
</body>
</html>