Groupware/Project/Web/wwwroot/js/navigation.js

/**
 * 공통 네비게이션 컴포넌트
 * 서버에서 메뉴 정보를 받아와서 동적으로 네비게이션을 생성합니다.
 */
class CommonNavigation {
    constructor(currentPage = '') {
        this.currentPage = currentPage;
        this.menuItems = [];
        this.init();
    }

    async init() {
        try {
            await this.loadMenuItems();
            this.createNavigation();
            this.addEventListeners();
        } catch (error) {
            console.error('Navigation initialization failed:', error);
            // 오류 발생 시 기본 메뉴로 폴백
            this.createFallbackNavigation();
        }
    }

    async loadMenuItems() {
        try {
            const response = await fetch('/api/Common/GetNavigationMenu');
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const data = await response.json();
            
            if (data.Success && data.Data) {
                this.menuItems = data.Data;
            } else {
                throw new Error(data.Message || 'Failed to load menu items');
            }
        } catch (error) {
            console.error('Failed to load navigation menu:', error);
            // 기본 메뉴 항목으로 폴백
            this.menuItems = this.getDefaultMenuItems();
        }
    }

    getDefaultMenuItems() {
        return [
            {
                key: 'dashboard',
                title: '대시보드',
                url: '/Dashboard/',
                icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z M8 5a2 2 0 012-2h4a2 2 0 012 2v2H8V5z',
                isVisible: true,
                sortOrder: 1
            },
            {
                key: 'common',
                title: '공용코드',
                url: '/Common',
                icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
                isVisible: true,
                sortOrder: 2
            },
            {
                key: 'jobreport',
                title: '업무일지',
                url: '/Jobreport/',
                icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2',
                isVisible: true,
                sortOrder: 3
            },
            {
                key: 'kuntae',
                title: '근태관리',
                url: '/Kuntae/',
                icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
                isVisible: true,
                sortOrder: 4
            },
            {
                key: 'todo',
                title: '할일관리',
                url: '/Todo/',
                icon: 'M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M12 12l2 2 4-4',
                isVisible: true,
                sortOrder: 5
            }
        ];
    }

    createNavigation() {
        const nav = document.createElement('nav');
        nav.className = 'glass-effect border-b border-white/10';
        nav.innerHTML = this.getNavigationHTML();
        
        // body의 첫 번째 자식으로 추가
        document.body.insertBefore(nav, document.body.firstChild);
    }

    createFallbackNavigation() {
        console.log('Creating fallback navigation...');
        this.createNavigation();
    }

    getNavigationHTML() {
        const visibleItems = this.menuItems
            .filter(item => item.isVisible)
            .sort((a, b) => a.sortOrder - b.sortOrder);

        return `
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between h-16">
                    <!-- 로고/타이틀 -->
                    <div class="flex items-center">
                        <h2 class="text-xl font-bold text-white">GroupWare</h2>
                    </div>
                    
                    <!-- 메뉴 -->
                    <div class="hidden md:flex items-center space-x-8">
                        ${visibleItems.map(item => this.getMenuItemHTML(item)).join('')}
                    </div>
                    
                    <!-- 모바일 메뉴 버튼 -->
                    <div class="md:hidden">
                        <button id="mobile-menu-button" class="text-white/80 hover:text-white transition-colors p-2">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                            </svg>
                        </button>
                    </div>
                </div>
                
                <!-- 모바일 메뉴 -->
                <div id="mobile-menu" class="md:hidden hidden border-t border-white/10 pt-4 pb-4">
                    ${visibleItems.map(item => this.getMobileMenuItemHTML(item)).join('')}
                </div>
            </div>
        `;
    }

    getMenuItemHTML(item) {
        const isActive = this.currentPage === item.key;
        const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
        
        return `
            <a href="${item.url}" class="${activeClass} transition-colors px-3 py-2 rounded-lg">
                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
                </svg>
                ${item.title}
            </a>
        `;
    }

    getMobileMenuItemHTML(item) {
        const isActive = this.currentPage === item.key;
        const activeClass = isActive ? 'text-white bg-white/20' : 'text-white/80 hover:text-white hover:bg-white/10';
        
        return `
            <a href="${item.url}" class="block ${activeClass} transition-colors px-3 py-2 rounded-lg mb-2">
                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${item.icon}"></path>
                </svg>
                ${item.title}
            </a>
        `;
    }

    addEventListeners() {
        // 모바일 메뉴 토글
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        if (mobileMenuButton && mobileMenu) {
            mobileMenuButton.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
            });
        }
    }
}

// 전역 함수로 내비게이션 초기화
function initNavigation(currentPage = '') {
    // DOM이 로드된 후에 실행
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            new CommonNavigation(currentPage);
        });
    } else {
        new CommonNavigation(currentPage);
    }
}

// ES6 모듈로도 사용 가능하도록 export (필요시)
if (typeof module !== 'undefined' && module.exports) {
    module.exports = { CommonNavigation, initNavigation };
}