feat: Lottie 애니메이션 라이브러리 로컬 통합
- lottie-web 라이브러리를 로컬에 다운로드 (CDN 차단 문제 해결) - AI 분석 로딩 애니메이션을 커스텀 JSON 파일로 변경 - 외부 CDN 의존성 제거로 안정성 향상 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
914bc08c6c
commit
a3252f7f17
224
backend/static/animations/ai-loading.json
Normal file
224
backend/static/animations/ai-loading.json
Normal file
@ -0,0 +1,224 @@
|
||||
{
|
||||
"v": "5.7.4",
|
||||
"fr": 60,
|
||||
"ip": 0,
|
||||
"op": 120,
|
||||
"w": 200,
|
||||
"h": 200,
|
||||
"nm": "AI Loading",
|
||||
"ddd": 0,
|
||||
"assets": [],
|
||||
"layers": [
|
||||
{
|
||||
"ddd": 0,
|
||||
"ind": 1,
|
||||
"ty": 4,
|
||||
"nm": "Circle Outer",
|
||||
"sr": 1,
|
||||
"ks": {
|
||||
"o": {"a": 0, "k": 100},
|
||||
"r": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 0, "s": [0]},
|
||||
{"t": 120, "s": [360]}
|
||||
]
|
||||
},
|
||||
"p": {"a": 0, "k": [100, 100, 0]},
|
||||
"a": {"a": 0, "k": [0, 0, 0]},
|
||||
"s": {"a": 0, "k": [100, 100, 100]}
|
||||
},
|
||||
"ao": 0,
|
||||
"shapes": [
|
||||
{
|
||||
"ty": "gr",
|
||||
"it": [
|
||||
{
|
||||
"d": 1,
|
||||
"ty": "el",
|
||||
"s": {"a": 0, "k": [120, 120]},
|
||||
"p": {"a": 0, "k": [0, 0]},
|
||||
"nm": "Ellipse Path 1"
|
||||
},
|
||||
{
|
||||
"ty": "st",
|
||||
"c": {"a": 0, "k": [0.396, 0.4, 0.961, 1]},
|
||||
"o": {"a": 0, "k": 100},
|
||||
"w": {"a": 0, "k": 8},
|
||||
"lc": 2,
|
||||
"lj": 1,
|
||||
"ml": 4,
|
||||
"nm": "Stroke 1"
|
||||
},
|
||||
{
|
||||
"ty": "tr",
|
||||
"p": {"a": 0, "k": [0, 0], "ix": 2},
|
||||
"a": {"a": 0, "k": [0, 0], "ix": 1},
|
||||
"s": {"a": 0, "k": [100, 100], "ix": 3},
|
||||
"r": {"a": 0, "k": 0, "ix": 6},
|
||||
"o": {"a": 0, "k": 100, "ix": 7},
|
||||
"sk": {"a": 0, "k": 0, "ix": 4},
|
||||
"sa": {"a": 0, "k": 0, "ix": 5},
|
||||
"nm": "Transform"
|
||||
}
|
||||
],
|
||||
"nm": "Ellipse 1",
|
||||
"np": 2,
|
||||
"cix": 2,
|
||||
"ix": 1,
|
||||
"mn": "ADBE Vector Group"
|
||||
},
|
||||
{
|
||||
"ty": "tm",
|
||||
"s": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 0, "s": [0]},
|
||||
{"t": 60, "s": [100]}
|
||||
]
|
||||
},
|
||||
"e": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 0, "s": [0]},
|
||||
{"t": 60, "s": [100]}
|
||||
]
|
||||
},
|
||||
"o": {"a": 0, "k": 0},
|
||||
"m": 1,
|
||||
"ix": 2,
|
||||
"nm": "Trim Paths 1"
|
||||
}
|
||||
],
|
||||
"ip": 0,
|
||||
"op": 120,
|
||||
"st": 0,
|
||||
"bm": 0
|
||||
},
|
||||
{
|
||||
"ddd": 0,
|
||||
"ind": 2,
|
||||
"ty": 4,
|
||||
"nm": "Dots",
|
||||
"sr": 1,
|
||||
"ks": {
|
||||
"o": {
|
||||
"a": 1,
|
||||
"k": [
|
||||
{"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 0, "s": [0]},
|
||||
{"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 20, "s": [100]},
|
||||
{"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 40, "s": [0]},
|
||||
{"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 60, "s": [100]},
|
||||
{"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 80, "s": [0]},
|
||||
{"t": 100, "s": [100]}
|
||||
]
|
||||
},
|
||||
"r": {"a": 0, "k": 0},
|
||||
"p": {"a": 0, "k": [100, 150, 0]},
|
||||
"a": {"a": 0, "k": [0, 0, 0]},
|
||||
"s": {"a": 0, "k": [100, 100, 100]}
|
||||
},
|
||||
"ao": 0,
|
||||
"shapes": [
|
||||
{
|
||||
"ty": "gr",
|
||||
"it": [
|
||||
{
|
||||
"d": 1,
|
||||
"ty": "el",
|
||||
"s": {"a": 0, "k": [12, 12]},
|
||||
"p": {"a": 0, "k": [-20, 0]},
|
||||
"nm": "Ellipse 1"
|
||||
},
|
||||
{
|
||||
"ty": "fl",
|
||||
"c": {"a": 0, "k": [0.396, 0.4, 0.961, 1]},
|
||||
"o": {"a": 0, "k": 100},
|
||||
"r": 1,
|
||||
"nm": "Fill 1"
|
||||
},
|
||||
{
|
||||
"ty": "tr",
|
||||
"p": {"a": 0, "k": [0, 0]},
|
||||
"a": {"a": 0, "k": [0, 0]},
|
||||
"s": {"a": 0, "k": [100, 100]},
|
||||
"r": {"a": 0, "k": 0},
|
||||
"o": {"a": 0, "k": 100},
|
||||
"sk": {"a": 0, "k": 0},
|
||||
"sa": {"a": 0, "k": 0},
|
||||
"nm": "Transform"
|
||||
}
|
||||
],
|
||||
"nm": "Dot 1"
|
||||
},
|
||||
{
|
||||
"ty": "gr",
|
||||
"it": [
|
||||
{
|
||||
"d": 1,
|
||||
"ty": "el",
|
||||
"s": {"a": 0, "k": [12, 12]},
|
||||
"p": {"a": 0, "k": [0, 0]},
|
||||
"nm": "Ellipse 2"
|
||||
},
|
||||
{
|
||||
"ty": "fl",
|
||||
"c": {"a": 0, "k": [0.396, 0.4, 0.961, 1]},
|
||||
"o": {"a": 0, "k": 100},
|
||||
"r": 1,
|
||||
"nm": "Fill 2"
|
||||
},
|
||||
{
|
||||
"ty": "tr",
|
||||
"p": {"a": 0, "k": [0, 0]},
|
||||
"a": {"a": 0, "k": [0, 0]},
|
||||
"s": {"a": 0, "k": [100, 100]},
|
||||
"r": {"a": 0, "k": 0},
|
||||
"o": {"a": 0, "k": 100},
|
||||
"sk": {"a": 0, "k": 0},
|
||||
"sa": {"a": 0, "k": 0},
|
||||
"nm": "Transform"
|
||||
}
|
||||
],
|
||||
"nm": "Dot 2"
|
||||
},
|
||||
{
|
||||
"ty": "gr",
|
||||
"it": [
|
||||
{
|
||||
"d": 1,
|
||||
"ty": "el",
|
||||
"s": {"a": 0, "k": [12, 12]},
|
||||
"p": {"a": 0, "k": [20, 0]},
|
||||
"nm": "Ellipse 3"
|
||||
},
|
||||
{
|
||||
"ty": "fl",
|
||||
"c": {"a": 0, "k": [0.396, 0.4, 0.961, 1]},
|
||||
"o": {"a": 0, "k": 100},
|
||||
"r": 1,
|
||||
"nm": "Fill 3"
|
||||
},
|
||||
{
|
||||
"ty": "tr",
|
||||
"p": {"a": 0, "k": [0, 0]},
|
||||
"a": {"a": 0, "k": [0, 0]},
|
||||
"s": {"a": 0, "k": [100, 100]},
|
||||
"r": {"a": 0, "k": 0},
|
||||
"o": {"a": 0, "k": 100},
|
||||
"sk": {"a": 0, "k": 0},
|
||||
"sa": {"a": 0, "k": 0},
|
||||
"nm": "Transform"
|
||||
}
|
||||
],
|
||||
"nm": "Dot 3"
|
||||
}
|
||||
],
|
||||
"ip": 0,
|
||||
"op": 120,
|
||||
"st": 0,
|
||||
"bm": 0
|
||||
}
|
||||
],
|
||||
"markers": []
|
||||
}
|
||||
1
backend/static/js/lottie.min.js
vendored
Normal file
1
backend/static/js/lottie.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user