# PRD — 정산서 자동 작성 앱

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

## 1. 한 줄 정의
예산 구분별 폴더에 모은 영수증·세금계산서를 **Claude Code가 읽어 금액을 CSV로 정리**하면, 앱이 그 CSV로 **정산서 양식을 자동으로 채우고** 예산 대비 사용률을 그래프로 보여 주며 **엑셀로 내보내는** 앱.

## 2. 누가 쓰나
| 역할 | 하는 일 |
|---|---|
| 정산 담당자(매월 1회) | 증빙을 폴더에 모으고 Claude Code에 정리 요청 → 정산서 확인 → 엑셀 내보내기 |
| 팀 매니저(2달에 1번) | 같은 앱으로 자기 정산서 작성, 예산 초과 여부 확인 |

## 3. 오늘 만들 기능 (필수)
- [ ] **정산서 양식 화면**: 예산 구분·계정코드·월 배정액·이번 달 사용액·건수·사용률·연 누적 집행률, 맨 아래 합계 행, 결재란(담당/팀장/본부장)
- [ ] **증빙 CSV 불러오기**: `data/budget.csv`·`data/receipts.csv` 를 읽어 정산서를 자동으로 채우기, 증빙 목록 표(폴더별로 보기)
- [ ] **예산 대비 사용률 차트**: 구분별 사용률 가로 막대(100% 넘으면 빨강), 구분별 비중 도넛, 1~10월 사용액 추이 선 그래프
- [ ] **엑셀 내보내기**: 정산서 표를 `.xlsx` 로 저장(라이브러리는 폴더 안에 내려받아 사용)
- [ ] **Claude Code 증빙 인식 결과 보기**: Claude Code가 그림을 읽어 추가한 행과 `scan_note.md` 메모를 화면에 표시

## 4. 화면 구성
1. **상단**: 앱 이름 · [정산서 / 증빙 폴더] 전환 탭 · 정산 월 표시
2. **정산서 화면**: KPI 카드 4개(사용 합계·증빙 건수·예산 대비 사용률·초과 구분 수) → 정산서 표 + 월별 추이 → 오른쪽에 사용률 막대·비중 도넛·연간 집행률 진행 막대 → [엑셀로 내보내기]
3. **증빙 폴더 화면**: 왼쪽 예산 구분별 폴더 목록(건수) → 새 증빙 그림 미리보기 → 인식 결과 표 → Claude Code 메모 카드 → 사용자별 사용액 막대
4. 그래프에 **마우스를 올리면 수치가 말풍선으로** 보이고, 카드에 마우스를 올리면 그래프가 다시 채워지는 애니메이션

## 5. 데이터 — 파일과 항목 (모두 가상 데이터)
| 파일 | 항목 |
|---|---|
| `data/budget.csv` | 예산구분, 계정코드, 연간예산, 월배정액, 담당자 (5행) |
| `data/receipts.csv` | 증빙ID, 폴더, 예산구분, 사용일, 거래처, 품목, 증빙종류(카드영수증/세금계산서), 공급가액, 부가세, 합계금액, 사용자, 원본파일, 확인상태 (32행) |
| `data/monthly_usage.csv` | 월, 예산구분, 사용금액 (1~9월 × 5구분 = 45행) |
| `data/images/*.png` | 새 증빙 그림 4장: 회의비 영수증, 소모품 영수증, 교육훈련비 세금계산서, 출장 택시 영수증 |

- 예산 구분 = 폴더 이름: `01_교육훈련비`, `02_회의비`, `03_도서인쇄비`, `04_출장여비`, `05_소모품비`
- 사용률 = 이번 달 사용액 ÷ 월 배정액 × 100, 연 누적 집행률 = (1~9월 실적 + 이번 달) ÷ 연간예산 × 100
- 저장 위치: 브라우저 저장공간(localStorage) + CSV 파일. **외부 서버·데이터베이스를 쓰지 않습니다.**

## 6. AI 일은 Claude Code가 합니다
앱 안에서 AI를 부르지 않습니다(사내 기준: 별도 API 키 없음). 대신:
1. 증빙 그림을 `data/images` 폴더에 넣고, Claude Code에게 «그림을 읽어 receipts.csv 에 추가해줘» 요청
2. Claude Code가 그림을 직접 보고 사용일·거래처·공급가액·부가세·합계를 읽어 **receipts.csv 에 행 추가** + 확인이 필요한 점을 `scan_note.md` 로 저장
3. 앱을 새로고침하면 정산서·그래프가 새 금액으로 바뀌고, 메모가 «Claude Code 인식 메모» 카드에 표시

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

