144 lines
4.6 KiB
JavaScript
144 lines
4.6 KiB
JavaScript
// js/load-navbar.js
|
|
import { getUser, clearAuthData } from './auth.js';
|
|
|
|
// 역할 이름을 한글로 변환하는 맵
|
|
const ROLE_NAMES = {
|
|
admin: '관리자',
|
|
system: '시스템 관리자',
|
|
leader: '그룹장',
|
|
user: '작업자',
|
|
support: '지원팀',
|
|
default: '사용자',
|
|
};
|
|
|
|
/**
|
|
* 사용자 역할에 따라 메뉴 항목을 필터링합니다.
|
|
* @param {Document} doc - 파싱된 HTML 문서 객체
|
|
* @param {string} userRole - 현재 사용자의 역할
|
|
*/
|
|
function filterMenuByRole(doc, userRole) {
|
|
const selectors = [
|
|
{ role: 'admin', selector: '.admin-only' },
|
|
{ role: 'system', selector: '.system-only' },
|
|
{ role: 'leader', selector: '.leader-only' },
|
|
];
|
|
|
|
selectors.forEach(({ role, selector }) => {
|
|
// 사용자가 해당 역할을 가지고 있지 않으면 메뉴 항목을 제거
|
|
if (userRole !== role) {
|
|
doc.querySelectorAll(selector).forEach(el => el.remove());
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 네비게이션 바에 사용자 정보를 채웁니다.
|
|
* @param {Document} doc - 파싱된 HTML 문서 객체
|
|
* @param {object} user - 현재 사용자 객체
|
|
*/
|
|
function populateUserInfo(doc, user) {
|
|
const displayName = user.name || user.username;
|
|
const roleName = ROLE_NAMES[user.role] || ROLE_NAMES.default;
|
|
|
|
// 상단 바 사용자 이름
|
|
const userNameEl = doc.getElementById('user-name');
|
|
if (userNameEl) userNameEl.textContent = displayName;
|
|
|
|
// 상단 바 사용자 역할
|
|
const userRoleEl = doc.getElementById('user-role');
|
|
if (userRoleEl) userRoleEl.textContent = roleName;
|
|
|
|
// 드롭다운 메뉴 사용자 이름
|
|
const dropdownNameEl = doc.getElementById('dropdown-user-fullname');
|
|
if (dropdownNameEl) dropdownNameEl.textContent = displayName;
|
|
|
|
// 드롭다운 메뉴 사용자 아이디
|
|
const dropdownIdEl = doc.getElementById('dropdown-user-id');
|
|
if (dropdownIdEl) dropdownIdEl.textContent = `@${user.username}`;
|
|
}
|
|
|
|
/**
|
|
* 네비게이션 바와 관련된 모든 이벤트를 설정합니다.
|
|
*/
|
|
function setupNavbarEvents() {
|
|
const userInfoDropdown = document.getElementById('user-info-dropdown');
|
|
const profileDropdownMenu = document.getElementById('profile-dropdown-menu');
|
|
|
|
// 드롭다운 토글
|
|
if (userInfoDropdown && profileDropdownMenu) {
|
|
userInfoDropdown.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
profileDropdownMenu.classList.toggle('show');
|
|
userInfoDropdown.classList.toggle('active');
|
|
});
|
|
}
|
|
|
|
// 로그아웃 버튼
|
|
const logoutButton = document.getElementById('dropdown-logout');
|
|
if (logoutButton) {
|
|
logoutButton.addEventListener('click', () => {
|
|
if (confirm('로그아웃 하시겠습니까?')) {
|
|
clearAuthData();
|
|
window.location.href = '/index.html';
|
|
}
|
|
});
|
|
}
|
|
|
|
// 외부 클릭 시 드롭다운 닫기
|
|
document.addEventListener('click', (e) => {
|
|
if (profileDropdownMenu && !userInfoDropdown.contains(e.target) && !profileDropdownMenu.contains(e.target)) {
|
|
profileDropdownMenu.classList.remove('show');
|
|
userInfoDropdown.classList.remove('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 현재 시간을 업데이트하는 함수
|
|
*/
|
|
function updateTime() {
|
|
const timeElement = document.getElementById('current-time');
|
|
if (timeElement) {
|
|
const now = new Date();
|
|
timeElement.textContent = now.toLocaleTimeString('ko-KR', { hour12: false });
|
|
}
|
|
}
|
|
|
|
|
|
// 메인 로직: DOMContentLoaded 시 실행
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
const navbarContainer = document.getElementById('navbar-container');
|
|
if (!navbarContainer) return;
|
|
|
|
const currentUser = getUser();
|
|
if (!currentUser) return; // 사용자가 없으면 아무 작업도 하지 않음
|
|
|
|
try {
|
|
const response = await fetch('/components/navbar.html');
|
|
const htmlText = await response.text();
|
|
|
|
// 1. 텍스트를 가상 DOM으로 파싱
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(htmlText, 'text/html');
|
|
|
|
// 2. DOM에 삽입하기 *전*에 내용 수정
|
|
filterMenuByRole(doc, currentUser.role);
|
|
populateUserInfo(doc, currentUser);
|
|
|
|
// 3. 수정 완료된 HTML을 실제 DOM에 삽입 (깜빡임 방지)
|
|
navbarContainer.innerHTML = doc.body.innerHTML;
|
|
|
|
// 4. DOM에 삽입된 후에 이벤트 리스너 설정
|
|
setupNavbarEvents();
|
|
|
|
// 5. 실시간 시간 업데이트 시작
|
|
updateTime();
|
|
setInterval(updateTime, 1000);
|
|
|
|
console.log('✅ 네비게이션 바 로딩 완료');
|
|
|
|
} catch (error) {
|
|
console.error('🔴 네비게이션 바 로딩 중 오류 발생:', error);
|
|
navbarContainer.innerHTML = '<p>네비게이션 바를 불러오는 데 실패했습니다.</p>';
|
|
}
|
|
}); |