sam-manage/public/js/context-menu.js

/**
 * 컨텍스트 메뉴 (우클릭 메뉴)
 * 테넌트명, 사용자명 등에서 우클릭 시 해당 위치에 메뉴 표시
 */

class ContextMenu {
    constructor() {
        this.menuElement = null;
        this.currentTarget = null;
        this.init();
    }

    init() {
        // 컨텍스트 메뉴 요소 찾기
        this.menuElement = document.getElementById('context-menu');
        if (!this.menuElement) return;

        // 우클릭 이벤트 등록 (이벤트 위임)
        document.addEventListener('contextmenu', (e) => this.handleContextMenu(e));

        // 클릭 시 메뉴 닫기
        document.addEventListener('click', () => this.hide());

        // ESC 키로 메뉴 닫기
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') this.hide();
        });

        // 스크롤 시 메뉴 닫기
        document.addEventListener('scroll', () => this.hide(), true);
    }

    handleContextMenu(e) {
        const trigger = e.target.closest('[data-context-menu]');
        if (!trigger) return;

        e.preventDefault();

        const menuType = trigger.dataset.contextMenu;
        const entityId = trigger.dataset.entityId;
        const entityName = trigger.dataset.entityName;

        this.currentTarget = {
            type: menuType,
            id: entityId,
            name: entityName,
            element: trigger
        };

        this.show(e.clientX, e.clientY, menuType);
    }

    show(x, y, menuType) {
        if (!this.menuElement) return;

        // 메뉴 타입에 따라 항목 표시/숨김
        this.updateMenuItems(menuType);

        // 메뉴 표시
        this.menuElement.classList.remove('hidden');

        // 위치 조정 (화면 밖으로 나가지 않도록)
        const menuRect = this.menuElement.getBoundingClientRect();
        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;

        let posX = x;
        let posY = y;

        if (x + menuRect.width > viewportWidth) {
            posX = viewportWidth - menuRect.width - 10;
        }

        if (y + menuRect.height > viewportHeight) {
            posY = viewportHeight - menuRect.height - 10;
        }

        this.menuElement.style.left = `${posX}px`;
        this.menuElement.style.top = `${posY}px`;
    }

    hide() {
        if (this.menuElement) {
            this.menuElement.classList.add('hidden');
        }
        this.currentTarget = null;
    }

    updateMenuItems(menuType) {
        // 모든 메뉴 항목 숨기기
        const allItems = this.menuElement.querySelectorAll('[data-menu-for]');
        allItems.forEach(item => {
            const forTypes = item.dataset.menuFor.split(',');
            if (forTypes.includes(menuType) || forTypes.includes('all')) {
                item.classList.remove('hidden');
            } else {
                item.classList.add('hidden');
            }
        });
    }

    // 메뉴 항목 클릭 핸들러
    handleMenuAction(action) {
        if (!this.currentTarget) return;

        const { type, id, name } = this.currentTarget;

        switch (action) {
            case 'view-tenant':
                if (typeof TenantModal !== 'undefined') {
                    TenantModal.open(id);
                }
                break;
            case 'edit-tenant':
                window.location.href = `/tenants/${id}/edit`;
                break;
            case 'view-user':
                if (typeof UserModal !== 'undefined') {
                    UserModal.open(id);
                }
                break;
            case 'edit-user':
                window.location.href = `/users/${id}/edit`;
                break;
            default:
                console.log('Unknown action:', action, { type, id, name });
        }

        this.hide();
    }
}

// 전역 인스턴스 생성
const contextMenu = new ContextMenu();

// 전역 함수로 노출 (onclick에서 사용)
function handleContextMenuAction(action) {
    contextMenu.handleMenuAction(action);
}