# PRD — 계열사↔호텔 원스톱 예약 앱

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

## 1. 한 줄 정의
메일·전화로 오가던 «예약 요청 → 견적 → 확정 요청 → 확정»을 한 앱에 모아, **계열사 교육담당자와 호텔 영업 담당이 같은 진행 상태를 보며** 처리하고, 연회장·객실 가동률을 달력으로 확인하는 앱.

## 2. 누가 쓰나
| 역할 | 하는 일 |
|---|---|
| 계열사 교육담당자(고객) | 행사·기간·인원·연회장·객실·식사를 입력해 예약·견적 요청, 견적 확인 후 [확정 요청], 진행 단계 확인 |
| 호텔 영업 담당 | 들어온 요청 확인 → 견적 보내기 → 확정 처리, 가동률 달력으로 수용 가능 여부 판단 (매일 근무 시간 중) |

## 3. 오늘 만들 기능 (필수)
- [ ] **고객 화면**: 예약 요청 입력(행사명·시작일·종료일·인원·연회장·객실 수·식사·메모), 날짜·인원에 맞는 연회장 «예약 가능» 표시, 내 요청 목록과 진행 단계 막대
- [ ] **영업 담당 화면**: 상태별 칸반(요청/견적발송/확정요청/확정), [견적 보내기]·[확정] 버튼, KPI(요청 수·확정 매출·진행 중 견적·견적 미발송)
- [ ] **견적 자동 계산**: 연회장 1일 단가 × 일수 + 객실 수 × 박수 × 165,000원 + 인원 × 식사 횟수 × 45,000원
- [ ] **가동률 달력**: 11월 객실·연회장 가동률 히트맵(주 × 요일), 일별 추이 선 그래프, 월 평균 게이지
- [ ] **안내 메일 미리보기 + CSV**: 견적·확정 안내 메일의 받는 사람·제목·본문 미리보기(발송 안 함), 예약 목록 CSV 내보내기

## 4. 화면 구성
1. **상단**: 앱 이름 · [고객 / 영업 담당 / 가동률 달력] 전환 탭 · 기준 월
2. **고객 화면**: 왼쪽 예약 요청 입력 → 가운데 내 요청 진행 상태(누적 막대 + 요청 카드별 4단계 표시) → 오른쪽 받은 견적서(항목별 금액·도넛·[확정 요청])
3. **영업 담당 화면**: KPI 카드 4개 → 상태별 칸반 → 오른쪽 상태 도넛·계열사별 요청 막대 → 아래 «Claude Code 메일 초안» 미리보기
4. **가동률 달력**: 객실 가동률 히트맵 + 일별 선 그래프 → 연회장 가동률 히트맵·요일별 평균 막대 → 월 평균 게이지 → «Claude Code 주간 점검» 카드
5. 그래프에 **마우스를 올리면 수치가 말풍선으로** 보이고, 카드에 마우스를 올리면 그래프가 다시 채워지는 애니메이션

## 5. 데이터 — 파일과 항목 (모두 가상 데이터)
| 파일 | 항목 |
|---|---|
| `data/venues.csv` | 시설ID, 구분(연회장/객실), 이름, 수용인원_또는_객실수, 1일_또는_1박_단가 (연회장 7 + 객실 4종 = 11행) |
| `data/requests.csv` | 예약번호, 계열사, 교육담당자, 이메일, 행사명, 시작일, 종료일, 인원, 연회장, 객실수, 식사, 상태, 견적금액, 요청일, 영업담당 (28행) |
| `data/occupancy.csv` | 날짜, 요일, 연회장_사용, 연회장_전체, 연회장_가동률, 객실_판매, 객실_전체, 객실_가동률 (11월 30행) |

- 상태 흐름: `요청` → `견적발송` → `확정요청` → `확정` (중간에 `취소` 가능)
- 저장 위치: 브라우저 저장공간(localStorage) + CSV 파일. **외부 서버·데이터베이스를 쓰지 않습니다.**
- CSV 는 엑셀·다른 시스템에서도 그대로 열 수 있게 UTF-8(BOM)으로 저장

## 6. AI 일은 Claude Code가 합니다
앱 안에서 AI를 부르지 않습니다(사내 기준: 별도 API 키 없음). 대신:
1. Claude Code에게 «requests.csv 와 occupancy.csv 로 이번 주 점검표와 메일 초안을 만들어줘» 요청
2. Claude Code가 만실 날짜, 견적 미발송 건의 수용 가능 여부, 견적 안내 메일 초안을 `weekly.md` 로 저장
3. 앱이 `weekly.md` 를 읽어 «Claude Code 주간 점검» 카드와 메일 미리보기에 표시 — **메일은 실제로 보내지 않음**

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

