feat(dashboard): 대시보드 UI 개선 — 환영 인사 + 현황 카드 + 시스템 설명
- A: 시간대별 환영 인사, 날짜, 날씨 API 연동 - B: 오늘 현황 숫자카드 (출근/작업/이슈) — 권한 기반 동적 표시 - C: 시스템 카드에 설명 텍스트 추가 - fix: notification-bell 드롭다운 position:fixed + 스크롤 시 닫기 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -63,7 +63,7 @@
|
||||
'</svg>' +
|
||||
'<span id="notif-badge" style="display:none;position:absolute;top:0;right:0;background:#EF4444;color:#fff;font-size:11px;font-weight:600;min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:9px;padding:0 4px;">0</span>' +
|
||||
'</div>' +
|
||||
'<div id="notif-dropdown" style="display:none;position:absolute;top:100%;right:0;width:340px;max-height:420px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;box-shadow:0 10px 25px rgba(0,0,0,.15);z-index:9999;overflow:hidden;margin-top:4px;">' +
|
||||
'<div id="notif-dropdown" style="display:none;position:fixed;width:340px;max-height:420px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;box-shadow:0 10px 25px rgba(0,0,0,.15);z-index:9999;overflow:hidden;">' +
|
||||
'<div style="padding:12px 16px;border-bottom:1px solid #F3F4F6;display:flex;justify-content:space-between;align-items:center;">' +
|
||||
'<span style="font-weight:600;font-size:14px;color:#111827;">알림</span>' +
|
||||
'<div style="display:flex;gap:8px;align-items:center;">' +
|
||||
@@ -132,9 +132,33 @@
|
||||
openDropdown();
|
||||
}
|
||||
|
||||
function onScrollWhileOpen() {
|
||||
closeDropdown();
|
||||
}
|
||||
|
||||
function openDropdown() {
|
||||
dropdownOpen = true;
|
||||
document.getElementById('notif-dropdown').style.display = 'block';
|
||||
var dd = document.getElementById('notif-dropdown');
|
||||
var btn = document.getElementById('notif-bell-btn');
|
||||
var rect = btn.getBoundingClientRect();
|
||||
|
||||
// 드롭다운 너비: 뷰포트 좁으면 양쪽 8px 여백
|
||||
var ddWidth = Math.min(340, window.innerWidth - 16);
|
||||
dd.style.width = ddWidth + 'px';
|
||||
dd.style.top = (rect.bottom + 4) + 'px';
|
||||
|
||||
// 우측 정렬 기본, 왼쪽 넘치면 보정
|
||||
var rightOffset = window.innerWidth - rect.right;
|
||||
if (rightOffset + ddWidth > window.innerWidth - 8) {
|
||||
dd.style.right = 'auto';
|
||||
dd.style.left = '8px';
|
||||
} else {
|
||||
dd.style.left = 'auto';
|
||||
dd.style.right = Math.max(8, rightOffset) + 'px';
|
||||
}
|
||||
|
||||
dd.style.display = 'block';
|
||||
window.addEventListener('scroll', onScrollWhileOpen, { once: true });
|
||||
loadNotifications();
|
||||
updatePushToggleUI();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user