H/W 자산관리 시스템 프로토타입 구현 계획 (Excel 기반 DB)

현재 프로젝트는 DB 연동 없이 프로토타입으로 개발되며, 초기 H/W 자산을 엑셀 파일로 관리할 수 있도록 설계합니다. 지정된 디자인 가이드라인(README.md)에 따라 세련되고 전문적인 UI를 Vite + Vanilla JS (또는 TS) 기반으로 구축합니다.

User Review Required

Important

엑셀을 DB처럼 사용하는 방식에 대한 주요 동작 흐름은 다음과 같습니다. 해당 방식이 의도하신 바와 맞는지 확인 부탁드립니다.

화면 진입 시 제공되는 템플릿 엑셀 파일 다운로드

해당 양식에 맞춰 데이터 입력 후 브라우저에 엑셀 파일 업로드(Import)

웹 상에서 Data Table 형태로 렌더링 (편집/추가/삭제 기능 제공)

수정이 완료된 후 엑셀 파일로 다시 다운로드(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

프론트엔드 프레임워크 강제 규정이 없다면, 경량화 및 설정 편의를 위해 Vite + Vanilla TypeScript 를 사용하는 것이 괜찮으신가요? (원하신다면 React나 Vue로도 가능합니다.)

추가적인 검색 필터(예: 법인별, 관리자별 검색)가 당장 도입되어야 하는 필수 기능인가요?

Verification Plan

Automated Tests

npm run dev 를 통해 http://localhost:8080 포트 개방 성공 여부 확인.
브라우저 기능 테스트:
- 템플릿 다운로드 클릭 -> 정상적인 hw_assets.xlsx 다운로드 여부
- 샘플 엑셀 파일 업로드 -> 데이터 테이블에 행(Row) 생성 여부
- 항목 더블 클릭 혹은 [수정] 버튼 클릭 시 -> 모달 팝업 및 데이터 연동 확인
- [저장 후 내보내기] 클릭 -> 업데이트된 데이터가 포함된 새 엑셀 파일 다운로드 확인

Manual Verification

디자인 요구사항(Pretendard, #1E5149, Border-less 컨셉) 반영 확인을 스크린샷 렌더링으로 사용자와 상호작용합니다.

4.0 KiB Raw Blame History