bf4000c4ae
tkqc 5개 페이지 인라인 JS/CSS를 외부 파일로 추출 (HTML 82% 감소) tkuser index.html을 CSS 1개 + JS 10개 모듈로 분리 (3283→1155줄) - 공통 유틸 추출: issue-helpers, photo-modal, toast - 공통 CSS 확장: tkqc-common.css (모바일 반응형 포함) - 모바일 하단 네비게이션 추가 (mobile-bottom-nav.js) - nginx: JS/CSS 1시간 캐싱 + gzip 압축 활성화 - Tailwind CDN preload, 캐시버스터 통일 (?v=20260213) - 카메라 capture="environment" 추가 - tkuser Dockerfile에 static/ 디렉토리 복사 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
/**
|
|
* toast.js — 토스트 알림 공통 모듈
|
|
*/
|
|
|
|
function showToast(message, type = 'success', duration = 3000) {
|
|
const existing = document.querySelector('.toast-notification');
|
|
if (existing) existing.remove();
|
|
|
|
const iconMap = {
|
|
success: 'fas fa-check-circle',
|
|
error: 'fas fa-exclamation-circle',
|
|
warning: 'fas fa-exclamation-triangle',
|
|
info: 'fas fa-info-circle'
|
|
};
|
|
|
|
const colorMap = {
|
|
success: 'bg-green-500',
|
|
error: 'bg-red-500',
|
|
warning: 'bg-yellow-500',
|
|
info: 'bg-blue-500'
|
|
};
|
|
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast-notification fixed top-4 right-4 z-[9999] ${colorMap[type] || colorMap.info} text-white px-6 py-3 rounded-lg shadow-lg flex items-center space-x-2 transform translate-x-full transition-transform duration-300`;
|
|
toast.innerHTML = `
|
|
<i class="${iconMap[type] || iconMap.info}"></i>
|
|
<span>${message}</span>
|
|
`;
|
|
|
|
document.body.appendChild(toast);
|
|
|
|
requestAnimationFrame(() => {
|
|
toast.style.transform = 'translateX(0)';
|
|
});
|
|
|
|
setTimeout(() => {
|
|
toast.style.transform = 'translateX(120%)';
|
|
setTimeout(() => toast.remove(), 300);
|
|
}, duration);
|
|
}
|
|
|
|
// 기존 코드 호환용 별칭
|
|
function showToastMessage(message, type = 'success') {
|
|
showToast(message, type);
|
|
}
|