# PRD — 주간 업무보고 자동 취합

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

## 1. 한 줄 정의
팀원이 업무별 **진행률·금주 실적·차주 계획·이슈**를 입력하면 주간보고가 **자동 취합**되고, 끝나지 않은 업무는 **다음 주로 자동 이월**되며, 최종 보고서는 **기존 엑셀 양식 열 순서로 내려받는** 앱.

## 2. 누가 쓰나
| 역할 | 하는 일 |
|---|---|
| 팀원(5명) | 내 업무 화면에서 이월된 내용 확인 → 바뀐 칸만 고치고 제출 |
| 팀장·취합 담당 | 취합 대시보드 확인, 지연 업무 확인, 엑셀 양식으로 내려받기, Claude Code 문장 정리 결과 보기 |

## 3. 오늘 만들 기능 (필수)
- [ ] **보고 CSV 불러오기**: `data/weekly_reports.csv`(40~44주차) 를 불러와 브라우저 저장공간에 저장
- [ ] **팀원 입력 화면**: 주차를 고르면 전주 미완료 업무가 금주 실적·차주 계획·진행률까지 **미리 채워짐**, 고친 칸은 색으로 표시, 완료된 업무는 이월하지 않음
- [ ] **팀장 대시보드**: KPI 4개(보고 업무·평균 진행률·완료/지연·다음 주 이월), 주간보고 표, 상태 도넛, 담당자별 진행률 막대, 주차별 평균 진행률 선 그래프
- [ ] **엑셀 양식으로 내려받기**: `data/report_format.csv` 와 같은 열 순서로 `주간보고_44주차.csv` 저장(엑셀에서 바로 열림)
- [ ] **보고 문장 정리 보기**: Claude Code가 만든 `summary.md` 를 대시보드 카드로 표시

## 4. 화면 구성
1. **상단**: 앱 이름 · [팀장 대시보드 / 팀원 입력] 탭 · 주차 선택 · 제출 현황(5명 중 몇 명)
2. **팀장 대시보드**: KPI 카드 4개 → 주간보고 표(구분·업무명·담당·진행률·상태·이슈) + 상태 도넛·담당자별 막대 → 주차별 선 그래프 + Claude Code 정리 카드·[엑셀 양식으로 내려받기]
3. **팀원 입력**: 이월된 업무 카드(금주 실적·차주 계획·진행률) → 새 업무 추가 → 팀 제출 현황 → [제출] / 오른쪽에 «전주 대비 바뀐 칸»과 내 진행률 막대
4. 그래프에 **마우스를 올리면 수치가 말풍선으로**, 카드에 올리면 그래프가 다시 채워짐

## 5. 데이터 — 파일과 항목 (모두 가상 데이터)
| 파일 | 항목 |
|---|---|
| `data/members.csv` | 담당자ID, 이름, 직급, 담당 분야 — 5명 |
| `data/tasks.csv` | 업무ID, 담당자, 구분, 업무명, 시작주차, 목표주차 — 20개 |
| `data/weekly_reports.csv` | 주차, 업무ID, 담당자, 구분, 업무명, 진행률, 상태(진행중/완료/지연), 이월여부, 금주 실적, 차주 계획, 이슈 — 70건 |
| `data/report_format.csv` | 기존 엑셀 양식의 열 순서: No, 구분, 업무명, 담당, 진행률(%), 금주 실적, 차주 계획, 이슈·협조사항, 비고 |

- 이월 규칙: 전주 `상태`가 완료가 아닌 업무 → 다음 주에 같은 내용으로 복사, `이월여부`=이월
- 저장 위치: 브라우저 저장공간(localStorage) + CSV 파일. **외부 서버·데이터베이스를 쓰지 않습니다.**

## 6. AI 일은 Claude Code가 합니다
앱 안에서 AI를 부르지 않습니다(사내 기준: 별도 API 키 없음). 대신:
1. 대시보드의 **[AI 정리 요청문 복사]** → Claude Code 입력창에 붙여넣기
2. Claude Code가 44주차 보고를 읽어 **업무별 «~함/~예정» 보고체 문장 · 지연 원인 · 다음 주 완료 예상**을 `summary.md` 로 저장
3. 앱이 `summary.md` 를 읽어 «Claude Code 보고 문장 정리» 카드에 표시

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

