52 lines
3.4 KiB
Plaintext
52 lines
3.4 KiB
Plaintext
# 구조 개선 및 다중 탭(Depth 2) 도입 계획
|
|
|
|
사용자 요청에 따라 H/W와 S/W를 구분하고, 그 하위에 각각 대시보드 및 상세 항목(개인PC, 서버 등) 탭을 나누는 네비게이션 구조를 도입합니다. 바닐라 JS 기반에서 각 탭마다 다른 데이터 테이블을 그려내는 아키텍처로 개선합니다.
|
|
|
|
## User Review Required
|
|
|
|
> [!IMPORTANT]
|
|
> 1. **엑셀 관리 방식 (Sheets 분리)**: 단일 엑셀 파일 안에 여러 개의 시트(Sheet)를 나누어 관리하는 방식으로 제안합니다. 한 번 엑셀을 업로드하면, `개인PC`, `서버`, `스토리지`, `전산비품` 등 각각의 시트를 한방에 파싱하여 각 탭에 적용하도록 구성하겠습니다.
|
|
> 2. **S/W 스키마**: 현재 H/W 기반 데이터 스키마만 정의되어 있습니다. [구독 소프트웨어]와 [영구 소프트웨어] 탭 개발을 위한 데이터 항목들(예: 사용기간, 라이선스키, 결제방식 등)은 아직 정해지지 않았으므로 일단 공통 S/W 데이터 스키마 임시 템플릿(S/W명, 유형, 라이선스키, 할당된 사용자 등)으로 만들어 두고 추후 수정할 수 있도록 개발해도 될까요?
|
|
|
|
## Proposed Changes
|
|
|
|
### 1. UI/UX: 2 Depth 네비게이션 (`index.html`, `style.css`)
|
|
- **좌측(또는 상단) GNB (Global Navigation Bar)**: H/W 와 S/W 를 스위치할 수 있는 메인 탭 생성.
|
|
- **LNB (Local Navigation Bar)**: 메인 탭 전환 시 나타나는 서브 탭(H/W: 대시보드/PC/서버/스토리지/비품, S/W: 대시보드/구독/영구).
|
|
- `README.md` 가이드라인에 따라 화면을 분할하고 정보 밀도를 높이기 위해 Box-less, Line-based Layout 유지.
|
|
|
|
#### [MODIFY] index.html
|
|
#### [MODIFY] src/style.css
|
|
|
|
---
|
|
|
|
### 2. 다중 데이터 구조 및 상태 관리 (`main.ts`)
|
|
- 현재 선택된 메뉴 뎁스(예: `activeCategory = 'HW'`, `activeSubTab = '개인PC'`)에 따라 렌더링 함수가 동기화되도록 라우팅/상태 관리 로직 추가.
|
|
- `Dashboard` 탭 진입 시, 모든 서브 탭 데이터의 갯수(Total PCs, Total Servers 등)를 한눈에 볼 수 있는 요약 영역(Summary Cards/Charts 영역) 예약 및 구현.
|
|
|
|
#### [MODIFY] src/main.ts
|
|
|
|
---
|
|
|
|
### 3. 멀티-시트(Multi-sheet) 엑셀 파싱 (`excelHandler.ts`)
|
|
- `SheetJS` 기능을 확장하여 다운로드/데이터 추출 시 다중 시트 생성.
|
|
- **H/W 템플릿 시트명**: `[개인PC, 서버, 스토리지, 전산비품]`
|
|
- **S/W 템플릿 시트명**: `[구독SW, 영구SW]`
|
|
|
|
#### [MODIFY] src/excelHandler.ts
|
|
|
|
## Open Questions
|
|
|
|
> [!WARNING]
|
|
> * 왼쪽 사이드바로 메뉴를 구성하는 것이 좋을까요, 상단 가로바(Top Nav) 2단으로 구성하는 것이 좋을까요? Reference 이미지가 따로 없다면 범용적으로 관리하기 편한 **왼쪽 사이드바 구조(Sidebar Menu)** 를 제안합니다. (진행 승인 시 사이드바 형태로 구현합니다.)
|
|
|
|
## Verification Plan
|
|
|
|
### Automated Tests
|
|
- 좌측 `H/W`, `S/W` 클릭 시 서브 메뉴가 정상 토글되는지 검증(`main.ts` DOM class toggle 확인).
|
|
- 서브 메뉴 `서버` 클릭 시 빈 테이블(또는 서버 자산 테이블)이 그려지는지 확인.
|
|
- 달라진 구조로 `엑셀 템플릿 양식`을 다운로드했을 때 파일에 다수의 시트(Sheet)가 정상 분류되어 있는지 확인.
|
|
|
|
### Manual Verification
|
|
- 브라우저 에이전트를 통해 바뀐 화면의 스크린샷(LNB 사이드바, Dashboard 화면 등)을 찍어 사용자에게 보고.
|