50 lines
3.4 KiB
Markdown
50 lines
3.4 KiB
Markdown
# 📗 ITAM 프로젝트 구성 및 협업 가이드
|
|
|
|
본 문서는 ITAM(IT Asset Management System)의 프로젝트 구조와 공동 작업을 위한 가이드를 제공합니다.
|
|
|
|
## 1. 프로젝트 아키텍처 개요
|
|
ITAM은 **중앙 상태 관리(Centralized State)**와 **컴포넌트 기반 UI(Component-based UI)** 구조로 설계되었습니다. 모든 UI와 비즈니스 로직은 기능별로 독립된 파일로 분리되어 있어, 여러 작업자가 충돌 없이 동시에 개발할 수 있습니다.
|
|
|
|
## 2. 핵심 디렉토리 구조 및 역할
|
|
|
|
### 🏗️ 제어 로직 (Core)
|
|
* **`src/main.ts`**: 시스템 관제탑. 전체 컴포넌트 초기화 및 메인 렌더링 흐름을 제어합니다.
|
|
* **`src/state.ts`**: **전역 데이터 창고**. 자산 데이터(`masterData`)와 현재 탭 상태를 중앙에서 관리합니다. 데이터 구조 변경 시 가장 먼저 확인해야 할 파일입니다.
|
|
|
|
### 🛠️ 상세 페이지 및 모달 (Modals)
|
|
모든 자산의 추가/수정/삭제 로직은 `src/components/Modal/` 폴더 내에 독립적으로 구성되어 있습니다.
|
|
|
|
* **`BaseModal.ts`**: 모든 모달의 공통 기능(닫기, ESC 처리, 배경 클릭)을 담당합니다.
|
|
* **`PCModal.ts`**: 개인PC 전용 상세 정보 및 사양 관리.
|
|
* **`HWModal.ts`**: 서버, 전산비품 자산 상세 정보 관리.
|
|
* **`StorageModal.ts`**: 스토리지(NAS/DAS) 특화 필드 및 정보 관리.
|
|
* **`SWModal.ts`**: 소프트웨어 라이선스 기본 정보 관리.
|
|
* **`SWUserModal.ts`**: **복잡한 로직 영역**. 소프트웨어별 사용자 할당/해제 및 매핑 로직을 담당합니다.
|
|
|
|
### 📊 화면 렌더링 (Views)
|
|
* **`src/views/DashboardView.ts`**: HW/SW 현황 통계 및 요약 차트 화면을 렌더링합니다.
|
|
* **`src/views/AssetTableView.ts`**: 각 카테고리별 자산 목록 테이블을 렌더링합니다.
|
|
|
|
## 3. 공동 작업 가이드 (협업 전략)
|
|
|
|
본 프로젝트는 파일 단위로 역할이 명확히 나뉘어 있어, **담당 영역에 따라 독립적인 작업이 가능**합니다.
|
|
|
|
### 👤 담당자별 권장 작업 영역
|
|
| 작업 대상 | 담당 파일 (Primary) | 설명 |
|
|
| :--- | :--- | :--- |
|
|
| **하드웨어(HW) 담당** | `PCModal.ts`, `HWModal.ts`, `StorageModal.ts` | 하드웨어 상세 페이지 및 사양 관리 로직 개발 |
|
|
| **소프트웨어(SW) 담당** | `SWModal.ts`, `SWUserModal.ts` | 소프트웨어 정보 및 사용자 할당 시스템 개발 |
|
|
|
|
### 🤝 공통 영역 및 주의사항
|
|
아래 파일들은 두 담당자가 공통으로 사용하는 영역이므로, 수정 시 Git 충돌에 유의하고 소통이 필요합니다.
|
|
1. **`src/state.ts`**: 데이터 인터페이스(Interface)를 변경할 경우.
|
|
2. **`src/views/AssetTableView.ts`**: 목록 테이블의 공통 스타일이나 HW/SW 테이블 구조를 변경할 경우.
|
|
3. **`src/views/DashboardView.ts`**: 대시보드 통계 알고리즘을 변경할 경우.
|
|
|
|
## 4. 데이터 흐름 (Data Flow)
|
|
1. **데이터 조회**: `AssetTableView`에서 항목 클릭 → 담당 모달의 `openModal(asset)` 호출 → 폼 바인딩.
|
|
2. **데이터 저장**: 모달에서 '저장' 버튼 클릭 → `state.ts`의 전역 상태 업데이트 → `main.ts`의 `renderContent()` 호출 → 전체 화면 즉시 갱신.
|
|
|
|
---
|
|
**Tip**: 새로운 기능을 추가할 때는 `main.ts`에 코드를 직접 작성하지 말고, 적절한 폴더 아래에 새 파일을 만들어 `import` 하시기 바랍니다.
|