sj-sample/mh.md

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