## 8. 원래 요청에서 조정한 부분
| 원래 요청 | 오늘은 이렇게 | 이유 |
|---|---|---|
| 팀원 5명이 각자 입력하면 자동 취합 | 한 PC에서 [팀장/팀원] 탭을 바꿔 가며 시연 + 가상 보고 70건 불러오기 | 외부 배포 금지 — 여러 PC가 함께 쓰려면 서버가 필요 |
| AI가 간결한 보고 문장으로 정리 | Claude Code가 CSV를 읽고 `summary.md` 작성 | 앱 안 AI 호출에는 별도 API 키가 필요 |
| 기존 엑셀 양식으로 다운로드 | 같은 열 순서의 CSV(엑셀에서 바로 열림) | 서식 있는 .xlsx 는 라이브러리가 필요 — 필요하면 Claude Code가 따로 만들어 줌 |

## 9. 완료 기준 (테스트)
- [ ] CSV를 불러오면 44주차 보고 업무 **13건**, 평균 진행률 **65.7%** 가 보인다
- [ ] 44주차 상태가 완료 **4건** · 진행중 **6건** · 지연 **3건**으로 도넛에 표시된다
- [ ] 팀원 입력에서 45주차를 고르면 미완료 **9건**이 이월되고, 박지호의 업무는 **2건**(서비스 리더십 과정 91%, 사내강사 양성 워크숍 38%)이 미리 채워진다
- [ ] 진행률을 고치면 그 칸이 색으로 표시되고, 제출하면 대시보드에 반영된다
- [ ] [엑셀 양식으로 내려받기]로 받은 파일을 엑셀에서 열면 한글이 깨지지 않고 열 순서가 `report_format.csv` 와 같다
- [ ] 새로고침(F5)해도 입력이 남아 있고, `summary.md` 가 앱 카드에 보인다

## 10. 다음 단계 (집에서 더 키울 것)
- Claude Code에게 «기존 엑셀 양식 그대로 .xlsx 로 만들어줘» 요청(서식·셀 병합 유지)
- 월간·분기 보고서로 묶기, 업무별 진행률 추이 그래프
- 팀원 각자 PC에서 입력하는 방식은 사내 서버 검토 후

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

로컬판이 완성된 뒤, 팀원 5명이 각자 입력하는 웹앱으로 옮길 때의 설계입니다. **실제 업무 데이터는 사내 IT 승인 전에는 넣지 않습니다.**

| 구분 | 로컬판 | 웹앱판 |
|---|---|---|
| 입력 | 담당자가 CSV 불러오기 | 팀원 5명이 각자 로그인해 입력 |
| 저장 | 브라우저 저장공간 + CSV | Supabase 표 3개(팀원·업무·주간 보고) |
| 화면 주소 | localhost (내 PC) | Vercel 주소 (모두 같은 주소) |
| 권한 | 없음 | 팀원은 내 업무만 수정, 팀장은 전체 보기 |

- 로그인: Supabase 이메일 로그인. 팀장 계정은 «팀장» 역할 표시
- 잠금 설정: 로그인한 사람만 데이터 보기, 팀원은 자기 업무 행만 고치기
- 이월 규칙·대시보드·엑셀 내려받기는 로컬판과 같게 유지
- 가상 데이터(data 폴더 CSV)로 먼저 채워 시험한 뒤 실제 사용은 IT 확인 후

### 웹앱판 완료 기준
- [ ] 팀원 계정으로 로그인하면 내 업무만 보이고 고칠 수 있다
- [ ] 팀장 계정으로 로그인하면 44주차 업무 13건이 모두 보인다
- [ ] 다른 PC(또는 휴대폰)에서 같은 주소로 들어가도 같은 데이터가 보인다
- [ ] 로그인하지 않으면 데이터가 보이지 않는다