Initial commit

implementation_plan.md

@@ -0,0 +1,77 @@
+# H/W 자산관리 시스템 프로토타입 구현 계획 (Excel 기반 DB)
+
+현재 프로젝트는 DB 연동 없이 프로토타입으로 개발되며, 초기 H/W 자산을 엑셀 파일로 관리할 수 있도록 설계합니다. 지정된 디자인 가이드라인(`README.md`)에 따라 세련되고 전문적인 UI를 Vite + Vanilla JS (또는 TS) 기반으로 구축합니다.
+
+## User Review Required
+
+> [!IMPORTANT]
+> **엑셀을 DB처럼 사용하는 방식**에 대한 주요 동작 흐름은 다음과 같습니다. 해당 방식이 의도하신 바와 맞는지 확인 부탁드립니다.
+> 1. 화면 진입 시 제공되는 **템플릿 엑셀 파일 다운로드**
+> 2. 해당 양식에 맞춰 데이터 입력 후 브라우저에 **엑셀 파일 업로드(Import)**
+> 3. 웹 상에서 **Data Table 형태로 렌더링** (편집/추가/삭제 기능 제공)
+> 4. 수정이 완료된 후 **엑셀 파일로 다시 다운로드(Export)** 하여 로컬에 저장
+
+## 데이터 스키마 설계 (H/W 자산)
+
+요청하신 항목에 맞춘 필수 H/W 자산 데이터 필드입니다. 엑셀의 열(Column)로 활용됩니다.
+
+- **법인 (Company)**: 소속 법인
+- **자산코드 (AssetCode)**: 자산의 고유 식별자
+- **명칭 (DeviceName)**: 모델명 또는 기기명
+- **위치 (Location)**: 현재 파악된 물리적 위치
+- **관리자 (Manager)**: 실 사용자 또는 담당자
+- **IP주소 (IPAddress)**: 할당된 IP
+- **MAC address (MacAddress)**: 기기 고유 MAC 주소
+- **H/W 사양 (HWSpecs)**: CPU, RAM, Storage 등 사양 요약
+- **OS (OperatingSystem)**: 설치된 운영체제 정보
+
+## Proposed Changes
+
+### 1. 개발 환경 설정 (Vite 기반)
+- `npx create-vite` 를 사용하여 `vanilla-ts` (또는 `vanilla`) 프로젝트를 현재 디렉토리에 초기화합니다.
+- `package.json` 및 `vite.config.ts` 설정 (포트 8080 및 host 허용)
+- Excel 제어를 위해 `xlsx` (SheetJS) 라이브러리를 설치합니다.
+
+#### [NEW] package.json
+#### [NEW] vite.config.ts
+
+---
+
+### 2. UI 및 디자인 컴포넌트 (`README.md` 가이드라인 준수)
+- 디자인: Box-less Design, Line-based Division 적용
+- 컬러: `#1E5149`(Point), `#E5E7EB`(Border), `#F9FAFB`(Background)
+- 폰트: `Pretendard`, `Letter Spacing: -0.02em` 적용
+- 테이블 요소: 구분선만 사용하는 미니멀 테이블
+
+#### [NEW] index.css
+
+---
+
+### 3. 메인 HTML 및 로직 구현
+- **File Upload Area**: 엑셀 파일을 불러오거나 템플릿을 다운로드 할 수 있는 상단 컨트롤 영역.
+- **Data Table**: 파싱된 H/W 자산 리스트를 출력.
+- **Modal Component**: `README.md`에 정의된 2열 그리드와 우측 상단 닫기, 하단 저장 버튼이 포함된 정보 수정/생성 모달.
+- **Excel Logic**: 업로드된 Excel 데이터를 파싱하여 JSON 형태로 브라우저 메모리에 들고 처리한 후 다시 Excel로 내보내는 기능.
+
+#### [NEW] index.html
+#### [NEW] src/main.ts
+#### [NEW] src/excelHandler.ts
+
+## Open Questions
+
+> [!WARNING]
+> 1. 프론트엔드 프레임워크 강제 규정이 없다면, 경량화 및 설정 편의를 위해 `Vite + Vanilla TypeScript` 를 사용하는 것이 괜찮으신가요? (원하신다면 React나 Vue로도 가능합니다.)
+> 2. 추가적인 검색 필터(예: 법인별, 관리자별 검색)가 당장 도입되어야 하는 필수 기능인가요?
+
+## Verification Plan
+
+### Automated Tests
+- `npm run dev` 를 통해 `http://localhost:8080` 포트 개방 성공 여부 확인.
+- 브라우저 기능 테스트:
+    - 템플릿 다운로드 클릭 -> 정상적인 `hw_assets.xlsx` 다운로드 여부
+    - 샘플 엑셀 파일 업로드 -> 데이터 테이블에 행(Row) 생성 여부
+    - 항목 더블 클릭 혹은 [수정] 버튼 클릭 시 -> 모달 팝업 및 데이터 연동 확인
+    - [저장 후 내보내기] 클릭 -> 업데이트된 데이터가 포함된 새 엑셀 파일 다운로드 확인
+
+### Manual Verification
+- 디자인 요구사항(`Pretendard`, `#1E5149`, Border-less 컨셉) 반영 확인을 스크린샷 렌더링으로 사용자와 상호작용합니다.