# PRD — 교육 프로그램 모듈 아카이브

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

## 1. 한 줄 정의
제안서마다 따로 저장돼 있던 오프라인 교육 프로그램을 **모듈 카드**(한 시간~반나절 단위 교육 꼭지)로 쪼개 분류·검색하고, 카드를 골라 **새 과정을 조합**하는 우리 팀 아카이브 앱.

## 2. 누가 쓰나
| 역할 | 하는 일 |
|---|---|
| 팀원(과정 기획자) | 모듈 검색·필터, 카드를 골라 새 과정 시간표 만들기, 모듈 목록 CSV 내보내기 |
| 아카이브 관리자(팀 대표 1명) | 새 제안서가 생기면 Claude Code에게 모듈 정리를 맡기고, 결과 CSV를 불러와 카드에 추가 |

## 3. 오늘 만들 기능 (필수)
- [ ] **모듈 카드 보관함**: 모듈 60개를 카드로(모듈명·분류·대상계층·진행형식·시간·출처 제안서·운영 횟수·평균 만족도)
- [ ] **검색·필터**: 검색창(모듈명) + 분류 6개·대상계층 4개 버튼으로 즉시 걸러 보기
- [ ] **현황 대시보드**: KPI 4개(모듈 수·정리한 제안서·운영 횟수·평균 만족도), 분류별 운영 횟수 막대, 진행 형식 도넛
- [ ] **과정 조합하기**: 카드를 골라 담으면 09:00부터 시간표 자동 배치(점심 1시간), 총 시간 진행 막대, 예상 만족도 게이지, 분류×대상계층 히트맵
- [ ] **CSV 불러오기/내보내기 + Claude Code 정리 결과 카드**: `new_modules.csv` 를 불러와 카드에 추가

## 4. 화면 구성
1. **상단**: 앱 이름 · [모듈 카드 보관함 / 과정 조합하기] 탭 · 제안서·모듈 수 표시
2. **보관함 탭**: KPI 카드 4개 → 검색창+필터 버튼 → 모듈 카드 격자(왼쪽) + 분류별 운영 횟수·진행 형식 도넛(오른쪽)
3. **조합 탭**: 시간표(카드 순서 바꾸기) + 총 시간 진행 막대 → 예상 만족도 게이지·분류 구성 막대 → 분류×대상 히트맵 + Claude Code 정리 결과 카드
4. 그래프에 **마우스를 올리면 수치가 말풍선으로**, 카드에 올리면 살짝 떠오르는 효과

## 5. 데이터 — 파일과 항목 (모두 가상 데이터)
| 파일 | 항목 |
|---|---|
| `data/proposals.csv` | 제안서ID, 연도, 고객사, 과정명, 대상계층, 일수, 원본파일, 분류상태(분류완료/미분류), 본문요약 |
| `data/modules.csv` | 모듈ID, 모듈명, 분류, 대상계층, 진행형식(강의/워크숍/실습/게임), 시간, 출처제안서, 키워드 |
| `data/runs.csv` | 운영ID, 운영일, 고객사, 모듈ID, 교육인원, 만족도 |

- 분류 6개: 리더십 · 소통·협업 · 문제해결 · 디지털·AI · 조직문화 · 직무역량 / 대상계층 4개: 신입 · 대리·과장 · 팀장 · 임원
- 운영 횟수·평균 만족도는 `runs.csv` 를 모듈ID로 묶어 계산합니다.
- 저장 위치: 브라우저 저장공간(localStorage) + CSV 파일. **외부 서버·데이터베이스를 쓰지 않습니다.**

## 6. AI 일은 Claude Code가 합니다
앱 안에서 AI를 부르지 않습니다(사내 기준: 별도 API 키 없음). 대신:
1. 새 제안서가 생기면 본문을 `proposals.csv` 에 한 줄로 붙이고 분류상태를 «미분류»로 둡니다.
2. Claude Code가 미분류 제안서 본문을 읽어 모듈을 뽑고, **기존 모듈과 겹치는 것은 빼고** 새 모듈만 `new_modules.csv` 로 저장합니다(분류·대상·형식·시간 추정 포함).
3. 앱에서 `new_modules.csv` 를 불러오면 카드가 늘어나고, «Claude Code 정리 결과» 카드에 요약 3줄이 보입니다.

## 7. 기술 원칙 (로컬 실행)
- 폴더 하나: `Test/program-archive/` 안에 `index.html`, `style.css`, `app.js`, `data/`
- 순수 HTML·CSS·JavaScript. 외부 인터넷 주소(CDN·글꼴)를 불러오지 않음 — 그래프는 직접 그림
- 실행: `python -m http.server 8765` → 브라우저에서 `http://localhost:8765`
- 결과물은 폴더째 zip으로 묶어 가져감. 인터넷에 올리지(배포하지) 않음

## 8. 원래 요청에서 조정한 부분
| 원래 요청 | 오늘은 이렇게 | 이유 |
|---|---|---|
| 제안서 PPT·PDF 파일 전체를 읽어 분류 | 제안서 본문을 텍스트로 옮긴 `proposals.csv` 를 Claude Code가 읽고 모듈 CSV로 정리 | 실제 제안서는 사내 자료 — 가상 제안서 24건으로 같은 흐름 연습 |
| 팀 전체가 함께 쓰는 아카이브 | 내 PC에서 실행, 모듈 CSV를 팀 공유 폴더에 두고 각자 불러오기 | 외부 배포·서버 금지 |

## 9. 완료 기준 (테스트)
- [ ] `data/modules.csv` 를 불러오면 모듈 카드가 **60개**, 운영 이력 **90회**, 평균 만족도 **4.46점**으로 표시된다
- [ ] «디지털·AI» 버튼을 누르면 카드가 **10개**로 줄고, 검색창에 «AI»를 치면 이름에 AI가 든 카드만 남는다
- [ ] M002·M003·M024·M039 를 담으면 시간표가 09:00~17:00(점심 포함) **7시간**으로 채워진다
- [ ] Claude Code가 미분류 제안서 **4건**에서 새 모듈 약 **11개**를 찾아 `new_modules.csv` 를 만들고, 불러오면 카드가 늘어난다
- [ ] 새로고침(F5)해도 담아 둔 과정이 남아 있고, 폴더를 zip으로 풀어도 똑같이 실행된다

## 10. 다음 단계 (집에서 더 키울 것)
- 제안서 PPT·PDF 원본을 폴더째 Claude Code에게 읽혀 자동 분류
- 조합한 과정을 제안서 PPT 초안(커리큘럼 표)으로 내보내기
- 팀 공유 폴더·그룹웨어 연동은 사내 IT 검토 후