Add dashboard comparison document
This commit is contained in:
36
README_MH_v2.md
Normal file
36
README_MH_v2.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# 📊 MH 분석용 대시보드 (`mh.html`) 상세 분석 및 비교
|
||||
|
||||
이 문서는 기존 `dashboard.html`과 새롭게 추가된 `mh.html`의 차이점을 분석하고, `mh.html`이 제공하는 주요 기능을 정리한 보고서입니다.
|
||||
|
||||
## 1. 개요 (What is mh.html?)
|
||||
`mh.html`은 **Tailwind CSS**, **Google Charts**, **SheetJS**, **Lucide Icons**를 활용하여 제작된 실시간 Man-Hour(MH) 데이터 시각화 도구입니다. 엑셀 데이터를 업로드하여 팀 및 개인별 리소스 투입 현황을 정밀하게 분석할 수 있습니다.
|
||||
|
||||
## 2. 기존 `dashboard.html`과의 주요 차이점
|
||||
|
||||
| 구분 | 기존 (`dashboard.html`) | 신규 (`mh.html`) |
|
||||
| :--- | :--- | :--- |
|
||||
| **검색 기능** | 팀/팀원 선택(Select Box)만 가능 | **통합 검색창(Search Bar)** 추가 (팀/개인 동시 검색) |
|
||||
| **프로젝트 상세** | 유닛별 프로젝트 리스트만 출력 | **프로젝트 클릭 시 참여 명단 팝업(Modal)** 출력 |
|
||||
| **네비게이션** | 필터 선택 후 조회 | **팝업 내 팀원 클릭 시** 해당 팀원 상세 분석으로 즉시 이동 |
|
||||
| **UI 디자인** | 기본 정적 그리드 레이아웃 | **스티키 헤더(Sticky Header)**, 유리 효과(Glassmorphism) 적용 |
|
||||
| **시각적 요소** | 정규/연장 근무 구분 차트 | **과부하 위험군(Overlimit)** 발생 시 애니메이션 알림(Ring 효과) |
|
||||
|
||||
## 3. `mh.html`의 핵심 기능 상세
|
||||
|
||||
### ✅ 통합 검색 엔진 (Search Dropdown)
|
||||
- 사용자가 팀 이름이나 팀원의 이름을 입력하면 실시간으로 결과를 제안합니다.
|
||||
- 대규모 조직 데이터에서도 특정 대상을 즉시 찾을 수 있어 편의성이 대폭 향상되었습니다.
|
||||
|
||||
### ✅ 프로젝트 참여 명단 모달 (Project Members Modal)
|
||||
- 특정 프로젝트 카드를 클릭하면, 해당 프로젝트에 참여한 **모든 팀원 리스트**와 **직급별 투입 시간**을 팝업창으로 보여줍니다.
|
||||
- 팝업 내에서 팀원의 분석 화면으로 바로 이동할 수 있는 링크 기능을 포함합니다.
|
||||
|
||||
### ✅ 스마트 필터링 및 차트 연동
|
||||
- **기간 설정:** 시작일과 종료일을 지정하여 특정 기간의 데이터만 정밀하게 분석합니다.
|
||||
- **다차원 분석:** 비즈니스 유닛별 비율(Pie Chart)과 개인별 상세 현황(Bar Chart)이 실시간으로 상호 연동됩니다.
|
||||
|
||||
### ✅ 근무 가이드라인 시각화
|
||||
- 평일 8시간 근무 기준을 초과한 인원에 대해 **타겟 리미트(Target Limit)** 경계선을 차트에 표시하고, 경고 아이콘(`⚠️`)을 출력하여 리소스 관리를 돕습니다.
|
||||
|
||||
---
|
||||
*본 문서는 `mh.html` 업로드와 함께 자동 생성되었습니다.*
|
||||
Reference in New Issue
Block a user