숙박·여행
호텔 홈페이지 '소안' — 객실 검색·요금 비교
날짜와 인원을 넣으면 객실 5개 타입의 요금과 잔여가 한 화면에서 비교되는 호텔 사이트입니다. 타입마다 주중·주말 요금 폭이 다르게 계산되고, 정원을 넘으면 카드가 잠깁니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
문제
호텔 예약은 '객실 하나의 날짜를 고르는' 일이 아니라 '날짜를 정해 놓고 여러 타입을 비교하는' 일이다. 타입마다 요금·정원·잔여가 다르고, 주말이 낀 날짜에서는 타입별로 인상 폭도 다르다. 앞서 만든 독채 스테이(소요)와는 흐름 자체가 반대다. 화면도 계산기보다 검색 결과에 가까워서 날짜·객실 수·인원을 바꿀 때마다 다섯 타입의 평균가·합계·잔여가 전부 다시 계산돼야 한다. 잔여가 모자라거나 정원을 넘는 타입은 이유를 밝힌 채 잠겨야 하고, 기준 인원 초과 성인과 아동의 추가 요금도 박수만큼 따라와야 한다. 이 검색 경험을 서버 없는 정적 페이지 안에서 만드는 것이 과제였다.
해결
검색바에 날짜·객실 수·인원을 넣으면 5개 타입 카드가 전부 재계산된다. 목~토 2박이면 타입마다 주중·주말이 섞인 평균가가 다르게 나오고, 잔여가 없는 타입은 카드가 잠긴다. 타입을 고르면 총액이 계산되고, 2실로 늘리면 두 배, 기준 인원을 넘기면 초과 요금이 박수만큼 붙는다. 검색 조건은 URL 쿼리에 실려 홈에서 검색하면 예약 페이지로 그대로 넘어가고 결과 화면에서는 이동 없이 그 자리에서 다시 계산된다. 요약 패널에는 박마다 요금이 한 줄씩 적히며 주말·성수기 밤에는 태그가 붙어 총액의 근거가 남는다. 잔여는 타입과 날짜를 시드로 쓰는 결정적 계산이라 서버 없이도 값이 흩어지고 성수기·주말은 덜 남는다. 캘린더는 라이브러리 없이 직접 구현했고 외부 전송·저장은 0이다.
- 5
- 객실 타입 비교
- 0
- 외부 요청·저장
- 0
- 가로 오버플로
제작 노트
다섯 타입 한눈 비교
검색바에서 체크인·체크아웃을 캘린더 팝오버로 고르고 객실 수와 성인·아동 수를 스테퍼로 맞추면 다섯 타입 카드가 같은 조건으로 다시 그려집니다. 카드에는 1박 평균가와 선택한 박수·객실 수 합계, 남은 객실 수가 적히고 잔여가 두 실 이하면 따로 표시됩니다. 잔여가 모자라면 날짜를 바꾸거나 객실 수를 줄이라는 안내가, 정원을 넘으면 이 타입의 최대 인원 안내가 붙은 채 선택이 잠깁니다. 결과 상단에는 예약 가능한 타입이 다섯 중 몇인지 요약됩니다. 타입을 고르면 박별 요금과 초과 인원·아동 요금이 쌓인 총액이 요약 패널에 나타납니다.
저장 대신 URL 쿼리
검색 조건은 localStorage나 서버 세션 대신 URL 쿼리에 실었습니다. 홈에서 검색하면 조건이 주소에 붙은 채 예약 페이지로 넘어가고 새로고침해도 같은 결과가 다시 그려지며 주소를 복사하면 조건까지 함께 공유됩니다. 잔여 객실은 타입과 날짜를 시드로 쓰는 결정적 계산이라 서버 없이 언제 열어도 같은 값이 나오고 성수기와 주말은 상한을 낮춰 덜 남게 했습니다. 캘린더와 팝오버도 라이브러리 없이 직접 만들어 외부 의존성이 없습니다. 정적 HTML과 바닐라 JS 조합이라 호스팅이 단순하고 요금표를 고치는 일도 파일 하나로 끝납니다.
규칙이 보이는 예약 화면
예약 페이지는 검색바, 타입 비교, 예약 요약, 요금 규칙 순으로 위에서 아래로 흐릅니다. 박의 요금은 그 밤이 시작되는 날짜로 정한다는 규칙과 금·토 주말 요금, 성수기 기준을 화면에 적어 두어 계산 결과만 던지지 않고 근거를 함께 보여 줍니다. 다섯 타입 전체의 주중·주말·성수기 요금표와 자주 묻는 질문도 같은 페이지에 붙여 조건을 확인하러 오갈 일을 줄였습니다. 객실 상세는 한 페이지에서 쿼리로 다섯 타입을 전환하는 구조라 파일이 늘지 않고, 화면 하단 스티키바는 보고 있는 타입의 주중 요금을 계속 들고 다닙니다.
화면
