feat: 초기 프로젝트 설정 및 룰.md 파일 추가
This commit is contained in:
252
web-ui/js/load-navbar.js
Normal file
252
web-ui/js/load-navbar.js
Normal file
@@ -0,0 +1,252 @@
|
||||
// js/load-navbar.js
|
||||
// 네비게이션바 로드 및 프로필 드롭다운 기능 구현
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
try {
|
||||
// navbar.html 파일 로드
|
||||
const res = await fetch('/components/navbar.html');
|
||||
const html = await res.text();
|
||||
|
||||
// navbar 컨테이너 찾기
|
||||
const container = document.getElementById('navbar-container') || document.getElementById('navbar-placeholder');
|
||||
if (!container) {
|
||||
console.error('네비게이션 컨테이너를 찾을 수 없습니다');
|
||||
return;
|
||||
}
|
||||
|
||||
// HTML 삽입
|
||||
container.innerHTML = html;
|
||||
|
||||
// 토큰 확인
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) return;
|
||||
|
||||
// 역할 매핑 테이블
|
||||
const roleMap = {
|
||||
worker: '작업자',
|
||||
group_leader: '그룹장',
|
||||
groupleader: '그룹장',
|
||||
leader: '리더',
|
||||
supervisor: '감독자',
|
||||
team_leader: '팀장',
|
||||
support_team: '지원팀',
|
||||
support: '지원팀',
|
||||
admin_ceo: '업무관리자',
|
||||
admin_plant: '시스템관리자',
|
||||
admin: '관리자',
|
||||
administrator: '관리자',
|
||||
system: '시스템관리자'
|
||||
};
|
||||
|
||||
// JWT 토큰 파싱
|
||||
let payload;
|
||||
try {
|
||||
payload = JSON.parse(atob(token.split('.')[1]));
|
||||
} catch (err) {
|
||||
console.warn('JWT 파싱 실패:', err);
|
||||
return;
|
||||
}
|
||||
|
||||
// 저장된 사용자 정보 확인
|
||||
const storedUser = JSON.parse(localStorage.getItem('user') || '{}');
|
||||
const currentUser = storedUser.access_level ? storedUser : payload;
|
||||
|
||||
// ✅ 사용자 정보 표시
|
||||
const nameEl = document.getElementById('user-name');
|
||||
if (nameEl) {
|
||||
nameEl.textContent = currentUser.name || currentUser.username || '사용자';
|
||||
}
|
||||
|
||||
const roleEl = document.getElementById('user-role');
|
||||
if (roleEl) {
|
||||
const accessLevel = (currentUser.access_level || '').toLowerCase();
|
||||
const roleName = roleMap[accessLevel] || '사용자';
|
||||
roleEl.textContent = roleName;
|
||||
}
|
||||
|
||||
// ✅ 드롭다운 헤더 사용자 정보
|
||||
const dropdownFullname = document.getElementById('dropdown-user-fullname');
|
||||
if (dropdownFullname) {
|
||||
dropdownFullname.textContent = currentUser.name || currentUser.username || '사용자';
|
||||
}
|
||||
|
||||
const dropdownUserId = document.getElementById('dropdown-user-id');
|
||||
if (dropdownUserId) {
|
||||
dropdownUserId.textContent = `@${currentUser.username || 'user'}`;
|
||||
}
|
||||
|
||||
// ✅ 현재 시간 업데이트 시작
|
||||
updateTime();
|
||||
setInterval(updateTime, 1000);
|
||||
|
||||
// ✅ 프로필 드롭다운 이벤트 설정
|
||||
const userInfoDropdown = document.getElementById('user-info-dropdown');
|
||||
const profileDropdownMenu = document.getElementById('profile-dropdown-menu');
|
||||
|
||||
if (userInfoDropdown && profileDropdownMenu) {
|
||||
// 드롭다운 토글
|
||||
userInfoDropdown.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
const isOpen = profileDropdownMenu.classList.contains('show');
|
||||
|
||||
if (isOpen) {
|
||||
closeProfileDropdown();
|
||||
} else {
|
||||
openProfileDropdown();
|
||||
}
|
||||
});
|
||||
|
||||
// 드롭다운 외부 클릭 시 닫기
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!userInfoDropdown.contains(e.target) && !profileDropdownMenu.contains(e.target)) {
|
||||
closeProfileDropdown();
|
||||
}
|
||||
});
|
||||
|
||||
// ESC 키로 닫기
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeProfileDropdown();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ✅ 대시보드 버튼 이벤트
|
||||
const dashboardBtn = document.querySelector('.dashboard-btn');
|
||||
if (dashboardBtn) {
|
||||
dashboardBtn.addEventListener('click', function() {
|
||||
navigateToDashboard();
|
||||
});
|
||||
}
|
||||
|
||||
// ✅ 드롭다운 로그아웃 버튼
|
||||
const dropdownLogout = document.getElementById('dropdown-logout');
|
||||
if (dropdownLogout) {
|
||||
dropdownLogout.addEventListener('click', function() {
|
||||
logout();
|
||||
});
|
||||
}
|
||||
|
||||
console.log('✅ 네비게이션 바 로딩 및 이벤트 설정 완료:', {
|
||||
name: currentUser.name || currentUser.username,
|
||||
role: currentUser.access_level,
|
||||
dashboardBtn: !!dashboardBtn,
|
||||
profileDropdown: !!userInfoDropdown
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error('🔴 네비게이션 바 로딩 실패:', err);
|
||||
}
|
||||
});
|
||||
|
||||
// ✅ 프로필 드롭다운 열기
|
||||
function openProfileDropdown() {
|
||||
const userInfo = document.getElementById('user-info-dropdown');
|
||||
const dropdown = document.getElementById('profile-dropdown-menu');
|
||||
|
||||
if (userInfo && dropdown) {
|
||||
userInfo.classList.add('active');
|
||||
dropdown.classList.add('show');
|
||||
console.log('📂 프로필 드롭다운 열림');
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ 프로필 드롭다운 닫기
|
||||
function closeProfileDropdown() {
|
||||
const userInfo = document.getElementById('user-info-dropdown');
|
||||
const dropdown = document.getElementById('profile-dropdown-menu');
|
||||
|
||||
if (userInfo && dropdown) {
|
||||
userInfo.classList.remove('active');
|
||||
dropdown.classList.remove('show');
|
||||
console.log('📁 프로필 드롭다운 닫힘');
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ 시간 업데이트 함수
|
||||
function updateTime() {
|
||||
const now = new Date();
|
||||
const timeString = now.toLocaleTimeString('ko-KR', {
|
||||
hour12: false,
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
const timeElement = document.getElementById('current-time');
|
||||
if (timeElement) {
|
||||
timeElement.textContent = timeString;
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ 역할별 대시보드 네비게이션
|
||||
function navigateToDashboard() {
|
||||
console.log('🏠 대시보드 버튼 클릭됨');
|
||||
|
||||
const user = JSON.parse(localStorage.getItem('user') || '{}');
|
||||
const accessLevel = (user.access_level || '').toLowerCase().trim();
|
||||
|
||||
console.log('👤 현재 사용자:', user);
|
||||
console.log('🔑 access_level:', accessLevel);
|
||||
|
||||
// 그룹장/리더 관련 키워드들
|
||||
const leaderKeywords = [
|
||||
'group_leader', 'groupleader', 'group-leader',
|
||||
'leader', 'supervisor', 'team_leader', 'teamleader',
|
||||
'그룹장', '팀장', '현장책임자'
|
||||
];
|
||||
|
||||
// 관리자 관련 키워드들
|
||||
const adminKeywords = [
|
||||
'admin', 'administrator', 'system',
|
||||
'관리자', '시스템관리자'
|
||||
];
|
||||
|
||||
// 지원팀 관련 키워드들
|
||||
const supportKeywords = [
|
||||
'support', 'support_team', 'supportteam',
|
||||
'지원팀', '지원'
|
||||
];
|
||||
|
||||
let targetUrl = '/pages/dashboard/user.html';
|
||||
|
||||
// 키워드 매칭
|
||||
if (leaderKeywords.some(keyword => accessLevel.includes(keyword.toLowerCase()))) {
|
||||
targetUrl = '/pages/dashboard/group-leader.html';
|
||||
console.log('✅ 그룹장 페이지로 이동');
|
||||
} else if (adminKeywords.some(keyword => accessLevel.includes(keyword.toLowerCase()))) {
|
||||
targetUrl = '/pages/dashboard/admin.html';
|
||||
console.log('✅ 관리자 페이지로 이동');
|
||||
} else if (supportKeywords.some(keyword => accessLevel.includes(keyword.toLowerCase()))) {
|
||||
targetUrl = '/pages/dashboard/support.html';
|
||||
console.log('✅ 지원팀 페이지로 이동');
|
||||
} else {
|
||||
console.log('✅ 일반 사용자 페이지로 이동');
|
||||
}
|
||||
|
||||
console.log('🎯 이동할 URL:', targetUrl);
|
||||
window.location.href = targetUrl;
|
||||
}
|
||||
|
||||
// ✅ 로그아웃 함수
|
||||
function logout() {
|
||||
console.log('🚪 로그아웃 버튼 클릭됨');
|
||||
|
||||
if (confirm('로그아웃 하시겠습니까?')) {
|
||||
console.log('✅ 로그아웃 확인됨');
|
||||
|
||||
// 로컬 스토리지 정리
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('user');
|
||||
|
||||
console.log('🗑️ 로컬 스토리지 정리 완료');
|
||||
|
||||
// 부드러운 전환 효과
|
||||
document.body.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
console.log('🏠 로그인 페이지로 이동');
|
||||
window.location.href = '/index.html';
|
||||
}, 300);
|
||||
} else {
|
||||
console.log('❌ 로그아웃 취소됨');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user