# PRD — 신입 매니저 1년 온보딩·OJT 관리

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

## 1. 한 줄 정의
지금은 바인더로 관리하는 신입 매니저의 **1년 온보딩(입사 안내 → OJT → 1·3·6·12개월 인터뷰)**을 한 화면에서 관리하고, 온보딩 담당자·신입 매니저·버디·팀장이 **소통 공간**에서 이야기를 나누는 앱.

## 2. 누가 쓰나
| 역할 | 하는 일 |
|---|---|
| 온보딩 담당자 | 신입 전체의 OJT 진척·인터뷰 일정 확인, 인터뷰 기록, 공지 글쓰기 |
| 신입 매니저 | 1년 로드맵·이번 달 OJT 과제·입사 안내 확인, 소통 공간에 글쓰기 |
| 버디 | 담당 신입의 OJT 과제 «완료» 확인, 동행 일정 공유 |
| 배치 팀 팀장 | 팀 신입의 진척 확인, 안전·평가 과제 확인, 응원 댓글 |

## 3. 오늘 만들 기능 (필수)
- [ ] **담당자 대시보드**: 카드 4개(관리 중인 신입 수·OJT 이행률·인터뷰 진행·평균 적응도), 신입별 OJT 진척 표(관심 필요 순), 영역별 완료율 막대, 월별 완료 선그래프, 인터뷰 현황 도넛
- [ ] **신입 매니저 화면**: 이름을 고르면 1년 로드맵(12칸, 지금 월차 강조) + OJT 체크리스트(완료/진행/지연) + 내 버디·팀장·담당자 + 내 인터뷰 일정
- [ ] **인터뷰 관리**: 1·3·6·12개월 인터뷰 목록(예정/완료/지연), 완료 시 적응도(1~5)·메모 입력
- [ ] **소통 공간**: 글쓰기, 역할 필터(전체·담당자·신입·버디·팀장), 댓글 수 표시. 위쪽에서 «누구로 볼지» 역할을 바꿔 시연
- [ ] **Claude Code 분석 카드**: `interview_insight.md` 를 담당자 화면 카드로 보여 주기

## 4. 화면 구성
1. **상단**: 앱 이름 · [온보딩 담당자 / 신입 매니저 / 소통 공간] 탭 · 기준 날짜
2. **왼쪽 메뉴**: 온보딩 현황 · 입사 안내 · OJT 관리 · 인터뷰 관리 · 소통 공간 + 입사 기수(1월·7월·9월)
3. **담당자 화면**: KPI 카드 4개 → OJT 진척 표 + 영역별 완료율 + 월별 완료 그래프 → 인터뷰 도넛 + Claude Code 분석 카드
4. **신입 화면**: 1년 로드맵 → 체크리스트 · 진척 게이지 · 내 온보딩 팀/인터뷰
5. **소통 공간**: 글쓰기 상자 → 역할 필터 → 글 목록 / 오른쪽에 역할별 참여 막대·다가오는 인터뷰
6. 그래프에 **마우스를 올리면 수치가 말풍선으로** 보이고, 카드에 마우스를 올리면 그래프가 다시 채워지는 애니메이션

## 5. 데이터 — 파일과 항목 (모두 가상 데이터)
| 파일 | 항목 |
|---|---|
| `data/managers.csv` | 매니저ID, 이름, 입사일, 배치팀, 팀장, 버디, 현재월차 (18명) |
| `data/ojt_records.csv` | 매니저ID, 과제ID, 월차, 영역, 과제명, 확인자구분, 상태(완료/진행/지연), 완료일, 확인자 (171건) |
| `data/interviews.csv` | 인터뷰ID, 매니저ID, 회차(1/3/6/12개월), 예정일, 상태(완료/예정/지연), 면담자, 적응도, 메모 (52건) |
| `data/board.csv` | 글ID, 작성일, 작성자, 역할, 관련매니저, 내용, 댓글수 (30건) |

**OJT 계획표 (1년 16개 과제)** — 앱의 로드맵과 체크리스트는 이 표를 기준으로 만든다.
| 월차 | 영역 | 과제 | 확인자 |
|---|---|---|---|
| 1 | 회사 이해 | 입사 안내·사내 시스템 계정 개설 | 담당자 |
| 1 | 안전 | 현장 안전교육 이수(8시간) | 팀장 |
| 2 | 직무 기초 | 승강기 구조·용어 기초 학습 | 버디 |
| 2 | 현장 실습 | 버디 동행 점검 5회 | 버디 |
| 3 | 직무 기초 | 작업 표준서 읽고 요약 제출 | 버디 |
| 3 | 고객 응대 | 고객 응대 롤플레이 | 팀장 |
| 4 | 현장 실습 | 정기 점검 단독 수행(버디 확인) | 버디 |
| 4 | 회사 이해 | 타 부서 업무 견학 2곳 | 담당자 |
| 5 | 안전 | 위험성 평가 실습 | 팀장 |
| 6 | 성장 계획 | 6개월 회고·성장 목표 작성 | 팀장 |
| 7 | 현장 실습 | 고장 대응 사례 3건 정리 | 버디 |
| 8 | 고객 응대 | 고객 민원 처리 동행 | 버디 |
| 9 | 직무 기초 | 직무 자격 필기 준비 | 담당자 |
| 10 | 현장 실습 | 신규 설치 현장 참여 | 팀장 |
| 11 | 성장 계획 | OJT 결과 발표 | 팀장 |
| 12 | 성장 계획 | 1년 회고·수료 면담 | 담당자 |

