# 📊 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` 업로드와 함께 자동 생성되었습니다.*