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

// 공통 네비게이션 컴포넌트
class CommonNavigation {
    constructor(currentPage = '') {
        this.currentPage = currentPage;
        this.init();
    }

    init() {
        this.createNavigation();
        this.addEventListeners();
    }

    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);
    }

    getNavigationHTML() {
        const menuItems = [
            { key: 'dashboard', title: '대시보드', url: '/DashBoard/index.html', 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' },
            { key: 'common', title: '공용코드', url: '/Common.html', 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' },
            { key: 'jobreport', title: '업무일지', url: '/Jobreport/index.html', 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' },
            { key: 'kuntae', title: '근태관리', url: '/Kuntae/index.html', icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' },
            { key: 'todo', title: '할일관리', url: '/Todo/index.html', 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' },
            { key: 'project', title: '프로젝트', url: '/Project/index.html', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' }
        ];

        return `
            <div class="container mx-auto px-4">
                <div class="flex items-center justify-between h-16">
                    <div class="flex items-center space-x-8">
                        <a href="/DashBoard/index.html" onclick="console.log('[NAV CLICK] logo clicked at', new Date().toISOString())" class="flex items-center space-x-2 hover:opacity-80 transition-opacity cursor-pointer">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path>
                            </svg>
                            <span class="text-xl font-bold text-white">GroupWare</span>
                        </a>
                        <nav class="hidden md:flex space-x-1">
                            ${menuItems.map(item => `
                                <a href="${item.url}" onclick="console.log('[NAV CLICK] ${item.key} clicked at', new Date().toISOString(), 'navigating to:', '${item.url}')" class="px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                                    this.currentPage === item.key
                                        ? 'bg-white/20 text-white'
                                        : 'text-white/60 hover:text-white hover:bg-white/10'
                                }">
                                    <svg class="w-4 h-4 inline mr-1" 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>
                            `).join('')}
                        </nav>
                    </div>
                    <div class="flex items-center space-x-4">
                        <div class="text-sm text-white/60">
                            <span id="currentUser">사용자</span>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    addEventListeners() {
        // 필요한 이벤트 리스너가 있으면 여기에 추가
    }
}

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

// 개발중 경고 메시지 생성 함수
function createDevWarning() {
    return `
        <div class="dev-warning animate-slide-up">
            <div class="flex items-center">
                <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                </svg>
                <div>
                    <p class="title">🚧 개발중인 기능입니다</p>
                    <p class="description">일부 기능이 정상적으로 동작하지 않을 수 있습니다.</p>
                </div>
            </div>
        </div>
    `;
}