Taehoon/ITAM
2
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects Releases Wiki Activity

style: apply Vercel-inspired responsive UI & fluid scaling

Browse Source
This commit is contained in:
이태훈
2026-06-16 17:43:20 +09:00
parent 155570e8de
commit 73ef13f3a5
21 changed files with 1927 additions and 3068 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/Navigation.ts
View File

@@ -24,43 +24,39 @@ const MENU_CONFIG: any = {
};
export function renderNavigation(onTabChange: (tab: string) => void) {
const header = document.querySelector('.main-header') as HTMLElement;
const headerContainer = document.querySelector('.header-container')!;
if (!headerContainer) return;
const render = () => {
// 1. 헤더 레이아웃 구조 생성
// 1. 헤더 구조 (Vercel Style: Clean Single Row)
headerContainer.innerHTML = `
<!-- [TOP ROW] 로고 및 사용자 액션 -->
<div class="header-top-row">
<div class="brand" id="btn-home-logo" style="cursor: pointer;">
<img src="img/image_92.png" class="main-logo" alt="HM Logo" />
<h1>IT 자산 통합 관리 <span class="sub-title">ITAM</span></h1>
</div>
<div class="header-actions">
<div class="role-switcher">
<span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
<label class="switch">
<input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
<span class="slider"></span>
</label>
<span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
</div>
<div class="notification-area">
<button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
</div>
</div>
<div class="brand" id="btn-home-logo" style="cursor: pointer;">
<img src="img/image_92.png" class="main-logo" alt="HM Logo" />
<h1>한맥자산관리시스템</h1>
</div>
<nav class="integrated-nav" id="main-nav-list"></nav>
<!-- [BOTTOM ROW] 통합 내비게이션 (2단 메뉴) -->
<div class="header-bottom-row">
<nav class="integrated-nav" id="main-nav-list"></nav>
<div class="header-actions">
<div class="role-toggle-wrapper">
<span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
<label class="role-toggle">
<input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
<span class="role-slider"></span>
</label>
<span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
</div>
<div class="notification-area">
<button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
</div>
</div>
`;
const navList = document.getElementById('main-nav-list')!;
// 2. 메뉴 그룹화 및 렌더링 (대분류 제목 제외, 간격으로 구분)
(Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
// 2. GNB 메뉴 렌더링 (Ghost Tab Style)
Object.keys(MENU_CONFIG).forEach(catKey => {
const config = MENU_CONFIG[catKey];
const visibleTabs = config.tabs.filter((tab: string) => {
@@ -70,46 +66,35 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
if (visibleTabs.length === 0) return;
const group = document.createElement('div');
group.className = 'nav-group';
const itemsContainer = document.createElement('div');
itemsContainer.className = 'nav-group-items';
visibleTabs.forEach((tab: string) => {
if (tab === '부품 마스터') return;
const item = document.createElement('div');
const isActive = state.activeSubTab === tab;
item.className = `gnb-trigger ${isActive ? 'active' : ''}`;
item.textContent = tab;
item.style.fontSize = 'var(--fs-sm)'; // Ensure small but standard font
item.addEventListener('click', (e) => {
e.stopPropagation();
state.activeCategory = catKey as any;
state.activeSubTab = tab;
render(); // 재렌더링하여 활성 상태 반영
render();
onTabChange(tab);
});
itemsContainer.appendChild(item);
navList.appendChild(item);
});
group.appendChild(itemsContainer);
navList.appendChild(group);
});
// 3. 관리자 전용 '관리도구' (원래 '관리자' 메뉴)
// 3. 관리자 전용 '관리도구'
if (state.currentUserRole === 'admin') {
const adminGroup = document.createElement('div');
adminGroup.className = 'nav-group';
const adminTrigger = document.createElement('div');
adminTrigger.className = 'gnb-trigger admin-trigger';
adminTrigger.innerHTML = '관리도구';
adminTrigger.addEventListener('click', () => window.open('/map_editor.html', '_blank'));
adminGroup.appendChild(adminTrigger);
navList.appendChild(adminGroup);
navList.appendChild(adminTrigger);
}
// 4. 이벤트 바인딩 (로고 클릭 및 역할 전환)
// 4. 이벤트 바인딩
document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload());
const roleToggle = document.getElementById('role-toggle-checkbox') as HTMLInputElement;