숙박·여행
스테이 홈페이지 '소요' — 예약 캘린더·요금 계산
날짜를 고르면 그 자리에서 총액이 나오는 독채 스테이 예약 사이트입니다. 주중·주말·성수기 요금이 날짜별로 다르게 계산되고, 기준 인원을 넘기면 추가 요금이 붙습니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
숙박 사이트의 심장은 예약 위젯이다. 날짜를 범위로 고르고, 그 범위 안에 낀 주말·성수기 요금이 각각 다르게 계산돼야 하며, 기준 인원 초과분도 박수만큼 붙어야 한다. 박의 요금은 그 밤이 시작되는 날짜로 정해지기 때문에 같은 2박이라도 목요일에 들어가느냐 금요일에 들어가느냐로 총액이 달라진다. 이미 찬 날짜는 달력에서 막아야 하고 체크인 뒤에 마감일이 끼면 체크아웃은 그 앞까지만 열려야 한다. 하나라도 어긋나면 '돌아가는 것처럼 보이는 화면'에 그친다. 동시에 데모라서 예약 전송·저장은 하나도 있으면 안 된다. 서버 없는 정적 페이지로 이 규칙 전부를 감당해야 했다.
해결
캘린더를 라이브러리 없이 직접 구현했다. 체크인·체크아웃 범위 선택, 지난 날짜·마감일 비활성, 날짜별 요금표를 물려 총액을 계산한다. 달력의 날짜 칸마다 그날 밤 요금을 만 단위로 적어 두어 고르기 전부터 비교가 된다. 평일 2박은 380,000원, 금·토가 낀 2박은 성수기 요금이 붙어 520,000원, 인원을 하나 늘리면 추가 요금이 박수만큼 붙어 580,000원으로 다시 계산된다. 아침 바구니 옵션도 인원과 박수를 곱해 함께 계산된다. 요금 내역을 날짜별로 펼쳐 보여 계산 근거가 화면에 남는다. 이미 찬 날은 날짜를 시드로 쓰는 결정적 계산으로 만들어 서버 없이도 객실마다 다르게 흩어진다. localStorage·쿠키 없이 메모리로만 상태를 들고, 외부 요청은 0건이다.
- 0
- 외부 요청·저장
- 3
- 요금 구간(주중·주말·성수기)
- 0
- 가로 오버플로
제작 노트
날짜에서 총액까지 한 흐름
달력에서 체크인 날짜를 누르고 이어서 체크아웃 날짜를 누르면 그 사이 밤이 전부 예약 대상이 됩니다. 밤마다 주중·주말·성수기 가운데 하나로 판정해 요금을 정합니다. 요약 패널에는 날짜별 요금이 한 줄씩 쌓이고 주말과 성수기 밤에는 태그가 붙어 왜 이 금액인지 바로 읽힙니다. 인원을 늘리면 기준 초과분이 1인 1박 단위로 더해지고 아침 바구니를 켜면 인원과 박수를 곱해 얹힙니다. 이미 찬 날은 달력에서 눌리지 않으며 체크인 뒤에 마감일이 있으면 체크아웃은 그 앞까지만 열립니다. 객실을 바꾸면 마감 패턴이 달라지므로 일정은 처음부터 다시 고르게 했습니다.
라이브러리 없는 캘린더
달력은 데이트피커 라이브러리를 쓰지 않고 직접 그렸습니다. 날짜 칸에 그날 밤 요금을 함께 적고 마감일·최대 박수 규칙까지 물려야 해서 기성 라이브러리를 고쳐 쓰는 쪽이 오히려 손이 많이 가기 때문입니다. 페이지는 정적 HTML이라 서버 렌더링 없이 바로 열리고 로딩을 막는 외부 스크립트도 없습니다. 예약이 찬 날은 날짜를 시드로 쓰는 계산으로 만들어 서버 없이도 언제 접속하든 같은 자리에 나타납니다. 상태는 브라우저 메모리에만 두고 localStorage와 쿠키도 쓰지 않아 데모를 아무리 눌러 봐도 밖으로 나가는 요청이 없습니다. 요금표 수정도 파일 하나로 끝나 유지보수가 단순합니다.
예약으로 모이는 동선
어느 페이지에서 시작해도 예약 위젯으로 모이도록 동선을 짰습니다. 홈과 객실 상세에는 한 달짜리 달력을 사이드에 붙이고 예약 페이지에서는 두 달을 펼쳐 화면 폭을 살렸습니다. 객실 세 동은 크기가 아니라 보는 방향이 다르다는 점을 앞세워 소개하고 카드에서 곧장 상세와 예약으로 이어집니다. 요금 페이지에는 주중·주말·성수기 세 구간 요금표와 함께 일정 고르기부터 신청까지 네 단계 안내를 두어 처음 온 사람도 흐름을 잃지 않게 했습니다. 화면 곳곳에 가상 데이터 고지를 붙여 실제 예약이 아니라는 사실이 가려지지 않도록 했습니다.
화면
