feat: 모든 카테고리(HW, SW, SW 사용자) DB 일괄 덮어쓰기 저장 기능 구현

src/components/Navigation.ts

@@ -0,0 +1,80 @@
+import { state } from '../core/state';
+
+const MENU_CONFIG = {
+  hw: {
+    label: '하드웨어',
+    tabs: ['대시보드', '개인PC', '서버', '스토리지', '전산비품']
+  },
+  sw: {
+    label: '소프트웨어',
+    tabs: ['대시보드', '구독SW', '영구SW']
+  },
+  ops: {
+    label: '운영 서비스',
+    tabs: ['대시보드', '서비스현황', '백업관리', '보안점검']
+  }
+};
+
+export function renderNavigation(onTabChange: (tab: string) => void) {
+  const navContainer = document.getElementById('main-nav')!;
+  const btnAddAsset = document.getElementById('btn-add-asset') as HTMLButtonElement;
+
+  const render = () => {
+    navContainer.innerHTML = '';
+    
+    (Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
+      const config = MENU_CONFIG[catKey];
+      const isActive = state.activeCategory === catKey;
+
+      const group = document.createElement('div');
+      group.className = `nav-group ${isActive ? 'active is-showing-shelf' : ''}`;
+      
+      // 메인 카테고리 트리거
+      const trigger = document.createElement('div');
+      trigger.className = 'gnb-trigger';
+      trigger.textContent = config.label;
+      
+      trigger.addEventListener('click', () => {
+        if (state.activeCategory !== catKey) {
+          state.activeCategory = catKey;
+          state.activeSubTab = '대시보드';
+          if (btnAddAsset) btnAddAsset.classList.add('hidden');
+          render();
+          onTabChange('대시보드');
+        }
+      });
+      group.appendChild(trigger);
+
+      // 하위 탭 선반 (Shelf)
+      const shelf = document.createElement('div');
+      shelf.className = 'lnb-shelf';
+      
+      config.tabs.forEach(tab => {
+        const item = document.createElement('div');
+        item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
+        item.textContent = tab;
+        
+        item.addEventListener('click', (e) => {
+          e.stopPropagation();
+          state.activeCategory = catKey;
+          state.activeSubTab = tab;
+          
+          if (btnAddAsset) {
+            if (tab === '대시보드') btnAddAsset.classList.add('hidden');
+            else btnAddAsset.classList.remove('hidden');
+          }
+          
+          render();
+          onTabChange(tab);
+        });
+        shelf.appendChild(item);
+      });
+      group.appendChild(shelf);
+
+      // 마우스 오버 시 다른 그룹의 선반은 가리고 내 것만 보여주는 스타일은 CSS에서 처리함
+      navContainer.appendChild(group);
+    });
+  };
+
+  render();
+}