최초 세팅
This commit is contained in:
bd091
1
src/main/resources/static/js/aos.js
Normal file
1
src/main/resources/static/js/aos.js
Normal file
File diff suppressed because one or more lines are too long
374
src/main/resources/static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.css
vendored
Normal file
374
src/main/resources/static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.css
vendored
Normal file
@@ -0,0 +1,374 @@
|
||||
/*!
|
||||
* Datetimepicker for Bootstrap 3
|
||||
* version : 4.17.47
|
||||
* https://github.com/Eonasdan/bootstrap-datetimepicker/
|
||||
*/
|
||||
.bootstrap-datetimepicker-widget {
|
||||
list-style: none;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu {
|
||||
display: block;
|
||||
margin: 2px 0;
|
||||
padding: 4px;
|
||||
width: 19em;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
|
||||
width: 38em;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
|
||||
width: 38em;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
|
||||
width: 38em;
|
||||
}
|
||||
}
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu:before,
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #ccc;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
top: -7px;
|
||||
left: 7px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid white;
|
||||
top: -6px;
|
||||
left: 8px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 7px solid #ccc;
|
||||
border-top-color: rgba(0, 0, 0, 0.2);
|
||||
bottom: -7px;
|
||||
left: 6px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid white;
|
||||
bottom: -6px;
|
||||
left: 7px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
|
||||
left: auto;
|
||||
right: 6px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
|
||||
left: auto;
|
||||
right: 7px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .list-unstyled {
|
||||
margin: 0;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget a[data-action] {
|
||||
padding: 6px 0;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget a[data-action]:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .timepicker-hour,
|
||||
.bootstrap-datetimepicker-widget .timepicker-minute,
|
||||
.bootstrap-datetimepicker-widget .timepicker-second {
|
||||
width: 54px;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
margin: 0;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget button[data-action] {
|
||||
padding: 6px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
content: "Increment Hours";
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
content: "Increment Minutes";
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
content: "Decrement Hours";
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
content: "Decrement Minutes";
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
content: "Show Hours";
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
content: "Show Minutes";
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
content: "Toggle AM/PM";
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
content: "Clear the picker";
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
content: "Set the date to today";
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .picker-switch {
|
||||
text-align: center;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .picker-switch::after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
content: "Toggle Date and Time Screens";
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .picker-switch td {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
line-height: inherit;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .picker-switch td span {
|
||||
line-height: 2.5;
|
||||
height: 2.5em;
|
||||
width: 100%;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td,
|
||||
.bootstrap-datetimepicker-widget table th {
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table th {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table th.picker-switch {
|
||||
width: 145px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table th.disabled,
|
||||
.bootstrap-datetimepicker-widget table th.disabled:hover {
|
||||
background: none;
|
||||
color: #777777;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table th.prev::after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
content: "Previous Month";
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table th.next::after {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
content: "Next Month";
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table thead tr:first-child th {
|
||||
cursor: pointer;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
|
||||
background: #eeeeee;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td {
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
width: 54px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td.cw {
|
||||
font-size: .8em;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: #777777;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td.day {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td.day:hover,
|
||||
.bootstrap-datetimepicker-widget table td.hour:hover,
|
||||
.bootstrap-datetimepicker-widget table td.minute:hover,
|
||||
.bootstrap-datetimepicker-widget table td.second:hover {
|
||||
background: #eeeeee;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td.old,
|
||||
.bootstrap-datetimepicker-widget table td.new {
|
||||
color: #777777;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td.today {
|
||||
position: relative;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td.today:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border: solid transparent;
|
||||
border-width: 0 0 7px 7px;
|
||||
border-bottom-color: #337ab7;
|
||||
border-top-color: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td.active,
|
||||
.bootstrap-datetimepicker-widget table td.active:hover {
|
||||
background-color: #337ab7;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td.active.today:before {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td.disabled,
|
||||
.bootstrap-datetimepicker-widget table td.disabled:hover {
|
||||
background: none;
|
||||
color: #777777;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td span {
|
||||
display: inline-block;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
line-height: 54px;
|
||||
margin: 2px 1.5px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td span:hover {
|
||||
background: #eeeeee;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td span.active {
|
||||
background-color: #337ab7;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td span.old {
|
||||
color: #777777;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget table td span.disabled,
|
||||
.bootstrap-datetimepicker-widget table td span.disabled:hover {
|
||||
background: none;
|
||||
color: #777777;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget.wider {
|
||||
width: 21em;
|
||||
}
|
||||
.bootstrap-datetimepicker-widget .datepicker-decades .decade {
|
||||
line-height: 1.8em !important;
|
||||
}
|
||||
.input-group.date .input-group-addon {
|
||||
cursor: pointer;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
2
src/main/resources/static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js
vendored
Normal file
2
src/main/resources/static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
69
src/main/resources/static/js/bootstrap-datetimepicker/ko.js
Normal file
69
src/main/resources/static/js/bootstrap-datetimepicker/ko.js
Normal file
@@ -0,0 +1,69 @@
|
||||
//! moment.js locale configuration
|
||||
//! locale : Korean [ko]
|
||||
//! author : Kyungwook, Park : https://github.com/kyungw00k
|
||||
//! author : Jeeeyul Lee <jeeeyul@gmail.com>
|
||||
|
||||
;(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined'
|
||||
&& typeof require === 'function' ? factory(require('../moment')) :
|
||||
typeof define === 'function' && define.amd ? define(['../moment'], factory) :
|
||||
factory(global.moment)
|
||||
}(this, (function (moment) { 'use strict';
|
||||
|
||||
|
||||
var ko = moment.defineLocale('ko', {
|
||||
months : '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
|
||||
monthsShort : '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'),
|
||||
weekdays : '일요일_월요일_화요일_수요일_목요일_금요일_토요일'.split('_'),
|
||||
weekdaysShort : '일_월_화_수_목_금_토'.split('_'),
|
||||
weekdaysMin : '일_월_화_수_목_금_토'.split('_'),
|
||||
longDateFormat : {
|
||||
LT : 'A h:mm',
|
||||
LTS : 'A h:mm:ss',
|
||||
L : 'YYYY.MM.DD',
|
||||
LL : 'YYYY년 MMMM D일',
|
||||
LLL : 'YYYY년 MMMM D일 A h:mm',
|
||||
LLLL : 'YYYY년 MMMM D일 dddd A h:mm',
|
||||
l : 'YYYY.MM.DD',
|
||||
ll : 'YYYY년 MMMM D일',
|
||||
lll : 'YYYY년 MMMM D일 A h:mm',
|
||||
llll : 'YYYY년 MMMM D일 dddd A h:mm'
|
||||
},
|
||||
calendar : {
|
||||
sameDay : '오늘 LT',
|
||||
nextDay : '내일 LT',
|
||||
nextWeek : 'dddd LT',
|
||||
lastDay : '어제 LT',
|
||||
lastWeek : '지난주 dddd LT',
|
||||
sameElse : 'L'
|
||||
},
|
||||
relativeTime : {
|
||||
future : '%s 후',
|
||||
past : '%s 전',
|
||||
s : '몇 초',
|
||||
ss : '%d초',
|
||||
m : '1분',
|
||||
mm : '%d분',
|
||||
h : '한 시간',
|
||||
hh : '%d시간',
|
||||
d : '하루',
|
||||
dd : '%d일',
|
||||
M : '한 달',
|
||||
MM : '%d달',
|
||||
y : '일 년',
|
||||
yy : '%d년'
|
||||
},
|
||||
dayOfMonthOrdinalParse : /\d{1,2}일/,
|
||||
ordinal : '%d일',
|
||||
meridiemParse : /오전|오후/,
|
||||
isPM : function (token) {
|
||||
return token === '오후';
|
||||
},
|
||||
meridiem : function (hour, minute, isUpper) {
|
||||
return hour < 12 ? '오전' : '오후';
|
||||
}
|
||||
});
|
||||
|
||||
return ko;
|
||||
|
||||
})));
|
||||
2
src/main/resources/static/js/bootstrap-datetimepicker/moment-with-locales.min.js
vendored
Normal file
2
src/main/resources/static/js/bootstrap-datetimepicker/moment-with-locales.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
11008
src/main/resources/static/js/jquery-1.12.4.js
vendored
Normal file
11008
src/main/resources/static/js/jquery-1.12.4.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
18706
src/main/resources/static/js/jquery-ui.js
vendored
Normal file
18706
src/main/resources/static/js/jquery-ui.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
2
src/main/resources/static/js/jquery.min.js
vendored
Normal file
2
src/main/resources/static/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
14
src/main/resources/static/js/swiper-bundle.min.js
vendored
Normal file
14
src/main/resources/static/js/swiper-bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
21
src/main/resources/static/js/swiper.js
Normal file
21
src/main/resources/static/js/swiper.js
Normal file
@@ -0,0 +1,21 @@
|
||||
const swiper = new Swiper('.swiper', {
|
||||
// Optional parameters
|
||||
direction: 'vertical',
|
||||
loop: true,
|
||||
|
||||
// If we need pagination
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
},
|
||||
|
||||
// Navigation arrows
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
|
||||
// And if we need scrollbar
|
||||
scrollbar: {
|
||||
el: '.swiper-scrollbar',
|
||||
},
|
||||
});
|
||||
9
src/main/resources/static/js/web/accept/webAccept.js
Normal file
9
src/main/resources/static/js/web/accept/webAccept.js
Normal file
@@ -0,0 +1,9 @@
|
||||
/************************************************
|
||||
* 초기화
|
||||
************************************************/
|
||||
function fn_init() {
|
||||
|
||||
}
|
||||
|
||||
//초기화
|
||||
fn_init();
|
||||
999
src/main/resources/static/js/web/common.js
Normal file
999
src/main/resources/static/js/web/common.js
Normal file
@@ -0,0 +1,999 @@
|
||||
/****************************************************************************
|
||||
* 로그아웃
|
||||
****************************************************************************/
|
||||
function fn_logout(){
|
||||
logout();
|
||||
window.location ='/weblogin/logout.do';
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 숫자 3자리 콤마 이벤트
|
||||
****************************************************************************/
|
||||
function fn_numberFormat(str) {
|
||||
str = String(str);
|
||||
return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 검색 엔터 이벤트
|
||||
****************************************************************************/
|
||||
function fn_enter(e){
|
||||
if(e.which){
|
||||
// 파이어폭스
|
||||
if(e.which==13) {
|
||||
//로그인 액션 스크립트
|
||||
fn_search();
|
||||
}
|
||||
}else{
|
||||
// 윈도우, 사파리, 크롬
|
||||
if(event.keyCode==13) {
|
||||
//로그인 액션 스크립트
|
||||
fn_search();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 약관 페이지 이동
|
||||
****************************************************************************/
|
||||
function fn_selectPolicyPrivacyIntro(param){
|
||||
fn_openPopup("/webpolicyprivacy/selectPolicyPrivacyIntro.do.do");
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 약관 페이지 이동
|
||||
****************************************************************************/
|
||||
function fn_selectPolicyServiceIntro(param){
|
||||
fn_openPopup("/webpolicyservice/selectPolicyServiceIntro.do.do");
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 페이지 이동
|
||||
****************************************************************************/
|
||||
function fn_leftFormAction(action){
|
||||
var newForm = $("<form><form/>");
|
||||
newForm.attr("name","submitForm");
|
||||
newForm.attr("method","POST");
|
||||
|
||||
if(action.indexOf("?") != -1) {
|
||||
var actionArr = action.split('?');
|
||||
newForm.attr("action",actionArr[0]);
|
||||
|
||||
var paramUrlArr = actionArr[1].split('&');
|
||||
for(var i = 0; i < paramUrlArr.length; i++){
|
||||
var paramArr = paramUrlArr[i].split('=');
|
||||
newForm.append($('<input/>',{type:'hidden',name:paramArr[0],value:paramArr[1]}));
|
||||
}
|
||||
}else {
|
||||
newForm.attr("action",action);
|
||||
}
|
||||
|
||||
// newForm.append($('<input/>',{type:'hidden',name:"menuCode",value:menuCode}));
|
||||
newForm.appendTo('body');
|
||||
newForm.submit();
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 페이지 이동2
|
||||
****************************************************************************/
|
||||
function fn_leftFormAction2(menuClass, action){
|
||||
var newForm = $("<form><form/>");
|
||||
newForm.attr("name","submitForm");
|
||||
newForm.attr("method","POST");
|
||||
|
||||
if(action.indexOf("?") != -1) {
|
||||
var actionArr = action.split('?');
|
||||
newForm.attr("action",actionArr[0]);
|
||||
|
||||
var paramUrlArr = actionArr[1].split('&');
|
||||
for(var i = 0; i < paramUrlArr.length; i++){
|
||||
var paramArr = paramUrlArr[i].split('=');
|
||||
newForm.append($('<input/>',{type:'hidden',name:paramArr[0],value:paramArr[1]}));
|
||||
}
|
||||
}else {
|
||||
newForm.attr("action",action);
|
||||
}
|
||||
|
||||
newForm.append($('<input/>',{type:'hidden',name:"menuClass",value:menuClass}));
|
||||
newForm.appendTo('body');
|
||||
newForm.submit();
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 새창 이동 (미리보기)
|
||||
****************************************************************************/
|
||||
function fn_openPopup(action){
|
||||
var newForm = $("<form><form/>");
|
||||
newForm.attr("name","submitForm");
|
||||
newForm.attr("method","POST");
|
||||
newForm.attr("target","_blank");
|
||||
|
||||
if(action.indexOf("?") != -1) {
|
||||
var actionArr = action.split('?');
|
||||
newForm.attr("action",actionArr[0]);
|
||||
|
||||
var paramUrlArr = actionArr[1].split('&');
|
||||
for(var i = 0; i < paramUrlArr.length; i++){
|
||||
var paramArr = paramUrlArr[i].split('=');
|
||||
newForm.append($('<input/>',{type:'hidden',name:paramArr[0],value:paramArr[1]}));
|
||||
}
|
||||
}else {
|
||||
newForm.attr("action",action);
|
||||
}
|
||||
|
||||
newForm.appendTo('body');
|
||||
newForm.submit();
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 뒤로가기
|
||||
****************************************************************************/
|
||||
function fn_back(){
|
||||
history.back();
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 새로고침
|
||||
****************************************************************************/
|
||||
function fn_reload(){
|
||||
location.reload();
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 전화번호 형식 변경
|
||||
* type:0이면 중간번호 가리기
|
||||
****************************************************************************/
|
||||
function fn_setFormatPhone(num,type){
|
||||
var formatNum = '';
|
||||
|
||||
if(num.length==11){
|
||||
if(type==0){
|
||||
formatNum = num.replace(/(\d{3})(\d{4})(\d{4})/, '$1-****-$3');
|
||||
}else{
|
||||
formatNum = num.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
|
||||
}
|
||||
}else if(num.length==8){
|
||||
formatNum = num.replace(/(\d{4})(\d{4})/, '$1-$2');
|
||||
}else{
|
||||
if(num.indexOf('02')==0){
|
||||
if(type==0){
|
||||
formatNum = num.replace(/(\d{2})(\d{4})(\d{4})/, '$1-****-$3');
|
||||
}else{
|
||||
formatNum = num.replace(/(\d{2})(\d{4})(\d{4})/, '$1-$2-$3');
|
||||
}
|
||||
}else{
|
||||
if(type==0){
|
||||
formatNum = num.replace(/(\d{3})(\d{3})(\d{4})/, '$1-***-$3');
|
||||
}else{
|
||||
formatNum = num.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return formatNum;
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* datePicker 생성
|
||||
****************************************************************************/
|
||||
function fn_datePicker(id){
|
||||
$(id).datetimepicker({
|
||||
allowInputToggle: true,
|
||||
format: 'YYYY-MM-DD'
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* datePicker
|
||||
****************************************************************************/
|
||||
function fn_searchDatePicker(startId, endId){
|
||||
$(startId).datetimepicker({
|
||||
allowInputToggle: true,
|
||||
format: 'YYYY-MM-DD'
|
||||
});
|
||||
|
||||
$(endId).datetimepicker({
|
||||
allowInputToggle: true,
|
||||
useCurrent: false, //Important! See issue #1075
|
||||
format: 'YYYY-MM-DD'
|
||||
});
|
||||
|
||||
/*$(endId).data("DateTimePicker").minDate(fn_getToDate());*/
|
||||
|
||||
$(endId).data("DateTimePicker").maxDate(fn_getToDate());
|
||||
$(endId).data("DateTimePicker").date(fn_getToDate());
|
||||
$(startId).data("DateTimePicker").maxDate(fn_getToDate());
|
||||
|
||||
$(startId).on("dp.change", function (e) {
|
||||
$(endId).data("DateTimePicker").minDate(e.date);
|
||||
|
||||
if($(endId).data("DateTimePicker").date() < e.date){
|
||||
$(endId).data("DateTimePicker").date(e.date);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* dateTimePicker 생성
|
||||
****************************************************************************/
|
||||
function fn_dateTimePicker1(id, value){
|
||||
|
||||
if(value){
|
||||
$(id).datetimepicker({
|
||||
allowInputToggle: true,
|
||||
format: 'HH:mm',
|
||||
defaultDate: moment().format('YYYY-MM-DD')+'T'+ value
|
||||
});
|
||||
}else{
|
||||
$(id).datetimepicker({
|
||||
allowInputToggle: true,
|
||||
format: 'HH:mm'
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* dateTimePicker 생성 (AM, PM 선택)
|
||||
****************************************************************************/
|
||||
function fn_dateTimePicker2(id){
|
||||
$(id).datetimepicker({
|
||||
allowInputToggle: true,
|
||||
format: 'LT'
|
||||
});
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* dateTimePicker 생성
|
||||
****************************************************************************/
|
||||
function fn_dateTimePicker3(id){
|
||||
$(id).datetimepicker({
|
||||
allowInputToggle: true,
|
||||
format: 'YYYY-MM-DD HH:mm'
|
||||
});
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* dateTimePicker 생성 (AM, PM 선택)
|
||||
****************************************************************************/
|
||||
function fn_dateMonthPicker(id){
|
||||
$(id).datetimepicker({
|
||||
allowInputToggle: true,
|
||||
format: 'YYYY-MM',
|
||||
defaultDate: moment().format('YYYY-MM')
|
||||
});
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* null 확인
|
||||
****************************************************************************/
|
||||
function fn_emptyYn(value){
|
||||
if( value == "" || value == null || value == undefined || ( value != null && typeof value == "object" && !Object.keys(value).length ) ){
|
||||
return true
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/****************************************************************************
|
||||
* 오늘 날짜 조회
|
||||
****************************************************************************/
|
||||
function fn_getToDate() {
|
||||
var toDate = new Date();
|
||||
var newToDate = fn_formatToDate(toDate.getFullYear(), 4) + '-' + fn_formatToDate(toDate.getMonth() + 1, 2) + '-' + fn_formatToDate(toDate.getDate(), 2);
|
||||
|
||||
return newToDate;
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 어제 날짜 조회
|
||||
****************************************************************************/
|
||||
function fn_getToYesterday() {
|
||||
var toDate = new Date();
|
||||
var newToDate = fn_formatToDate(toDate.getFullYear(), 4) + '-' + fn_formatToDate(toDate.getMonth() + 1, 2) + '-' + fn_formatToDate(toDate.getDate()-1, 2);
|
||||
|
||||
return newToDate;
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 날짜 형식 맞추기
|
||||
****************************************************************************/
|
||||
function fn_formatToDate(day, number) {
|
||||
var temp = '';
|
||||
day = day.toString();
|
||||
|
||||
if (day.length < number) {
|
||||
for (i = 0; i < number - day.length; i++){
|
||||
temp += '0';
|
||||
}
|
||||
}
|
||||
|
||||
return temp + day;
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 날짜 월 조회 YYYY-mm-dd
|
||||
****************************************************************************/
|
||||
function fn_getMonthFromDate(param){
|
||||
|
||||
let date = new Date(param);
|
||||
|
||||
let month = date.getMonth()+1;
|
||||
|
||||
return month;
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 날짜 요일 조회
|
||||
****************************************************************************/
|
||||
function fn_getDayName(param){
|
||||
var paramArray = param.split('-');
|
||||
var week = new Array('일', '월', '화', '수', '목', '금', '토');
|
||||
var dt = new Date(parseInt(paramArray[0]), parseInt(paramArray[1])-1, parseInt(paramArray[2]));
|
||||
var dayName = week[dt.getDay()];
|
||||
|
||||
return dayName;
|
||||
}
|
||||
|
||||
/*************************************************************************
|
||||
* 날짜 형식 변환
|
||||
* A: 년월일
|
||||
* B: 월일
|
||||
* C: 년월일 시간
|
||||
* D: 년.월.일
|
||||
**************************************************************************/
|
||||
function setFormatDate(type, param) {
|
||||
var retureValue = param;
|
||||
|
||||
if(type=="A"){
|
||||
var dateArray = param.split("-");
|
||||
retureValue = dateArray[0]+"년 "+dateArray[1]+"월 "+dateArray[2]+"일";
|
||||
}else if(type=="B"){
|
||||
var dateArray = param.split("-");
|
||||
retureValue = dateArray[1]+"월 "+dateArray[2]+"일";
|
||||
}else if(type=="C"){
|
||||
var tempArray = param.split(" ");
|
||||
var dateArray1 = tempArray[0].split("-");
|
||||
var dateArray2 = tempArray[1];
|
||||
|
||||
retureValue = dateArray1[0]+"년 "+dateArray1[1]+"월 "+dateArray1[2]+"일 "+dateArray2;
|
||||
}if(type=="D"){
|
||||
var dateArray = param.split("-");
|
||||
retureValue = dateArray[0].substring(2, 4)+"."+dateArray[1]+"."+dateArray[2];
|
||||
}
|
||||
|
||||
return retureValue;
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 빈값 체크
|
||||
****************************************************************************/
|
||||
function fn_emptyCheck(param){
|
||||
if(param === null || param === "" || param === "null" || param === "NULL" || param === undefined || param === "undefined"){
|
||||
return false;
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 길이 체크
|
||||
****************************************************************************/
|
||||
function fn_lengthCheck(str, maxLength){
|
||||
var strLength = str.length;
|
||||
|
||||
if(strLength > maxLength){
|
||||
return false;
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 날짜 체크
|
||||
****************************************************************************/
|
||||
function fn_dateCheck(value){
|
||||
var strLength = value.length;
|
||||
var cnt = 0;
|
||||
var searchChar = "-"; // 찾으려는 문자
|
||||
var pos = value.indexOf(searchChar); // pos는 0의 값을 가짐
|
||||
|
||||
if(strLength == 10){
|
||||
|
||||
while(pos !== -1){
|
||||
cnt++;
|
||||
pos = value.indexOf(searchChar, pos + 1) // 첫 번째 - 이후의 인덱스부터 -를 찾음
|
||||
}
|
||||
|
||||
if(cnt == 2){
|
||||
|
||||
return true;
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
// var date = value.split("-");
|
||||
// var y = parseInt(date[0], 10),
|
||||
// m = parseInt(date[1], 10),
|
||||
// d = parseInt(date[2], 10);
|
||||
//
|
||||
// var dateRegex = /^(?=\d)(?:(?:31(?!.(?:0?[2469]|11))|(?:30|29)(?!.0?2)|29(?=.0?2.(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00)))(?:\x20|$))|(?:2[0-8]|1\d|0?[1-9]))([-.\/])(?:1[012]|0?[1-9])\1(?:1[6-9]|[2-9]\d)?\d\d(?:(?=\x20\d)\x20|$))?(((0?[1-9]|1[012])(:[0-5]\d){0,2}(\x20[AP]M))|([01]\d|2[0-3])(:[0-5]\d){1,2})?$/;
|
||||
// if(dateRegex.test(d+'-'+m+'-'+y)){
|
||||
// return true;
|
||||
// }else{
|
||||
// return false;
|
||||
// }
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 날짜 시간 체크
|
||||
****************************************************************************/
|
||||
function fn_dateTimeCheck(value){
|
||||
var strLength = value.length;
|
||||
var cnt = 0;
|
||||
var searchChar = "-"; // 찾으려는 문자
|
||||
var pos = value.indexOf(searchChar); // pos는 0의 값을 가짐
|
||||
|
||||
if(strLength == 10){
|
||||
|
||||
while(pos !== -1){
|
||||
cnt++;
|
||||
pos = value.indexOf(searchChar, pos + 1) // 첫 번째 - 이후의 인덱스부터 -를 찾음
|
||||
}
|
||||
|
||||
if(cnt == 2){
|
||||
|
||||
return true;
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
|
||||
// var date = value.split("-");
|
||||
// var y = parseInt(date[0], 10),
|
||||
// m = parseInt(date[1], 10),
|
||||
// d = parseInt(date[2], 10);
|
||||
//
|
||||
// var dateRegex = /^(?=\d)(?:(?:31(?!.(?:0?[2469]|11))|(?:30|29)(?!.0?2)|29(?=.0?2.(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00)))(?:\x20|$))|(?:2[0-8]|1\d|0?[1-9]))([-.\/])(?:1[012]|0?[1-9])\1(?:1[6-9]|[2-9]\d)?\d\d(?:(?=\x20\d)\x20|$))?(((0?[1-9]|1[012])(:[0-5]\d){0,2}(\x20[AP]M))|([01]\d|2[0-3])(:[0-5]\d){1,2})?$/;
|
||||
// if(dateRegex.test(d+'-'+m+'-'+y)){
|
||||
// return true;
|
||||
// }else{
|
||||
// return false;
|
||||
// }
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 첨부파일 최대 용량
|
||||
****************************************************************************/
|
||||
function fn_maxFileSize(){
|
||||
return 52428800;
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 첨부파일 최대 갯수 : 10
|
||||
****************************************************************************/
|
||||
function fn_maxFileCount(){
|
||||
return 10;
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 첨부파일 최대 갯수 : 5
|
||||
****************************************************************************/
|
||||
function fn_maxFileCount2(){
|
||||
return 5;
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 개행문자 br태그로 변경
|
||||
****************************************************************************/
|
||||
function fn_replaceBrTag(param){
|
||||
let result = param.replaceAll(/\n/ig, '<br>');
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 뒤로가기시 모달 닫기
|
||||
****************************************************************************/
|
||||
function modalCloseEvent(){
|
||||
let modalCheck = false;
|
||||
let modalArrLength = modalArr.length;
|
||||
|
||||
for(let i=0;i<modalArrLength;i++){
|
||||
let modalName = modalArr[i];
|
||||
if(location.hash=='#'+modalName){
|
||||
modalCheck = true;
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(location.hash=='#'+modalArr[modalArr.length-1]){
|
||||
modalBackYn = 'N';
|
||||
}else{
|
||||
let modalName = modalArr[modalArr.length-1];
|
||||
|
||||
modalBackYn = 'Y';
|
||||
|
||||
|
||||
if("commonModal"==modalName && true==modalCheck){
|
||||
modalEvent.close();
|
||||
}else if("examResultDetailModal"==modalName && true==modalCheck){
|
||||
$("#examResultDetailModal .modal-header img").click();
|
||||
}else if("testKoreanResultDetailModal"==modalName && true==modalCheck){
|
||||
$("#testKoreanResultDetailModal .modal-header img").click();
|
||||
}else if("testEnglishResultDetailModal"==modalName && true==modalCheck){
|
||||
$("#testEnglishResultDetailModal .modal-header img").click();
|
||||
}else if("examResultDetailModal2"==modalName && true==modalCheck){
|
||||
$("#examResultDetailModal2 .modal-header img").click();
|
||||
}else if("examResultDetailModal3"==modalName && true==modalCheck){
|
||||
$("#examResultDetailModal3 .modal-header img").click();
|
||||
}else if("examResultDetailModal4"==modalName && true==modalCheck){
|
||||
$("#examResultDetailModal4 .modal-header img").click();
|
||||
}else if("popup_insertPlannerCategory"==modalName && true==modalCheck){
|
||||
$("#popup_insertPlannerCategory .modal-header img").click();
|
||||
}else if("popup_insertPlanner"==modalName && true==modalCheck){
|
||||
$("#popup_insertPlanner .modal-header img").click();
|
||||
}else if("modalItemShop"==modalName && true==modalCheck){
|
||||
$("#modalItemShop .modal-header img").click();
|
||||
}else if("purchas"==modalName && true==modalCheck){
|
||||
$("#purchas .modal-header img").click();
|
||||
}else if("lack"==modalName && true==modalCheck){
|
||||
$("#lack .modal-header img").click();
|
||||
}else if("examEndModal"==modalName && true==modalCheck){
|
||||
$("#examEndModal #endLevelTestBtn").click();
|
||||
}else if("tutorialModal"==modalName && true==modalCheck){
|
||||
$("#tutorialModal .modal-header img").click();
|
||||
}else{
|
||||
//hash명이 정의되지않은 이름일시 팝업 전부 닫기
|
||||
|
||||
let modalArrLength = modalArr.length;
|
||||
|
||||
for(let i=0;i<modalArrLength;i++){
|
||||
fn_modalBackCloseEvent(modalArr[modalArr.length-1]);
|
||||
}
|
||||
modalArr = new Array();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//모달 Array에 있는 이름으로 닫기
|
||||
function fn_modalBackCloseEvent(modalNameParam){
|
||||
if("commonModal"==modalNameParam){
|
||||
modalEvent.close();
|
||||
}else if("examResultDetailModal"==modalNameParam){
|
||||
$("#examResultDetailModal .modal-header img").click();
|
||||
}else if("testKoreanResultDetailModal"==modalNameParam){
|
||||
$("#testKoreanResultDetailModal .modal-header img").click();
|
||||
}else if("testEnglishResultDetailModal"==modalNameParam){
|
||||
$("#testEnglishResultDetailModal .modal-header img").click();
|
||||
}else if("examResultDetailModal2"==modalNameParam){
|
||||
$("#examResultDetailModal2 .modal-header img").click();
|
||||
}else if("examResultDetailModal3"==modalNameParam){
|
||||
$("#examResultDetailModal3 .modal-header img").click();
|
||||
}else if("examResultDetailModal4"==modalNameParam){
|
||||
$("#examResultDetailModal4 .modal-header img").click();
|
||||
}else if("popup_insertPlannerCategory"==modalNameParam){
|
||||
$("#popup_insertPlannerCategory .modal-header img").click();
|
||||
}else if("popup_insertPlanner"==modalNameParam){
|
||||
$("#popup_insertPlanner .modal-header img").click();
|
||||
}else if("modalItemShop"==modalNameParam){
|
||||
$("#modalItemShop .modal-header img").click();
|
||||
}else if("purchas"==modalNameParam){
|
||||
$("#purchas .modal-header img").click();
|
||||
}else if("lack"==modalNameParam){
|
||||
$("#lack .modal-header img").click();
|
||||
}else if("examEndModal"==modalNameParam){
|
||||
$("#examEndModal #endLevelTestBtn").click();
|
||||
}else if("tutorialModal"==modalNameParam) {
|
||||
$("#tutorialModal .modal-header img").click();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 핸드폰 번호 검증 공통 모듈
|
||||
* @version 1.0.0
|
||||
* @author Your Name
|
||||
*/
|
||||
|
||||
var PhoneValidator = (function() {
|
||||
'use strict';
|
||||
|
||||
// 기본 설정
|
||||
var defaultOptions = {
|
||||
maxLength: 11,
|
||||
minLength: 10,
|
||||
allowHyphen: false,
|
||||
realTimeValidation: true,
|
||||
showMessage: true,
|
||||
messagePosition: 'after', // 'after', 'before', 'append'
|
||||
autoFormat: false,
|
||||
blockNonNumeric: true,
|
||||
allowedPrefixes: ['010', '011', '016', '017', '018', '019']
|
||||
};
|
||||
|
||||
// 메시지 템플릿
|
||||
var messages = {
|
||||
onlyNumbers: '숫자만 입력할 수 있습니다.',
|
||||
invalidPrefix: function(prefixes) {
|
||||
return prefixes.join(', ') + '로 시작해야 합니다.';
|
||||
},
|
||||
tooShort: function(remaining) {
|
||||
return remaining + '자리 더 입력해주세요.';
|
||||
},
|
||||
tooLong: function(maxLength) {
|
||||
return '휴대폰 번호는 최대 ' + maxLength + '자리입니다.';
|
||||
},
|
||||
valid: '올바른 휴대폰 번호입니다.',
|
||||
invalid: '유효하지 않은 휴대폰 번호입니다.'
|
||||
};
|
||||
|
||||
// CSS 클래스
|
||||
var cssClasses = {
|
||||
message: 'phone-message',
|
||||
error: 'error',
|
||||
warning: 'warning',
|
||||
success: 'success',
|
||||
info: 'info'
|
||||
};
|
||||
|
||||
/**
|
||||
* 핸드폰 번호 검증 초기화
|
||||
* @param {string} inputId - input 요소의 ID
|
||||
* @param {Object} options - 설정 옵션
|
||||
*/
|
||||
function init(inputId, options) {
|
||||
var settings = $.extend({}, defaultOptions, options || {});
|
||||
var $input = $('#' + inputId);
|
||||
|
||||
if ($input.length === 0) {
|
||||
console.error('PhoneValidator: Element with ID "' + inputId + '" not found.');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 데이터 속성에 설정 저장
|
||||
$input.data('phoneValidator', settings);
|
||||
|
||||
// 이벤트 바인딩
|
||||
bindEvents($input, settings);
|
||||
|
||||
// 메시지 컨테이너 생성
|
||||
if (settings.showMessage) {
|
||||
createMessageContainer($input, settings);
|
||||
}
|
||||
|
||||
// 초기 스타일 추가
|
||||
addInitialStyles();
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 이벤트 바인딩
|
||||
*/
|
||||
function bindEvents($input, settings) {
|
||||
// input 이벤트 (실시간 검증)
|
||||
$input.on('input.phoneValidator', function(e) {
|
||||
handleInput($(this), settings);
|
||||
});
|
||||
|
||||
// keypress 이벤트 (키 입력 차단)
|
||||
if (settings.blockNonNumeric) {
|
||||
$input.on('keypress.phoneValidator', function(e) {
|
||||
handleKeypress(e, $(this), settings);
|
||||
});
|
||||
}
|
||||
|
||||
// paste 이벤트 (붙여넣기 처리)
|
||||
$input.on('paste.phoneValidator', function(e) {
|
||||
setTimeout(function() {
|
||||
handleInput($input, settings);
|
||||
}, 1);
|
||||
});
|
||||
|
||||
// blur 이벤트 (포커스 아웃 시 최종 검증)
|
||||
$input.on('blur.phoneValidator', function() {
|
||||
validateComplete($(this), settings);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 입력 처리
|
||||
*/
|
||||
function handleInput($input, settings) {
|
||||
var value = $input.val();
|
||||
var numericValue = extractNumeric(value, settings);
|
||||
|
||||
// 최대 길이 제한
|
||||
if (numericValue.length > settings.maxLength) {
|
||||
numericValue = numericValue.substring(0, settings.maxLength);
|
||||
showMessage($input, messages.tooLong(settings.maxLength), 'error');
|
||||
}
|
||||
|
||||
// 숫자가 아닌 문자가 입력된 경우
|
||||
if (value !== numericValue && settings.showMessage) {
|
||||
showMessage($input, messages.onlyNumbers, 'error');
|
||||
}
|
||||
|
||||
// 값 업데이트
|
||||
if (settings.autoFormat) {
|
||||
$input.val(formatPhoneNumber(numericValue));
|
||||
} else {
|
||||
$input.val(numericValue);
|
||||
}
|
||||
|
||||
// 실시간 검증
|
||||
if (settings.realTimeValidation) {
|
||||
validatePhoneNumber($input, numericValue, settings);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 키 입력 차단
|
||||
*/
|
||||
function handleKeypress(e, $input, settings) {
|
||||
var charCode = e.which || e.keyCode;
|
||||
|
||||
// 제어키 허용 (백스페이스, 탭, 엔터, 삭제 등)
|
||||
if ([8, 9, 13, 27, 46].indexOf(charCode) !== -1 ||
|
||||
// Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X 허용
|
||||
(e.ctrlKey && [65, 67, 86, 88].indexOf(charCode) !== -1) ||
|
||||
// 방향키 허용
|
||||
(charCode >= 35 && charCode <= 40)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 숫자가 아닌 키 차단
|
||||
if (charCode < 48 || charCode > 57) {
|
||||
e.preventDefault();
|
||||
if (settings.showMessage) {
|
||||
showMessage($input, messages.onlyNumbers, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 핸드폰 번호 검증
|
||||
*/
|
||||
function validatePhoneNumber($input, phoneNumber, settings) {
|
||||
if (!settings.showMessage) return;
|
||||
|
||||
clearBorderStyle($input);
|
||||
|
||||
if (phoneNumber === '') {
|
||||
hideMessage($input);
|
||||
return { isValid: false, message: '' };
|
||||
}
|
||||
|
||||
// 길이별 검증
|
||||
if (phoneNumber.length < settings.maxLength) {
|
||||
if (phoneNumber.length >= 3) {
|
||||
var prefix = phoneNumber.substring(0, 3);
|
||||
if (settings.allowedPrefixes.indexOf(prefix) === -1) {
|
||||
showMessage($input, messages.invalidPrefix(settings.allowedPrefixes), 'error');
|
||||
setBorderStyle($input, 'error');
|
||||
return { isValid: false, message: messages.invalidPrefix(settings.allowedPrefixes) };
|
||||
}
|
||||
}
|
||||
|
||||
if (phoneNumber.length >= 8) {
|
||||
var remaining = settings.maxLength - phoneNumber.length;
|
||||
showMessage($input, messages.tooShort(remaining), 'warning');
|
||||
setBorderStyle($input, 'warning');
|
||||
return { isValid: false, message: messages.tooShort(remaining) };
|
||||
}
|
||||
|
||||
hideMessage($input);
|
||||
return { isValid: false, message: '' };
|
||||
}
|
||||
|
||||
// 최종 검증 (11자리 완성)
|
||||
if (phoneNumber.length === settings.maxLength) {
|
||||
var isValid = isValidPhoneNumber(phoneNumber, settings);
|
||||
if (isValid) {
|
||||
showMessage($input, messages.valid, 'success');
|
||||
setBorderStyle($input, 'success');
|
||||
return { isValid: true, message: messages.valid };
|
||||
} else {
|
||||
showMessage($input, messages.invalid, 'error');
|
||||
setBorderStyle($input, 'error');
|
||||
return { isValid: false, message: messages.invalid };
|
||||
}
|
||||
}
|
||||
|
||||
return { isValid: false, message: '' };
|
||||
}
|
||||
|
||||
/**
|
||||
* 완전한 검증 (blur 시)
|
||||
*/
|
||||
function validateComplete($input, settings) {
|
||||
var phoneNumber = extractNumeric($input.val(), settings);
|
||||
return validatePhoneNumber($input, phoneNumber, settings);
|
||||
}
|
||||
|
||||
/**
|
||||
* 핸드폰 번호 유효성 검사
|
||||
*/
|
||||
function isValidPhoneNumber(phoneNumber, settings) {
|
||||
if (phoneNumber.length !== settings.maxLength) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 수정된 한국 휴대폰 번호 패턴
|
||||
// 010, 011, 016, 017, 018, 019로 시작하는 11자리 번호
|
||||
var pattern = new RegExp('^01[0-9]\\d{8}$'); // 모든 010~019 허용
|
||||
|
||||
return pattern.test(phoneNumber);
|
||||
}
|
||||
|
||||
/**
|
||||
* 숫자만 추출
|
||||
*/
|
||||
function extractNumeric(value, settings) {
|
||||
if (settings.allowHyphen) {
|
||||
return value.replace(/[^0-9-]/g, '');
|
||||
}
|
||||
return value.replace(/[^0-9]/g, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* 전화번호 포맷팅 (선택사항)
|
||||
*/
|
||||
function formatPhoneNumber(phoneNumber) {
|
||||
if (phoneNumber.length <= 3) {
|
||||
return phoneNumber;
|
||||
} else if (phoneNumber.length <= 7) {
|
||||
return phoneNumber.substring(0, 3) + '-' + phoneNumber.substring(3);
|
||||
} else {
|
||||
return phoneNumber.substring(0, 3) + '-' +
|
||||
phoneNumber.substring(3, 7) + '-' +
|
||||
phoneNumber.substring(7);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 메시지 컨테이너 생성
|
||||
*/
|
||||
function createMessageContainer($input, settings) {
|
||||
var messageId = $input.attr('id') + '-message';
|
||||
var $messageDiv = $('<div id="' + messageId + '" class="' + cssClasses.message + '"></div>');
|
||||
|
||||
switch (settings.messagePosition) {
|
||||
case 'before':
|
||||
$input.before($messageDiv);
|
||||
break;
|
||||
case 'append':
|
||||
$input.parent().append($messageDiv);
|
||||
break;
|
||||
default: // 'after'
|
||||
$input.after($messageDiv);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 메시지 표시
|
||||
*/
|
||||
function showMessage($input, message, type) {
|
||||
var messageId = $input.attr('id') + '-message';
|
||||
var $messageDiv = $('#' + messageId);
|
||||
|
||||
if ($messageDiv.length > 0) {
|
||||
$messageDiv.removeClass(cssClasses.error + ' ' + cssClasses.warning + ' ' + cssClasses.success + ' ' + cssClasses.info)
|
||||
.addClass(cssClasses[type])
|
||||
.text(message)
|
||||
.show();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 메시지 숨기기
|
||||
*/
|
||||
function hideMessage($input) {
|
||||
var messageId = $input.attr('id') + '-message';
|
||||
$('#' + messageId).hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* 테두리 스타일 설정
|
||||
*/
|
||||
function setBorderStyle($input, type) {
|
||||
var colors = {
|
||||
error: '#ff0000',
|
||||
warning: '#ff8c00',
|
||||
success: '#008000',
|
||||
info: '#87ceeb'
|
||||
};
|
||||
|
||||
$input.css('border-color', colors[type]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 테두리 스타일 초기화
|
||||
*/
|
||||
function clearBorderStyle($input) {
|
||||
$input.css('border-color', '');
|
||||
}
|
||||
|
||||
/**
|
||||
* 초기 스타일 추가
|
||||
*/
|
||||
function addInitialStyles() {
|
||||
if ($('#phoneValidator-styles').length === 0) {
|
||||
var styles = `
|
||||
<style id="phoneValidator-styles">
|
||||
.phone-message {
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
}
|
||||
.phone-message.error { color: #ff0000; }
|
||||
.phone-message.warning { color: #ff8c00; }
|
||||
.phone-message.success { color: #008000; }
|
||||
.phone-message.info { color: #87ceeb; }
|
||||
input[data-phone-validator] {
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
$('head').append(styles);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 검증 해제
|
||||
*/
|
||||
function destroy(inputId) {
|
||||
var $input = $('#' + inputId);
|
||||
$input.off('.phoneValidator');
|
||||
$input.removeData('phoneValidator');
|
||||
$('#' + inputId + '-message').remove();
|
||||
clearBorderStyle($input);
|
||||
}
|
||||
|
||||
/**
|
||||
* 수동 검증
|
||||
*/
|
||||
function validate(inputId) {
|
||||
var $input = $('#' + inputId);
|
||||
var settings = $input.data('phoneValidator') || defaultOptions;
|
||||
var phoneNumber = extractNumeric($input.val(), settings);
|
||||
return validatePhoneNumber($input, phoneNumber, settings);
|
||||
}
|
||||
|
||||
/**
|
||||
* 값 가져오기 (숫자만)
|
||||
*/
|
||||
function getValue(inputId) {
|
||||
var $input = $('#' + inputId);
|
||||
var settings = $input.data('phoneValidator') || defaultOptions;
|
||||
return extractNumeric($input.val(), settings);
|
||||
}
|
||||
|
||||
// Public API
|
||||
return {
|
||||
init: init,
|
||||
destroy: destroy,
|
||||
validate: validate,
|
||||
getValue: getValue,
|
||||
isValid: function(inputId) {
|
||||
return validate(inputId).isValid;
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
// AMD/CommonJS 지원
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = PhoneValidator;
|
||||
} else if (typeof define === 'function' && define.amd) {
|
||||
define(function() { return PhoneValidator; });
|
||||
}
|
||||
726
src/main/resources/static/js/web/index.js
Normal file
726
src/main/resources/static/js/web/index.js
Normal file
@@ -0,0 +1,726 @@
|
||||
/************************************************
|
||||
* 초기화
|
||||
************************************************/
|
||||
function fn_init() {
|
||||
//팝업
|
||||
fn_selectListWebPopupJson();
|
||||
//인스타그램 리스트
|
||||
fn_selectListWebInstagramJson();
|
||||
|
||||
//상단, 하단 배너
|
||||
fn_selectListWebMainBannerTypeAJson();
|
||||
fn_selectListWebMainBannerTypeBJson();
|
||||
}
|
||||
|
||||
/************************************************
|
||||
* 팝업 마스킹 관련 함수들 (새로 추가)
|
||||
************************************************/
|
||||
|
||||
// 배경 마스킹 표시
|
||||
function showBackgroundMask() {
|
||||
const mask = document.querySelector('.popup-background-mask');
|
||||
if (mask) {
|
||||
mask.classList.add('active');
|
||||
}
|
||||
|
||||
// body에 popup-open 클래스 추가 (스크롤 비활성화 및 블러 효과)
|
||||
document.body.classList.add('popup-open');
|
||||
|
||||
console.log('Background mask activated');
|
||||
}
|
||||
|
||||
// 배경 마스킹 제거
|
||||
function hideBackgroundMask() {
|
||||
const mask = document.querySelector('.popup-background-mask');
|
||||
if (mask) {
|
||||
mask.classList.remove('active');
|
||||
}
|
||||
|
||||
// body에서 popup-open 클래스 제거
|
||||
document.body.classList.remove('popup-open');
|
||||
|
||||
console.log('Background mask deactivated');
|
||||
}
|
||||
|
||||
/************************************************
|
||||
* content1 스와이퍼
|
||||
************************************************/
|
||||
const cont1Urls = [
|
||||
'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4' // 첫 번째 슬라이드 URL
|
||||
,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=1' // 두 번째 슬라이드 URL
|
||||
,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=5' // 세 번째 슬라이드 URL
|
||||
,'https://petit.madeu.co.kr/index' // 네 번째 슬라이드 URL
|
||||
,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=1' // 다섯 번째 슬라이드 URL
|
||||
// 필요시 추가
|
||||
];
|
||||
|
||||
const bullet1 = ['레이저리프팅','보톡스','스킨부스터','제모', '필러']
|
||||
|
||||
const useCont1Loop = bullet1.length > 5; // slidesPerView(1.3)보다 많을 때만 loop
|
||||
const cont1Swiper = new Swiper('.cont1_swiper', {
|
||||
loop: useCont1Loop,
|
||||
slidesPerView: 'auto',
|
||||
spaceBetween: 10,
|
||||
autoplay : {
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.cont1_swiper_pagination',
|
||||
clickable: true,
|
||||
renderBullet: function (index, className) {
|
||||
return '<div class="' + className + '"><span>' + (bullet1[index]) + '</span></div>';
|
||||
}
|
||||
},
|
||||
on: {
|
||||
init: function () {
|
||||
document.querySelectorAll('.cont1_swiper .swiper-slide').forEach(function(slide, idx) {
|
||||
slide.style.cursor = 'pointer';
|
||||
slide.setAttribute('data-url', cont1Urls[idx] || cont1Urls[0]);
|
||||
slide.addEventListener('click', function() {
|
||||
const url = slide.getAttribute('data-url');
|
||||
if(url) window.open(url, '_blank');
|
||||
});
|
||||
});
|
||||
},
|
||||
slideChange: function () {
|
||||
document.querySelectorAll('.cont1_swiper .swiper-slide').forEach(function(slide, idx) {
|
||||
slide.style.cursor = 'pointer';
|
||||
slide.setAttribute('data-url', cont1Urls[idx] || cont1Urls[0]);
|
||||
slide.onclick = function() {
|
||||
const url = slide.getAttribute('data-url');
|
||||
if(url) window.open(url, '_blank');
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/************************************************
|
||||
* content2 스와이퍼
|
||||
************************************************/
|
||||
const cont2Urls = [
|
||||
'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4' // 첫 번째 슬라이드 URL
|
||||
,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4' // 두 번째 슬라이드 URL
|
||||
,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4' // 세 번째 슬라이드 URL
|
||||
,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4' // 네 번째 슬라이드 URL
|
||||
,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4' // 다섯 번째 슬라이드 URL
|
||||
];
|
||||
|
||||
const bullet2 = ['써마지','울세라','줄기세포', '튠페이스', '티타늄리프팅']
|
||||
|
||||
const useCont2Loop = bullet2.length > 5; // slidesPerView(1.3)보다 많을 때만 loop
|
||||
const cont2Swiper = new Swiper('.cont2_swiper', {
|
||||
loop: useCont2Loop,
|
||||
slidesPerView: 'auto',
|
||||
spaceBetween: 10,
|
||||
autoplay : {
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.cont2_swiper_pagination',
|
||||
clickable: true,
|
||||
renderBullet: function (index, className) {
|
||||
return '<div class="' + className + '"><span>' + (bullet2[index]) + '</span></div>';
|
||||
}
|
||||
},
|
||||
on: {
|
||||
init: function () {
|
||||
document.querySelectorAll('.cont2_swiper .swiper-slide').forEach(function(slide, idx) {
|
||||
slide.style.cursor = 'pointer';
|
||||
slide.setAttribute('data-url', cont2Urls[idx] || cont2Urls[0]);
|
||||
slide.addEventListener('click', function() {
|
||||
const url = slide.getAttribute('data-url');
|
||||
if(url) window.open(url, '_blank');
|
||||
});
|
||||
});
|
||||
},
|
||||
slideChange: function () {
|
||||
document.querySelectorAll('.cont2_swiper .swiper-slide').forEach(function(slide, idx) {
|
||||
slide.style.cursor = 'pointer';
|
||||
slide.setAttribute('data-url', cont2Urls[idx] || cont2Urls[0]);
|
||||
slide.onclick = function() {
|
||||
const url = slide.getAttribute('data-url');
|
||||
if(url) window.open(url, '_blank');
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/****************************************************************************
|
||||
* 팝업 리스트 조회 (마스킹 기능 추가)
|
||||
****************************************************************************/
|
||||
function fn_selectListWebPopupJson(){
|
||||
let formData = new FormData();
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webpopup/selectListWebPopup.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: true,
|
||||
success: function(data){
|
||||
if(data.msgCode=='0'){
|
||||
//쿠기값 확인
|
||||
let cookiedata = document.cookie;
|
||||
if (cookiedata.indexOf("popup=done") < 0) {
|
||||
$('.popup').addClass('open');
|
||||
|
||||
// *** 배경 마스킹 활성화 추가 ***
|
||||
showBackgroundMask();
|
||||
|
||||
let totalCount = data.rows.length;
|
||||
if (0 < totalCount) {
|
||||
let popupContentList = $('#popupContentList');
|
||||
let popupTabList = $('#popupTabList');
|
||||
|
||||
popupContentList.empty();
|
||||
popupTabList.empty();
|
||||
|
||||
for (let i = 0; i < Math.min(data.rows.length, 5); i++) {
|
||||
let isActive = i === 0 ? ' active' : '';
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
const imgPath = isMobile ? (data.rows[i].m_filePath || data.rows[i].filePath) : data.rows[i].filePath;
|
||||
|
||||
// 탭 콘텐츠 생성
|
||||
let contentHTML = '';
|
||||
contentHTML += '<div role="tabpanel" class="tab-pane' + isActive + '" id="content' + (i+1) + '">';
|
||||
contentHTML += '<a href="' + data.rows[i].url + '" target="_blank" rel="noopener">';
|
||||
contentHTML += '<img src="' + CDN_URL + imgPath + '" alt="event_con' + (i+1) + '" />';
|
||||
contentHTML += '</a>';
|
||||
contentHTML += '</div>';
|
||||
popupContentList.append(contentHTML);
|
||||
|
||||
// 탭 리스트 생성 (data-toggle 제거하고 클릭 이벤트 직접 처리)
|
||||
let tabHTML = '';
|
||||
tabHTML += '<li role="presentation"' + (isActive ? ' class="active"' : '') + '>';
|
||||
tabHTML += '<a href="#content' + (i+1) + '" role="tab" id="contentTitle' + (i+1) + '" data-target="content' + (i+1) + '">';
|
||||
tabHTML += fn_addBrAfterFirstWord(data.rows[i].title);
|
||||
tabHTML += '</a>';
|
||||
tabHTML += '</li>';
|
||||
popupTabList.append(tabHTML);
|
||||
}
|
||||
|
||||
// 탭 클릭 이벤트 수동 구현
|
||||
setupTabEvents();
|
||||
setupPopupCloseEvents();
|
||||
}
|
||||
}else{
|
||||
$('.popup').removeClass('open');
|
||||
hideBackgroundMask(); // 추가
|
||||
}
|
||||
}else if('-2' == data.msgCode){
|
||||
modalEvent.danger("로그인 오류", data.msgDesc, function(){
|
||||
fn_leftFormAction('/weblogin/logout.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 setupTabEvents() {
|
||||
$('#popupTabList a[role="tab"]').off('click').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const targetId = $(this).data('target');
|
||||
|
||||
// 모든 탭과 콘텐츠에서 active 클래스 제거
|
||||
$('#popupTabList li').removeClass('active');
|
||||
$('#popupContentList .tab-pane').removeClass('active');
|
||||
|
||||
// 클릭된 탭과 해당 콘텐츠에 active 클래스 추가
|
||||
$(this).parent('li').addClass('active');
|
||||
$('#' + targetId).addClass('active');
|
||||
});
|
||||
}
|
||||
|
||||
// 팝업 닫기 이벤트들을 설정하는 함수
|
||||
function setupPopupCloseEvents() {
|
||||
// 기존 이벤트 리스너 제거 후 새로 추가
|
||||
const closeBtn = document.getElementById('btnPopupClose');
|
||||
if (closeBtn) {
|
||||
// 기존 이벤트 리스너 복제본 생성하여 교체
|
||||
const newCloseBtn = closeBtn.cloneNode(true);
|
||||
closeBtn.parentNode.replaceChild(newCloseBtn, closeBtn);
|
||||
|
||||
// 새로운 이벤트 리스너 추가
|
||||
newCloseBtn.addEventListener('click', function () {
|
||||
//체크박스 확인
|
||||
const todayCheckbox = document.getElementById('today');
|
||||
|
||||
if (todayCheckbox.checked) {
|
||||
setCookie('done', 1);
|
||||
} else {
|
||||
$('.popup').removeClass('open');
|
||||
hideBackgroundMask();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function fn_addBrAfterFirstWord(input) {
|
||||
// 문자열을 공백 기준으로 나눔
|
||||
const words = input.trim().split(" ");
|
||||
|
||||
// 단어가 2개 이상일 때 첫 번째 단어 뒤에 <br class="mb"/> 추가
|
||||
if (words.length > 1) {
|
||||
return `${words[0]}<br class="mb"/> ${words.slice(1).join(" ")}`;
|
||||
}
|
||||
return input;
|
||||
}
|
||||
|
||||
//쿠키데이터 설정 function (마스킹 기능 추가)
|
||||
function setCookie(value, expiredays) {
|
||||
let todayDate = new Date();
|
||||
todayDate.setDate(todayDate.getDate() + expiredays);
|
||||
document.cookie = "popup=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";";
|
||||
$('.popup').removeClass('open');
|
||||
|
||||
// *** 배경 마스킹 제거 추가 ***
|
||||
hideBackgroundMask();
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 메인 배너 리스트 조회
|
||||
****************************************************************************/
|
||||
function fn_selectListWebMainBannerTypeAJson(){
|
||||
let formData = new FormData();
|
||||
formData.append('bannerType', 'PT');
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webmainbanner/selectListWebMainBanner.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: true,
|
||||
success: function(data){
|
||||
if(data.msgCode=='0'){
|
||||
let totalCount = data.rows.length;
|
||||
if (0 < totalCount) {
|
||||
let listHTML = '';
|
||||
let backgroundColorArr = ['#FC7687', '#ffafba', '#a94e4e', '#e1a28d'];
|
||||
|
||||
for (let i = 0; i < data.rows.length; i++) {
|
||||
const backgroundColor = backgroundColorArr[i % backgroundColorArr.length];
|
||||
const currentSlideIndex = i + 1; // 슬라이드 번호 (1부터 시작)
|
||||
const currentAriaLabel = `${currentSlideIndex} / ${data.rows.length}`; // 동적으로 aria-label 설정
|
||||
// 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용)
|
||||
listHTML += '<div class="swiper-slide" style="background:' + backgroundColor + ';" aria-label="' + currentAriaLabel + '">';
|
||||
listHTML += ' <a href="' + data.rows[i].url + '" target="_blank" rel="noopener">';
|
||||
listHTML += ' <img class="pc" src="' + CDN_URL + data.rows[i].webFilePath + '" alt="banner' + (i+1) + '" />';
|
||||
listHTML += ' <img class="mb" src="' + CDN_URL + data.rows[i].mobileFilePath + '" alt="banner' + (i+1) + '" />';
|
||||
listHTML += ' </a>';
|
||||
listHTML += '</div>';
|
||||
}
|
||||
$("#mainBannerList").html(listHTML).trigger("create");
|
||||
|
||||
/************************************************
|
||||
* main_banner 스와이퍼
|
||||
************************************************/
|
||||
const useMainBannerLoop = totalCount > 1; // slidesPerView(1)보다 많을 때만 loop
|
||||
const mainBannerSwiper = new Swiper('.main_banner_swiper', {
|
||||
loop: useMainBannerLoop,
|
||||
slidesPerView: 1,
|
||||
autoplay : {
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.main_banner_pagination',
|
||||
clickable: true,
|
||||
renderBullet: function (index, className) {
|
||||
return `<span class="${className}" style="flex: 1;"></span>`;
|
||||
},
|
||||
},
|
||||
on: {
|
||||
init: function () {
|
||||
adjustBulletWidth();
|
||||
updateActiveBullets(this.activeIndex);
|
||||
},
|
||||
slideChange: function () {
|
||||
updateActiveBullets(this.realIndex);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
///////// swiper-pagination-bullet 넓이 동적 조정 /////////
|
||||
function adjustBulletWidth() {
|
||||
const bullets = document.querySelectorAll('.main_banner_pagination .swiper-pagination-bullet');
|
||||
const paginationWidth = 490;
|
||||
const bulletWidth = paginationWidth / bullets.length;
|
||||
|
||||
bullets.forEach(bullet => {
|
||||
bullet.style.width = `${bulletWidth}px`;
|
||||
});
|
||||
}
|
||||
|
||||
///////// 활성화된 swiper-pagination-bullet 업데이트 /////////
|
||||
function updateActiveBullets(activeIndex) {
|
||||
const bullets = document.querySelectorAll('.mainbannerpagination .swiper-pagination-bullet');
|
||||
bullets.forEach(bullet => bullet.classList.remove('swiper-pagination-bullet-active')); // 먼저 모두 제거
|
||||
if (bullets[activeIndex]) {
|
||||
bullets[activeIndex].classList.add('swiper-pagination-bullet-active'); // 하나만 추가
|
||||
}
|
||||
}
|
||||
|
||||
}else{$("#mainBannerList").empty();}
|
||||
}else if('-2' == data.msgCode){
|
||||
modalEvent.danger("로그인 오류", data.msgDesc, function(){
|
||||
fn_leftFormAction('/weblogin/logout.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_selectListWebMainBannerTypeBJson(){
|
||||
let formData = new FormData();
|
||||
formData.append('bannerType', 'PB');
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webmainbanner/selectListWebMainBanner.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: true,
|
||||
success: function(data){
|
||||
if(data.msgCode=='0'){
|
||||
let totalCount = data.rows.length;
|
||||
|
||||
if (0 < totalCount) {
|
||||
let listHTML = '';
|
||||
let backgroundColorArr = ['#666', '#999', '#ddd'];
|
||||
|
||||
for (let i = 0; i < data.rows.length; i++) {
|
||||
const backgroundColor = backgroundColorArr[i % backgroundColorArr.length];
|
||||
const currentSlideIndex = i + 1; // 슬라이드 번호 (1부터 시작)
|
||||
const currentAriaLabel = `${currentSlideIndex} / ${data.rows.length}`; // 동적으로 aria-label 설정
|
||||
// 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용)
|
||||
listHTML += '<div class="swiper-slide" style="background:' + backgroundColor + ';" aria-label="' + currentAriaLabel + '">';
|
||||
listHTML += ' <a href="' + data.rows[i].url + '" target="_blank" rel="noopener">';
|
||||
listHTML += ' <img class="pc" src="' + CDN_URL + data.rows[i].webFilePath + '" alt="banner' + (i+1) + '" />';
|
||||
listHTML += ' <img class="mb" src="' + CDN_URL + data.rows[i].mobileFilePath + '" alt="banner' + (i+1) + '" />';
|
||||
listHTML += ' <button class="detail_btn">Detail view ></button>';
|
||||
listHTML += ' </a>';
|
||||
listHTML += '</div>';
|
||||
}
|
||||
$("#subBannerList").html(listHTML).trigger("create");
|
||||
|
||||
/************************************************
|
||||
* sub_banner 스와이퍼
|
||||
************************************************/
|
||||
const useSubBannerLoop = totalCount > 1; // slidesPerView(1)보다 많을 때만 loop
|
||||
const subBannerSwiper = new Swiper('.sub_banner_swiper', {
|
||||
loop: useSubBannerLoop,
|
||||
slidesPerView: 1,
|
||||
autoplay : {
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.sub_banner_pagination',
|
||||
clickable: true,
|
||||
renderBullet: function (index, className) {
|
||||
return `<span class="${className}" style="flex: 1;"></span>`;
|
||||
},
|
||||
},
|
||||
on: {
|
||||
init: function () {
|
||||
adjustSubBulletWidth();
|
||||
updateSubActiveBullets(this.activeIndex);
|
||||
},
|
||||
slideChange: function () {
|
||||
updateSubActiveBullets(this.realIndex);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
///////// swiper-pagination-bullet 넓이 동적 조정 /////////
|
||||
function adjustSubBulletWidth() {
|
||||
const bullets = document.querySelectorAll('.sub_banner_pagination .swiper-pagination-bullet');
|
||||
const paginationWidth = 490;
|
||||
const bulletWidth = paginationWidth / bullets.length;
|
||||
|
||||
bullets.forEach((bullet) => {
|
||||
bullet.style.width = `${bulletWidth}px`;
|
||||
});
|
||||
}
|
||||
|
||||
///////// 활성화된 swiper-pagination-bullet 업데이트 /////////
|
||||
function updateSubActiveBullets(activeIndex) {
|
||||
const bullets = document.querySelectorAll('.sub_banner_pagination .swiper-pagination-bullet');
|
||||
|
||||
bullets.forEach((bullet, index) => {
|
||||
if (index <= activeIndex) {
|
||||
bullet.classList.add('swiper-pagination-bullet-active');
|
||||
} else {
|
||||
bullet.classList.remove('swiper-pagination-bullet-active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}else{$("#subBannerList").empty();}
|
||||
}else if('-2' == data.msgCode){
|
||||
modalEvent.danger("로그인 오류", data.msgDesc, function(){
|
||||
fn_leftFormAction('/weblogin/logout.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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 인스타그램 피드 리스트 조회 (백엔드 API 사용)
|
||||
****************************************************************************/
|
||||
function fn_selectListWebInstagramJson(){
|
||||
let formData = new FormData();
|
||||
$.ajax({
|
||||
url: encodeURI('/webinstagram/selectListWebInstagram.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: true,
|
||||
success: function(data){
|
||||
if(data.msgCode=='0'){
|
||||
let totalCount = data.rows.length;
|
||||
if (0 < totalCount) {
|
||||
let listHTML = '';
|
||||
for (let i = 0; i < data.rows.length; i++) {
|
||||
const currentSlideIndex = i + 1;
|
||||
const currentAriaLabel = `${currentSlideIndex} / ${data.rows.length}`;
|
||||
let mediaUrl = data.rows[i].media_url;
|
||||
let permalink = data.rows[i].permalink;
|
||||
let mediaType = data.rows[i].media_type || '';
|
||||
let thumbnailUrl = data.rows[i].thumbnail_url || mediaUrl;
|
||||
listHTML += '<div class="swiper-slide" aria-label="'+currentAriaLabel+'">';
|
||||
listHTML += ' <a href="'+permalink+'" target="_blank" rel="noopener">';
|
||||
if (mediaType === 'VIDEO' || mediaType === 'REEL') {
|
||||
listHTML += ' <img src="'+thumbnailUrl+'" alt="instagram'+(i+1)+'" />';
|
||||
} else {
|
||||
listHTML += ' <img src="'+mediaUrl+'" alt="instagram'+(i+1)+'" />';
|
||||
}
|
||||
listHTML += ' </a>';
|
||||
listHTML += '</div>';
|
||||
}
|
||||
$("#instagramList").html(listHTML).trigger("create");
|
||||
// 커스텀 내비게이션과 연동
|
||||
initInstagramCustomNav(data);
|
||||
}
|
||||
}else if('-2' == data.msgCode){
|
||||
modalEvent.danger("로그인 오류", data.msgDesc, function(){
|
||||
fn_leftFormAction('/weblogin/logout.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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**********************************
|
||||
* instagram 스와이퍼 + 커스텀 내비게이션 (썸네일 3개 고정) - 수정버전
|
||||
**********************************/
|
||||
function initInstagramCustomNav(data) {
|
||||
const totalCount = data.rows.length;
|
||||
if (totalCount === 0) return;
|
||||
|
||||
// 썸네일은 최대 5개로 고정
|
||||
const maxThumbs = 3;
|
||||
const showThumbs = Math.min(totalCount, maxThumbs);
|
||||
let currentActiveIndex = 0; // 현재 활성 인덱스 추적
|
||||
|
||||
// 썸네일 버튼 생성 (활성 상태 포함)
|
||||
function createThumbnails(startIndex = 0) {
|
||||
let thumbsHTML = '';
|
||||
for (let i = 0; i < showThumbs; i++) {
|
||||
const dataIndex = (startIndex + i) % totalCount;
|
||||
const mediaUrl = data.rows[dataIndex].media_url;
|
||||
const thumbnailUrl = data.rows[dataIndex].thumbnail_url || mediaUrl;
|
||||
const isActive = dataIndex === currentActiveIndex ? 'active' : '';
|
||||
thumbsHTML += `<div class="custom-swiper-thumb ${isActive}" data-index="${dataIndex}">
|
||||
<img src="${thumbnailUrl}" alt="thumb${dataIndex+1}" />
|
||||
</div>`;
|
||||
}
|
||||
document.querySelector('.custom-swiper-thumbs').innerHTML = thumbsHTML;
|
||||
}
|
||||
|
||||
// 초기 썸네일 생성
|
||||
createThumbnails(0);
|
||||
|
||||
// Swiper 인스턴스
|
||||
setTimeout(function() {
|
||||
const instagramSwiper = new Swiper('.instagram_swiper', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
breakpoints: {
|
||||
768: {
|
||||
slidesPerView: 3.2,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
0: {
|
||||
slidesPerView: 2.1,
|
||||
spaceBetween: 5,
|
||||
},
|
||||
},
|
||||
on: {
|
||||
slideChange: function() {
|
||||
const newIndex = this.realIndex % totalCount;
|
||||
currentActiveIndex = newIndex; // 활성 인덱스 업데이트
|
||||
|
||||
// 콘텐츠가 5개보다 많은 경우 썸네일 순환 업데이트
|
||||
if (totalCount > maxThumbs) {
|
||||
// 현재 활성 썸네일이 보이는지 확인
|
||||
const visibleThumbs = Array.from(document.querySelectorAll('.custom-swiper-thumb'));
|
||||
const isActiveVisible = visibleThumbs.some(thumb =>
|
||||
parseInt(thumb.dataset.index) === currentActiveIndex
|
||||
);
|
||||
|
||||
// 활성 썸네일이 보이지 않으면 썸네일 업데이트
|
||||
if (!isActiveVisible) {
|
||||
updateThumbnailsForIndex(currentActiveIndex);
|
||||
} else {
|
||||
// 보이면 활성 상태만 업데이트
|
||||
updateCustomThumbActive(currentActiveIndex);
|
||||
}
|
||||
} else {
|
||||
updateCustomThumbActive(currentActiveIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 좌우 버튼 이벤트
|
||||
document.querySelector('.custom-swiper-btn.prev').onclick = function() {
|
||||
instagramSwiper.slidePrev();
|
||||
};
|
||||
document.querySelector('.custom-swiper-btn.next').onclick = function() {
|
||||
instagramSwiper.slideNext();
|
||||
};
|
||||
|
||||
// 썸네일 클릭 이벤트
|
||||
document.querySelector('.custom-swiper-thumbs').onclick = function(e) {
|
||||
const thumb = e.target.closest('.custom-swiper-thumb');
|
||||
if (thumb) {
|
||||
const targetIndex = parseInt(thumb.dataset.index);
|
||||
instagramSwiper.slideToLoop(targetIndex);
|
||||
}
|
||||
};
|
||||
|
||||
// 현재 슬라이드에 맞춰 썸네일 업데이트
|
||||
function updateThumbnailsForIndex(activeIndex) {
|
||||
if (totalCount <= maxThumbs) return;
|
||||
|
||||
// 현재 활성 인덱스를 중심으로 썸네일 배치
|
||||
let startIndex = activeIndex - Math.floor(maxThumbs / 2);
|
||||
if (startIndex < 0) startIndex = totalCount + startIndex;
|
||||
|
||||
createThumbnails(startIndex);
|
||||
}
|
||||
|
||||
// 활성 썸네일 표시
|
||||
function updateCustomThumbActive(activeIdx) {
|
||||
document.querySelectorAll('.custom-swiper-thumb').forEach(function(thumb) {
|
||||
const thumbIndex = parseInt(thumb.dataset.index);
|
||||
thumb.classList.toggle('active', thumbIndex === activeIdx);
|
||||
});
|
||||
}
|
||||
|
||||
// 초기 활성 상태 설정
|
||||
updateCustomThumbActive(0);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// 초기화 실행
|
||||
fn_init();
|
||||
|
||||
// 기존 팝업 닫기 버튼 이벤트 (마스킹 기능 추가)
|
||||
document.getElementById('btnPopupClose').addEventListener('click',function (){
|
||||
$('.popup').removeClass('open');
|
||||
// *** 배경 마스킹 제거 추가 ***
|
||||
hideBackgroundMask();
|
||||
});
|
||||
|
||||
// 추가 이벤트 리스너들 (새로 추가)
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// ESC 키로 팝업 닫기
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && document.querySelector('.popup.open')) {
|
||||
$('.popup').removeClass('open');
|
||||
hideBackgroundMask();
|
||||
}
|
||||
});
|
||||
|
||||
// 마스크 영역 클릭 시 팝업 닫기 (선택사항)
|
||||
const mask = document.querySelector('.popup-background-mask');
|
||||
if (mask) {
|
||||
mask.addEventListener('click', function() {
|
||||
$('.popup').removeClass('open');
|
||||
hideBackgroundMask();
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,35 @@
|
||||
/**************************************************************************
|
||||
* 카카오맵 API
|
||||
***************************************************************************/
|
||||
var mapContainer = document.getElementById('daumMap1'), // 지도를 표시할 div
|
||||
mapOption = {
|
||||
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
|
||||
level: 3 // 지도의 확대 레벨
|
||||
};
|
||||
|
||||
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
|
||||
var map = new kakao.maps.Map(mapContainer, mapOption);
|
||||
|
||||
// 주소-좌표 변환 객체를 생성합니다
|
||||
var geocoder = new kakao.maps.services.Geocoder();
|
||||
|
||||
// 주소로 좌표를 검색합니다
|
||||
geocoder.addressSearch('서울특별시 강남구 강남대로 516', function(result, status) {
|
||||
|
||||
// 정상적으로 검색이 완료됐으면
|
||||
if (status === kakao.maps.services.Status.OK) {
|
||||
|
||||
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
|
||||
|
||||
// 결과값으로 받은 위치를 마커로 표시합니다
|
||||
var marker = new kakao.maps.Marker({
|
||||
map: map,
|
||||
position: coords
|
||||
});
|
||||
|
||||
marker.setMap(map);
|
||||
|
||||
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
|
||||
map.setCenter(coords);
|
||||
}
|
||||
});
|
||||
124
src/main/resources/static/js/web/layout/layoutHeader.js
Normal file
124
src/main/resources/static/js/web/layout/layoutHeader.js
Normal file
@@ -0,0 +1,124 @@
|
||||
/************************************************
|
||||
* pc header 메뉴
|
||||
************************************************/
|
||||
|
||||
const depthBox = document.querySelectorAll('.depth1 > li');
|
||||
|
||||
function toggleMenuEvents() {
|
||||
if (window.innerWidth > 768) {
|
||||
depthBox.forEach((box) => {
|
||||
const mainMenu = box.querySelector('.mmenu');
|
||||
const subDepthBox = box.querySelector('.depth2');
|
||||
|
||||
if (mainMenu && subDepthBox) {
|
||||
///////////// Depth1 마우스 이벤트 /////////////
|
||||
mainMenu.addEventListener('mouseenter', function () {
|
||||
mainMenu.classList.add('active');
|
||||
subDepthBox.classList.add('active');
|
||||
});
|
||||
|
||||
mainMenu.addEventListener('mouseleave', function () {
|
||||
mainMenu.classList.remove('active');
|
||||
subDepthBox.classList.remove('active');
|
||||
});
|
||||
|
||||
///////////// Depth2 마우스 이벤트 /////////////
|
||||
subDepthBox.addEventListener('mouseenter', function () {
|
||||
mainMenu.classList.add('active');
|
||||
subDepthBox.classList.add('active');
|
||||
});
|
||||
|
||||
subDepthBox.addEventListener('mouseleave', function () {
|
||||
mainMenu.classList.remove('active');
|
||||
subDepthBox.classList.remove('active');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
toggleMenuEvents();
|
||||
window.addEventListener('resize', toggleMenuEvents);
|
||||
|
||||
/************************************************
|
||||
* 모바일 header 메뉴
|
||||
************************************************/
|
||||
|
||||
///////// Depth1 열기 /////////
|
||||
function openNav(){
|
||||
if (window.innerWidth <= 768) {
|
||||
$('.mbmenu').toggleClass('active');
|
||||
$('nav').toggleClass('active');
|
||||
}
|
||||
}
|
||||
|
||||
///////// 모바일에서 화살표 영역 클릭으로 Depth2 열기 /////////
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
depthBox.forEach((box) => {
|
||||
const mmenuBtn = box.querySelector('.mmenu');
|
||||
const subDepthBox = box.querySelector('.depth2');
|
||||
|
||||
if (mmenuBtn && subDepthBox) {
|
||||
mmenuBtn.addEventListener('click', function(e) {
|
||||
if (window.innerWidth <= 768) {
|
||||
// 화살표 부분 클릭 확인 (우측 60px 영역)
|
||||
const rect = mmenuBtn.getBoundingClientRect();
|
||||
const clickX = e.clientX;
|
||||
const rightEdge = rect.right;
|
||||
|
||||
// 우측 60px 영역을 클릭한 경우만 2depth 토글
|
||||
if (clickX > (rightEdge - 60)) {
|
||||
e.preventDefault(); // 링크 이동 방지
|
||||
|
||||
// 다른 메뉴들은 닫기
|
||||
depthBox.forEach((otherBox) => {
|
||||
const otherDepth2Box = otherBox.querySelector('.depth2');
|
||||
const otherMmenuBtn = otherBox.querySelector('.mmenu');
|
||||
if (otherDepth2Box !== subDepthBox) {
|
||||
otherDepth2Box.classList.remove('active');
|
||||
otherMmenuBtn.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
subDepthBox.classList.toggle('active');
|
||||
mmenuBtn.classList.toggle('active');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const depthBox = document.querySelectorAll('.depth1 > li');
|
||||
const currentURL = window.location.pathname;
|
||||
|
||||
// 모든 기존 open 클래스 제거
|
||||
document.querySelectorAll('.open').forEach(el => el.classList.remove('open'));
|
||||
|
||||
depthBox.forEach((box) => {
|
||||
const mmenu = box.querySelector('.mmenu');
|
||||
const depth2Links = box.querySelectorAll('.depth2 a');
|
||||
|
||||
depth2Links.forEach((link) => {
|
||||
const linkHref = link.getAttribute('href');
|
||||
|
||||
// JavaScript 함수 호출이 아닌 실제 URL인 경우만 처리
|
||||
if (linkHref && !linkHref.startsWith('javascript:')) {
|
||||
// 정확한 경로 매칭 (완전 일치)
|
||||
if (currentURL === linkHref ||
|
||||
(linkHref !== '/' && currentURL.startsWith(linkHref + '/'))) {
|
||||
|
||||
// 기존의 모든 open 클래스 제거 (한 번만 활성화)
|
||||
document.querySelectorAll('.open').forEach(el => el.classList.remove('open'));
|
||||
|
||||
// 현재 클릭된 메뉴만 활성화
|
||||
link.classList.add('open');
|
||||
box.classList.add('open');
|
||||
if (mmenu) mmenu.classList.add('open');
|
||||
return; // 찾았으므로 더 이상 반복하지 않음
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
446
src/main/resources/static/js/web/service/makeReservation.js
Normal file
446
src/main/resources/static/js/web/service/makeReservation.js
Normal file
@@ -0,0 +1,446 @@
|
||||
/************************************************
|
||||
* 초기화
|
||||
************************************************/
|
||||
function fn_init() {
|
||||
fn_SelectReservation(category_div_cd, category_no, post_no, procedure_id);
|
||||
}
|
||||
|
||||
var dietflag = false;
|
||||
|
||||
var res_date = '';
|
||||
var res_time = '';
|
||||
|
||||
/* https://nhn.github.io/tui.date-picker/latest/DatePicker#event-change tui API 참조 */
|
||||
|
||||
const diettimes_mon_fri = [
|
||||
"09:00","09:30",
|
||||
"10:00","10:30",
|
||||
"11:00","11:30",
|
||||
"12:00","12:30",
|
||||
"14:00","14:30",
|
||||
"15:00","15:30",
|
||||
"16:00","16:30",
|
||||
"17:00","17:30",
|
||||
];
|
||||
|
||||
const diettimes_tue_ths = [
|
||||
"09:00","09:30",
|
||||
"10:00","10:30",
|
||||
"11:00","11:30",
|
||||
"12:00","12:30",
|
||||
"14:00","14:30",
|
||||
"15:00","15:30",
|
||||
"16:00","16:30",
|
||||
"17:00","17:30",
|
||||
"18:00","18:30",
|
||||
];
|
||||
|
||||
const diettimes_wes_sat = [
|
||||
"09:00","09:30",
|
||||
"10:00","10:30",
|
||||
"11:00","11:30",
|
||||
"12:00","12:30",
|
||||
"13:00","13:30",
|
||||
"14:00","14:30",
|
||||
];
|
||||
|
||||
const etc_mon_wes_fri = [
|
||||
"10:00","10:30",
|
||||
"11:00","11:30",
|
||||
"12:00","12:30",
|
||||
"13:00","13:30",
|
||||
"15:00","15:30",
|
||||
"16:00","16:30",
|
||||
"17:00","17:30",
|
||||
"18:00","18:30",
|
||||
];
|
||||
|
||||
const etc_tue_ths = [
|
||||
"10:00","10:30",
|
||||
"11:00","11:30",
|
||||
"12:00","12:30",
|
||||
"13:00","13:30",
|
||||
"15:00","15:30",
|
||||
"16:00","16:30",
|
||||
"17:00","17:30",
|
||||
"18:00","18:30",
|
||||
"19:00","19:30",
|
||||
];
|
||||
|
||||
const etc_sat = [
|
||||
"10:00","10:30",
|
||||
"11:00","11:30",
|
||||
"12:00","12:30",
|
||||
"13:00","13:30",
|
||||
"15:00","15:30",
|
||||
];
|
||||
|
||||
const monthMap = {
|
||||
Jan: '01', Feb: '02', Mar: '03', Apr: '04',
|
||||
May: '05', Jun: '06', Jul: '07', Aug: '08',
|
||||
Sep: '09', Oct: '10', Nov: '11', Dec: '12'
|
||||
};
|
||||
|
||||
// 현재 년월일에서 일을 +- 일 한 결과 리턴.
|
||||
Date.prototype.addDays = function (days) {
|
||||
var date = this;
|
||||
return new Date(date.setDate(date.getDate() + days));
|
||||
};
|
||||
|
||||
// 현재 년월일에서 월을 +- 월 한 결과 리턴.
|
||||
Date.prototype.addMonth = function (month) {
|
||||
var date = this;
|
||||
return new Date(date.setMonth(date.getMonth() + month));
|
||||
};
|
||||
|
||||
// 현재 년월일에서 년을 +- 월 한 결과 리턴.
|
||||
Date.prototype.addYear = function (year) {
|
||||
var date = this;
|
||||
return new Date(date.setFullYear(date.getFullYear() + year));
|
||||
};
|
||||
|
||||
/****************************************************************************
|
||||
* 카테고리 목록 가져오기
|
||||
****************************************************************************/
|
||||
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'){
|
||||
let totalCount = data.reservation.length;
|
||||
let totalprice = 0;
|
||||
if (0 < totalCount) {
|
||||
for (let i = 0; i < data.reservation.length; i++) {
|
||||
let listHTML = '';
|
||||
if(data.reservation[i].TREATMENT_PROCEDURE_NAME.toString().indexOf('다이어트') != -1){
|
||||
dietflag = true;
|
||||
}
|
||||
listHTML += '<li class="s_item selt_info_wrap" id="liid' + i + '">';
|
||||
listHTML += '<input type="hidden" id="procedure_id' + i + '" name="procedure_id" value="'+ data.reservation[i].MU_TREATMENT_PROCEDURE_ID + '">';
|
||||
listHTML += '<input type="hidden" id="treatment_id' + i + '" name="treatment_id" value="'+ data.reservation[i].MU_TREATMENT_ID + '">';
|
||||
listHTML += '<input type="hidden" id="treatment_nm' + i + '" name="treatment_nm" value="'+ data.reservation[i].TREATMENT_NAME + '">';
|
||||
listHTML += '<input type="hidden" id="procedure_nm' + i + '" name="procedure_nm" value="'+ data.reservation[i].TREATMENT_PROCEDURE_NAME + '">';
|
||||
listHTML += ' <div class="selt item_subprice">';
|
||||
listHTML += ' <span>' + data.reservation[i].TREATMENT_PROCEDURE_NAME + '</span>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' <div class="info">';
|
||||
listHTML += ' <div>';
|
||||
listHTML += ' <del class="original_price d-block">';
|
||||
listHTML += ' <b>';
|
||||
if(data.reservation[i].DISCOUNT_PRICE == null || data.reservation[i].DISCOUNT_PRICE == undefined){
|
||||
if(data.reservation[i].PRICE == null || data.reservation[i].PRICE == undefined){
|
||||
listHTML += '0';
|
||||
}else{
|
||||
listHTML += (data.reservation[i].PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
}else{
|
||||
listHTML += (data.reservation[i].DISCOUNT_PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
listHTML += '</b>원';
|
||||
listHTML += ' </del>';
|
||||
listHTML += ' <span class="discount_price">';
|
||||
if(data.reservation[i].DISCOUNT_PRICE == null || data.reservation[i].DISCOUNT_PRICE == undefined){
|
||||
if(data.reservation[i].PRICE == null || data.reservation[i].PRICE == undefined){
|
||||
listHTML += '0';
|
||||
}else{
|
||||
listHTML += (data.reservation[i].PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
totalprice += Number(data.reservation[i].PRICE);
|
||||
}
|
||||
}else{
|
||||
listHTML += (data.reservation[i].DISCOUNT_PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
totalprice += Number(data.reservation[i].DISCOUNT_PRICE);
|
||||
}
|
||||
listHTML += '</span>원';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' <button type="button" class="bn" onclick="fn_deleteList(' + i + ');">';
|
||||
listHTML += ' <img src="/image/close-btn.png" alt="삭제" width="13px" height="13px">';
|
||||
listHTML += ' </button>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += '</li>';
|
||||
$(".service-list-wrap").append(listHTML);
|
||||
}
|
||||
}else{
|
||||
|
||||
}
|
||||
$('#total_price').text(totalprice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
||||
}else{
|
||||
modalEvent.danger("조회 오류", data.msgDesc);
|
||||
}
|
||||
/* 날짜 초기화 : 일요일이면 월요일이 선택하도록 설정. */
|
||||
var date = new Date();
|
||||
if(String(new Date()).split(" ")[0] == "Sun"){
|
||||
date = new Date().addDays(1);
|
||||
}
|
||||
datepicker.setDate(date);
|
||||
},
|
||||
error : function(xhr, status, error) {
|
||||
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
|
||||
},
|
||||
beforeSend:function(){
|
||||
// 로딩열기
|
||||
$(".loading-image-layer").show();
|
||||
},
|
||||
complete:function(){
|
||||
// 로딩닫기
|
||||
$(".loading-image-layer").hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function fn_deleteList(num){
|
||||
if(!confirm("삭제하시겠습니까?")){
|
||||
return;
|
||||
}
|
||||
var price = $("#total_price").text().replace(/,/g, "");
|
||||
var discount_price = $("#liid" + num + " > div.info > div > span").text().replace(/,/g, "");
|
||||
price = Number(price) - Number(discount_price);
|
||||
$("#total_price").text(price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
||||
$("#liid" + num).remove();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
var datepicker = new tui.DatePicker('#wrapper', {
|
||||
date: new Date(),
|
||||
language: 'ko',
|
||||
input: {
|
||||
element: '#datepicker-input',
|
||||
format: 'yyyy-MM-dd'
|
||||
},
|
||||
showAlways: true,
|
||||
selectableRanges: [
|
||||
[new Date(), new Date(2099, 11, 31)]
|
||||
]
|
||||
});
|
||||
|
||||
datepicker.on('change', () => {
|
||||
// 선택된 날짜 가져오기
|
||||
const selectedDate = datepicker.getDate();
|
||||
|
||||
//object to string
|
||||
const strSelectedDate = String(selectedDate);
|
||||
//string to array
|
||||
const arrSelectedDate = strSelectedDate.split(" ");
|
||||
//yyyymmdd 형태로 변경
|
||||
const selDate = arrSelectedDate[3] + monthNameToNumber(arrSelectedDate[1]) + arrSelectedDate[2];
|
||||
//setNull시 change발생하여 날짜선택시
|
||||
if(selectedDate){
|
||||
console.log(selDate);
|
||||
res_date = '';
|
||||
res_time = '';
|
||||
$('.time-btn').removeClass('active');
|
||||
$('.person-cnt_span').html('-<b> 명</b>');
|
||||
const grid = document.getElementById('timeGrid');
|
||||
var times = diettimes_tue_ths;
|
||||
if(dietflag){
|
||||
if(arrSelectedDate[0] == "Mon" || arrSelectedDate[0] == "Fri"){
|
||||
times = diettimes_mon_fri;
|
||||
$('.section_div').removeClass("height850");
|
||||
}else if(arrSelectedDate[0] == "Tue" || arrSelectedDate[0] == "Thu"){
|
||||
times = diettimes_tue_ths;
|
||||
$('.section_div').addClass("height850");
|
||||
}else if(arrSelectedDate[0] == "Wed" || arrSelectedDate[0] == "Sat"){
|
||||
times = diettimes_wes_sat;
|
||||
$('.section_div').removeClass("height850");
|
||||
}
|
||||
}else{
|
||||
if(arrSelectedDate[0] == "Mon" || arrSelectedDate[0] == "Wed" || arrSelectedDate[0] == "Fri"){
|
||||
times = etc_mon_wes_fri;
|
||||
$('.section_div').removeClass("height850");
|
||||
}else if(arrSelectedDate[0] == "Tue" || arrSelectedDate[0] == "Thu"){
|
||||
times = etc_tue_ths;
|
||||
$('.section_div').addClass("height850");
|
||||
}else if(arrSelectedDate[0] == "Sat"){
|
||||
times = etc_sat;
|
||||
$('.section_div').removeClass("height850");
|
||||
}
|
||||
}
|
||||
grid.innerHTML = times.map(t =>
|
||||
`<button class="time-btn" onclick="onClickTime(`+selDate+`, '${t}', this)">${t}</button>`
|
||||
).join('');
|
||||
}
|
||||
|
||||
//일요일이면 선택불가
|
||||
if( arrSelectedDate[0] == "Sun" ){
|
||||
datepicker.setNull();
|
||||
alert("일요일은 선택할 수 없습니다.");
|
||||
}
|
||||
});
|
||||
|
||||
function monthNameToNumber(mon) {
|
||||
return monthMap[mon] || '';
|
||||
}
|
||||
|
||||
function onClickTime(selectedDate, time, el) {
|
||||
document.querySelectorAll('.time-btn').forEach(btn => btn.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append('SELECTED_DATE', selectedDate.toString().substr(0, 4) + '-' + selectedDate.toString().substr(4, 2) + '-' + selectedDate.toString().substr(6, 2));
|
||||
formData.append('TIME', time);
|
||||
res_date = selectedDate.toString().substr(0, 4) + '-' + selectedDate.toString().substr(4, 2) + '-' + selectedDate.toString().substr(6, 2);
|
||||
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'){
|
||||
let listHTML2 = '';
|
||||
listHTML2 += data.rows.RES_CNT
|
||||
listHTML2 += '<b> 명</b>';
|
||||
$('.person-cnt_span').html(listHTML2);
|
||||
}else{
|
||||
modalEvent.danger("조회 오류", data.msgDesc);
|
||||
}
|
||||
|
||||
},
|
||||
error : function(xhr, status, error) {
|
||||
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
|
||||
},
|
||||
beforeSend:function(){
|
||||
// 로딩열기
|
||||
$(".loading-image-layer").show();
|
||||
},
|
||||
complete:function(){
|
||||
// 로딩닫기
|
||||
$(".loading-image-layer").hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* validation check
|
||||
****************************************************************************/
|
||||
function fn_validation(){
|
||||
if(res_date == ''){
|
||||
alert('예약일자가 입력되지 않았습니다. 예약일자와 시간을 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
if(res_time == ''){
|
||||
alert('예약시간이 입력되지 않았습니다. 예약시간을 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
if($('#reservationName').val() == ''){
|
||||
alert('이름이 입력되지 않았습니다. 이름을 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
if($('#phoneNumber').val() == ''){
|
||||
alert('휴대전화번호가 입력되지 않았습니다. 휴대전화번호를 입력해주세요.');
|
||||
return;
|
||||
}
|
||||
if($('input[name=procedure_id]').length == 0){
|
||||
alert('시술정보가 없습니다. 시술이 입력되었는지 확인해주세요.');
|
||||
return;
|
||||
}
|
||||
if(!$('#agree1').is(':checked')){
|
||||
alert('필수동의가 체크되어 있지 않습니다. 필수동의에 체크해주세요.');
|
||||
return;
|
||||
}
|
||||
|
||||
fn_reservation();
|
||||
}
|
||||
|
||||
function fn_reservation(){
|
||||
let formData = new FormData();
|
||||
formData.append('SELECTED_DATE', res_date);
|
||||
formData.append('TIME', res_time);
|
||||
formData.append('CATEGORY_DIV_CD', category_div_cd);
|
||||
formData.append('CATEGORY_NO', category_no);
|
||||
formData.append('POST_NO', post_no);
|
||||
formData.append('NAME', $('#reservationName').val());
|
||||
formData.append('PHONE_NUMBER', $('#phoneNumber').val());
|
||||
formData.append('ETC', $('#reservationMemo').val());
|
||||
var size = $('input[name=procedure_id]').length;
|
||||
var procedure_id = '';
|
||||
var procedure_nm = '';
|
||||
var treatment_id = '';
|
||||
var treatment_nm = '';
|
||||
for(i=0; i<size; i++){
|
||||
procedure_id += $("input[name='procedure_id']").eq(i).attr("value") + '#';
|
||||
}
|
||||
size = $('input[name=procedure_nm]').length;
|
||||
for(i=0; i<size; i++){
|
||||
procedure_nm += $("input[name='procedure_nm']").eq(i).attr("value") + '#';
|
||||
}
|
||||
size = $('input[name=treatment_id]').length;
|
||||
for(i=0; i<size; i++){
|
||||
treatment_id += $("input[name='treatment_id']").eq(i).attr("value") + '#';
|
||||
}
|
||||
size = $('input[name=treatment_nm]').length;
|
||||
for(i=0; i<size; i++){
|
||||
treatment_nm += $("input[name='treatment_nm']").eq(i).attr("value") + '#';
|
||||
}
|
||||
formData.append('PROCEDURE_ID', procedure_id);
|
||||
formData.append('PROCEDURE_NM', procedure_nm);
|
||||
formData.append('TREATMENT_ID', treatment_id);
|
||||
formData.append('TREATMENT_NM', treatment_nm);
|
||||
|
||||
$.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="/webservice/selectServiceIntro.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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/* 버튼 클릭했는지 안했는지 확인 class active */
|
||||
var $selectProcedureDiv = $('.select_procedure_div');
|
||||
$selectProcedureDiv.click(function(e){
|
||||
e.stopPropagation();
|
||||
$selectProcedureDiv.not(this).removeClass('active'); /*remove buttonactive from the others*/
|
||||
$(this).toggleClass('active'); /*toggle current clicked element*/
|
||||
});
|
||||
|
||||
$(window).on("click", function(){
|
||||
$selectProcedureDiv.removeClass('active');
|
||||
})
|
||||
|
||||
|
||||
//초기화
|
||||
fn_init();
|
||||
277
src/main/resources/static/js/web/service/serviceInfo.js
Normal file
277
src/main/resources/static/js/web/service/serviceInfo.js
Normal file
@@ -0,0 +1,277 @@
|
||||
/************************************************
|
||||
* 전역 변수
|
||||
************************************************/
|
||||
let currentCategoryDivCd = '';
|
||||
let currentCategoryNo = '';
|
||||
let categoriesData = [];
|
||||
let servicesData = [];
|
||||
|
||||
/************************************************
|
||||
* 초기화
|
||||
************************************************/
|
||||
function fn_init() {
|
||||
// 페이지 파라미터 확인
|
||||
if (window.pageParams) {
|
||||
currentCategoryDivCd = window.pageParams.categoryDivCd;
|
||||
currentCategoryNo = window.pageParams.categoryNo;
|
||||
}
|
||||
|
||||
console.log('초기화 - categoryDivCd:', currentCategoryDivCd, 'categoryNo:', currentCategoryNo);
|
||||
|
||||
// 카테고리 목록 로드
|
||||
fn_SelectListCategory();
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 카테고리 목록 가져오기 (수정됨)
|
||||
****************************************************************************/
|
||||
function fn_SelectListCategory() {
|
||||
let formData = new FormData();
|
||||
formData.append('categoryDivCd', currentCategoryDivCd || 'SERVICE');
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webservice/selectListCategory.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: false,
|
||||
success: function(data) {
|
||||
console.log(data);
|
||||
if (data.msgCode == '0') {
|
||||
let totalCount = data.rows ? data.rows.length : 0;
|
||||
|
||||
if (totalCount > 0) {
|
||||
categoriesData = data.rows;
|
||||
fn_RenderCategorySidebar(data.rows);
|
||||
|
||||
// 파라미터로 받은 categoryNo가 있으면 해당 카테고리 활성화
|
||||
// 없으면 첫 번째 카테고리를 기본 활성화
|
||||
let targetCategoryNo = currentCategoryNo || data.rows[0].CATEGORY_NO;
|
||||
fn_SetActiveCategory(targetCategoryNo);
|
||||
fn_SelectServiceList(targetCategoryNo);
|
||||
} else {
|
||||
fn_ShowErrorMessage('등록된 카테고리가 없습니다.');
|
||||
}
|
||||
} else {
|
||||
fn_ShowErrorMessage("카테고리 조회 오류: " + data.msgDesc);
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('카테고리 조회 실패:', error);
|
||||
fn_ShowErrorMessage("카테고리 조회 중 오류가 발생하였습니다.");
|
||||
},
|
||||
beforeSend: function() {
|
||||
// 로딩 표시는 이미 HTML에 있으므로 생략
|
||||
},
|
||||
complete: function() {
|
||||
// 로딩 숨기기는 성공/실패 콜백에서 처리
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 카테고리 사이드바 렌더링 (새로 추가)
|
||||
****************************************************************************/
|
||||
function fn_RenderCategorySidebar(categories) {
|
||||
const categoryList = document.getElementById('category-list');
|
||||
let categoryHtml = '';
|
||||
|
||||
categories.forEach(function(category) {
|
||||
categoryHtml += `
|
||||
<li class="category-item">
|
||||
<a href="javascript:void(0)"
|
||||
class="category-link"
|
||||
data-category-no="${category.CATEGORY_NO}"
|
||||
data-category-div-cd="${category.CATEGORY_DIV_CD}"
|
||||
onclick="fn_OnCategoryClick('${category.CATEGORY_NO}', '${category.CATEGORY_DIV_CD}')">
|
||||
${category.CATEGORY_NM}
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
});
|
||||
|
||||
categoryList.innerHTML = categoryHtml;
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 카테고리 클릭 이벤트 처리 (새로 추가)
|
||||
****************************************************************************/
|
||||
function fn_OnCategoryClick(categoryNo, categoryDivCd) {
|
||||
console.log('카테고리 선택:', categoryNo, categoryDivCd);
|
||||
|
||||
// 현재 선택된 카테고리 업데이트
|
||||
currentCategoryNo = categoryNo;
|
||||
currentCategoryDivCd = categoryDivCd;
|
||||
|
||||
// 활성 상태 변경
|
||||
fn_SetActiveCategory(categoryNo);
|
||||
|
||||
// 서비스 목록 로드
|
||||
fn_SelectServiceList(categoryNo);
|
||||
|
||||
// 스크롤을 맨 위로 이동
|
||||
const servicesList = document.querySelector('.services-list');
|
||||
if (servicesList) {
|
||||
servicesList.scrollTop = 0;
|
||||
}
|
||||
|
||||
// URL 파라미터 업데이트
|
||||
fn_UpdateUrlParameters(categoryDivCd, categoryNo);
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 활성 카테고리 설정 (새로 추가)
|
||||
****************************************************************************/
|
||||
function fn_SetActiveCategory(categoryNo) {
|
||||
// 모든 카테고리 링크에서 active 클래스 제거
|
||||
document.querySelectorAll('.category-link').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
|
||||
// 선택된 카테고리에 active 클래스 추가
|
||||
const activeLink = document.querySelector(`[data-category-no="${categoryNo}"]`);
|
||||
if (activeLink) {
|
||||
activeLink.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 서비스 목록 가져오기 (수정됨)
|
||||
****************************************************************************/
|
||||
function fn_SelectServiceList(categoryNo) {
|
||||
const servicesGrid = document.getElementById('services-grid');
|
||||
servicesGrid.innerHTML = '<div class="loading">서비스 정보 로딩 중...</div>';
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append('categoryNo', categoryNo);
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webservice/selectListService.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: false,
|
||||
success: function(data) {
|
||||
console.log(data);
|
||||
if (data.msgCode == '0') {
|
||||
servicesData = data.rows || [];
|
||||
fn_RenderServices(servicesData);
|
||||
} else {
|
||||
fn_ShowErrorMessage("서비스 조회 오류: " + data.msgDesc);
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('실패 상세:', {
|
||||
status: xhr.status,
|
||||
statusText: xhr.statusText,
|
||||
responseText: xhr.responseText,
|
||||
error: error
|
||||
});
|
||||
fn_ShowErrorMessage("서비스 조회 중 오류가 발생하였습니다.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 서비스 목록 렌더링 (새로 추가)
|
||||
****************************************************************************/
|
||||
function fn_RenderServices(services) {
|
||||
const servicesGrid = document.getElementById('services-grid');
|
||||
|
||||
if (services.length === 0) {
|
||||
servicesGrid.innerHTML = '<div class="loading">등록된 서비스가 없습니다.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let servicesHtml = '';
|
||||
services.forEach(function(service) {
|
||||
|
||||
servicesHtml += `
|
||||
<div class="service-card" onclick="fn_GoToDetail('${service.CATEGORY_DIV_CD}', '${service.CATEGORY_NO}', '${service.POST_NO}')" style="cursor: pointer;">
|
||||
<div class="service-title">${service.SERVICE_NM || service.TITLE || '서비스명 없음'}</div>
|
||||
<div class="service-description">${service.SERVICE_DESC || service.CONTENT || '설명 없음'}</div>
|
||||
<div class="service-price"><span class="cancel-price">${fn_FormatPrice(service.PRICE)}</span> ${fn_FormatPrice(service.DISCOUNT_PRICE)}</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
servicesGrid.innerHTML = servicesHtml;
|
||||
}
|
||||
// 상세 페이지로 이동하는 함수
|
||||
function fn_GoToDetail(categoryDivCd, categoryNo, postNo) {
|
||||
const detailUrl = `/webservice/selectServiceDetailIntro.do?categoryDivCd=${categoryDivCd}&categoryNo=${categoryNo}&postNo=${postNo}`;
|
||||
window.location.href = detailUrl;
|
||||
}
|
||||
/****************************************************************************
|
||||
* 가격 포맷팅 (새로 추가)
|
||||
****************************************************************************/
|
||||
function fn_FormatPrice(price) {
|
||||
if (!price) return '가격 문의';
|
||||
|
||||
// 숫자인 경우 천단위 구분자 추가
|
||||
if (typeof price === 'number') {
|
||||
return price.toLocaleString('ko-KR') + '원';
|
||||
}
|
||||
|
||||
// 문자열인 경우 숫자로 변환 시도
|
||||
const numPrice = parseInt(price.toString().replace(/[^0-9]/g, ''));
|
||||
if (!isNaN(numPrice) && numPrice > 0) {
|
||||
return numPrice.toLocaleString('ko-KR') + '원';
|
||||
}
|
||||
|
||||
return price.toString();
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* URL 파라미터 업데이트 (새로 추가)
|
||||
****************************************************************************/
|
||||
function fn_UpdateUrlParameters(categoryDivCd, categoryNo) {
|
||||
try {
|
||||
const url = new URL(window.location);
|
||||
//url.searchParams.set('categoryDivCd', categoryDivCd);
|
||||
url.searchParams.set('categoryNo', categoryNo);
|
||||
|
||||
// pushState로 URL 변경 (페이지 새로고침 없이)
|
||||
window.history.pushState({categoryNo}, '', url);
|
||||
} catch (error) {
|
||||
console.warn('URL 업데이트 실패:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 에러 메시지 표시 (새로 추가)
|
||||
****************************************************************************/
|
||||
function fn_ShowErrorMessage(message) {
|
||||
const categoryList = document.getElementById('category-list');
|
||||
const servicesGrid = document.getElementById('services-grid');
|
||||
|
||||
if (categoryList) {
|
||||
categoryList.innerHTML = `<li class="category-item"><div class="error-message">${message}</div></li>`;
|
||||
}
|
||||
if (servicesGrid) {
|
||||
servicesGrid.innerHTML = `<div class="error-message">${message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 이벤트 리스너 등록
|
||||
****************************************************************************/
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('DOM 로드 완료 - 초기화 시작');
|
||||
fn_init();
|
||||
});
|
||||
|
||||
// 브라우저 뒤로가기/앞으로가기 처리
|
||||
window.addEventListener('popstate', function(event) {
|
||||
if (event.state && event.state.categoryDivCd && event.state.categoryNo) {
|
||||
currentCategoryDivCd = event.state.categoryDivCd;
|
||||
currentCategoryNo = event.state.categoryNo;
|
||||
|
||||
fn_SetActiveCategory(currentCategoryNo);
|
||||
fn_SelectServiceList(currentCategoryNo);
|
||||
}
|
||||
});
|
||||
171
src/main/resources/static/js/web/service/webService.js
Normal file
171
src/main/resources/static/js/web/service/webService.js
Normal file
@@ -0,0 +1,171 @@
|
||||
/************************************************
|
||||
* 초기화
|
||||
************************************************/
|
||||
function fn_init() {
|
||||
fn_SelectListCategory();
|
||||
}
|
||||
|
||||
|
||||
/****************************************************************************
|
||||
* 카테고리 목록 가져오기
|
||||
****************************************************************************/
|
||||
function fn_SelectListCategory(){
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append('bannerType', 'A');
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webservice/selectListCategory.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: true,
|
||||
success: function(data){
|
||||
if(data.msgCode=='0'){
|
||||
|
||||
let totalCount = data.rows.length;
|
||||
|
||||
if (0 < totalCount) {
|
||||
let listHTML = '<li class="first"><h3>Category</h3></li>';
|
||||
|
||||
for (let i = 0; i < data.rows.length; i++) {
|
||||
if(i == 0){
|
||||
listHTML += '<li class="active" id="category_'+data.rows[i].CATEGORY_NO+'">';
|
||||
listHTML += ' <a href="javascript:fn_SelectServiceList(' + data.rows[i].CATEGORY_NO + ');">' + data.rows[i].CATEGORY_NM + '</a>';
|
||||
listHTML += '</li>';
|
||||
}else{
|
||||
listHTML += '<li class="nonactive" id="category_'+data.rows[i].CATEGORY_NO+'">';
|
||||
listHTML += ' <a href="javascript:fn_SelectServiceList(' + data.rows[i].CATEGORY_NO + ');">' + data.rows[i].CATEGORY_NM + '</a>';
|
||||
listHTML += '</li>';
|
||||
}
|
||||
}
|
||||
$("#servicecategory").html(listHTML);
|
||||
fn_SelectServiceList(data.rows[0].CATEGORY_NO);
|
||||
}
|
||||
}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_SelectServiceList(category_no){
|
||||
$(".active").addClass("nonactive");
|
||||
$(".active").removeClass("active");
|
||||
|
||||
$("#category_"+category_no).removeClass("nonactive");
|
||||
$("#category_"+category_no).addClass("active");
|
||||
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append('category_no', category_no);
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webservice/selectListService.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: true,
|
||||
success: function(data){
|
||||
if(data.msgCode=='0'){
|
||||
|
||||
let totalCount = data.rows.length;
|
||||
let listHTML = '';
|
||||
if (0 < totalCount) {
|
||||
for (let i = 0; i < data.rows.length; i++) {
|
||||
listHTML += '<li class="col2">';
|
||||
listHTML += ' <a href="javascript:fn_moveDetail(' + data.rows[i].CATEGORY_DIV_CD +', ' + data.rows[i].CATEGORY_NO + ',' + data.rows[i].POST_NO + ');" class="card_otxt border bg-white h-100 __card_otxt">';
|
||||
listHTML += ' <b>' + data.rows[i].TITLE + '</b>';
|
||||
listHTML += ' <div class="fix_cont">';
|
||||
listHTML += ' <p class="max-line2 multy-ellip2">' + data.rows[i].CONTENT + '</p>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' <div class="ab_cont">';
|
||||
listHTML += ' <span>';
|
||||
listHTML += ' <strong class="txt_num">';
|
||||
if(data.rows[i].DISCOUNT_PRICE == null || data.rows[i].DISCOUNT_PRICE == undefined){
|
||||
if(data.rows[i].PRICE == null || data.rows[i].PRICE == undefined){
|
||||
listHTML += '0';
|
||||
}else{
|
||||
listHTML += (data.rows[i].PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
}else{
|
||||
listHTML += (data.rows[i].DISCOUNT_PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
listHTML += '</strong>원 부터 </span>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' </a>';
|
||||
listHTML += '</li>';
|
||||
}
|
||||
$("#detail_list").html(listHTML);
|
||||
|
||||
}else{
|
||||
listHTML += '<li class="mt70">';
|
||||
listHTML += '</li>';
|
||||
$("#detail_list").html(listHTML);
|
||||
}
|
||||
}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_moveDetail(category_div, category_no, post_no){
|
||||
let pageMoveForm = document.createElement('form');
|
||||
let obj = document.createElement('input');
|
||||
obj.setAttribute('type', 'hidden');
|
||||
obj.setAttribute('name', 'CATEGORY_DIV_CD');
|
||||
obj.setAttribute('value', "0"+category_div);
|
||||
pageMoveForm.appendChild(obj);
|
||||
|
||||
let obj2 = document.createElement('input');
|
||||
obj2.setAttribute('type', 'hidden');
|
||||
obj2.setAttribute('name', 'CATEGORY_NO');
|
||||
obj2.setAttribute('value', category_no);
|
||||
pageMoveForm.appendChild(obj2);
|
||||
|
||||
let obj3 = document.createElement('input');
|
||||
obj3.setAttribute('type', 'hidden');
|
||||
obj3.setAttribute('name', 'POST_NO');
|
||||
obj3.setAttribute('value', post_no);
|
||||
pageMoveForm.appendChild(obj3);
|
||||
|
||||
pageMoveForm.setAttribute('method', 'post');
|
||||
pageMoveForm.setAttribute('action', '/webservice/selectServiceDetailIntro.do');
|
||||
document.body.appendChild(pageMoveForm);
|
||||
pageMoveForm.submit();
|
||||
}
|
||||
|
||||
//초기화
|
||||
fn_init();
|
||||
236
src/main/resources/static/js/web/service/webServiceDetail.js
Normal file
236
src/main/resources/static/js/web/service/webServiceDetail.js
Normal file
@@ -0,0 +1,236 @@
|
||||
/************************************************
|
||||
* 초기화
|
||||
************************************************/
|
||||
function fn_init() {
|
||||
fn_SelectDetail(category_div_cd, category_no, post_no);
|
||||
|
||||
$("#btn_makeReservation").on("click", function(){
|
||||
fn_moveReservation(category_div_cd, category_no, post_no);
|
||||
});
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 카테고리 목록 가져오기
|
||||
****************************************************************************/
|
||||
function fn_SelectDetail(category_div_cd, category_no, post_no){
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append('CATEGORY_DIV_CD', category_div_cd);
|
||||
formData.append('CATEGORY_NO', category_no);
|
||||
formData.append('POST_NO', post_no);
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webservice/selectServiceDetail.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: true,
|
||||
success: function(data){
|
||||
if(data.msgCode=='0'){
|
||||
//화면 데이터 변경
|
||||
$('#category_nm').text(data.rows.CATEGORY_NM);
|
||||
$('#title').text(data.rows.TITLE);
|
||||
$('#serviceThumb').attr('src', data.rows.THUMBNAIL_PATH);
|
||||
$('#main_title').text(data.rows.TITLE);
|
||||
$('.thumbnail-bottom-txt').text(data.rows.THUMBNAIL_BOTTOM_TXT);
|
||||
$('#contents').text(data.rows.CONTENT);
|
||||
if(data.rows.PRICE == null || data.rows.PRICE == undefined){
|
||||
$('#startprice').text('0');
|
||||
}else{
|
||||
$('#startprice').text(data.rows.PRICE.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
||||
}
|
||||
$('#hashtag').text(data.rows.HASHTAG);
|
||||
$('#contents_path').text(data.rows.THUMBNAIL_BOTTOM_TXT);
|
||||
$('#contents_path').attr('src', data.rows.CONTENTS_PATH);
|
||||
//시술 목록 데이터 입력
|
||||
let totalCount = data.price.length;
|
||||
if (0 < totalCount) {
|
||||
for (let i = 0; i < data.price.length; i++) {
|
||||
let listHTML = '';
|
||||
listHTML += '<li class="optipon_item sepr_wrap">';
|
||||
listHTML += ' <div class="item_subprice">';
|
||||
listHTML += ' <div class="cs-checkbox">';
|
||||
listHTML += ' <input type="checkbox" class="idxChk" id="checkboxID' + i + '">';
|
||||
listHTML += ' <label class="cs-checkbox-label d-block" for="checkboxID' + i + '">';
|
||||
listHTML += ' <div class="oi-wrap">';
|
||||
listHTML += ' <div class="oi-txt">';
|
||||
listHTML += ' <span class="oi-tit-txt">' + data.price[i].TREATMENT_PROCEDURE_NAME;
|
||||
listHTML += ' </span>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' <div class="oi-price">';
|
||||
listHTML += ' <del class="original_price d-block">';
|
||||
listHTML += ' <b>';
|
||||
if(data.price[i].DISCOUNT_PRICE == null || data.price[i].DISCOUNT_PRICE == undefined){
|
||||
if(data.price[i].PRICE == null || data.price[i].PRICE == undefined){
|
||||
listHTML += '0';
|
||||
}else{
|
||||
listHTML += (data.price[i].PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
}else{
|
||||
listHTML += (data.price[i].DISCOUNT_PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
listHTML += '</b>원';
|
||||
listHTML += ' </del>';
|
||||
listHTML += ' <span class="discount_price">';
|
||||
if(data.price[i].DISCOUNT_PRICE == null || data.price[i].DISCOUNT_PRICE == undefined){
|
||||
if(data.price[i].PRICE == null || data.price[i].PRICE == undefined){
|
||||
listHTML += '0';
|
||||
}else{
|
||||
listHTML += (data.price[i].PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
}else{
|
||||
listHTML += (data.price[i].DISCOUNT_PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
listHTML += '</span>원';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' </label>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += '</li>';
|
||||
$(".option_list").append(listHTML);
|
||||
|
||||
$("#checkboxID" + i).change(function(){
|
||||
if($("#checkboxID" + i).is(":checked")){
|
||||
let listHTML2 = '';
|
||||
listHTML2 += '<li class="s_item selt_info_wrap" id="liid' + i + '">';
|
||||
listHTML2 += '<input type="hidden" id="procedure_id' + i + '" name="procedure_id" value="'+ data.price[i].MU_TREATMENT_PROCEDURE_ID + '">';
|
||||
listHTML2 += ' <div class="txt-wrap"> ';
|
||||
listHTML2 += ' <span class="selt">' + data.price[i].TREATMENT_PROCEDURE_NAME;
|
||||
listHTML2 += ' </div>';
|
||||
listHTML2 += ' <div class="info">';
|
||||
listHTML2 += ' <span><span class="real_price">';
|
||||
if(data.price[i].DISCOUNT_PRICE == null || data.price[i].DISCOUNT_PRICE == undefined){
|
||||
if(data.price[i].PRICE == null || data.price[i].PRICE == undefined){
|
||||
listHTML2 += '0';
|
||||
}else{
|
||||
listHTML2 += (data.price[i].PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
}else{
|
||||
listHTML2 += (data.price[i].DISCOUNT_PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
listHTML2 += '</span>원</span>';
|
||||
listHTML2 += ' <button type="button" onclick="fn_nocheck(' + i + ');"><img src="/image/close-btn.png" alt="삭제" width="13px" height="13px"></button>';
|
||||
listHTML2 += ' </div>';
|
||||
listHTML2 += '</li>';
|
||||
$("#selectEvent1").append(listHTML2);
|
||||
var price = $("#price_div1").text().replace(/,/g, "");
|
||||
var discount_price = '';
|
||||
if(data.price[i].DISCOUNT_PRICE == null || data.price[i].DISCOUNT_PRICE == undefined){
|
||||
if(data.price[i].PRICE == null || data.price[i].PRICE == undefined){
|
||||
discount_price = 0;
|
||||
}else{
|
||||
discount_price = data.price[i].PRICE;
|
||||
}
|
||||
}else{
|
||||
discount_price = data.price[i].DISCOUNT_PRICE;
|
||||
}
|
||||
price = Number(price) + Number(discount_price);
|
||||
$("#price_div1").text(price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
||||
}else{
|
||||
fn_deleteList(i);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}else{
|
||||
listHTML += '<li>';
|
||||
listHTML += '</li>';
|
||||
$(".option_list").html(listHTML);
|
||||
}
|
||||
}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_nocheck(num){
|
||||
$("#checkboxID" + num).prop("checked",false);
|
||||
fn_deleteList(num);
|
||||
}
|
||||
|
||||
function fn_deleteList(num){
|
||||
|
||||
var price = $("#price_div1").text().replace(/,/g, "");
|
||||
var discount_price = $("#liid" + num + " > div.info > span > span").text().replace(/,/g, "");
|
||||
|
||||
price = Number(price) - Number(discount_price);
|
||||
$("#price_div1").text(price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
||||
$("#liid" + num).remove();
|
||||
}
|
||||
|
||||
function fn_moveReservation(category_div, category_no, post_no){
|
||||
let pageMoveForm = document.createElement('form');
|
||||
let obj = document.createElement('input');
|
||||
obj.setAttribute('type', 'hidden');
|
||||
obj.setAttribute('name', 'CATEGORY_DIV_CD');
|
||||
obj.setAttribute('value', "0"+category_div);
|
||||
pageMoveForm.appendChild(obj);
|
||||
|
||||
let obj2 = document.createElement('input');
|
||||
obj2.setAttribute('type', 'hidden');
|
||||
obj2.setAttribute('name', 'CATEGORY_NO');
|
||||
obj2.setAttribute('value', category_no);
|
||||
pageMoveForm.appendChild(obj2);
|
||||
|
||||
let obj3 = document.createElement('input');
|
||||
obj3.setAttribute('type', 'hidden');
|
||||
obj3.setAttribute('name', 'POST_NO');
|
||||
obj3.setAttribute('value', post_no);
|
||||
pageMoveForm.appendChild(obj3);
|
||||
|
||||
let obj4 = document.getElementsByName('procedure_id');
|
||||
var len = obj4.length;
|
||||
if(len == 0){
|
||||
alert('시술이 선택되지 않았습니다.');
|
||||
return;
|
||||
}
|
||||
var value = '';
|
||||
for(var i = 0; i < len; i++){
|
||||
value += obj4[i].getAttribute('value') + '#';
|
||||
}
|
||||
|
||||
let obj5 = document.createElement('input');
|
||||
obj5.setAttribute('type', 'hidden');
|
||||
obj5.setAttribute('name', 'PROCEDURE_ID');
|
||||
obj5.setAttribute('value', value);
|
||||
pageMoveForm.appendChild(obj5);
|
||||
|
||||
pageMoveForm.setAttribute('method', 'post');
|
||||
pageMoveForm.setAttribute('action', '/webservice/selectMakeReservation.do');
|
||||
document.body.appendChild(pageMoveForm);
|
||||
|
||||
pageMoveForm.submit();
|
||||
|
||||
}
|
||||
|
||||
/* 버튼 클릭했는지 안했는지 확인 class active */
|
||||
var $selectProcedureDiv = $('.select_procedure_div');
|
||||
$selectProcedureDiv.click(function(e){
|
||||
e.stopPropagation();
|
||||
$selectProcedureDiv.not(this).removeClass('active'); /*remove buttonactive from the others*/
|
||||
$(this).toggleClass('active'); /*toggle current clicked element*/
|
||||
});
|
||||
|
||||
$(window).on("click", function(){
|
||||
$selectProcedureDiv.removeClass('active');
|
||||
})
|
||||
|
||||
//초기화
|
||||
fn_init();
|
||||
294
src/main/resources/static/js/web/voc/webVOC.js
Normal file
294
src/main/resources/static/js/web/voc/webVOC.js
Normal file
@@ -0,0 +1,294 @@
|
||||
/************************************************
|
||||
* 초기화
|
||||
************************************************/
|
||||
function fn_init() {
|
||||
|
||||
}
|
||||
|
||||
var phoneAuthYn= "N";
|
||||
|
||||
/****************************************************************************
|
||||
* 휴대폰 본인인증
|
||||
****************************************************************************/
|
||||
function fn_sendAuthNum(){
|
||||
|
||||
let phoneNumber = $("#phoneNumber").val();
|
||||
let reg_tel = /^[0-9]{10,11}$/;
|
||||
|
||||
if(true != fn_emptyCheck(phoneNumber)){
|
||||
modalEvent.warning("조회", "휴대폰번호를 입력하세요.");
|
||||
return;
|
||||
}else{
|
||||
if(reg_tel.test(phoneNumber) != true) {
|
||||
modalEvent.warning("조회", "휴대폰번호는 숫자 10~11자리여야 합니다.");
|
||||
return;
|
||||
}else{
|
||||
// 인증번호 발송
|
||||
fn_insertPhoneAuth();
|
||||
}
|
||||
}
|
||||
}
|
||||
/****************************************************************************
|
||||
* 인증번호 등록
|
||||
****************************************************************************/
|
||||
function fn_insertPhoneAuth(){
|
||||
|
||||
isRunning = false;
|
||||
|
||||
let phoneNumber = $("#phoneNumber").val();
|
||||
let authType = "CH";
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append("phoneNumber", phoneNumber);
|
||||
formData.append("authType", authType);
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webvoc/insertPhoneAuth.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: true,
|
||||
success: function(data){
|
||||
if(data.msgCode=='0'){
|
||||
|
||||
modalEvent.success("", data.msgDesc, function(){
|
||||
isRunning = true;
|
||||
|
||||
fn_startTimer();
|
||||
$("#sendAuthNumBtn").val("재전송");
|
||||
$("#sendAuthNumBtn").removeClass("noactive");
|
||||
});
|
||||
|
||||
}else{
|
||||
modalEvent.danger("", data.msgDesc);
|
||||
}
|
||||
},
|
||||
error : function(xhr, status, error) {
|
||||
modalEvent.danger("", "정상적으로 수행되지 않았습니다. 인터넷에 연결되어 있는지 확인해 보시기 바랍니다.");
|
||||
},
|
||||
beforeSend:function(xhr){
|
||||
xhr.setRequestHeader("token", sessionStorage.getItem("token"));
|
||||
},
|
||||
complete:function(){
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 타이머 함수 실행
|
||||
****************************************************************************/
|
||||
function fn_startTimer() {
|
||||
|
||||
// 남은 시간(초)
|
||||
let count = 180;
|
||||
let display = document.querySelector('#timer');
|
||||
|
||||
let minutes, seconds;
|
||||
let timer = setInterval(function () {
|
||||
if(isRunning){
|
||||
minutes = parseInt(count / 60, 10);
|
||||
seconds = parseInt(count % 60, 10);
|
||||
minutes = minutes < 10 ? "0" + minutes : minutes;
|
||||
seconds = seconds < 10 ? "0" + seconds : seconds;
|
||||
display.textContent = minutes + ":" + seconds;
|
||||
isRunning = true;
|
||||
}else{
|
||||
clearInterval(timer);
|
||||
display.textContent = "";
|
||||
isRunning = false;
|
||||
}
|
||||
|
||||
// 타이머 종료
|
||||
if (--count < 0) {
|
||||
clearInterval(timer);
|
||||
display.textContent = "";
|
||||
isRunning = false;
|
||||
$("#authNumber").val("");
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 인증번호 확인 조회
|
||||
****************************************************************************/
|
||||
function fn_selectPhoneAuthCheck(){
|
||||
|
||||
let phoneNumber = $("#phoneNumber").val();
|
||||
let authNumber = $("#authNumber").val();
|
||||
let reg_tel = /^[0-9]{10,11}$/;
|
||||
|
||||
if(true != fn_emptyCheck(phoneNumber)){
|
||||
modalEvent.warning("조회", "휴대폰번호는 필수 값입니다.");
|
||||
return;
|
||||
}else{
|
||||
if(reg_tel.test(phoneNumber) != true) {
|
||||
modalEvent.warning("조회", "휴대폰번호는 숫자 10~11자리여야 합니다.");
|
||||
return;
|
||||
}else{
|
||||
phoneNumber = phoneNumber.replace("-", "");
|
||||
}
|
||||
}
|
||||
|
||||
if(true != fn_emptyCheck(authNumber)){
|
||||
modalEvent.warning("조회", "인증번호를 입력하세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append("phoneNumber", phoneNumber);
|
||||
formData.append("authNumber", authNumber);
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webvoc/selectPhoneAuthCheck.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: false,
|
||||
success: function(data){
|
||||
if(data.msgCode=='0'){
|
||||
$("#sendAuthNumBtn").val("인증완료");
|
||||
$("#sendAuthNumBtn").addClass("noactive");
|
||||
modalEvent.success("", data.msgDesc, function (){
|
||||
$(".bd-top").hide();
|
||||
});
|
||||
phoneAuthYn = "Y";
|
||||
clearInterval(timer);
|
||||
isRunning = false;
|
||||
}else{
|
||||
modalEvent.danger("조회 오류", data.msgDesc);
|
||||
phoneAuthYn = "N";
|
||||
// checkAllFields();
|
||||
|
||||
}
|
||||
},
|
||||
error : function(xhr, status, error) {
|
||||
modalEvent.danger("조회 오류", "정상적으로 수행되지 않았습니다. 인터넷에 연결되어 있는지 확인해 보시기 바랍니다.");
|
||||
phoneAuthYn = "N";
|
||||
// checkAllFields();
|
||||
|
||||
},
|
||||
beforeSend:function(xhr){
|
||||
xhr.setRequestHeader("token", sessionStorage.getItem("token"));
|
||||
},
|
||||
complete:function(){
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function alertFunc() {
|
||||
var min = num / 60;
|
||||
min = Math.floor(min);
|
||||
|
||||
var sec = num - (60 * min);
|
||||
sec = sec > 9 ? sec : "0"+sec ;
|
||||
|
||||
if(num == 0){
|
||||
certCellFlag = "T";
|
||||
clearInterval(myVar) // num 이 0초가 되었을대 clearInterval로 타이머 종료
|
||||
}
|
||||
num--;
|
||||
}
|
||||
|
||||
function fn_errorMsgPop(){
|
||||
modalEvent.warning('오류',errorMsg);
|
||||
}
|
||||
/****************************************************************************
|
||||
* validation check
|
||||
****************************************************************************/
|
||||
function fn_submit(){
|
||||
const array = $("#dataform").serializeArray();
|
||||
let formData = new FormData();
|
||||
if(array[0].value == ''){
|
||||
modalEvent.danger("접수 오류", "지점이 선택되지 않았습니다. 지점을 선택하고 다시 접수해주세요.");
|
||||
return;
|
||||
}else{
|
||||
formData.append("gubun", array[0].value);
|
||||
}
|
||||
|
||||
if(array[1].value == ''){
|
||||
modalEvent.danger("접수 오류", "이름이 입력되지 않았습니다. 이름을 입력하고 다시 접수해주세요.");
|
||||
return;
|
||||
}else{
|
||||
formData.append("name", array[1].value);
|
||||
}
|
||||
|
||||
if(array[2].value == ''){
|
||||
modalEvent.danger("접수 오류", "휴대폰 번호가 입력되지 않았습니다. 휴대폰 번호를 입력하고 다시 접수해주세요.");
|
||||
return;
|
||||
}else{
|
||||
formData.append("phoneNumber", array[2].value);
|
||||
}
|
||||
/*
|
||||
if(phoneAuthYn == 'N'){
|
||||
modalEvent.danger("접수 오류", "휴대폰 인증이 되지 않았습니다. 휴대폰 인증 후 다시 접수해주세요.");
|
||||
return;
|
||||
}
|
||||
*/
|
||||
if(array[4].value == ''){
|
||||
modalEvent.danger("접수 오류", "의견 분류가 선택 되지 않았습니다. 의견 분류를 선택하고 다시 접수해주세요.");
|
||||
return;
|
||||
}else{
|
||||
formData.append("opinion", array[4].value);
|
||||
}
|
||||
|
||||
if(array[5].value == ''){
|
||||
modalEvent.danger("접수 오류", "내용이 입력 되지 않았습니다. 내용을 입력하고 다시 접수해주세요.");
|
||||
return;
|
||||
}else{
|
||||
formData.append("content", array[5].value);
|
||||
}
|
||||
|
||||
if(array.length != 7){
|
||||
modalEvent.danger("접수 오류", "개인정보제공 동의가 되지 않았습니다. 개인정보 제공 동의에 체크하고 다시 접수해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webvoc/insertVOC.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: false,
|
||||
success: function(data){
|
||||
if(data.msgCode=='0'){
|
||||
$("#sendAuthNumBtn").val("인증완료");
|
||||
$("#sendAuthNumBtn").addClass("noactive");
|
||||
modalEvent.success("", data.msgDesc, function (){
|
||||
$(".bd-top").hide();
|
||||
});
|
||||
phoneAuthYn = "Y";
|
||||
clearInterval(timer);
|
||||
isRunning = false;
|
||||
window.location.reload();
|
||||
}else{
|
||||
modalEvent.danger("조회 오류", data.msgDesc);
|
||||
phoneAuthYn = "N";
|
||||
// checkAllFields();
|
||||
|
||||
}
|
||||
},
|
||||
error : function(xhr, status, error) {
|
||||
modalEvent.danger("조회 오류", "정상적으로 수행되지 않았습니다. 인터넷에 연결되어 있는지 확인해 보시기 바랍니다.");
|
||||
phoneAuthYn = "N";
|
||||
// checkAllFields();
|
||||
|
||||
},
|
||||
beforeSend:function(xhr){
|
||||
xhr.setRequestHeader("token", sessionStorage.getItem("token"));
|
||||
},
|
||||
complete:function(){
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
//초기화
|
||||
fn_init();
|
||||
236
src/main/resources/static/js/web/webevent/webEventSelect.js
Normal file
236
src/main/resources/static/js/web/webevent/webEventSelect.js
Normal file
@@ -0,0 +1,236 @@
|
||||
/************************************************
|
||||
* 초기화
|
||||
************************************************/
|
||||
function fn_init() {
|
||||
fn_SelectDetail(category_div_cd, category_no, post_no);
|
||||
|
||||
$("#btn_makeReservation").on("click", function(){
|
||||
fn_moveReservation(category_div_cd, category_no, post_no);
|
||||
});
|
||||
}
|
||||
|
||||
/****************************************************************************
|
||||
* 카테고리 목록 가져오기
|
||||
****************************************************************************/
|
||||
function fn_SelectDetail(category_div_cd, category_no, post_no){
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append('CATEGORY_DIV_CD', category_div_cd);
|
||||
formData.append('CATEGORY_NO', category_no);
|
||||
formData.append('POST_NO', post_no);
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webevent/selectEventDetail.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: true,
|
||||
success: function(data){
|
||||
if(data.msgCode=='0'){
|
||||
//화면 데이터 변경
|
||||
$('#category_nm').text(data.rows.CATEGORY_NM);
|
||||
$('#title').text(data.rows.TITLE);
|
||||
$('#serviceThumb').attr('src', data.rows.THUMBNAIL_PATH);
|
||||
$('#main_title').text(data.rows.TITLE);
|
||||
$('.thumbnail-bottom-txt').text(data.rows.THUMBNAIL_BOTTOM_TXT);
|
||||
$('#contents').text(data.rows.CONTENT);
|
||||
if(data.rows.PRICE == null || data.rows.PRICE == undefined){
|
||||
$('#startprice').text('0');
|
||||
}else{
|
||||
$('#startprice').text(data.rows.PRICE.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
||||
}
|
||||
$('#hashtag').text(data.rows.HASHTAG);
|
||||
$('#contents_path').text(data.rows.THUMBNAIL_BOTTOM_TXT);
|
||||
$('#contents_path').attr('src', data.rows.CONTENTS_PATH);
|
||||
//시술 목록 데이터 입력
|
||||
let totalCount = data.price.length;
|
||||
if (0 < totalCount) {
|
||||
for (let i = 0; i < data.price.length; i++) {
|
||||
let listHTML = '';
|
||||
listHTML += '<li class="optipon_item sepr_wrap">';
|
||||
listHTML += ' <div class="item_subprice">';
|
||||
listHTML += ' <div class="cs-checkbox">';
|
||||
listHTML += ' <input type="checkbox" class="idxChk" id="checkboxID' + i + '">';
|
||||
listHTML += ' <label class="cs-checkbox-label d-block" for="checkboxID' + i + '">';
|
||||
listHTML += ' <div class="oi-wrap">';
|
||||
listHTML += ' <div class="oi-txt">';
|
||||
listHTML += ' <span class="oi-tit-txt">' + data.price[i].TREATMENT_PROCEDURE_NAME;
|
||||
listHTML += ' </span>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' <div class="oi-price">';
|
||||
listHTML += ' <del class="original_price d-block">';
|
||||
listHTML += ' <b>';
|
||||
if(data.price[i].DISCOUNT_PRICE == null || data.price[i].DISCOUNT_PRICE == undefined){
|
||||
if(data.price[i].PRICE == null || data.price[i].PRICE == undefined){
|
||||
listHTML += '0';
|
||||
}else{
|
||||
listHTML += (data.price[i].PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
}else{
|
||||
listHTML += (data.price[i].DISCOUNT_PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
listHTML += '</b>원';
|
||||
listHTML += ' </del>';
|
||||
listHTML += ' <span class="discount_price">';
|
||||
if(data.price[i].DISCOUNT_PRICE == null || data.price[i].DISCOUNT_PRICE == undefined){
|
||||
if(data.price[i].PRICE == null || data.price[i].PRICE == undefined){
|
||||
listHTML += '0';
|
||||
}else{
|
||||
listHTML += (data.price[i].PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
}else{
|
||||
listHTML += (data.price[i].DISCOUNT_PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
listHTML += '</span>원';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' </label>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += '</li>';
|
||||
$(".option_list").append(listHTML);
|
||||
|
||||
$("#checkboxID" + i).change(function(){
|
||||
if($("#checkboxID" + i).is(":checked")){
|
||||
let listHTML2 = '';
|
||||
listHTML2 += '<li class="s_item selt_info_wrap" id="liid' + i + '">';
|
||||
listHTML2 += '<input type="hidden" id="procedure_id' + i + '" name="procedure_id" value="'+ data.price[i].MU_TREATMENT_PROCEDURE_ID + '">';
|
||||
listHTML2 += ' <div class="txt-wrap"> ';
|
||||
listHTML2 += ' <span class="selt">' + data.price[i].TREATMENT_PROCEDURE_NAME;
|
||||
listHTML2 += ' </div>';
|
||||
listHTML2 += ' <div class="info">';
|
||||
listHTML2 += ' <span><span class="real_price">';
|
||||
if(data.price[i].DISCOUNT_PRICE == null || data.price[i].DISCOUNT_PRICE == undefined){
|
||||
if(data.price[i].PRICE == null || data.price[i].PRICE == undefined){
|
||||
listHTML2 += '0';
|
||||
}else{
|
||||
listHTML2 += (data.price[i].PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
}else{
|
||||
listHTML2 += (data.price[i].DISCOUNT_PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
listHTML2 += '</span>원</span>';
|
||||
listHTML2 += ' <button type="button" onclick="fn_nocheck(' + i + ');"><img src="/image/close-btn.png" alt="삭제" width="13px" height="13px"></button>';
|
||||
listHTML2 += ' </div>';
|
||||
listHTML2 += '</li>';
|
||||
$("#selectEvent1").append(listHTML2);
|
||||
var price = $("#price_div1").text().replace(/,/g, "");
|
||||
var discount_price = '';
|
||||
if(data.price[i].DISCOUNT_PRICE == null || data.price[i].DISCOUNT_PRICE == undefined){
|
||||
if(data.price[i].PRICE == null || data.price[i].PRICE == undefined){
|
||||
discount_price = 0;
|
||||
}else{
|
||||
discount_price = data.price[i].PRICE;
|
||||
}
|
||||
}else{
|
||||
discount_price = data.price[i].DISCOUNT_PRICE;
|
||||
}
|
||||
price = Number(price) + Number(discount_price);
|
||||
$("#price_div1").text(price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
||||
}else{
|
||||
fn_deleteList(i);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}else{
|
||||
listHTML += '<li>';
|
||||
listHTML += '</li>';
|
||||
$(".option_list").html(listHTML);
|
||||
}
|
||||
}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_nocheck(num){
|
||||
$("#checkboxID" + num).prop("checked",false);
|
||||
fn_deleteList(num);
|
||||
}
|
||||
|
||||
function fn_deleteList(num){
|
||||
|
||||
var price = $("#price_div1").text().replace(/,/g, "");
|
||||
var discount_price = $("#liid" + num + " > div.info > span > span").text().replace(/,/g, "");
|
||||
|
||||
price = Number(price) - Number(discount_price);
|
||||
$("#price_div1").text(price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
|
||||
$("#liid" + num).remove();
|
||||
}
|
||||
|
||||
function fn_moveReservation(category_div, category_no, post_no){
|
||||
let pageMoveForm = document.createElement('form');
|
||||
let obj = document.createElement('input');
|
||||
obj.setAttribute('type', 'hidden');
|
||||
obj.setAttribute('name', 'CATEGORY_DIV_CD');
|
||||
obj.setAttribute('value', "0"+category_div);
|
||||
pageMoveForm.appendChild(obj);
|
||||
|
||||
let obj2 = document.createElement('input');
|
||||
obj2.setAttribute('type', 'hidden');
|
||||
obj2.setAttribute('name', 'CATEGORY_NO');
|
||||
obj2.setAttribute('value', category_no);
|
||||
pageMoveForm.appendChild(obj2);
|
||||
|
||||
let obj3 = document.createElement('input');
|
||||
obj3.setAttribute('type', 'hidden');
|
||||
obj3.setAttribute('name', 'POST_NO');
|
||||
obj3.setAttribute('value', post_no);
|
||||
pageMoveForm.appendChild(obj3);
|
||||
|
||||
let obj4 = document.getElementsByName('procedure_id');
|
||||
var len = obj4.length;
|
||||
if(len == 0){
|
||||
alert('시술이 선택되지 않았습니다.');
|
||||
return;
|
||||
}
|
||||
var value = '';
|
||||
for(var i = 0; i < len; i++){
|
||||
value += obj4[i].getAttribute('value') + '#';
|
||||
}
|
||||
|
||||
let obj5 = document.createElement('input');
|
||||
obj5.setAttribute('type', 'hidden');
|
||||
obj5.setAttribute('name', 'PROCEDURE_ID');
|
||||
obj5.setAttribute('value', value);
|
||||
pageMoveForm.appendChild(obj5);
|
||||
|
||||
pageMoveForm.setAttribute('method', 'post');
|
||||
pageMoveForm.setAttribute('action', '/webservice/selectMakeReservation.do');
|
||||
document.body.appendChild(pageMoveForm);
|
||||
|
||||
pageMoveForm.submit();
|
||||
|
||||
}
|
||||
|
||||
/* 버튼 클릭했는지 안했는지 확인 class active */
|
||||
var $selectProcedureDiv = $('.select_procedure_div');
|
||||
$selectProcedureDiv.click(function(e){
|
||||
e.stopPropagation();
|
||||
$selectProcedureDiv.not(this).removeClass('active'); /*remove buttonactive from the others*/
|
||||
$(this).toggleClass('active'); /*toggle current clicked element*/
|
||||
});
|
||||
|
||||
$(window).on("click", function(){
|
||||
$selectProcedureDiv.removeClass('active');
|
||||
})
|
||||
|
||||
//초기화
|
||||
fn_init();
|
||||
189
src/main/resources/static/js/web/webevent/webEventSelectList.js
Normal file
189
src/main/resources/static/js/web/webevent/webEventSelectList.js
Normal file
@@ -0,0 +1,189 @@
|
||||
/************************************************
|
||||
* 초기화
|
||||
************************************************/
|
||||
function fn_init() {
|
||||
fn_SelectListCategory();
|
||||
}
|
||||
|
||||
|
||||
/****************************************************************************
|
||||
* 이벤트 카테고리 목록 가져오기
|
||||
****************************************************************************/
|
||||
function fn_SelectListCategory(){
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append('bannerType', 'A');
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webevent/selectListWebEvent.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: true,
|
||||
success: function(data){
|
||||
if(data.msgCode=='0'){
|
||||
|
||||
let totalCount = data.rows.length;
|
||||
|
||||
if (0 < totalCount) {
|
||||
let listHTML = '';
|
||||
|
||||
for (let i = 0; i < data.rows.length; i++) {
|
||||
if(i == 0){
|
||||
listHTML += '<li class="active" id="category_'+data.rows[i].CATEGORY_NO+'">';
|
||||
listHTML += ' <a href="javascript:fn_SelectEventList(' + data.rows[i].CATEGORY_NO + ');">' + data.rows[i].CATEGORY_NM + '</a>';
|
||||
listHTML += '</li>';
|
||||
}else{
|
||||
listHTML += '<li class="nonactive" id="category_'+data.rows[i].CATEGORY_NO+'">';
|
||||
listHTML += ' <a href="javascript:fn_SelectEventList(' + data.rows[i].CATEGORY_NO + ');">' + data.rows[i].CATEGORY_NM + '</a>';
|
||||
listHTML += '</li>';
|
||||
}
|
||||
}
|
||||
$("#servicecategory").html(listHTML);
|
||||
fn_SelectEventList(data.rows[0].CATEGORY_NO);
|
||||
}
|
||||
}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_SelectEventList(category_no){
|
||||
$(".active").addClass("nonactive");
|
||||
$(".active").removeClass("active");
|
||||
|
||||
$("#category_"+category_no).removeClass("nonactive");
|
||||
$("#category_"+category_no).addClass("active");
|
||||
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append('category_no', category_no);
|
||||
|
||||
$.ajax({
|
||||
url: encodeURI('/webevent/selectListEvent.do'),
|
||||
data: formData,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
type: 'POST',
|
||||
async: true,
|
||||
success: function(data){
|
||||
if(data.msgCode=='0'){
|
||||
|
||||
let totalCount = data.rows.length;
|
||||
let listHTML = '';
|
||||
if (0 < totalCount) {
|
||||
for (let i = 0; i < data.rows.length; i++) {
|
||||
listHTML += '<li class="fadeIn">';
|
||||
listHTML += ' <a href="javascript:fn_moveDetail(' + data.rows[i].CATEGORY_DIV_CD +', ' + data.rows[i].CATEGORY_NO + ',' + data.rows[i].POST_NO + ');" class="event-card">';
|
||||
listHTML += ' <div class="img_box">';
|
||||
listHTML += ' <img src="https://intranet.bbgnetworks.com/uploadFiles/T00004/eventImg/20250203144112.png" alt="평일 오후1시-5시 / 피부 이벤트" class="">';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' <div class="txt-box">';
|
||||
listHTML += ' <!-- BEST/NEW 아이콘 퍼블리싱 -->';
|
||||
listHTML += ' <!-- __tit-best: best아이콘 __tit-new: new아이콘 -->';
|
||||
listHTML += ' <div class="tit-txt">';
|
||||
listHTML += ' <p class="multy-ellip2">' + data.rows[i].TITLE + '</p>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' <span class="sub-txt max-line1 one-ellip">' + data.rows[i].THUMBNAIL_BOTTOM_TXT + '</span>';
|
||||
listHTML += ' <div class="ab_cont">';
|
||||
listHTML += ' <span class="cost"><del class="">';
|
||||
if(data.rows[i].DISCOUNT_PRICE == null || data.rows[i].DISCOUNT_PRICE == undefined){
|
||||
if(data.rows[i].PRICE == null || data.rows[i].PRICE == undefined){
|
||||
listHTML += '0';
|
||||
}else{
|
||||
listHTML += (data.rows[i].PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
}else{
|
||||
listHTML += (data.rows[i].DISCOUNT_PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
listHTML += ' </del>원</span>';
|
||||
listHTML += ' <span class="discount">';
|
||||
listHTML += ' <strong class="txt_num">';
|
||||
if(data.rows[i].DISCOUNT_PRICE == null || data.rows[i].DISCOUNT_PRICE == undefined){
|
||||
if(data.rows[i].PRICE == null || data.rows[i].PRICE == undefined){
|
||||
listHTML += '0';
|
||||
}else{
|
||||
listHTML += (data.rows[i].PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
}else{
|
||||
listHTML += (data.rows[i].DISCOUNT_PRICE).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
listHTML += ' </strong>원 부터 </span>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' </div>';
|
||||
listHTML += ' </a>';
|
||||
listHTML += '</li>';
|
||||
}
|
||||
$("#detail_list").html(listHTML);
|
||||
|
||||
}else{
|
||||
listHTML += '<li class="mt70">';
|
||||
listHTML += '</li>';
|
||||
$("#detail_list").html(listHTML);
|
||||
}
|
||||
}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_moveDetail(category_div, category_no, post_no){
|
||||
let pageMoveForm = document.createElement('form');
|
||||
let obj = document.createElement('input');
|
||||
obj.setAttribute('type', 'hidden');
|
||||
obj.setAttribute('name', 'CATEGORY_DIV_CD');
|
||||
obj.setAttribute('value', "0"+category_div);
|
||||
pageMoveForm.appendChild(obj);
|
||||
|
||||
let obj2 = document.createElement('input');
|
||||
obj2.setAttribute('type', 'hidden');
|
||||
obj2.setAttribute('name', 'CATEGORY_NO');
|
||||
obj2.setAttribute('value', category_no);
|
||||
pageMoveForm.appendChild(obj2);
|
||||
|
||||
let obj3 = document.createElement('input');
|
||||
obj3.setAttribute('type', 'hidden');
|
||||
obj3.setAttribute('name', 'POST_NO');
|
||||
obj3.setAttribute('value', post_no);
|
||||
pageMoveForm.appendChild(obj3);
|
||||
|
||||
pageMoveForm.setAttribute('method', 'post');
|
||||
pageMoveForm.setAttribute('action', '/webevent/selectEventDetailIntro.do');
|
||||
document.body.appendChild(pageMoveForm);
|
||||
pageMoveForm.submit();
|
||||
}
|
||||
|
||||
//초기화
|
||||
fn_init();
|
||||
Reference in New Issue
Block a user