## 8. 원래 요청에서 조정한 부분
| 원래 요청 | 오늘은 이렇게 | 이유 |
|---|---|---|
| 고객과 영업 담당이 각자 접속 | 한 PC에서 역할 탭을 바꿔 가며 시연 | 외부 배포 금지 — 여러 사람이 접속하려면 인터넷 공개가 필요 |
| 견적·확정 안내를 메일로 발송 | 메일 미리보기 화면 + CSV 내보내기 | 메일 발송에는 메일 서버 연동이 필요 |
| 호텔 시스템과 호환 | 예약 목록 CSV 불러오기·내보내기 | 실제 시스템 연동은 사내 IT 검토 필요 |

## 9. 완료 기준 (테스트)
- [ ] `data/requests.csv` 를 불러오면 요청 **28건**, 상태별로 요청 **6** · 견적발송 **7** · 확정요청 **4** · 확정 **9** · 취소 **2** 가 칸반에 나뉜다
- [ ] 영업 담당 KPI 의 확정 매출이 **256,080,000원**(확정 9건 합계)으로 표시된다
- [ ] BK-1123(세미나실 B 2일 · 객실 16실 1박 · 20명 4식)의 견적이 **7,040,000원**으로 계산된다
- [ ] 고객 탭에서 새 요청을 넣으면 영업 담당 «요청» 칸이 **7건**이 되고, [견적 보내기] → [확정 요청] → [확정] 순서로 넘어간다
- [ ] 가동률 달력의 11월 평균 객실 가동률이 **72.8%**, 연회장 가동률이 **37.7%** 로 표시된다
- [ ] 새로고침(F5)해도 상태 변경이 남아 있고, 폴더를 zip으로 묶어 다른 폴더에 풀어도 똑같이 실행된다

## 10. 다음 단계 (집에서 더 키울 것)
- 견적서 A4 인쇄 화면·PDF
- 계열사별 연간 이용 실적·재방문 보고
- 호텔 예약 시스템 연동·실제 메일 발송은 사내 IT 검토 후

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

로컬판이 완성된 뒤, 교육담당자와 호텔 영업 담당이 각자 자기 PC에서 같은 예약 상태를 보는 웹앱으로 옮길 때의 설계입니다. **실제 예약·고객 정보는 사내 IT 승인 전에는 넣지 않습니다.**

| 구분 | 로컬판 | 웹앱판 |
|---|---|---|
| 입력 | 한 PC에서 고객 탭으로 요청 | 교육담당자가 각자 로그인해 요청 |
| 저장 | 브라우저 저장공간 + CSV | Supabase 표 4개(연회장·객실, 예약 요청, 일별 가동률, 담당자) |
| 화면 주소 | localhost (내 PC) | Vercel 주소 (모두 같은 주소) |
| 권한 | 없음 | 고객은 우리 회사 요청만, 영업 담당은 전체 |

- 로그인: Supabase 이메일 로그인. 영업 담당 계정은 «영업» 역할 표시
- 잠금 설정: 로그인한 사람만 보기, 고객은 자기 회사 요청만 보고 [확정 요청]만, 견적·확정은 영업 담당만
- 견적 계산식(연회장 단가×일수 + 객실×박수×165,000 + 인원×식사×45,000)과 상태 흐름은 로컬판과 같게 유지
- 메일은 여전히 미리보기까지 — 실제 발송·호텔 예약 시스템 연동은 IT 검토 후
- 가상 데이터(data 폴더 CSV)로 먼저 채워 시험한 뒤 실제 사용은 IT 확인 후

### 웹앱판 완료 기준
- [ ] 영업 담당 계정으로 로그인하면 요청 **28건**이 요청 **6** · 견적발송 **7** · 확정요청 **4** · 확정 **9** · 취소 **2** 로 나뉜다
- [ ] 고객 계정으로 로그인하면 자기 회사 요청만 보이고 다른 회사 요청은 보이지 않는다
- [ ] 고객이 다른 PC(또는 휴대폰)에서 새 요청을 넣으면 영업 담당 화면 «요청» 칸이 **7건**이 된다
- [ ] 로그인하지 않으면 예약·견적 정보가 보이지 않는다