- 저장 위치: 브라우저 저장공간(localStorage) + CSV 파일. **외부 서버·데이터베이스를 쓰지 않습니다.**
- OJT 이행률 = 완료 건수 ÷ 지금까지 해야 할 과제 수(현재 월차까지) × 100

## 6. AI 분석은 Claude Code가 합니다
앱 안에서 AI를 부르지 않습니다(사내 기준: 별도 API 키 없음). 대신:
1. 담당자 화면의 **[분석 요청문 복사]** → Claude Code 입력창에 붙여넣기
2. Claude Code가 `data/interviews.csv`(적응도·메모)와 `data/ojt_records.csv`(지연 과제)를 읽어 **관심이 필요한 신입·고민 주제·이번 달 할 일**을 `interview_insight.md` 로 저장
3. (선택) `data/board.csv` 를 읽어 소통 공간 요약을 `board_summary.md` 로 저장
4. 앱이 두 파일을 읽어 «Claude Code 분석» 카드에 표시

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

## 8. 원래 요청에서 조정한 부분
| 원래 요청 | 오늘은 이렇게 | 이유 |
|---|---|---|
| 담당자·신입·버디·팀장 70여 명이 각자 접속해 이야기 공유 | 한 PC에서 역할 전환 탭으로 글쓰기·댓글 시연 + 게시판 CSV | 외부 배포 금지 — 여러 사람이 동시에 쓰려면 서버가 필요 |
| 입문 과정마다 다른 툴을 하나로 | 입사 안내·과정 자료는 링크 목록으로만 모아 보여 주기 | 각 툴과 실제 연동하려면 계정·권한이 필요 |
| 인터뷰 내용 정리·분석 | Claude Code가 인터뷰 메모를 읽고 `interview_insight.md` 작성 | 앱 안 AI 호출에는 별도 API 키가 필요 |

## 9. 완료 기준 (테스트)
- [ ] CSV를 불러오면 관리 중인 신입이 **18명**, OJT 이행률이 **81.3%**(171건 중 139건 완료)로 표시된다
- [ ] 인터뷰 현황이 **완료 33 · 예정 18 · 지연 1**(총 52건), 평균 적응도가 **4.1점**으로 보인다
- [ ] OJT 진척 표 맨 위에 진척 33%(2/6)인 9월 입사 신입이 온다
- [ ] 신입 매니저 화면에서 과제 1개를 체크하면 그 사람의 진척 %가 올라가고, 새로고침(F5)해도 남아 있다
- [ ] 소통 공간에서 글을 1개 쓰면 전체 글 수가 **30 → 31**로 늘고, «신입» 필터를 누르면 신입 글만 보인다
- [ ] Claude Code가 만든 `interview_insight.md` 가 담당자 화면 카드에 보인다
- [ ] 폴더를 zip으로 묶어 다른 폴더에 풀어도 똑같이 실행된다

## 10. 다음 단계 (집에서 더 키울 것)
- 입문 과정별 교안·영상 자료를 과정 카드에 연결
- 버디·팀장 월간 피드백 양식과 기수별 비교 그래프
- 사내 계정 로그인·알림은 사내 IT 검토 후

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

로컬판이 완성된 뒤, 신입·버디·팀장·담당자 70여 명이 1년 동안 각자 접속하는 웹앱으로 옮길 때의 설계입니다. 인터뷰 메모·적응도는 민감한 개인 정보이므로 **사내 서버 요청이 기본이고, 실제 데이터는 사내 IT 승인 전에는 넣지 않습니다.**

| 구분 | 로컬판 | 웹앱판 |
|---|---|---|
| 입력 | 담당자 PC에서 역할 전환 탭으로 시연 | 신입·버디·팀장이 각자 로그인해 입력 |
| 저장 | 브라우저 저장공간 + CSV | Supabase 표 4개(사람·OJT 과제·인터뷰·소통 글) |
| 화면 주소 | localhost (내 PC) | Vercel 주소 (모두 같은 주소, 휴대폰 가능) |
| 권한 | 없음 | 신입은 내 것만, 버디·팀장은 담당 신입만, 담당자는 전체 |

- 로그인: Supabase 이메일 로그인. 역할(담당자·신입·버디·팀장)을 사람 표에 표시
- 잠금 설정: 로그인한 사람만 보기, 인터뷰 메모·적응도는 담당자만, OJT «완료» 확인은 지정된 확인자만
- OJT 계획표 16개 과제·이행률 계산·관심 필요 순 정렬은 로컬판과 같게 유지
- 인터뷰 메모 분석은 지금처럼 Claude Code가 하고, 결과만 담당자 화면에 올리기
- 가상 데이터(data 폴더 CSV)로 먼저 채워 시험한 뒤 실제 사용은 IT 확인 후

### 웹앱판 완료 기준
- [ ] 담당자 계정으로 로그인하면 신입 18명, OJT 이행률 81.3%(171건 중 139건 완료), 인터뷰 52건이 보인다
- [ ] 신입 계정으로 로그인하면 내 로드맵·체크리스트만 보이고, 인터뷰 메모는 보이지 않는다
- [ ] 휴대폰에서 소통 공간에 글을 1개 쓰면 다른 PC 화면에서도 전체 글 수가 30 → 31로 늘어난다
- [ ] 로그인하지 않으면 데이터가 보이지 않는다