feat: Lottie 애니메이션 라이브러리 로컬 통합
- lottie-web 라이브러리를 로컬에 다운로드 (CDN 차단 문제 해결) - AI 분석 로딩 애니메이션을 커스텀 JSON 파일로 변경 - 외부 CDN 의존성 제거로 안정성 향상 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user