숙박·여행

스테이 홈페이지 '소요' — 예약 캘린더·요금 계산

날짜를 고르면 그 자리에서 총액이 나오는 독채 스테이 예약 사이트입니다. 주중·주말·성수기 요금이 날짜별로 다르게 계산되고, 기준 인원을 넘기면 추가 요금이 붙습니다.

비공개·데모 — AI 가상 데이터로 재구성한 예시입니다

데모 열기 ↗정적 HTML, Tailwind CSS(빌드), 바닐라 JS, nginx

문제

숙박 사이트의 심장은 예약 위젯이다. 날짜를 범위로 고르고, 그 범위 안에 낀 주말·성수기 요금이 각각 다르게 계산돼야 하며, 기준 인원 초과분도 박수만큼 붙어야 한다. 하나라도 어긋나면 '돌아가는 것처럼 보이는 화면'에 그친다. 동시에 데모라서 예약 전송·저장은 하나도 있으면 안 된다.

해결

캘린더를 라이브러리 없이 직접 구현했다. 체크인·체크아웃 범위 선택, 지난 날짜·마감일 비활성, 날짜별 요금표를 물려 총액을 계산한다. 평일 2박은 380,000원, 금·토가 낀 2박은 성수기 요금이 붙어 520,000원, 인원을 하나 늘리면 추가 요금이 박수만큼 붙어 580,000원으로 다시 계산된다. 요금 내역을 날짜별로 펼쳐 보여 계산 근거가 화면에 남는다. localStorage·쿠키 없이 메모리로만 상태를 들고, 외부 요청은 0건이다.

0
외부 요청·저장: 3
요금 구간(주중·주말·성수기): 0
가로 오버플로

화면