b4037c9395
This commit introduces a series of refactoring changes to the web-ui to remove hardcoded values and improve page integration. - **Centralized Configuration:** Created to centralize API ports, paths, and navigation URLs, replacing hardcoded values across multiple files. - **Modular Component Loading:** Introduced to handle dynamic loading of common HTML components (e.g., sidebar, navbar), using paths from . - **Modular Navigation:** Created to centralize page redirection logic, improving maintainability and reducing direct manipulations. - **Refactored Existing Modules:** Updated , , , and to utilize the new , , and modules. - **ES6 Module Compatibility:** Ensured loads scripts as ES6 modules () to support statements.
47 lines
1.6 KiB
JavaScript
47 lines
1.6 KiB
JavaScript
// /js/load-sidebar.js
|
|
import { getUser } from './auth.js';
|
|
import { loadComponent } from './component-loader.js';
|
|
|
|
/**
|
|
* 사용자 역할에 따라 사이드바 메뉴 항목을 필터링하는 DOM 프로세서입니다.
|
|
* @param {Document} doc - 파싱된 HTML 문서 객체
|
|
*/
|
|
function filterSidebarByRole(doc) {
|
|
const currentUser = getUser();
|
|
if (!currentUser) return; // 비로그인 상태면 필터링하지 않음
|
|
|
|
const userRole = currentUser.role;
|
|
|
|
// 'system' 역할은 모든 메뉴를 볼 수 있으므로 필터링하지 않음
|
|
if (userRole === 'system') {
|
|
return;
|
|
}
|
|
|
|
// 역할과 그에 해당하는 클래스 선택자 매핑
|
|
const roleClassMap = {
|
|
admin: '.admin-only',
|
|
leader: '.leader-only',
|
|
user: '.user-only',
|
|
support: '.support-only'
|
|
};
|
|
|
|
// 모든 역할 기반 선택자를 가져옴
|
|
const allRoleSelectors = Object.values(roleClassMap).join(', ');
|
|
const allRoleElements = doc.querySelectorAll(allRoleSelectors);
|
|
|
|
allRoleElements.forEach(el => {
|
|
// 요소가 현재 사용자 역할에 해당하는 클래스를 가지고 있는지 확인
|
|
const userRoleSelector = roleClassMap[userRole];
|
|
if (!userRoleSelector || !el.matches(userRoleSelector)) {
|
|
el.remove();
|
|
}
|
|
});
|
|
}
|
|
|
|
// 페이지 로드 시 사이드바를 로드하고 역할에 따라 필터링합니다.
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// 'getUser'를 통해 로그인 상태 확인. 비로그인 시 아무 작업도 하지 않음.
|
|
if (getUser()) {
|
|
loadComponent('sidebar', '#sidebar-container', filterSidebarByRole);
|
|
}
|
|
}); |