# πŸ“— 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` ν•˜μ‹œκΈ° λ°”λžλ‹ˆλ‹€.