# PRD — 교육 운영 대시보드

> **실습 방식**: 내 PC 안(로컬) · Claude 데스크톱 앱 **Code** 탭 · 다운로드 › **Test** 폴더 · 가상 데이터만 사용
> 이 문서를 Claude Code가 그대로 읽고 앱을 만듭니다. 고치고 싶은 곳은 직접 고쳐도 됩니다.

## 1. 한 줄 정의
교육별로 흩어진 신청·참석·수료·만족도 자료를 **한 화면의 대시보드**로 모으고, **교육마다 다른 수료 기준(출석률·과제·시험)으로 수료 여부를 자동 판정**하며, 월간 실적을 팀장 보고용으로 정리하는 앱.

## 2. 누가 쓰나
| 역할 | 하는 일 |
|---|---|
| 교육 담당자 (주 2~3회) | 교육생 CSV 불러오기, 교육별 수료 판정 확인·기준 조정, 진행 현황 관리 |
| 팀원 | 교육별 운영 현황·실적 확인 |
| 팀장·관리자 (월 1~2회) | «월간 실적 보고» 탭에서 월별 실적과 요약 확인 |

## 3. 오늘 만들 기능 (필수)
- [ ] **통합 현황**: KPI 카드 4개(이번 달 교육 수·신청→참석·수료율·평균 만족도), 교육별 진행 표(상태·신청·참석·수료·수료율·만족도), 교육 일정 막대(오늘 표시), 신청→참석→수료 막대, 미수료 사유 도넛
- [ ] **교육생 일괄 등록**: `data/learners.csv` 불러오기 → 교육별로 자동 등록
- [ ] **수료 자동 판정**: `programs.csv` 의 교육별 기준으로 «수료 / 미수료(사유: 출석·과제·시험) / 불참» 계산, 기준 값을 바꾸면 즉시 재계산
- [ ] **월간 실적 보고**: 1~10월 신청·참석·수료 선그래프, 월별 수료율 막대, 누적 KPI
- [ ] **보고 요약 보기**: Claude Code가 만든 `report-2026-10.md` 를 «월간 실적 보고» 탭 카드에 표시

## 4. 화면 구성
1. **상단**: 앱 이름 · [통합 현황 / 교육별 상세·수료 판정 / 월간 실적 보고] 탭 · 기준 월 선택
2. **통합 현황**: KPI 4개 → 왼쪽 교육별 진행 표 + 일정 막대 / 오른쪽 신청→참석→수료 막대 + 미수료 사유 도넛 + 참석률
3. **교육별 상세**: 교육 선택 · 파일 불러오기 칸 → 수료 기준 카드 3개(출석률·과제·시험) → 교육생별 판정 표(기준 미달 값은 빨간 글씨) / 오른쪽 수료율 게이지·수료·미수료·불참 비율·시험 점수 분포
4. **월간 실적 보고**: 누적 KPI 4개 → 월별 선그래프 + 월별 수료율 막대 → Claude Code 요약 카드
5. 그래프에 **마우스를 올리면 수치가 말풍선으로** 보이고, 카드에 마우스를 올리면 그래프가 다시 채워지는 애니메이션

## 5. 데이터 — 파일과 항목 (모두 가상 데이터)
| 파일 | 항목 |
|---|---|
| `data/programs.csv` | 교육ID, 교육명, 구분, 시작일, 종료일, 총일수, 기준_출석률(%), 기준_과제(필수/없음), 기준_시험(점, 0=시험 없음), 정원 |
| `data/learners.csv` | 교육ID, 사번, 이름, 부서, 출석일수, 총일수, 과제(제출/미제출/빈칸), 시험점수 — 155명 |
| `data/satisfaction.csv` | 교육ID, 응답ID, 만족도(1~5) — 85건 |
| `data/monthly.csv` | 월, 교육건수, 신청, 참석, 수료, 평균만족도 — 2026-01 ~ 2026-10 |

