TK-FB-Project/web-ui/js/load-navbar.js

// 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('❌ 로그아웃 취소됨');
  }
}