refactor: 코드 분리 + 성능 최적화 + 모바일 개선
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>
This commit is contained in:
42
system3-nonconformance/web/static/js/utils/photo-modal.js
Normal file
42
system3-nonconformance/web/static/js/utils/photo-modal.js
Normal file
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* photo-modal.js — 사진 확대 모달 공통 모듈
|
||||
* dashboard, management, inbox, issue-view 등에서 공유
|
||||
*/
|
||||
|
||||
function openPhotoModal(photoPath) {
|
||||
if (!photoPath) return;
|
||||
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'photo-modal-overlay';
|
||||
modal.onclick = (e) => { if (e.target === modal) modal.remove(); };
|
||||
|
||||
modal.innerHTML = `
|
||||
<div class="photo-modal-content">
|
||||
<img src="${photoPath}" alt="확대된 사진">
|
||||
<button class="photo-modal-close" onclick="this.closest('.photo-modal-overlay').remove()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// ESC 키로 닫기
|
||||
const handleEsc = (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
modal.remove();
|
||||
document.removeEventListener('keydown', handleEsc);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleEsc);
|
||||
}
|
||||
|
||||
// 기존 코드 호환용 별칭
|
||||
function showImageModal(imagePath) {
|
||||
openPhotoModal(imagePath);
|
||||
}
|
||||
|
||||
function closePhotoModal() {
|
||||
const modal = document.querySelector('.photo-modal-overlay');
|
||||
if (modal) modal.remove();
|
||||
}
|
||||
Reference in New Issue
Block a user