feat: 화면설명 소제목 스크롤·강조 + 글씨크기 메뉴 확대 + 드로어 개선
- screenHelp 앵커(?hl=)로 '이 화면 설명' 클릭 시 해당 소제목으로 스크롤·강조, 재오픈 시 재강조(postMessage) - 글씨 크기(A−/A+)가 상단 대메뉴·좌측 사이드바까지 확대, 관리자 페이지에도 조절 기능 추가 - 화면 설명 드로어 양방향 리사이즈(좁히기 가능) + 기본 너비 2배 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -51,7 +51,7 @@ tailwind.config = {
|
||||
.data-table tbody tr:hover td { background-color: #f9fafb; }
|
||||
@media print { .no-print { display: none !important; } .embed-titlebar { display: none; } }
|
||||
/* 화면 설명 드로어(팝업) — 현재 화면 위 오른쪽에 겹쳐 띄움 */
|
||||
.help-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 92vw); background: #fff; box-shadow: -8px 0 26px rgba(0,0,0,.18); z-index: 9999; display: none; flex-direction: column; }
|
||||
.help-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(920px, 92vw); background: #fff; box-shadow: -8px 0 26px rgba(0,0,0,.18); z-index: 9999; display: none; flex-direction: column; }
|
||||
.help-drawer.open { display: flex; }
|
||||
.help-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; background: #1a2b4b; color: #fff; font-size: .8rem; font-weight: 700; flex-shrink: 0; }
|
||||
.help-drawer-head .hd-btns { display: flex; gap: 4px; }
|
||||
@@ -137,7 +137,13 @@ tailwind.config = {
|
||||
function withEmbedUrl(url) { try { var x = new URL(url, location.href); x.searchParams.set('embed', '1'); return x.href; } catch (e) { return url; } }
|
||||
function openHelp(url) {
|
||||
var u = withEmbedUrl(url);
|
||||
if (dFrame.getAttribute('data-src') !== u) { dFrame.src = u; dFrame.setAttribute('data-src', u); }
|
||||
if (dFrame.getAttribute('data-src') !== u) {
|
||||
// 새 URL → 재로드(로드 후 매뉴얼 자체 스크립트가 강조 실행)
|
||||
dFrame.src = u; dFrame.setAttribute('data-src', u);
|
||||
} else {
|
||||
// 같은 URL → 재로드 안 함. 매뉴얼에 다시 강조하라고 알림(껐다 켜도 강조되도록)
|
||||
try { dFrame.contentWindow.postMessage({ type: 'manual-hl' }, location.origin); } catch (e) {}
|
||||
}
|
||||
var tab = document.getElementById('helpDrawerTab'); if (tab) tab.setAttribute('href', url);
|
||||
drawer.classList.add('open');
|
||||
}
|
||||
@@ -160,9 +166,13 @@ tailwind.config = {
|
||||
// 드로어 폭 드래그 조절
|
||||
(function () {
|
||||
var grip = document.getElementById('helpDrawerGrip'), dragging = false;
|
||||
grip.addEventListener('mousedown', function (e) { e.preventDefault(); dragging = true; document.body.style.userSelect = 'none'; });
|
||||
// 드래그 중 iframe 이 마우스 이벤트를 가로채면(특히 좁힐 때) 멈추므로, 화면 전체 투명 오버레이로 이벤트를 가로챈다.
|
||||
var ov = document.createElement('div');
|
||||
ov.style.cssText = 'position:fixed;inset:0;z-index:10000;cursor:col-resize;display:none;';
|
||||
document.body.appendChild(ov);
|
||||
grip.addEventListener('mousedown', function (e) { e.preventDefault(); dragging = true; ov.style.display = 'block'; document.body.style.userSelect = 'none'; });
|
||||
document.addEventListener('mousemove', function (e) { if (!dragging) return; var w = window.innerWidth - e.clientX; drawer.style.width = Math.min(window.innerWidth * 0.92, Math.max(300, w)) + 'px'; });
|
||||
document.addEventListener('mouseup', function () { dragging = false; document.body.style.userSelect = ''; });
|
||||
document.addEventListener('mouseup', function () { if (!dragging) return; dragging = false; ov.style.display = 'none'; document.body.style.userSelect = ''; });
|
||||
})();
|
||||
|
||||
// 글씨 크기(zoom) — 상단바에서 조절한 값을 적용. localStorage 공유 + storage 이벤트로 실시간 반영.
|
||||
|
||||
Reference in New Issue
Block a user