숙박·여행
호텔 홈페이지 '소안' — 객실 검색·요금 비교
날짜와 인원을 넣으면 객실 5개 타입의 요금과 잔여가 한 화면에서 비교되는 호텔 사이트입니다. 타입마다 주중·주말 요금 폭이 다르게 계산되고, 정원을 넘으면 카드가 잠깁니다.
비공개·데모 — AI 가상 데이터로 재구성한 예시입니다
데모 열기 ↗정적 HTML, Tailwind CSS(빌드), 바닐라 JS, nginx
문제
호텔 예약은 '객실 하나의 날짜를 고르는' 일이 아니라 '날짜를 정해 놓고 여러 타입을 비교하는' 일이다. 타입마다 요금·정원·잔여가 다르고, 주말이 낀 날짜에서는 타입별로 인상 폭도 다르다. 앞서 만든 독채 스테이(소요)와는 흐름 자체가 반대다.
해결
검색바에 날짜·객실 수·인원을 넣으면 5개 타입 카드가 전부 재계산된다. 목~토 2박이면 타입마다 주중·주말이 섞인 평균가가 다르게 나오고, 잔여가 없는 타입은 카드가 잠긴다. 타입을 고르면 총액이 계산되고, 2실로 늘리면 두 배, 기준 인원을 넘기면 초과 요금이 박수만큼 붙는다. 캘린더는 라이브러리 없이 직접 구현했고 외부 전송·저장은 0이다.
- 5
- 객실 타입 비교
- 0
- 외부 요청·저장
- 0
- 가로 오버플로
화면
