# PRD — 신입매니저 입문과정 포털

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

## 1. 한 줄 정의
신입매니저가 **입문과정 안내(일정·입소 장소·준비물·문의처·설문)와 사전학습**을 한 페이지에서 확인하고, 과정 중에는 **자기소개 게시판·포인트·캐릭터 꾸미기·조별 점수판**으로 즐겁게 참여하며, 운영자는 학습 이력을 보고 포인트를 주는 **귀여운 그룹 캐릭터 포털**.

## 2. 누가 쓰나
| 역할 | 하는 일 |
|---|---|
| 신입매니저 (약 44명) | 환영·일정·입소 안내 확인, 사전학습 5강 보기·완료 체크, 설문 응답, 자기소개 작성, 포인트로 캐릭터 꾸미기, 조별 점수 확인 |
| 운영자 (6~10명) | 사전학습 이력·설문 응답 확인, 포인트 주기, 안내 메일 예약·대상자 미리보기 |

## 3. 오늘 만들 기능 (필수)
- [ ] **신입 홈**: 환영 배너(그룹 캐릭터 4종) · 2박 3일 일정 · 입소 장소·준비물·문의처 · 사전 설문 버튼 · 회사별 지원 사이트 링크
- [ ] **사전학습**: 이러닝 5강 목록(링크 열기) + «다 봤어요» 체크 → 완료 기록 저장, 내 진도 막대
- [ ] **우리 조·포인트**: 조별 점수판(막대 + 캐릭터), 내 캐릭터 꾸미기(포인트로 아이템 열기), 자기소개 게시판(쓰면 +10P)
- [ ] **운영자 화면**: KPI 카드 4개, 학습 이력 표(사전학습 적은 순) + 포인트 주기, 강의별 이수 막대, 설문 응답 도넛, 안내 메일 예약 목록
- [ ] **Claude Code 결과 카드**: `icebreak.md`(자기소개 분석·아이스브레이킹 질문·독려 메일 문구)를 운영자 화면에 표시

## 4. 화면 구성
1. **상단**: 앱 이름 · [신입 홈 / 우리 조·포인트 / 운영자] 탭 · 내 이름·조
2. **신입 홈**: 환영 배너 → 일정 카드 · 입소 안내 카드 · 사전학습 카드(진도 막대 + 5강)
3. **우리 조·포인트**: 조별 점수판 · 내 캐릭터 꾸미기 → 자기소개 게시판(포스트잇 카드) · 조별 포인트 흐름 선그래프
4. **운영자**: KPI 4개 → 학습 이력 표 · 강의별 이수 · 설문 도넛 · 메일 예약 · Claude Code 카드
5. **분위기**: 파스텔 색, 둥근 모서리, 캐릭터에 마우스를 올리면 살짝 뛰어오름. 그래프에 **마우스를 올리면 수치 말풍선**

**캐릭터 그림**: `data/images/p10_mascot.png` — 한 장에 캐릭터 4마리가 가로로 나란히 있음(왼쪽부터 기본 · 학사모 · 헤드셋 · 망토). 한 마리씩 잘라서 씀.
| 조 | 캐릭터 | 꾸미기 아이템 | 필요 포인트 |
|---|---|---|---|
| 1조 새싹조 | 기본 새싹 | 기본 | 0P |
| 2조 학사모조 | 학사모 | 학사모 | 20P |
| 3조 헤드셋조 | 헤드셋·노트북 | 헤드셋 | 35P |
| 4조 망토조 | 빨간 망토 | 망토 | 50P |

## 5. 데이터 — 파일과 항목 (모두 가상 데이터)
| 파일 | 항목 |
|---|---|
| `data/program.csv` | 구분(사전학습/일정), 코드, 시간, 제목, 장소·링크, 분량 — 이러닝 5강 + 일정 9개 |
| `data/trainees.csv` | 교육생ID, 이름, 소속사(A~E사), 조, 조이름, 한줄소개, 포인트, 캐릭터아이템, 사전설문 (44명) |
| `data/study_log.csv` | 교육생ID, 강의코드(E1~E5), 완료일시, 상태 (168건) |
| `data/points.csv` | 일시, 교육생ID, 조, 사유, 점수 (97건) |

