# PRD — 근태 일일 확인 화면

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

## 1. 한 줄 정의
그룹웨어에서 내보낸 **근태신청서 CSV를 불러와**, 아침에 앱을 열면 **오늘 연차·반차·대체휴무인 사람**이 바로 보이고, **며칠째 미결재이거나 반려된 신청서**는 팔로업 목록으로 챙기는 앱.

## 2. 누가 쓰나
| 역할 | 하는 일 |
|---|---|
| 근태 담당자(나) | 아침마다 앱 열기 → 오늘 휴가자 확인, CSV 다시 불러오기, 팔로업 목록 확인 |
| 전 직원(55명) | 그룹웨어에 근태신청서 상신(앱은 쓰지 않음 — 데이터만 제공) |
| 결재자(팀장·총지배인) | 미결재 확인 요청을 받는 사람(앱은 쓰지 않음) |

## 3. 오늘 만들 기능 (필수)
- [ ] **근태 CSV 불러오기**: `data/leave_requests.csv`·`data/employees.csv` 를 불러와 브라우저 저장공간에 저장
- [ ] **아침 화면**: 오늘(2026-11-05) 최종승인된 휴가자를 «종일 부재(연차·대체휴무) / 반차(오전·오후)»로 나눠 이름·부서 카드로, 종일 출근 인원과 출근률 게이지, 앞으로 7일 휴가자 수 선 그래프
- [ ] **확정 아님 표시**: 오늘 날짜인데 결재중(노란색)·반려(빨간색)인 건을 따로 표시
- [ ] **11월 달력**: 날짜(월~금)마다 휴가자 수를 색 진하기로, 유형별 도넛·결재 상태 막대
- [ ] **팔로업 목록**: 3일 이상 결재 대기 건(오래된 순)·결재자별 미결재 건수, Claude Code가 쓴 `followup.md` 카드

## 4. 화면 구성
1. **상단**: 앱 이름 · [아침 화면 / 11월 달력·팔로업] 탭 · 오늘 날짜 · «CSV 121건 불러옴» 표시
2. **아침 화면**: KPI 카드 4개(오늘 휴가자·종일 출근 인원·미결재·반려) → 오늘 쉬는 사람 카드 + 게이지·도넛 → 앞으로 7일 선 그래프 → Claude Code 아침 정리
3. **달력·팔로업 화면**: 11월 달력(색 진하기) + 결재 상태 막대·유형 도넛 → 결재자별 미결재 막대 → 팔로업 표 → Claude Code 팔로업 문구
4. 그래프·달력 칸에 **마우스를 올리면 수치가 말풍선으로**, 카드에 올리면 그래프가 다시 채워짐

## 5. 데이터 — 파일과 항목 (모두 가상 데이터)
| 파일 | 항목 |
|---|---|
| `data/employees.csv` | 사번, 이름, 부서(8개), 직급 — 55명 |
| `data/leave_requests.csv` | 신청번호, 사번, 이름, 부서, 근태유형(연차/오전반차/오후반차/대체휴무), 시작일, 종료일, 사용일수, 상신일, 결재상태(최종승인/결재중/반려), 현재결재자, 대기일수, 반려사유 — 121건 |

- «오늘»은 실습일 **2026-11-05(목)** 로 고정해서 확인합니다(설정에서 바꿀 수 있게).
- 휴가자 = `결재상태`가 최종승인이고 시작일 ≤ 오늘 ≤ 종료일(주말 제외)인 사람.
- 저장 위치: 브라우저 저장공간(localStorage). **외부 서버·데이터베이스를 쓰지 않습니다.**

## 6. AI 일은 Claude Code가 합니다
앱 안에서 AI를 부르지 않습니다(사내 기준: 별도 API 키 없음). 대신:
1. Claude Code에게 «leave_requests.csv 를 읽고 오늘 기준으로 정리해줘»라고 요청
2. Claude Code가 **오늘 부서별 겹침 · 결재자별 미결재 확인 요청 문구 · 반려 건 재상신 안내 문구**를 `followup.md` 로 저장
3. 앱이 `followup.md` 를 읽어 «Claude Code 팔로업 문구» 카드에 표시 → 문구는 복사해 사내 메신저에 직접 붙여넣기

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

