# 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 검토 후

## 11. 웹앱·서버 버전 (교육 후, 사내 기준 확인 뒤)

로컬판이 완성된 뒤, 신입 44명과 운영자 6~10명이 각자 접속하는 웹앱으로 옮길 때의 설계입니다. **실제 신입 명단·연락처는 사내 IT 승인 전에는 넣지 않습니다.**

| 구분 | 로컬판 | 웹앱판 |
|---|---|---|
| 입력 | 한 PC에서 신입/운영자 탭 전환 | 신입 44명이 각자 로그인해 입력 |
| 저장 | 브라우저 저장공간 + CSV | Supabase 표 4개(교육생·사전학습 이수·포인트·자기소개 게시판) |
| 화면 주소 | localhost (내 PC) | Vercel 주소 (모두 같은 주소, 휴대폰 가능) |
| 권한 | 없음 | 신입은 내 기록만, 운영자는 전체 보기·포인트 주기 |

- 로그인: Supabase 이메일 로그인. 운영자 계정은 «운영자» 역할 표시
- 잠금 설정: 로그인한 사람만 보기, 신입은 자기 이수 기록·자기소개만 고치기, 포인트 주기는 운영자만
- 포인트 규칙·캐릭터 아이템(20P·35P·50P)·조별 점수판·메일 예약 미리보기는 로컬판과 같게 유지
- 실제 메일 발송·사내 계정 로그인은 사내 IT 검토 후. 가상 데이터(data 폴더 CSV)로 먼저 시험

### 웹앱판 완료 기준
- [ ] 신입 계정으로 로그인하면 내 사전학습·포인트·캐릭터만 보이고 고칠 수 있다
- [ ] 운영자 계정으로 로그인하면 신입 44명, 이수율 76.4%(220강 중 168강)가 보인다
- [ ] 운영자가 포인트를 주면 다른 휴대폰의 조별 점수판(합계 1,230P에서)이 바로 늘어난다
- [ ] 로그인하지 않으면 명단·점수판이 보이지 않는다