Initial commit

기능명세서.md

@@ -0,0 +1,72 @@
+# HM ITAM (IT Asset Management) ERP 기능 명세서
+
+## 1. 개요 (Overview)
+본 시스템은 데이터베이스(DB) 연결 없이 브라우저 단에서 엑셀(Excel) 파일을 로컬 데이터베이스의 대체재로 활용하여 구동되는 **IT 자산관리(H/W, S/W) 프로토타입 대시보드**입니다. 사용자는 별도의 백엔드 없이 엑셀 파일을 업로드하고, 웹 상에서 조회 및 수정 후 다시 엑셀로 저장(Export)할 수 있습니다.
+
+## 2. 전체 레이아웃 (Layout & Navigation)
+화면은 좌측 사이드바 구조(Depth 2)를 채택하여 정보 탐색의 편의성을 고려하였습니다.
+
+### 2.1. 좌측 메인 내비게이션 (Sidebar)
+*   **하드웨어 (H/W)**: 대시보드, 개인PC, 서버, 스토리지, 전산비품
+*   **소프트웨어 (S/W)**: 대시보드, 구독 소프트웨어, 영구 소프트웨어
+
+### 2.2. 우측 메인 영역 (Main Content)
+*   **상단 컨트롤 패널**: 좌측 탭에 상관없이 데이터를 일괄 제어하는 통합 엑셀 버튼 3종(`통합 양식 다운로드`, `엑셀 업로드`, `일괄 엑셀 저장`)이 위치합니다.
+*   **타이틀 바**: 사용자가 현재 어느 탭(ex. `하드웨어 / 개인PC`)에 위치하고 있는지 동적으로 표시합니다.
+*   **콘텐츠 뷰**: 대시보드 선택 시 각 자산의 요약 맵(Summary Grid)을, 하위 자산 항목 선택 시 Data Table을 렌더링합니다.
+
+---
+
+## 3. 핵심 기능 (Core Features)
+
+### 3.1. 엑셀 연동 기반 CRUD 로직 파이프라인
+*   **통합 양식 다운로드 (Template Export)**: 자산이 없는 경우, 초기 세팅을 돕기 위해 빈 엑셀 템플릿(Master File)을 다운로드할 수 있습니다. 다운로드된 파일은 **다중 시트(Multi-sheet)** 로 `개인PC`, `서버`, `스토리지`, `전산비품`, `구독SW`, `영구SW` 6개의 탭이 분리 생성됩니다.
+*   **엑셀 업로드 (Import/Parse)**: `SheetJS (xlsx)` 라이브러리를 통해 다중 시트 형태의 엑셀 파일을 업로드하면, 한 번에 브라우저 내의 자산 리스트 객체(Array)로 매핑되어 각 탭에 뿌려집니다.
+*   **자산 조회 (Read)**: 각 자산 항목(ex. 서버) 탭을 클릭하여 들어가면, 해당 시트(Type)에 속한 자산 목록만 필터링되어 테이블로 노출됩니다.
+*   **자산 추가/수정 (Create/Update)**: 테이블 우측의 `[수정]` 버튼 또는 상단의 `[자산 추가]`를 클릭하면 모달 팝업이 등장하여 H/W와 S/W에 맞는 각기 다른 양식 폼 데이터를 브라우저 메모리에 업데이트합니다.
+*   **자산 삭제 (Delete)**: 모달 팝업 좌측 하단의 `[삭제]` 버튼을 통해 해당 단일 항목을 삭제할 수 있습니다.
+*   **일괄 엑셀 저장 (Save/Export)**: 모든 추가/수정/삭제 작업이 완료되면 버튼을 눌러 변경된 전체 메모리 데이터를 다시 **다중 시트 엑셀 파일** 형태로 로컬 PC에 떨굽니다.
+
+### 3.2. 대시보드 (Dashboard)
+*   **H/W 대시보드**: 개인PC, 서버, 스토리지, 전산비품의 총 수량을 Grid 기반 카드로 요약하여 보여줍니다.
+*   **S/W 대시보드**: 구독 소프트웨어, 영구 소프트웨어의 총 라이선스 개수를 요약하여 보여줍니다.
+
+---
+
+## 4. 데이터 스키마 (Data Schema)
+
+자산 항목은 H/W와 S/W 두 가지의 다른 구조로 관리됩니다.
+
+### 4.1. H/W 자산 스키마 (Hardware Asset)
+`[개인PC, 서버, 스토리지, 전산비품]` 각각 동일한 스키마 구조를 가집니다.
+
+| 필드명 | 유형 (Type) | 필수여부 | 설명 |
+| :--- | :---: | :---: | :--- |
+| **법인** | `String` | 필 | 자산의 소속 법인 |
+| **자산코드** | `String` | 필 | 고유 자산 식별코드 |
+| **명칭** | `String` | 필 | 모델명 또는 기기명 |
+| **위치** | `String` | 선 | 물리적 위치 (ex. 개발실) |
+| **관리자** | `String` | 선 | 실 사용자 또는 책임자 |
+| **IP주소** | `String` | 선 | 할당된 고정/유동 IP |
+| **MAC address** | `String` | 선 | 기기 고유 물리적 주소 |
+| **OS** | `String` | 선 | 설치된 운영체제 정보 |
+| **H/W 사양** | `String` | 선 | CPU, RAM, Storage 요약 스펙 |
+
+### 4.2. S/W 자산 스키마 (Software Asset)
+`[구독SW, 영구SW]` 각각 동일한 스키마 구조를 가집니다.
+
+| 필드명 | 유형 (Type) | 필수여부 | 설명 |
+| :--- | :---: | :---: | :--- |
+| **법인** | `String` | 필 | 자산의 소속 법인 |
+| **S/W명** | `String` | 필 | 소프트웨어 제품 명칭 |
+| **라이선스키** | `String` | 선 | 발급된 S/W 활성화 키 |
+| **할당자** | `String` | 선 | 사용하는 사용자 또는 팀 |
+| **사용기간** | `String` | 선 | 구독 혹은 만료 기한 표기 |
+| **비고** | `String` | 선 | 기타 참고용 안내 사항 |
+
+---
+
+## 5. UI/UX 디자인 정책 (Design Constraint)
+1. **Color (Achromatic & Green)**: `Deep Green(#1E5149)` 을 메인 포인트 색상으로 사용하여 전문성과 정돈된 느낌을 줍니다. 배경이나 나머지 요소는 무채색 베이스입니다.
+2. **Typography**: 가독성이 우수한 `Pretendard` 서체를 사용하고, 자간을 약간 좁혀 밀도 있고 깔끔한 느낌을 줍니다.
+3. **Box-less 스타일링**: 과도한 박스와 테두리를 없애고(Border-based), 얇은 구분 영역만으로 테이블과 폼의 요소를 분리하여 세련된 데이터 표현을 만듭니다.