2025-10-18 10:53:16 +09:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml"
|
|
|
|
|
|
xmlns:th="http://www.thymeleaf.org"
|
|
|
|
|
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
|
|
|
|
layout:decorate="~{/web/layout/layout}">
|
|
|
|
|
|
|
|
|
|
|
|
<th:block layout:fragment="layoutCss">
|
2025-12-22 23:20:02 +09:00
|
|
|
|
<th:block layout:fragment="layoutCss">
|
|
|
|
|
|
<link rel="stylesheet" th:href="@{/css/web/makeReservation.css}" />
|
|
|
|
|
|
</th:block>
|
2025-10-18 10:53:16 +09:00
|
|
|
|
</th:block>
|
|
|
|
|
|
|
|
|
|
|
|
<th:block layout:fragment="layout_top_script">
|
|
|
|
|
|
<script th:inline="javascript">
|
|
|
|
|
|
let category_div_cd = [[${CATEGORY_DIV_CD}]];
|
|
|
|
|
|
let category_no = [[${CATEGORY_NO}]];
|
|
|
|
|
|
let post_no = [[${POST_NO}]];
|
|
|
|
|
|
let procedure_id = [[${PROCEDURE_ID}]];
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</th:block>
|
|
|
|
|
|
|
|
|
|
|
|
<th:block layout:fragment="layoutContent">
|
|
|
|
|
|
<div class="reservation-container">
|
|
|
|
|
|
<!-- 좌측: 시술 예약 -->
|
|
|
|
|
|
<div class="box" id="box-service">
|
|
|
|
|
|
<div class="step-title">STEP 01. 이벤트 예약</div>
|
|
|
|
|
|
<div class="service-count-info" id="service-count-info">선택된 시술: 1개</div>
|
|
|
|
|
|
<div class="service-list" id="service-list">
|
|
|
|
|
|
<div class="service-item">
|
|
|
|
|
|
<span>다이어트약처방</span>
|
|
|
|
|
|
<span>
|
|
|
|
|
|
<span style="text-decoration:line-through; color:#bbb; font-size:0.95em; margin-right:6px;">50,000원</span>
|
|
|
|
|
|
<span class="price">50,000원</span>
|
|
|
|
|
|
<span class="del disabled" title="최소 1개의 시술은 필요합니다" onclick="removeService(this)">×</span>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="total">
|
|
|
|
|
|
<span>총 금액 <small>(부가세 별도)</small></span>
|
|
|
|
|
|
<span class="price" id="total-price">50,000원</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="font-size:0.9em; color:#aaa; margin-top:8px;">결제는 내원시 이루어집니다.</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 가운데: 예약 시간 선택 -->
|
|
|
|
|
|
<div class="box" id="box-calendar">
|
|
|
|
|
|
<div class="step-title" id="step02-title">STEP 02. 예약 시간 선택</div>
|
|
|
|
|
|
<div class="calendar-box">
|
|
|
|
|
|
<div class="calendar-header">
|
|
|
|
|
|
<button id="prev-month" aria-label="이전 달"><</button>
|
|
|
|
|
|
<span id="calendar-title" style="font-weight:600;"></span>
|
|
|
|
|
|
<button id="next-month" aria-label="다음 달">></button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<table class="calendar-table" id="calendar-table">
|
|
|
|
|
|
<!-- JS로 렌더링 -->
|
|
|
|
|
|
</table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="time-slots" id="time-slots">
|
|
|
|
|
|
<!-- JS로 렌더링 -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="person-count" style="display:none;">예약인원 <span id="person-count">-</span> 명</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 우측: 고객정보 입력 -->
|
|
|
|
|
|
<div class="box" id="box-info">
|
|
|
|
|
|
<div class="step-title" id="step03-title">STEP 03. 고객정보</div>
|
|
|
|
|
|
<form id="reserve-form" autocomplete="off">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="customer-name">고객명</label>
|
|
|
|
|
|
<input type="text" id="customer-name" name="customer-name" required>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="birthDate">생년월일 (8자리)</label>
|
|
|
|
|
|
<input type="text" id="birthDate" name="birthDate"
|
|
|
|
|
|
placeholder="예: 19900115 (8자리 숫자만)"
|
|
|
|
|
|
maxlength="8" required>
|
|
|
|
|
|
<!-- BirthDateValidator가 동적 생성하는 메시지 영역 -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="customer-phone">연락처</label>
|
|
|
|
|
|
<input type="tel" id="customer-phone" name="customer-phone"
|
|
|
|
|
|
placeholder="고객님의 핸드폰 번호를 입력해 주세요."
|
|
|
|
|
|
required pattern="^01[0-9]{8,9}$" title="올바른 휴대폰 번호를 입력해주세요.">
|
|
|
|
|
|
<!-- 피드백 메시지는 common.js PhoneValidator가 동적 생성 -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="customer-req">요청사항</label>
|
|
|
|
|
|
<textarea id="customer-req" name="customer-req"
|
|
|
|
|
|
placeholder="요청사항을 작성해 주세요."></textarea>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="checkbox-group">
|
|
|
|
|
|
<input type="checkbox" id="agree" required>
|
|
|
|
|
|
<label for="agree">[필수] 서비스 이용 및 예약 신청을 위한 개인정보 제공에 동의</label>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button type="submit" class="submit-btn" id="submit-btn" disabled>📅 예약 날짜를 선택해주세요</button>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</th:block>
|
|
|
|
|
|
|
|
|
|
|
|
<th:block layout:fragment="layoutContentScript">
|
2025-12-22 23:20:02 +09:00
|
|
|
|
<script defer th:src="@{/js/makeReservation.js}"></script>
|
2025-10-18 10:53:16 +09:00
|
|
|
|
</th:block>
|
|
|
|
|
|
</html>
|
