hyungi/tk-factory-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ux): 데스크탑 UX 일괄 개선 — fade-in·ESC·스크롤잠금·z-index·sticky

Browse Source 
A1: fade-in querySelectorAll 전환 (5개 core.js) — 복수 요소 모두 표시
A2: 모달 ESC 키 닫기 (5개 core.js)
A3: 모바일 메뉴 body 스크롤 잠금 (tkfb-core.js)
A4: Gateway 대시보드 max-width 800→1080px
B1: 모달 z-index 50→60 — 헤더 위에 표시 (4개 CSS)
B3: 테이블 sticky header (tkfb.css, tkpurchase.css)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hyungi Ahn
2026-03-14 09:51:40 +09:00
parent e42a08e74d
commit 2d8ac92404
10 changed files with 53 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
system1-factory/web/static/css/tkfb.css
View File

@@ -29,6 +29,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
/* Table */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th { background: #f1f5f9; padding: 0.625rem 0.75rem; text-align: left; font-weight: 600; color: #475569; white-space: nowrap; border-bottom: 2px solid #e2e8f0; }
.data-table thead th { position: sticky; top: 56px; z-index: 10; }
.data-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.data-table tr:hover { background: #f8fafc; }
@@ -47,7 +48,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; b
.collapsible-content.open { max-height: 500px; }
/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 1rem; }
.modal-content { background: white; border-radius: 0.75rem; max-width: 40rem; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
/* Responsive */

11
system1-factory/web/static/js/tkfb-core.js
View File

@@ -221,6 +221,7 @@ function toggleMobileMenu() {
const isOpen = nav.classList.contains('mobile-open');
nav.classList.toggle('mobile-open');
if (overlay) overlay.classList.toggle('hidden', isOpen);
document.body.style.overflow = isOpen ? '' : 'hidden';
}
/* ===== State ===== */
@@ -285,7 +286,7 @@ async function initAuth() {
// 알림 벨 로드
_loadNotificationBell();
setTimeout(() => document.querySelector('.fade-in')?.classList.add('visible'), 50);
setTimeout(() => document.querySelectorAll('.fade-in').forEach(el => el.classList.add('visible')), 50);
return true;
}
@@ -295,3 +296,11 @@ function _loadNotificationBell() {
s.src = (location.hostname.includes('technicalkorea.net') ? 'https://tkds.technicalkorea.net' : location.protocol + '//' + location.hostname + ':30000') + '/shared/notification-bell.js?v=3';
document.head.appendChild(s);
}
/* ===== Modal ESC 닫기 ===== */
document.addEventListener('keydown', e => {
if (e.key === 'Escape') {
document.querySelectorAll('.modal-overlay:not(.hidden)')
.forEach(m => m.classList.add('hidden'));
}
});