## 8. 원래 요청에서 조정한 부분
| 원래 요청 | 오늘은 이렇게 | 이유 |
|---|---|---|
| 그룹포털의 결재 완료 건을 자동 조회 | 그룹웨어에서 내보냈다고 가정한 근태신청서 CSV(121건) 불러오기 | 사내 그룹웨어 연동은 실습 범위 밖, 실제 데이터 사용 금지 |
| 바탕화면·크롬을 열면 바로 보이기 | 앱 주소를 열면 첫 화면이 «오늘 휴가자» | 크롬 시작 페이지 지정은 집에서 설정(10장) |
| 미결재·반려 건 팔로업 | 팔로업 목록 + Claude Code가 문구 초안 작성 | 메일·메신저 자동 발송은 외부 연동이 필요 |

## 9. 완료 기준 (테스트)
- [ ] CSV를 불러오면 «CSV 121건», 직원 **55명**으로 표시된다
- [ ] 2026-11-05 아침 화면에 최종승인 휴가자 **7명**(종일 4·반차 3)과 종일 출근 **51/55명**이 보인다
- [ ] 오늘 결재중 **1건**(노란색), 반려 **2건**(빨간색)이 휴가자 명단과 따로 표시된다
- [ ] 미결재 **20건**, 그중 3일 이상 대기 **9건**이 팔로업 목록에 오래된 순으로 나온다
- [ ] 11월 달력에서 11/2(월)·11/5(목) 칸이 가장 진하다(각 **7명**)
- [ ] 새로고침(F5)해도 불러온 데이터가 남아 있고, `followup.md` 가 앱 카드에 보인다

## 10. 다음 단계 (집에서 더 키울 것)
- 크롬 «시작할 때 열 페이지»에 `http://localhost:8765` 지정 → 아침마다 자동으로 열림
- 부서별 최소 근무 인원 아래로 떨어지는 날 경고
- 그룹웨어 직접 조회·자동 알림은 사내 IT 검토 후

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

로컬판이 완성된 뒤, 휴대폰으로 확인하거나 부서장과 함께 보는 웹앱으로 옮길 때의 설계입니다. 근태는 개인정보이므로 **사내 서버 요청이 기본이고, 실제 근태 데이터는 사내 IT 승인 전에는 넣지 않습니다.**

| 구분 | 로컬판 | 웹앱판 |
|---|---|---|
| 입력 | 내려받은 CSV를 내가 불러오기 | 담당자가 로그인해 CSV 올리기 |
| 저장 | 브라우저 저장공간 | Supabase 표 3개(직원·근태 신청·팔로업 기록) |
| 화면 주소 | localhost (내 PC) | Vercel 주소 (휴대폰에서도 같은 주소) |
| 권한 | 없음 | 담당자는 전체, 부서장은 우리 부서만 |

- 로그인: Supabase 이메일 로그인. 담당자 계정은 «근태 담당» 역할 표시
- 잠금 설정: 로그인한 사람만 보기, 부서장은 자기 부서 행만, 반려 사유·팔로업 문구는 담당자만
- 휴가자 판정(최종승인 + 기간 안 + 주말 제외)·3일 이상 대기 기준은 로컬판과 같게 유지
- 팔로업 문구 작성은 지금처럼 Claude Code가 하고, 발송은 사람이 직접
- 가상 데이터(data 폴더 CSV)로 먼저 채워 시험한 뒤 실제 사용은 IT 확인 후

### 웹앱판 완료 기준
- [ ] 담당자 계정으로 CSV 121건을 올리면 직원 55명, 2026-11-05 휴가자 7명(종일 4·반차 3)이 보인다
- [ ] 휴대폰에서 같은 주소로 들어가도 종일 출근 51/55명과 미결재 20건(3일 이상 9건)이 똑같이 보인다
- [ ] 부서장 계정으로 로그인하면 우리 부서 휴가자만 보이고 팔로업 목록은 보이지 않는다
- [ ] 로그인하지 않으면 데이터가 보이지 않는다