- **판정 규칙**: 출석일수 0 → «불참». 아니면 ① 출석률(출석일수÷총일수×100) ≥ 기준 ② 과제 기준이 «필수»면 «제출» ③ 시험 기준이 0이 아니면 점수 ≥ 기준 — 셋 다 맞으면 «수료», 아니면 «미수료»와 맞지 않은 항목을 사유로 표시
- 출석일수가 빈칸이면 «예정»(아직 시작 전), 진행 중인 교육(종료일이 오늘 이후)은 판정하지 않음
- 수료율 = 수료 ÷ 참석(불참 제외). 참석률 = 참석 ÷ 신청
- 저장 위치: 브라우저 저장공간(localStorage) + CSV 파일. **외부 서버·데이터베이스를 쓰지 않습니다.**

## 6. AI 분석은 Claude Code가 합니다
앱 안에서 AI를 부르지 않습니다(사내 기준: 별도 API 키 없음). 대신:
1. «월간 실적 보고» 탭의 **[보고서 요청문 복사]** → Claude Code 입력창에 붙여넣기
2. Claude Code가 CSV 4개를 읽어 **이번 달 실적·전월 대비·미수료 원인·만족도·개선 제안**을 `report-2026-10.md` 로 저장
3. 앱이 `report-2026-10.md` 를 읽어 «Claude Code 요약» 카드에 표시

## 7. 기술 원칙 (로컬 실행)
- 폴더 하나: `Test/training-ops-dashboard/` 안에 `index.html`, `style.css`, `app.js`, `data/`
- 순수 HTML·CSS·JavaScript. 외부 인터넷 주소(CDN·글꼴)를 불러오지 않음 — 그래프는 직접 그리거나 라이브러리 파일을 폴더 안에 내려받아 사용
- 화면 기준일은 2026-10-28 로 고정(가상 데이터와 맞추기 위해)
- 실행: `python -m http.server 8765` → 브라우저에서 `http://localhost:8765`
- 결과물은 폴더째 zip으로 묶어 가져감. 인터넷에 올리지(배포하지) 않음

## 8. 원래 요청에서 조정한 부분
| 원래 요청 | 오늘은 이렇게 | 이유 |
|---|---|---|
| 기존 엑셀 자료를 업로드하면 자동 반영 | 엑셀에서 «CSV UTF-8»로 저장한 `learners.csv` 불러오기 | .xlsx 직접 읽기는 별도 라이브러리 필요 — 오늘은 CSV로 단순하게 |
| 메일·Teams·설문 자료를 자동 취합 | 각 시스템에서 내보냈다고 가정한 CSV(교육생·만족도·월별 실적) 불러오기 | 그룹웨어·Teams 연동은 사내 권한·IT 검토 필요 |
| 팀장 보고용 결과보고서 자동 생성 | Claude Code가 `report-2026-10.md` 작성 → 앱에 표시 | 앱 안 AI 호출에는 별도 API 키가 필요 |
| 담당자·팀원·팀장이 각자 접속 | 한 PC에서 탭 전환으로 시연 | 외부 배포 금지 — 여러 사람이 접속하려면 서버 공개가 필요 |

## 9. 완료 기준 (테스트)
- [ ] CSV를 불러오면 교육 **6개**, 교육생 **155명**이 등록된다
- [ ] «신입사원 입문교육»(출석 90%↑·과제 필수·시험 70점↑) 판정 결과가 수료 **17명** · 미수료 **10명** · 불참 **1명**, 수료율 **63.0%** 다
- [ ] 같은 교육의 시험 기준을 **60점**으로 바꾸면 수료가 **19명**으로 바로 늘어난다
- [ ] 통합 현황에서 완료된 교육 4개 합계가 신청 **96** · 참석 **92** · 수료 **59**(수료율 **64.1%**), 미수료 사유가 출석 **21** · 과제 **6** · 시험 **6** 으로 나온다
- [ ] 10월 평균 만족도가 **4.38점**(응답 85건)으로 나온다
- [ ] [보고서 요청문 복사] 후 Claude Code에 붙여넣으면 `report-2026-10.md` 가 생기고 «월간 실적 보고» 탭에 보인다
- [ ] 새로고침(F5)해도 불러온 자료가 남아 있고, 폴더를 zip으로 묶어 다른 폴더에 풀어도 똑같이 실행된다

## 10. 다음 단계 (집에서 더 키울 것)
- 교육 등록·수정 화면(지금은 `programs.csv` 로 관리)
- 미수료자 보충 회차 대상 명단 + 안내 문구 미리보기
- 연간 실적 PPT 한 장 요약 자동 만들기
- Outlook·Teams 알림 연동은 사내 IT 검토 후