## 8. 원래 요청에서 조정한 부분
| 원래 요청 | 오늘은 이렇게 | 이유 |
|---|---|---|
| 앱이 이미지·세금계산서 금액을 인식해 자동 입력 | Claude Code가 그림을 읽어 `receipts.csv` 에 추가 → 앱이 CSV로 정산서 작성 | 앱 안 이미지 인식(AI)에는 별도 API 키가 필요 |
| 실제 증빙과 회사 엑셀 양식 | 가상 영수증 3장·세금계산서 1장, 가상 정산서 양식 | 실제 사내 데이터 사용 금지 |
| 폴더에 저장만 하면 자동 기입 | 폴더 이름을 예산 구분으로 쓰고, 정리는 Claude Code에게 한 번 요청 | 폴더를 계속 감시하는 프로그램은 실습 범위를 넘음 |

## 9. 완료 기준 (테스트)
- [ ] CSV를 불러오면 정산서에 예산 구분 **5개**, 증빙 **32건**, 10월 사용 합계 **6,897,200원**이 표시된다
- [ ] Claude Code가 그림 4장을 읽은 뒤 새로고침하면 증빙이 **36건**, 사용 합계가 **8,769,600원**(배정액 대비 **89.5%**)이 된다
- [ ] 그림 인식 금액이 맞다: 회의비 **112,000원**, 소모품비 **87,000원**, 세금계산서 공급가액 **1,500,000원**·세액 **150,000원**, 택시 **23,400원**
- [ ] **회의비 사용률 112.4%** 가 빨간색으로 표시된다
- [ ] [엑셀로 내보내기]로 받은 `.xlsx` 파일을 열면 정산서 표와 합계가 화면과 같다
- [ ] 폴더를 zip으로 묶어 다른 폴더에 풀어도 똑같이 실행된다

## 10. 다음 단계 (집에서 더 키울 것)
- 전자결재 상신용 A4 인쇄 화면·PDF
- 팀원별 정산서를 한 파일로 합치기
- 법인카드·ERP 사용 내역과 자동 대조(사내 IT 검토 후)

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

로컬판이 완성된 뒤, 팀 매니저들의 정산을 한곳에 모으는 웹앱으로 옮길 때의 설계입니다. **실제 영수증·금액 자료는 사내 IT 승인 전에는 넣지 않습니다.**

| 구분 | 로컬판 | 웹앱판 |
|---|---|---|
| 입력 | Claude Code가 그림을 읽어 CSV에 추가 | 읽은 결과를 매니저가 각자 로그인해 올리기 |
| 저장 | 브라우저 저장공간 + CSV | Supabase 표 3개(예산 구분·증빙·월별 실적) |
| 화면 주소 | localhost (내 PC) | Vercel 주소 (모두 같은 주소) |
| 권한 | 없음 | 매니저는 내 증빙만 수정, 정산 담당자는 전체 보기 |

- 로그인: Supabase 이메일 로그인. 정산 담당자 계정은 «정산 담당» 역할 표시
- 잠금 설정: 로그인한 사람만 보기, 매니저는 자기 증빙 행만 고치기, 예산 배정액은 담당자만 고치기
- 증빙 그림 읽기는 지금처럼 Claude Code가 하고, 웹앱 안에서 따로 AI를 부르지 않기
- 사용률·집행률 계산, 100% 초과 빨간 표시, 엑셀 내보내기는 로컬판과 같게 유지
- 가상 데이터(data 폴더 CSV)로 먼저 채워 시험한 뒤 실제 사용은 IT 확인 후

### 웹앱판 완료 기준
- [ ] 정산 담당자 계정으로 로그인하면 예산 구분 5개, 증빙 36건, 사용 합계 8,769,600원(89.5%)이 보인다
- [ ] 다른 PC에서 같은 주소로 들어가도 회의비 사용률 112.4%가 빨간색으로 똑같이 보인다
- [ ] 매니저 계정으로 로그인하면 내 증빙만 고칠 수 있고, 예산 배정액은 고칠 수 없다
- [ ] 로그인하지 않으면 데이터가 보이지 않는다