- 포인트 규칙: 자기소개 작성 +10 · 사전학습 5강 완주 +20 · 퀴즈 정답 +5 · 조별 과제 제출 +30 · 발표 +40(최우수 +50) · 설문 응답 +10
- 저장 위치: 브라우저 저장공간(localStorage) + CSV 파일. **외부 서버·데이터베이스를 쓰지 않습니다.**
- 사전학습 이수율 = 완료 건수 ÷ (인원 × 5강) × 100

## 6. AI 일은 Claude Code가 합니다
앱 안에서 AI를 부르지 않습니다(사내 기준: 별도 API 키 없음). 대신:
1. 운영자 화면의 **[요청문 복사]** → Claude Code 입력창에 붙여넣기
2. Claude Code가 `data/trainees.csv` 한줄소개와 `data/study_log.csv` 를 읽어 **공통 취미·조별 아이스브레이킹 질문·미완주자 독려 메일 문구**를 `icebreak.md` 로 저장
3. 앱이 `icebreak.md` 를 읽어 «Claude Code 자기소개 분석» 카드에 표시

## 7. 기술 원칙 (로컬 실행)
- 폴더 하나: `Test/intro-camp/` 안에 `index.html`, `style.css`, `app.js`, `data/`(CSV 4개 + `images/p10_mascot.png`)
- 순수 HTML·CSS·JavaScript. 외부 인터넷 주소(CDN·글꼴)를 불러오지 않음 — 그래프는 직접 그림
- 이러닝·회사별 사이트 링크는 «새 창으로 열기»만 함(가상 주소)
- 실행: `python -m http.server 8765` → 브라우저에서 `http://localhost:8765`
- 결과물은 폴더째 zip으로 묶어 가져감. 인터넷에 올리지(배포하지) 않음

## 8. 원래 요청에서 조정한 부분
| 원래 요청 | 오늘은 이렇게 | 이유 |
|---|---|---|
| 안내 메일을 정해진 시점에 자동 발송 | D-7·D-3·D-2 메일 예약 목록 + 대상자·문구 미리보기 + 대상자 CSV 내보내기 | 메일 서버 연동은 외부 시스템 연결이라 오늘 범위 밖 |
| 이러닝 시청 완료를 자동 기록 | 링크 열기 + «다 봤어요» 체크, 지난 기록은 `study_log.csv` 로 불러오기 | 사내 이러닝 시스템 시청 기록을 가져오려면 연동 권한 필요 |
| 신입 50명이 각자 접속해 참여 | 한 PC에서 신입/운영자 탭 전환으로 시연 | 외부 배포 금지 — 동시 접속에는 서버가 필요 |

## 9. 완료 기준 (테스트)
- [ ] CSV를 불러오면 신입 **44명**, 사전학습 이수율 **76.4%**(220강 중 168강), 5강 완주 **19명**이 보인다
- [ ] 조별 점수판이 **망토조 365 · 학사모조 305 · 헤드셋조 305 · 새싹조 255**(합계 1,230P)로 표시된다
- [ ] 사전 설문 응답이 **38 / 44명**, 운영자 학습 이력 표 맨 위에 사전학습 **0 / 5** 인 2명이 온다
- [ ] 윤지유(새싹조, 10P)가 «정보보안» 강의를 «다 봤어요» 하면 4/5 → **5/5**, +20P 가 쌓여 30P가 되고 학사모가 열린다
- [ ] 운영자 화면에서 포인트를 주면 조별 점수판 막대가 바로 늘어나고, 새로고침(F5)해도 남아 있다
- [ ] Claude Code가 만든 `icebreak.md` 가 운영자 화면 카드에 보인다
- [ ] 폴더를 zip으로 묶어 다른 폴더에 풀어도 캐릭터 그림까지 똑같이 보인다

## 10. 다음 단계 (집에서 더 키울 것)
- 상·하반기 기수 전환, 지난 기수 점수판 보관
- 수료 후 사후 과제·동기 모임 게시판
- 실제 메일 발송·사내 계정 로그인은 사내 IT 검토 후