diff --git a/src/main/resources/templates/web/service/makeReservation.html b/src/main/resources/templates/web/service/makeReservation.html index ad9336c..e1856a4 100644 --- a/src/main/resources/templates/web/service/makeReservation.html +++ b/src/main/resources/templates/web/service/makeReservation.html @@ -21,7 +21,7 @@
-
STEP 01. 이벤트 예약
+
STEP 01. 시술 예약
선택된 시술: 1개
@@ -98,862 +98,841 @@ - + if (slotTime <= currentTime) { + alert('지난 시간은 선택할 수 없습니다.'); + return; + } + } + + selectedTime = t; + renderTimeSlots(); + if (el) { + document.querySelectorAll('.time-btn').forEach(btn => btn.classList.remove('active')); + el.classList.add('active'); + } + onClickTime(getSelectedDateStr(), t, el); + checkForm(); + } + + function getSelectedDateStr() { + if (!selectedDate) return ''; + const yyyy = selectedDate.getFullYear(); + const mm = String(selectedDate.getMonth() + 1).padStart(2, '0'); + const dd = String(selectedDate.getDate()).padStart(2, '0'); + return `${yyyy}${mm}${dd}`; + } + + window.selectTime = function(t) { + selectedTime = t; + renderTimeSlots(); + } + + // 초기 날짜 설정 (일요일/공휴일 제외) + let initDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()); + while (initDate.getDay() === 0 || isDateDisabled(initDate)) { + initDate.setDate(initDate.getDate() + 1); + } + selectDate(initDate.getFullYear(), initDate.getMonth(), initDate.getDate()); + + form.onsubmit = function(e) { + e.preventDefault(); + if(!selectedDate || !selectedTime) { + alert('예약 날짜와 시간을 선택해 주세요.'); + return; + } + if (!birthDateValidator || !birthDateValidator.isValid()) { + alert('올바른 생년월일을 입력해 주세요.'); + return; + } + fn_reservation(); + form.reset(); + submitBtn.disabled = true; + checkForm(); + }; + + function fn_reservation(){ + let formData = new FormData(); + if (selectedDate) { + const yyyy = selectedDate.getFullYear(); + const mm = String(selectedDate.getMonth() + 1).padStart(2, '0'); + const dd = String(selectedDate.getDate()).padStart(2, '0'); + formData.append('SELECTED_DATE', `${yyyy}-${mm}-${dd}`); + } + if (selectedTime) { + formData.append('TIME', selectedTime); + } + formData.append('CATEGORY_DIV_CD', typeof category_div_cd !== 'undefined' ? category_div_cd : ''); + formData.append('CATEGORY_NO', typeof category_no !== 'undefined' ? category_no : ''); + formData.append('POST_NO', typeof post_no !== 'undefined' ? post_no : ''); + formData.append('NAME', document.getElementById('customer-name').value); + formData.append('BIRTH_DATE', document.getElementById('birthDate').value); + formData.append('PHONE_NUMBER', document.getElementById('customer-phone').value); + formData.append('ETC', document.getElementById('customer-req').value); + formData.append('TREATMENT_INFOS', JSON.stringify(selectedTreatments)); + + $.ajax({ + url: encodeURI('/webservice/insertReservation.do'), + data: formData, + dataType: 'json', + processData: false, + contentType: false, + type: 'POST', + async: true, + success: function(data){ + if(data.msgCode=='0'){ + alert('예약이 완료되었습니다.'); + location.href="/webevent/selectListWebEventIntro.do"; + }else{ + modalEvent.danger("조회 오류", data.msgDesc); + } + }, + error : function(xhr, status, error) { + modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오."); + }, + beforeSend:function(){ + $(".loading-image-layer").show(); + }, + complete:function(){ + $(".loading-image-layer").hide(); + } + }); + } + + function fn_SelectReservation(category_div_cd, category_no, post_no, procedure_id) { + let formData = new FormData(); + formData.append('CATEGORY_DIV_CD', category_div_cd); + formData.append('CATEGORY_NO', category_no); + formData.append('POST_NO', post_no); + formData.append('PROCEDURE_ID', procedure_id); + + $.ajax({ + url: encodeURI('/webservice/selectReservation.do'), + data: formData, + dataType: 'json', + processData: false, + contentType: false, + type: 'POST', + async: true, + success: function(data) { + if(data.msgCode=='0') { + const serviceList = document.getElementById('service-list'); + serviceList.innerHTML = ''; + let totalprice = 0; + selectedTreatments = []; + + if (data.reservation && data.reservation.length > 0) { + data.reservation.forEach(function(item, i) { + let price = item.DISCOUNT_PRICE != null ? item.DISCOUNT_PRICE : item.PRICE || 0; + totalprice += Number(price); + + selectedTreatments.push({ + MU_TREATMENT_ID: item.MU_TREATMENT_ID, + TREATMENT_NAME: item.TREATMENT_NAME, + TREATMENT_PROCEDURE_NAME: item.TREATMENT_PROCEDURE_NAME, + MU_TREATMENT_PROCEDURE_ID: item.MU_TREATMENT_PROCEDURE_ID + }); + + const li = document.createElement('div'); + li.className = 'service-item'; + li.innerHTML = ` + ${item.TREATMENT_PROCEDURE_NAME} + + ${item.DISCOUNT_PRICE != null ? (item.PRICE || 0).toLocaleString() : ''}원 + ${Number(price).toLocaleString()}원 + × + + `; + serviceList.appendChild(li); + }); + } + document.getElementById('total-price').textContent = totalprice.toLocaleString() + '원'; + updateServiceCount(); + } else { + modalEvent.danger("조회 오류", data.msgDesc); + } + }, + error : function(xhr, status, error) { + modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오."); + }, + beforeSend:function() { + $(".loading-image-layer").show(); + }, + complete:function() { + $(".loading-image-layer").hide(); + } + }); + } + + function onClickTime(selectedDate, time, el) { + document.querySelectorAll('.time-btn').forEach(btn => btn.classList.remove('active')); + if (el) el.classList.add('active'); + + let formData = new FormData(); + formData.append('SELECTED_DATE', selectedDate); + formData.append('TIME', time); + + res_date = selectedDate; + res_time = time; + + $.ajax({ + url: encodeURI('/webservice/selectReservationCnt.do'), + data: formData, + dataType: 'json', + processData: false, + contentType: false, + type: 'POST', + async: true, + success: function(data){ + if(data.msgCode=='0'){ + if (data.rows && data.rows.RES_CNT !== undefined) { + personCount.textContent = data.rows.RES_CNT; + } else { + personCount.textContent = '-'; + } + }else{ + modalEvent.danger("조회 오류", data.msgDesc); + } + }, + error : function(xhr, status, error) { + modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오."); + }, + beforeSend:function(){ + $(".loading-image-layer").show(); + }, + complete:function(){ + $(".loading-image-layer").hide(); + } + }); + } + + $(document).ready(function() { + // PhoneValidator 초기화 + try { + if (typeof PhoneValidator !== 'undefined' && PhoneValidator.init) { + PhoneValidator.init('customer-phone', { + showMessage: true, + realTimeValidation: true, + maxLength: 11, + allowedPrefixes: ['010', '011', '016', '017', '018', '019'], + onValidationChange: function(result, phoneNumber) { + setTimeout(checkForm, 10); + } + }); + } + } catch (e) { + console.error('PhoneValidator initialization error:', e); + } + + // BirthDateValidator 초기화 + try { + birthDateValidator = new BirthDateValidator('birthDate', { + showMessage: true, + realTimeValidation: true, + minAge: 0, + maxAge: 150, + format: 'YYYYMMDD', + allowFuture: false, + onValidationChange: function(result, birthDate) { + setTimeout(checkForm, 10); + } + }); + } catch (e) { + console.error('BirthDateValidator initialization error:', e); + } + + $('#customer-phone, #birthDate').on('input keyup blur paste', function() { + setTimeout(checkForm, 50); + }); + + setTimeout(() => { + checkForm(); + updateServiceCount(); + }, 300); + }); + diff --git a/src/main/resources/templates/web/webevent/makeReservation.html b/src/main/resources/templates/web/webevent/makeReservation.html index d5f2744..28888f7 100644 --- a/src/main/resources/templates/web/webevent/makeReservation.html +++ b/src/main/resources/templates/web/webevent/makeReservation.html @@ -99,28 +99,32 @@