1 2<!DOCTYPE html> 3<html lang="ko"> 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 7 <meta http-equiv="X-UA-Compatible" content="IE=Edge, Chrome=1"> 8 9 <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png"> 10 <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png"> 11 <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png"> 12 <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png"> 13 <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png"> 14 <link rel="apple-touch-icon" sizes="120x120" href="/appleicon-120x120.png"> 15 <link rel="apple-touch-icon" sizes="144x144" href="/appleicon-144x144.png"> 16 <link rel="apple-touch-icon" sizes="152x152" href="/appleicon-152x152.png"> 17 <link rel="apple-touch-icon" sizes="180x180" href="/appleicon-180x180.png"> 18 <link rel="icon" href="/favicon.ico" sizes="any"> 19 <link rel="icon" type="image/png" sizes="192x192" href="/androidicon-192x192.png"> 20 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 21 <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
22 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 23 <link rel="manifest" href="/manifest.json"> 24 <meta name="msapplication-TileColor" content="#ffffff"> 25 <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> 26 <meta name="theme-color" content="#ffffff"> 27 28 <link href="/css/fontawesome/css/fontawesome.css" rel="stylesheet" /> 29 <link href="/css/fontawesome/css/regular.css" rel="stylesheet" /> 30 <link rel="stylesheet" type="text/css" href="/css/jquery-ui.css?version=20260901-1"> 31 <link rel="stylesheet" href="/js/swiper/swiper.min.css?version=20260901-1"/> 32 <link rel="stylesheet" href="/js/mCustomScrollbar/jquery.mCustomScrollbar.css?version=20260901-1"/> 33 <link rel="stylesheet" href="/css/tqc.css?version=20260901-1"/> 34
34<script type="text/javascript" src="/js/jquery-1.12.4.min.js?version=20260914-1"></script>
34 35
35<script src="/js/jquery-ui.min.js?version=20260914-1"></script>
35 36
36<script type="text/javascript" src="/js/swiper/swiper.min.js?version=20260914-1"></script>
36 37
37<script type="text/javascript" src="/js/mCustomScrollbar/jquery.mCustomScrollbar.js?version=20260914-1"></script>
37 38 <!--link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css?version=20260901-1" /--> 39
39<script type="text/javascript" src="/js/common.js?version=20260914-1"></script>
39 40 <title>ë¡íìº í | </title> 41 <meta name="description" content="ë¡íìº íìì ì êµ ìº íì¥ ì¤ìê° ìì½, ìì¬ì íì¸, 리뷰 íì¸ê¹ì§ í ë²ì ì´ì©íì¸ì."> 42 <meta name="keywords" content="ë¡íìº í, ìº íì¥ ìì½, ìº í ìì½, ìº íì¥ ì¶ì², ìº í íë«í¼"> 43 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 44 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 45 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 46 47 48 <meta name="robots" content="index, follow"> 49 <meta name="NaverBot" content="index, follow"/> 50 <meta name="Yeti" content="index, follow"/> 51 52 53 <meta name="author" content="habb communication Co., Ltd." /> 54 <meta name="apple-mobile-web-app-capable" content="yes"> 55 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 56 <meta property="al:android:url" content="https://play.google.com/store/apps/details?id=com.habb.thankq"> 57 <meta property="al:android:app_name" content="ìº í 1ë± íë«í¼ ë¡íìº í"> 58 <meta property="al:android:package" content="com.habb.thankq"> 59 <meta property="al:web:url" content="https://m.thankqcamping.com/"> 60 <meta property="al:ios:url" content="https://itunes.apple.com/kr/app/id1527733782?mt=8"> 61 <meta property="al:ios:app_store_id" content="1527733782"> 62 <meta property="al:ios:app_name" content="ìº í 1ë± íë«í¼ ë¡íìº í"> 63 64 <meta name="naver-site-verification" content="523728cff4137740c25d193223588981ab353b03" /> 65 66 <link rel="canonical" href="https://m.thankqcamping.com/"> 67 <meta name="twitter:card" content="summary_large_image"> 68 <meta name="twitter:title" content="ìº í 1ë± íë«í¼ ë¡íìº í"> 69 <meta name="twitter:description" content="êµë´ ì¤í ìº í ê¸ë¨í ì¹´ë¼ë° ë± ì´ë²¤í¸ ìº íì¬íìíì ì§ê¸ ë°ë¡ ì¤ìê°ì¼ë¡ ìì½íì¸ì."> 70 <meta name="twitter:image" content="https://m.thankqcamping.com/images/thankq_main.png"> 71 <meta name="twitter:domain" content="https://m.thankqcamping.com/"> 72
72<script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
72 73
73<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=27aa85bb599bbd835014e7a7dd9b7207&libraries=services"></script>
73 74
74<script type="text/javascript" src="/js/lazyload.js?version=20260914-1"></script>
74 75
75<script type="text/javascript" src="/js/jquery.mCustomScrollbar.js"></script>
75 76
76<script type="text/javascript" src="/js/jquery.rwdImageMaps.min.js"></script>
76 77 <!--script type="text/javascript" src="/js/fontawesome/all.min.js"></script--> 78
78<script language="JavaScript"> 79 // HTTPíë¡í ì½ HTTPSë¡ ë³ê²½ 80 81 if (document.location.protocol == 'http:') { 82 if (document.location.href.search("/talk/write") < 0 && document.location.href.search("/used/write") < 0) { 83 document.location.href = document.location.href.replace('http:', 'https:'); 84 } 85 } 86 87 var app_yn = "" 88 var app_os = "" 89 var app_ver = "0" 90 var varUA = navigator.userAgent.toLowerCase(); //userAgent ê° ì»ê¸° 91 var mobileApp = varUA.indexOf("/app/") > -1 ? true : false; 92 if (mobileApp==true && varUA.indexOf('android') > -1) { 93 app_yn = "Y" 94 app_os = "android" 95 app_ver = window.Android.getAppVer() 96 } else if (mobileApp==true && (varUA.indexOf("ios") > -1||varUA.indexOf("iphone") > -1||varUA.indexOf("ipad") > -1||varUA.indexOf("ipod") > -1 )) { 97 app_yn = "Y" 98 app_os = "ios"; 99 if (varUA.indexOf("appver") > -1) { 100 app_ver = varUA.split('appver')[1].substr(0,5).replaceAll('.','') 101 } 102 } 103 /* 104 if (app_yn=="Y" && app_ver!="0" && ("/search/mapSearch.hbb"=="/main.hbb" || "/search/mapSearch.hbb"=="/my/main.hbb")) { 105 $.ajax({ 106 type: "POST", 107 url: "/app/ver_sav.hbb", 108 data:{app_ver:app_ver}, 109 success: onSuccess, 110 error: onError 111 }); 112 function onSuccess(dataobj) {} 113 function onError() {} 114 } 115 */ 116 117 var app_mem = "" 118 function goUrl(url,pop_yn,pop_loc) { 119 //if(url.indexOf('https://m.thankqcamping.com')>-1) url=replace(url,'https://m.thankqcamping.com','') 120 121 var fullUrl = ((url.indexOf('http') > -1) ? '' : $('#site_url').html()) + url; 122 var isInstagramUrl = 123 fullUrl.indexOf('instagram.com') > -1 || 124 fullUrl.indexOf('www.instagram.com') > -1 || 125 fullUrl.indexOf('instagr.am') > -1; 126 127 if(app_yn=='Y') { 128 129 // ì¸ì¤í URLì´ë©´ ë¤ì´í°ë¸ ì± í¸ì¶ 130 if (isInstagramUrl) { 131 if (app_os == "android") { 132 if (typeof Android !== "undefined" && typeof Android.openInstagram === "function") { 133 Android.openInstagram(fullUrl); 134 return; 135 } 136 } else { 137 goIosAp('openInstagram', fullUrl); 138 return; 139 } 140 } 141 142 if(app_ver!="") { 143 //if(parseInt(app_ver) > 18) { 144 if (pop_yn=='N') { 145 location.href = fullUrl; 146 } else { 147 if (app_os == "android" && parseInt(app_ver) < 49) { 148 location.href = ((pop_loc!='') ? pop_loc+'://' : '') + fullUrl; 149 } else { 150 winOpen(fullUrl,1,'íì ì°¨ë¨ê¸°ë¥ì´ ì¤ì ëì´ ììµëë¤.\nì°¨ë¨í´ì í ë¤ì ì´ì©í´ 주ììì¤.'); 151 } 152 } 153 /* 154 if (app_os == "android") { 155 location.href = ((pop_loc!='')?pop_loc+'://':'') + ((url.indexOf('http')>-1)?'':$('#site_url').html()) + url 156 } else { 157 winOpen($('#site_url').html() + url,1,'íì ì°¨ë¨ê¸°ë¥ì´ ì¤ì ëì´ ììµëë¤.\nì°¨ë¨í´ì í ë¤ì ì´ì©í´ 주ììì¤.') 158 } 159 */ 160 //} else { 161 // if(confirm('ì ê· ì´í ì ë°ì´í¸ë¥¼ í´ì£¼ì기 ë°ëëë¤.\nì´ì ë²ì ì¬ì©ì ìë¹ì¤ ì´ì©ì ì¤ë¥ê° ë°ìí ì ììµëë¤.\në§ì½, ì ë°ì´í¸íìë ì´ ë©ìì§ê° ëì¤ì ë¤ë©´ í°ì¤ì > ì í리ì¼ì´ì > ë¡íìº í > ì ì¥ê³µê°ìì ë°ì´í° ë° ìºì를 ìì í ë¤ì ì´ì©í´ ë³´ì기 ë°ëëë¤.')) { 162 // location.href = 'market://details?id=com.habb.thankq' 163 // } else { 164 // if(pop_yn=='Y') { 165 // winOpen($('#site_url').html() + url,1,'íì ì°¨ë¨ê¸°ë¥ì´ ì¤ì ëì´ ììµëë¤.\nì°¨ë¨í´ì í ë¤ì ì´ì©í´ 주ììì¤.') 166 // } else { 167 // location.href = $('#site_url').html() + url 168 // } 169 // } 170 //} 171 } else { 172 location.href = fullUrl; 173 /* 174 if (app_os == "android") { 175 location.href = ((pop_loc!='')?pop_loc+'://':'') + ((url.indexOf('http')>-1)?'':$('#site_url').html()) + url 176 } else { 177 winOpen($('#site_url').html() + url,1,'íì ì°¨ë¨ê¸°ë¥ì´ ì¤ì ëì´ ììµëë¤.\nì°¨ë¨í´ì í ë¤ì ì´ì©í´ 주ììì¤.') 178 } 179 */ 180 } 181 } else { 182 if(pop_yn=='Y') { 183 //if(pop_loc=="pop") { 184 winOpen(url,1,'íì ì°¨ë¨ê¸°ë¥ì´ ì¤ì ëì´ ììµëë¤.\nì°¨ë¨í´ì í ë¤ì ì´ì©í´ 주ììì¤.'); 185 //} else { 186 // location.href = url 187 //} 188 } else { 189 location.href = url; 190 } 191 } 192 } 193 function goShopUrl(url,pop_yn,pop_loc) { 194 if(app_yn=='Y') { 195 if(app_ver!="") { 196 //if(parseInt(app_ver) > 18) { 197 if (app_os == "android" && parseInt(app_ver) < 49) { 198 location.href = ((pop_loc!='')?pop_loc+'://':'') + ((url.indexOf('http')>-1)?'':$('#shop_url').html()) + url 199 } else { 200 winOpen(((url.indexOf('http')>-1)?'':$('#shop_url').html()) + url,1,'íì ì°¨ë¨ê¸°ë¥ì´ ì¤ì ëì´ ììµëë¤.\nì°¨ë¨í´ì í ë¤ì ì´ì©í´ 주ììì¤.') 201 } 202 //} else { 203 // if(confirm('ì ê· ì´í ì ë°ì´í¸ë¥¼ í´ì£¼ì기 ë°ëëë¤.\nì´ì ë²ì ì¬ì©ì ìë¹ì¤ ì´ì©ì ì¤ë¥ê° ë°ìí ì ììµëë¤.\në§ì½, ì ë°ì´í¸íìë ì´ ë©ìì§ê° ëì¤ì ë¤ë©´ í°ì¤ì > ì í리ì¼ì´ì > ë¡íìº í > ì ì¥ê³µê°ìì ë°ì´í° ë° ìºì를 ìì í ë¤ì ì´ì©í´ ë³´ì기 ë°ëëë¤.')) { 204 // location.href = 'market://details?id=com.habb.thankq' 205 // } else { 206 // if(pop_yn=='Y') { 207 // winOpen(((url.indexOf('http')>-1)?'':$('#shop_url').html()) + url,1,'íì ì°¨ë¨ê¸°ë¥ì´ ì¤ì ëì´ ììµëë¤.\nì°¨ë¨í´ì í ë¤ì ì´ì©í´ 주ììì¤.') 208 // } else { 209 // location.href = ((url.indexOf('http')>-1)?'':$('#shop_url').html()) + url 210 // } 211 // } 212 //} 213 } else { 214 if (app_os == "android" && parseInt(app_ver) < 49) { 215 location.href = ((pop_loc!='')?pop_loc+'://':'') + ((url.indexOf('http')>-1)?'':$('#shop_url').html()) + url 216 } else { 217 winOpen($('#shop_url').html() + url,1,'íì ì°¨ë¨ê¸°ë¥ì´ ì¤ì ëì´ ììµëë¤.\nì°¨ë¨í´ì í ë¤ì ì´ì©í´ 주ììì¤.') 218 } 219 } 220 } else { 221 url = ((url.indexOf('http')>-1)?'':$('#shop_url').html()) + url 222 if(pop_yn=='Y') { 223 //if(pop_loc=="pop") { 224 winOpen(url,1,'íì ì°¨ë¨ê¸°ë¥ì´ ì¤ì ëì´ ììµëë¤.\nì°¨ë¨í´ì í ë¤ì ì´ì©í´ 주ììì¤.') 225 //} else { 226 // location.href = url 227 //} 228 } else { 229 location.href = url 230 } 231 } 232 } 233 function goResAppUrl(url,app_yn,app_os) { 234 if (app_yn=="Y") { 235 if (app_os=="android" && parseInt(app_ver) < 49) { 236 location.href = url 237 } else { 238 winOpen(url,1,'íì ì°¨ë¨ê¸°ë¥ì´ ì¤ì ëì´ ììµëë¤.\nì°¨ë¨í´ì í ë¤ì ì´ì©í´ 주ììì¤.') 239 } 240 } else { 241 winOpen(url,1,'íì ì°¨ë¨ê¸°ë¥ì´ ì¤ì ëì´ ììµëë¤.\nì°¨ë¨í´ì í ë¤ì ì´ì©í´ 주ììì¤.') 242 } 243 } 244 function appPopReload(pop_loc) { 245 if(parseInt(app_ver) >= 23 && pop_loc!='') { 246 appPopReloadAp() 247 //window.Android.popReload(pop_loc); 248 } else { 249 appPopReloadAp() 250 } 251 } 252 253 //ì±ë¦¬ë¡ë 254 function appPopReloadAp() { 255 if(app_os=="android") { 256 window.Android.pop_reload(); 257 } else { 258 goIosAp('pop_reload','') 259 } 260 } 261 262 //ìº íì¥ ìì¸ë³´ê¸° 263 function cback(cseq) { 264 goUrl('/resv/view.hbb?cseq='+cseq,'Y','pop') 265 } 266 //ìº íì¥ ìì¸ë³´ê¸° 267 function goCampView(cseq,res_dt) { 268 goUrl('/resv/view.hbb?cseq='+cseq+'&res_dt='+res_dt,'N','pop') 269 } 270 271 //ìº íì¥ ì¤ìê°ìì½ 272 function goRes() { 273 var frm = document.campForm 274 var campseq = frm.cseq.value 275 var res_dt = frm.res_dt.value 276 var res_edt = frm.res_edt.value 277 var region = frm.region.value 278 var site_tp = frm.site_tp.value 279 var tema = frm.tema.value 280 var keyword = frm.keyword.value 281 var disc_yn = frm.disc_yn.value 282 var camp_tp = frm.camp_tp.value 283 var page = frm.page_num.value 284 var reseventseq = frm.reseventseq.value 285 var couponId = frm.couponId.value 286 var ser_res_days = frm.res_days.value 287 288 $.ajax({
289 type: "POST", 290 url: "/resv/axCampResVerUrl.hbb", 291 data:{campseq:campseq}, 292 success: onSuccess, 293 error: onError 294 }); 295 function onSuccess(dataobj) { 296 var url = dataobj+"/thankQRes.hbb?campseq="+campseq+"&res_dt="+res_dt+"&res_edt="+res_edt+"&ser_res_days="+ser_res_days+"&thankq_app="+app_yn+"&thankq_yn=Y&reseventseq="+reseventseq+"&partnseq=&partnmemseq=&site_tp="+site_tp+"&couponId="+couponId; 297 if (app_yn!="Y") url += "&res_path=HM" 298 goResAppUrl(url,app_yn,app_os) 299 } 300 function onError() {} 301 } 302 303 //ìº íì¥ ì¤ìê°ìì½ 304 function goResStep(campseq, campsiteseq, res_dt) { 305 $.ajax({ 306 type: "POST", 307 url: "/resv/axCampResVerUrl.hbb", 308 data:{campseq:campseq}, 309 success: onSuccess, 310 error: onError 311 }); 312 function onSuccess(dataobj) { 313 var url = dataobj+"/thankQRes.hbb?campseq="+campseq+"&campsiteseq="+campsiteseq+"&res_dt="+res_dt+"&thankq_app="+app_yn+"&thankq_yn=Y" 314 if (app_yn!="Y") url += "&res_path=HM" 315 goResAppUrl(url,app_yn,app_os) 316 } 317 function onError() {} 318 } 319 320 //ìº íì¥ ì¤ìê°ìì½ 321 function goResStepDays(campseq, campsiteseq, res_dt, res_edt, res_days) { 322 //ìº íì¥ ì¤ìê°ìì½ 323 var frm = document.form 324 var temporary_yn = frm.temporary_yn.value 325 var wg_pass = frm.wg_pass.value 326 if (frm.betatest_yn.value=='Y') { 327 var rfrm = document.resform 328 $.ajax({ 329 type: "POST", 330 url: "/booking/axCampResUrl.hbb", 331 data:{campseq:campseq,campsiteseq:campsiteseq,res_dt:res_dt,res_edt:res_edt,res_days:res_days}, 332 success: onSuccess, 333 error: onError 334 }); 335 function onSuccess(dataobj) { 336 var url = dataobj.split('?')[0] 337 var res_path = dataobj.split('?')[1] 338 if (res_path=="") res_path = (app_yn=="Y")?"MO":"HM" 339 var enter_path = dataobj.split('?')[2] 340 $('#resform').empty() 341 $('#resform').append("<input type='hidden' name='campseq' value='"+campseq+"'>") 342 $('#resform').append("<input type='hidden' name='campsiteseq' value='"+campsiteseq+"'>") 343 $('#resform').append("<input type='hidden' name='res_dt' value='"+res_dt+"'>") 344 $('#resform').append("<input type='hidden' name='res_edt' value='"+res_edt+"'>") 345 $('#resform').append("<input type='hidden' name='res_days' value='"+res_days+"'>") 346 $('#resform').append("<input type='hidden' name='res_path' value='"+res_path+"'>") 347 $('#resform').append("<input type='hidden' name='enter_path' value='"+enter_path+"'>") 348 $('#resform').append("<input type='hidden' name='temporary_yn' value='"+temporary_yn+"'>") 349 $('#resform').append("<input type='hidden' name='wg_pass' value='"+wg_pass+"'>") 350 //goUrl(url+'?campseq='+campseq+'&campsiteseq='+campsiteseq+'&res_dt='+res_dt+'&res_edt='+res_edt+'&res_days='+res_days+'&res_path='+res_path+'&enter_path='+enter_path+'&temporary_yn='+temporary_yn+'&wg_pass='+wg_pass,'Y','pop3'); 351 document.resform.action = url 352 document.resform.submit() 353 } 354 function onError() {} 355 } else { 356 //ìº íì¥ ì¤ìê°ìì½ 357 var frm = document.form 358 $.ajax({ 359 type: "POST", 360 url: "/resv/axCampResUrl.hbb", 361 data:{campseq:campseq,campsiteseq,res_dt:res_dt,res_edt:res_edt,res_days:res_days}, 362 success: onSuccess, 363 error: onError 364 }); 365 function onSuccess(dataobj) { 366 // var url = dataobj + '&temporary_yn='+temporary_yn 367 // if (app_yn!="Y" && url.indexOf('res_path') < 0) url += "&res_path=HM" 368 // goResAppUrl(url,app_yn,app_os) 369 var url = dataobj.split('?')[0] 370 var res_path = dataobj.split('?')[1] 371 if (res_path=="") res_path = (app_yn=="Y")?"MO":"HM" 372 var enter_path = dataobj.split('?')[2] 373 var access_token = dataobj.split('?')[3] 374 var imseq = "" 375 if (access_token=="") imseq = dataobj.split('?')[4] 376 $('#resform').empty() 377 $('#resform').append("<input type='hidden' name='campseq' value='"+campseq+"'>") 378 $('#resform').append("<input type='hidden' name='campsiteseq' value='"+campsiteseq+"'>") 379 $('#resform').append("<input type='hidden' name='res_dt' value='"+res_dt+"'>") 380 $('#resform').append("<input type='hidden' name='res_edt' value='"+res_edt+"'>") 381 $('#resform').append("<input type='hidden' name='ser_res_days' value='"+res_days+"'>") 382 $('#resform').append("<input type='hidden' name='res_path' value='"+res_path+"'>") 383 $('#resform').append("<input type='hidden' name='enter_path' value='"+enter_path+"'>") 384 $('#resform').append("<input type='hidden' name='temporary_yn' value='"+temporary_yn+"'>") 385 $('#resform').append("<input type='hidden' name='access_token' value='"+access_token+"'>") 386 $('#resform').append("<input type='hidden' name='imseq' value='"+imseq+"'>") 387 $('#resform').append("<input type='hidden' name='thankq_yn' value='Y'>") 388 goUrl(url+'?campseq='+campseq+'&campsiteseq='+campsiteseq+'&res_dt='+res_dt+'&res_edt='+res_edt+'&ser_res_days='+res_days+'&res_path='+res_path+'&enter_path='+enter_path+'&temporary_yn='+temporary_yn+'&access_token='+access_token+'&imseq='+imseq+'&thankq_yn=Y','Y','pop3'); 389 //document.resform.action = url 390 //document.resform.submit() 391 } 392 function onError() {} 393 } 394 } 395 396 //ìº íì¥ ì¤ìê°ìì½ 397 function goResStepDaysNoti(campseq, campsiteseq, res_dt, res_edt, res_days) { 398 //ìº íì¥ ì¤ìê°ìì½ 399 var frm = document.form 400 var temporary_yn = frm.temporary_yn.value 401 if (frm.betatest_yn.value=='Y') { 402 $('#loading').show(); 403 var rfrm = document.resform 404 $.ajax({
405 type: "POST", 406 url: "/booking/axCampResUrl.hbb", 407 success: onSuccess, 408 error: onError 409 }); 410 function onSuccess(dataobj) { 411 var url = dataobj.split('?')[0] 412 var res_path = dataobj.split('?')[1] 413 if (res_path=="") res_path = (app_yn=="Y")?"MO":"HM" 414 var enter_path = dataobj.split('?')[2] 415 $('#resform').empty() 416 $('#resform').append("<input type='hidden' name='campseq' value='"+campseq+"'>") 417 $('#resform').append("<input type='hidden' name='campsiteseq' value='"+campsiteseq+"'>") 418 $('#resform').append("<input type='hidden' name='res_dt' value='"+res_dt+"'>") 419 $('#resform').append("<input type='hidden' name='res_edt' value='"+res_edt+"'>") 420 $('#resform').append("<input type='hidden' name='res_days' value='"+res_days+"'>") 421 $('#resform').append("<input type='hidden' name='res_path' value='"+res_path+"'>") 422 $('#resform').append("<input type='hidden' name='enter_path' value='"+enter_path+"'>") 423 $('#resform').append("<input type='hidden' name='temporary_yn' value='"+temporary_yn+"'>") 424 document.resform.action = url 425 document.resform.submit() 426 } 427 function onError() { $('#loading').hide(); } 428 } else { 429 //ìº íì¥ ì¤ìê°ìì½ 430 var frm = document.form 431 $.ajax({ 432 type: "POST", 433 url: "/resv/axCampResUrl.hbb", 434 data:{campseq:campseq,campsiteseq,res_dt:res_dt,res_edt:res_edt,res_days:res_days}, 435 success: onSuccess, 436 error: onError 437 }); 438 function onSuccess(dataobj) { 439 // var url = dataobj + '&temporary_yn='+temporary_yn 440 // if (app_yn!="Y" && url.indexOf('res_path') < 0) url += "&res_path=HM" 441 // goResAppUrl(url,app_yn,app_os) 442 var url = dataobj.split('?')[0] 443 var res_path = dataobj.split('?')[1] 444 if (res_path=="") res_path = (app_yn=="Y")?"MO":"HM" 445 var enter_path = dataobj.split('?')[2] 446 var access_token = dataobj.split('?')[3] 447 var imseq = "" 448 if (access_token=="") imseq = dataobj.split('?')[4] 449 $('#resform').empty() 450 $('#resform').append("<input type='hidden' name='campseq' value='"+campseq+"'>") 451 $('#resform').append("<input type='hidden' name='campsiteseq' value='"+campsiteseq+"'>") 452 $('#resform').append("<input type='hidden' name='res_dt' value='"+res_dt+"'>") 453 $('#resform').append("<input type='hidden' name='res_edt' value='"+res_edt+"'>") 454 $('#resform').append("<input type='hidden' name='ser_res_days' value='"+res_days+"'>") 455 $('#resform').append("<input type='hidden' name='res_path' value='"+res_path+"'>") 456 $('#resform').append("<input type='hidden' name='enter_path' value='"+enter_path+"'>") 457 $('#resform').append("<input type='hidden' name='temporary_yn' value='"+temporary_yn+"'>") 458 $('#resform').append("<input type='hidden' name='access_token' value='"+access_token+"'>") 459 $('#resform').append("<input type='hidden' name='imseq' value='"+imseq+"'>") 460 $('#resform').append("<input type='hidden' name='thankq_yn' value='Y'>") 461 document.resform.action = url 462 document.resform.submit() 463 } 464 function onError() {} 465 } 466 window.addEventListener('pageshow', function(e) { 467 $('#loading').hide(); 468 }); 469 window.addEventListener('popstate', function() { 470 $('#loading').hide(); 471 }); 472 } 473 474 //ìº íì¥ ìì½ë°ë¡ê°ê¸° 475 function goResDirect(seq,dt,days) { 476 var url = '/resv/view.hbb?cseq='+seq+(dt!=''&&typeof dt!='undefined'?'&res_dt='+dt:'')+(days!=''&&typeof days!='undefined'?'&ser_res_days='+days:'')+(dt
476!=''&&typeof dt!='undefined'?'#booking_dt':'') 477 location.href = url 478 /* 479 $.ajax({ 480 type: "POST", 481 url: "/resv/axCampResVerUrl.hbb", 482 data:{campseq:seq}, 483 success: onSuccess, 484 error: onError 485 }); 486 function onSuccess(dataobj) { 487 var url = dataobj+"/thankQRes.hbb?campseq="+seq+"&thankq_app="+app_yn+"&thankq_yn=Y&partnseq=&partnmemseq="; 488 if (app_yn!="Y") url += "&res_path=HM" 489 goResAppUrl(url,app_yn,app_os) 490 } 491 function onError() {} 492 */ 493 } 494 495 //ìº íì¥ ìì½ë°ë¡ê°ê¸° 496 function goResDirectDt(seq,dt,edt) { 497 var url = '/resv/view.hbb?cseq='+seq+(dt!=''&&typeof dt!='undefined'?'&res_dt='+dt:'')+(edt!=''&&typeof edt!='undefined'?'&res_edt='+edt:'')+(dt!=''&&typeof dt!='undefined'?'#booking_dt':'') 498 location.href = url 499 /* 500 $.ajax({ 501 type: "POST", 502 url: "/resv/axCampResVerUrl.hbb", 503 data:{campseq:seq}, 504 success: onSuccess, 505 error: onError 506 }); 507 function onSuccess(dataobj) { 508 var url = dataobj+"/thankQRes.hbb?campseq="+seq+"&thankq_app="+app_yn+"&thankq_yn=Y&partnseq=&partnmemseq="; 509 if (app_yn!="Y") url += "&res_path=HM" 510 goResAppUrl(url,app_yn,app_os) 511 } 512 function onError() {} 513 */ 514 } 515 516 //ìº íì¥ ìì½ë°ë¡ê°ê¸° 517 function goMemResDirect(seq) { 518 519 alert('íìë¡ê·¸ì¸í ìì½íì¤ ì ììµëë¤.'); 520 521 } 522 523 //ìº íì¥ ìì½ë°ë¡ê°ê¸° 524 function goResEmpty(seq,emptyseq) { 525 $.ajax({ 526 type: "POST", 527 url: "/resv/axCampResVerUrl.hbb", 528 data:{campseq:seq}, 529 success: onSuccess, 530 error: onError 531 }); 532 function onSuccess(dataobj) { 533 var url = dataobj+"/thankQRes.hbb?campseq="+seq+"&emptyseq="+emptyseq+"&thankq_app="+app_yn+"&thankq_yn=Y&partnseq=&partnmemseq="; 534 if (app_yn!="Y") url += "&res_path=HM" 535 goResAppUrl(url,app_yn,app_os) 536 } 537 function onError() {} 538 } 539 540 //ìº íì¥ ì¤ìê°ìì½ 541 function goResStep2(campseq, campsiteseq) { 542 var frm = document.form 543 var res_dt = frm.res_dt.value 544 var region = frm.region.value 545 var site_tp = frm.site_tp.value 546 var tema = frm.tema.value 547 var keyword = frm.keyword.value 548 var disc_yn = frm.disc_yn.value 549 var camp_tp = frm.camp_tp.value 550 var page = frm.page_num.value 551 var reseventseq = frm.reseventseq.value 552 var couponId = frm.couponId.value 553 var res_url = res_dt+"$"+region+"$"+site_tp+"$"+tema+"$"+keyword+"$"+disc_yn+"$"+camp_tp+"$"+page 554 555 $.ajax({ 556 type: "POST", 557 url: "/inc/axCampResVerUrl.hbb", 558 data:{campseq:campseq}, 559 success: onSuccess, 560 error: onError 561 }); 562 function onSuccess(dataobj) { 563 var url = dataobj+"/thankQRes.hbb?campseq="+campseq+"&campsiteseq="+campsiteseq+"&res_dt="+res_dt+"&thankq_app="+app_yn+"&thankq_yn=Y&reseventseq="+reseventseq+"&partnseq=&partnmemseq=&site_tp="+site_tp+"&couponId="+couponId; 564 if (app_yn!="Y") url += "&res_path=HM" 565 goResAppUrl(url,app_yn,app_os) 566 } 567 function onError() {} 568 } 569 570 //ìº íì¥ ì´ë²¤í¸ìì½ 571 function goResEvent(cseq) { 572 var frm = document.form 573 var campseq = cseq 574 var res_dt = frm.res_dt.value 575 var region = frm.region.value 576 var site_tp = frm.site_tp.value 577 var tema = frm.tema.value 578 var keyword = frm.keyword.value 579 var disc_yn = frm.disc_yn.value 580 var camp_tp = frm.camp_tp.value 581 var page = frm.page_num.value 582 var reseventseq = frm.reseventseq.value 583 var res_url = res_dt+"$"+region+"$"+site_tp+"$"+tema+"$"+keyword+"$"+disc_yn+"$"+camp_tp+"$"+page 584 $.ajax({ 585 type: "POST", 586 url: "/inc/axCampResVerUrl.hbb", 587 data:{campseq:campseq}, 588 success: onSuccess, 589 error: onError 590 }); 591 function onSuccess(dataobj) { 592 var url = dataobj+"/thankQRes.hbb?campseq="+campseq+"&res_dt="+res_dt+"&thankq_app="+app_yn+"&thankq_yn=Y&reseventseq="+reseventseq 593 if (app_yn!="Y") url += "&res_path=HM" 594 goResAppUrl(url,app_yn,app_os) 595 } 596 function onError() {} 597 } 598 599 //ìº íì¥ ì¤ìê°ìì½ 600 function goResPop(cseq) { 601 var campseq = cseq 602 var res_dt = document.form.res_dt.value 603 var region = document.form.region.value 604 var site_tp = document.form.site_tp.value 605 var tema = document.form.tema.value 606 var keyword = document.form.keyword.value 607 var disc_yn = document.form.disc_yn.value 608 var camp_tp = document.form.camp_tp.value 609 var page = document.form.page_num.value 610 var res_url = res_dt+"$"+region+"$"+site_tp+"$"+tema+"$"+keyword+"$"+disc_yn+"$"+camp_tp+"$"+page 611 $.ajax({
612 type: "POST", 613 url: "/inc/axCampResVerUrl.hbb", 614 data:{campseq:campseq}, 615 success: onSuccess, 616 error: onError 617 }); 618 function onSuccess(dataobj) { 619 var url = dataobj+"/thankQRes.hbb?campseq="+campseq+"&res_dt="+res_dt+"&thankq_app="+app_yn+"&thankq_yn=Y" 620 if (app_yn!="Y") url += "&res_path=HM" 621 goResAppUrl(url,app_yn,app_os) 622 } 623 function onError() {} 624 } 625 626 //ìº íì¥ ìì½íì¸ 627 function goResView(campseq,reserveseq,status,page,page_k) { 628 var res_url = "myResList$"+status+"$"+page+"$"+page_k 629 $.ajax({ 630 type: "POST", 631 url: "/resv/axCampResVerUrl.hbb", 632 data:{campseq:campseq}, 633 success: onSuccess, 634 error: onError 635 }); 636 function onSuccess(dataobj) { 637 var url = dataobj+"/thankQRes.hbb?campseq="+campseq+"&reserveseq="+reserveseq+"&thankq_app="+app_yn+"&thankq_rurl="+res_url+"&thankq_yn=Y" 638 if (app_yn!="Y") url += "&res_path=HM" 639 goResAppUrl(url,app_yn,app_os) 640 } 641 function onError() {} 642 } 643 //ìº íì¥ ìì½íì¸ 644 function goResCertView(campseq,reserveseq,status,rnd_num) { 645 $.ajax({ 646 type: "POST", 647 url: "/resv/axCampResVerUrl.hbb", 648 data:{campseq:campseq}, 649 success: onSuccess, 650 error: onError 651 }); 652 function onSuccess(dataobj) { 653 var url = dataobj+"/thankQRes.hbb?campseq="+campseq+"&reserveseq="+reserveseq+"&thankq_app="+app_yn+"&rnd_num="+rnd_num+"&thankq_yn=Y" 654 if (app_yn!="Y") url += "&res_path=HM" 655 goResAppUrl(url,app_yn,app_os) 656 } 657 function onError() {} 658 } 659 //ìº íì¥ ì¥ë°ìì½íì¸ 660 function goResLongView(campseq,reslongseq,status,page,page_k) { 661 var res_url = "myResList$"+status+"$"+page+"$"+page_k 662 $.ajax({ 663 type: "POST", 664 url: "/inc/axCampResVerUrl.hbb", 665 data:{campseq:campseq}, 666 success: onSuccess, 667 error: onError 668 }); 669 function onSuccess(dataobj) { 670 var url = dataobj+"/thankQRes.hbb?campseq="+campseq+"&reslongseq="+reslongseq+"&thankq_app="+app_yn+"&thankq_rurl="+res_url+"&thankq_yn=Y" 671 if (app_yn!="Y") url += "&res_path=HM" 672 goResAppUrl(url,app_yn,app_os) 673 } 674 function onError() {} 675 } 676 677 //ì´ë²¤í¸ ì¼í몰 í¸ì¶ 678 function goShopPop(gseq) { 679 location.href= 'https://m.shop.thankqcamping.com/shopMain.hbb?ser_good_id='+gseq 680 681 } 682 683 //íë¨ë©ë´ ê²ì 684 function Bmenu(url) { 685 $("#Lmnu").html('<div class="modal-dialog"><div class="modal-content"><div id="spinner_pop"></div></div></div>'); 686 //$("#spinner_pop").show(); 687 location.href = url 688 } 689 690 //모ë¬ì°½ ë«ê¸° 691 function modalClose() { 692 $(".close").click(); 693 } 694 695 //íí¸ë íìë¡ê·¸ì¸ 696 function partnLoginAp() { 697 var frm = document.loginForm 698 699 if(frm.h_telno.value=="") { 700 alert("í´ëí°ë²í¸ë¥¼ ì ë ¥í´ì£¼ì¸ì.") 701 frm.h_telno.focus() 702 return 703 } else 704 if(frm.pwd.value=="") { 705 alert("ë¹ë°ë²í¸ë¥¼ ì ë ¥í´ì£¼ì¸ì.") 706 frm.pwd.focus() 707 return 708 } else { 709 //frm.ret_url.value = encodeURIComponent(frm.ret_url.value) 710 frm.action = "https://m.thankqcamping.com/join/login_ok.hbb" 711 frm.target = "job" 712 frm.submit(); 713 } 714 } 715 716 //ë°°ëë ¸ì¶ 717 function axBannerViewCount(c) { 718 if ($("#BN"+c)) { 719 if($("#BN"+c).html().indexOf("B") > -1 && $("#Lmnu").attr('class').indexOf('in') < 0) { 720 $.ajax({
721 type: "POST", 722 url: "/inc/axBannerViewCount.hbb", 723 data:{ seq:$("#BN"+c).html().replace("B","") }, 724 success: onSuccess, 725 error: onError 726 }); 727 function onSuccess(dataobj) {} 728 function onError() {} 729 } 730 } 731 } 732 //ëª¨ë¬ íì´ì§ ì´ë 733 function goModalReUrl(url) { 734 goUrl(url,'Y','pop') 735 } 736 737 //먹거리구매 ìì¸íì¸ 738 function goResGoodView(campseq,resgoodseq) { 739 $.ajax({ 740 type: "POST", 741 url: "/inc/axCampResVerUrl.hbb", 742 data:{campseq:campseq}, 743 success: onSuccess, 744 error: onError 745 }); 746 function onSuccess(dataobj) { 747 var url = dataobj+"/thankQRes.hbb?campseq="+campseq+"&resgoodseq="+resgoodseq+"&thankq_app="+app_yn+"&thankq_yn=Y" 748 if (app_yn!="Y") url += "&res_path=HM" 749 goResAppUrl(url,app_yn,app_os) 750 } 751 function onError() {} 752 } 753 754//ë©ì¸ìë 755function mainNoti(id,tit,msg,url) { 756 if(get_cookie("mainNoti_"+id)==null) { 757 setCookie("mainNoti_"+id, "Y", false) 758 txt = "<div class=\"pop_conts\">" 759 txt += " <p class=\"txt1\">"+tit+"</p>" 760 txt += " <p class=\"txt2\">"+msg+"</p>" 761 txt += "</div>" 762 txt += "<span href=\"#\" class=\"sprite btn_layerClose2\" onclick=\"ly_close()\"></span>" 763 txt += "<button type=\"button\" class=\"btn\" onClick=\"ly_close();"+url+"\">ë°ë¡ê°ê¸°</button>" 764 $('#divMainNoti').html(txt); 765 ly_open(); 766 } 767} 768//ì¸ë¶ì¤íì°½ì´ê¸° 769function outOpen(url) { 770 if(app_yn=='Y') { 771 if ((app_os=='android' && parseInt(app_ver) < 51) || (app_os=='ios' && parseInt(app_ver) < 38)) { 772 open(url,'_blank','') 773 } else { 774 if(app_os=='ios') { 775 goIosAp('openBrowser',url) 776 } else { 777 try { 778 location.href = "blank://" + url 779 } catch(e) { 780 open(url,'_blank','') 781 } 782 } 783 } 784 } else { 785 open(url,'','') 786 } 787} 788 789</script>
789 790
790<script src="/js/m_com.js?version=20260914-1"></script>
790 791
791<script src="/js/m_map.js?version=20260914-1"></script>
791 792
792<script src="/js/m_sns.js?version=20260914-1"></script>
792 793
793<script src="/js/join.js?version=20260914-1"></script>
793 794
794<script src="/js/resv.js?version=20260914-1"></script>
794 795
795<script src="/js/talk.js?version=20260914-1"></script>
795 796
796<script src="/js/cs.js?version=20260914-1"></script>
796 797
797<script src="/js/coupon.js?version=20260914-1"></script>
797 798 799
799<script src="/js/my.js?version=20260914-1"></script>
799 800
800<script src="/js/trans.js?version=20260914-1"></script>
800 801 802
802<script>
vendor: 343 bytes, lines 802-807
802 803 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 804 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 805 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 806 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 807 ga('create', '
807UA-64792179-1
vendor: 42 bytes, lines 807-809
807', 'auto'); 808 ga('send', 'pageview'); 809
809//document.ondragstart = new Function('return false'); // ëëê·¸ ë°©ì§ 810 //document.onselectstart = new Function('return false'); // ì í ë°©ì§ 811 //document.oncontextmenu = new Function('return false'); // ì í ë°©ì§ 812 </script>
812 813 <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 67 bytes, lines 813-814
813 814 <script async src="https://www.googletagmanager.com/gtag/js?id=
814G-EZH75RFPSZ
vendor: 15 bytes, lines 814-815
814"></script> 815
815<script> 816
vendor: 142 bytes, lines 816-819
816window.dataLayer = window.dataLayer || []; 817 function gtag(){dataLayer.push(arguments);} 818 gtag('js', new Date()); 819 gtag('config', '
819G-EZH75RFPSZ
vendor: 7 bytes, lines 819-820
819'); 820
820</script>
820 821 <!-- Google tag (gtag.js) --> 822
822<script async src="https://www.googletagmanager.com/gtag/js?id=GTM-5WNWZSZ"></script>
822 823
823<script> 824 window.dataLayer = window.dataLayer || []; 825 function gtag(){dataLayer.push(arguments);} 826 gtag('js', new Date()); 827 gtag('config', 'GTM-5WNWZSZ'); 828 </script>
828 829 <!-- ë´ ë§¤ëì --> 830
830<script src="https://cdn-botmanager.stclab.com/agents/client/javascript/botmanager-browser-agent.js" async></script>
830 831
831<script> 832 (function (cfg) { 833 cfg.tenantId = 'TN251104-8C1A44EC'; 834 cfg.domainName = 'thankqcamping.com'; 835 cfg.customId = ''; 836 cfg.serverUrl = 'https://botmanager.stclab.com/api/v1/macro'; 837 })(window['BotManager-config'] || (window['BotManager-config'] = {})); 838 </script>
838 839 <style> 840 body { background: #f9f9f9; } 841 </style> 842</head> 843<div id="loading"><img id="loading-image" src="/images/loading.svg" alt="Loading..." /></div> 844<div id="site_url" style="display:none;">https://m.thankqcamping.com</div> 845<div id="shop_url" style="display:none;">https://m.thankqcamping.com</div> 846<iframe name="job" width="0" height="0" style="display:none;"></iframe> 847<form name="logoutForm" method="post"> 848<input type="hidden" name="reurl" value="https://m.thankqcamping.com/join/logout.hbb"> 849</form> 850<form name="nearbyform" method="post"> 851<input type="hidden" name="mem_lat"> 852<input type="hidden" name="mem_lng"> 853<input type="hidden" name="nearby" value="Y"> 854</form>
855<script> 856document.addEventListener("DOMContentLoaded", function(){ 857 if(app_yn != "Y"){ 858 // ì± ì ë QR ì½ë ì¶ê° 859 const newDiv = document.createElement("div"); 860 newDiv.classList.add("background_content"); 861 862 newDiv.innerHTML = ` 863 <div class="content_group"> 864 <a href="#"> 865 <img src="/images/deep_qr.svg" alt="ë¥ë§í¬ QR" class="img_qr"> 866 <img src="/images/deep_logo.png" alt="LOGO" class="img_logo"> 867 </a> 868 <div class="text_box"> 869 <p>ì±ì ì¤ì¹íë©´<br>ë ë§ì ííì<br>ë°ì ë³¼ ì ìì´ì!</p> 870 <span>ì¹´ë©ë¼ë¡ QRì½ë를 ì¤ìºí´ë³´ì¸ì</span> 871 </div> 872 </div> 873 `; 874 875 const firstChild = document.getElementById("wrap").firstChild; 876 document.getElementById("wrap").insertBefore(newDiv, firstChild); 877 } 878}) 879</script>
879 880<!-- poplayer --> 881<div id="popup_alert" class="modal_wrap wd_auto"> 882 <div class="modal_center"> 883 <div class="md_cont"><p></p></div> 884 <!-- ë²í¼2ê°ì¼ë md_buttonì í´ëì¤ type2 ì¶ê° --> 885 <div class="md_button"> 886 <button class="btn_ok" type="button" onclick="action_popup.close('#popup_alert')">íì¸</button> 887 </div> 888 </div> 889</div> 890<div id="popup_succ_alert" class="modal_wrap wd_auto type2"> 891 <!-- 룰ë ë¹ì²¨ì modal_center bg_fire ì¶ê°--> 892 <div id="succ_modal_center" class="modal_center"> 893 <div class="md_cont"> 894 <p id="succ_alert_tit" class="title fwb"></p> 895 <p id="succ_alert_cont" class="box"> 896 </p> 897 </div> 898 <!-- ë²í¼2ê°ì¼ë md_buttonì í´ëì¤ type2 ì¶ê° --> 899 <div class="md_button"> 900 <button class="btn_succ_ok" type="button" onclick="action_popup.close('#popup_succ_alert')">íì¸</button> 901 </div> 902 </div> 903</div> 904<div id="popup_confirm" class="modal_wrap wd_auto"> 905 <div class="modal_center"> 906 <div class="md_cont"><p></p></div> 907 <!-- ë²í¼2ê°ì¼ë md_buttonì í´ëì¤ type2 ì¶ê° --> 908 <div class="md_button type2"> 909 <button class="btn_cancel rounded" type="button" onclick="action_popup.close('#popup_confirm')">ì·¨ì</button> 910 <button class="btn_confirm_ok rounded" type="button" onclick="action_popup.close('#popup_confirm')">íì¸</button> 911 </div> 912 </div> 913</div> 914<!-- poplayer --> 915<div class="pop_noti_set pop_txt_set modal_wrap" id="pop_ad_notice"> 916 <div class="modal_center"> 917 <div class="pop_noti on"> 918 <p class="tit fwb pt0"></p> 919 <p class="btm_border"></p> 920 </div> 921 <div class="md_button"> 922 <button type="button" class="btn_gray" onClick="action_popup.close('#pop_ad_notice')">íì¸</button> 923 </div> 924 </div> 925 <!-- <div class="modal"></div> --> 926</div> 927<div id="popup_modal" class="modal_wrap wd_auto"> 928 <div class="modal_center"> 929 <div class="md_cont"><p></p></div> 930 <!-- ë²í¼2ê°ì¼ë md_buttonì í´ëì¤ type2 ì¶ê° --> 931 <div class="md_button"> 932 <button class="btn_confirm_ok rounded" type="button" onclick="action_popup.close('#popup_modal')">íì¸</button> 933 </div> 934 </div> 935</div> 936<div class="pop_layer_set" id="pop_toast_noti"> 937 <div class="pop_layer recent_layer incart_layer" style="z-index: 800"> 938 <p class="inmycart" id="toast_txt"></p> 939 </div> 940</div> 941<div class="pop_layer_set" id="pop_floating_noti"> 942 <div class="pop_layer recent_layer incart_layer" style="z-index: 800"> 943 <p class="floating-button" id="floating_txt"></p> 944 </div> 945</div> 946<!-- 기본 ëª¨ë¬ popup --> 947<div class="pop_wp" id="pop_modal"> 948 <div class="pop_layer_set pop_noti_set on"> 949 <div id="modal_detail" class="pop_layer recent_layer dome_layer"></div> 950 <div class="modal" style="display: block"></div> 951 </div> 952</div> 953<!-- //기본 ëª¨ë¬ popup --> 954 955<style> 956 #marker-info-panel-wrap {margin-top: 10px;} 957 .re-search{ 958 position: absolute; 959 top: 2rem; 960 left: 50%; 961 transform: translateX(-50%); 962 background: #fff url(../images/re-search.png) 1rem center no-repeat; 963 color: #555; 964 background-size: 1rem; 965 font-weight: 500; 966 font-size: 12px; 967 border: transparent; 968 padding: .75rem 1rem .75rem 2.5rem; 969 border-radius: 100rem; 970 box-shadow: 0 0 1rem .5rem rgba(0, 0, 0, 0.05); 971 } 972 .next-page{ 973 position: inherit; 974 left: 1rem; 975 color: #555; 976 font-weight: 500; 977 font-size: 12px; 978 border: transparent; 979 padding: 0 10px; 980 height: 35px; 981 justify-content: center; 982 align-items: center; 983 border-radius: 100rem; 984 background: #fff; 985 box-shadow: 0 0 1rem .5rem rgba(0 ,0, 0, 0.05); 986 } 987 .thank-q-marker { 988 position: relative; 989 background: #fff; 990 color: #f27226; 991 border: 1px solid #f27226; 992 padding: .25rem .5rem; 993 border-radius: .5rem; 994 white-space: pre; 995 } 996 .thank-q-marker:after { 997 content: ""; 998 position: absolute; 999 bottom: -5px; 1000 left: 50%; 1001 transform: translateX(-50%) rotate(-135deg); 1002 width: 7px; 1003 height: 7px; 1004 border-left: 1px solid #f27226; 1005 border-top: 1px solid #f27226; 1006 background: #fff; 1007 } 1008 .thank-q-marker.active { 1009 background: #f27226; 1010 color: #fff; 1011 border: 1px solid #ffccad; 1012 box-shadow: 0 0 3px 1px rgba(242, 114, 38, 0.5); 1013 } 1014 .thank-q-marker.active:after { 1015 content: ""; 1016 position: absolute; 1017 bottom: -5px; 1018 left: 50%; 1019 transform: translateX(-50%) rotate(-135deg); 1020 width: 7px; 1021 height: 7px; 1022 border-left: 1px solid #fff; 1023 border-top: 1px solid #fff; 1024 background: #f27226; 1025 } 1026 .marker-info{ 1027 position: relative; 1028 bottom: .5rem; 1029 margin: 0 auto; 1030 padding: 1.5rem; 1031 display: flex; 1032 gap: 1rem; 1033 /* width: 280px; */ 1034 height: 196px; 1035 background: #fff; 1036 border-radius: .5rem; 1037 box-shadow: 0 0 1rem .5rem rgba(0, 0, 0, 0.05); 1038 } 1039 .marker-info .pic{ 1040 overflow:hidden; 1041 position: relative; 1042 width: 120px; 1043 height: 160px; 1044 background: #eee; 1045 border-radius: .5rem; 1046 } 1047 .marker-info .pic img{ 1048 position: absolute; 1049 top: 50%; 1050 left: 50%; 1051 transform: translate(-50%,-50%); 1052 width: auto; 1053 height: 100%; 1054 } 1055 .marker-info .info{ 1056 display: flex; 1057 flex: 1 1 0%; 1058 flex-direction: column; 1059 -webkit-box-pack: justify;
1060 justify-content: space-between; 1061 overflow: hidden; 1062 text-overflow: ellipsis; 1063 } 1064 .marker-info .info dt{ 1065 word-break: keep-all; 1066 font-weight: 500; 1067 } 1068 .marker-info .info dd{ 1069 display: flex; 1070 flex: 1 1 0%; 1071 flex-direction: column; 1072 -webkit-box-pack: justify; 1073 justify-content: space-between; 1074 overflow: hidden; 1075 text-overflow: ellipsis; 1076 } 1077 .marker-info .info .region{ 1078 margin-top: .5rem; 1079 font-size: 12px; 1080 color: #666; 1081 } 1082 .marker-info .info .price{ 1083 margin-top: 1rem; 1084 font-size: 16px; 1085 font-weight: 700; 1086 } 1087 .reserv{ 1088 display: flex; 1089 justify-content: center; 1090 align-items: center; 1091 width: 100%; 1092 height: 35px; 1093 background: #f27226; 1094 color: #fff; 1095 border-radius: .5rem; 1096 border: transparent; 1097 } 1098 .map-bottom-wrap{ 1099 margin-bottom: 20px; 1100 max-width: 640px; 1101 min-height: 35px; 1102 position: fixed; 1103 bottom: 0; 1104 left: 50%; 1105 transform: translateX(-50%); 1106 width: 100%; 1107 z-index: 100; 1108 } 1109 .search-list-btn{ 1110 position: relative; 1111 left: 50%; 1112 transform: translateX(-50%); 1113 background: #222 url(../images/format_list_bulleted.png) 1.5rem center no-repeat; 1114 background-size: 1rem; 1115 color: #fff; 1116 font-weight: 500; 1117 font-size: 12px; 1118 border: transparent; 1119 padding: .75rem 1.5rem .75rem 3.5rem; 1120 border-radius: 100rem; 1121 box-shadow: 0 0 1rem .5rem rgba(0 ,0, 0, 0.05); 1122 } 1123 .nearby-btn{ 1124 position: inherit; 1125 right: 10px; 1126 border: 1px solid #DEE2E6; 1127 background: #fff; 1128 width: 35px; 1129 height: 35px; 1130 border-radius: 100rem; 1131 box-shadow: 0 0 1rem .5rem rgba(0 ,0, 0, 0.05); 1132 } 1133 .nearby-btn img{ 1134 width: 15px; 1135 height: 15px; 1136 transform: translateY(3px); 1137 } 1138 .maplist{ 1139 display: block; 1140 padding: 0 24px 24px; 1141 background: #FAFAFA; 1142 height: calc(100dvh - 61px - 48px); 1143 overflow-y: scroll; 1144 -ms-overflow-style: none; 1145 } 1146 .maplist::-webkit-scrollbar{ 1147 display:none; 1148 } 1149 .camp_swiper .swiper-wrapper{ align-items: stretch; max-height: 220px; } 1150 .camp_swiper .swiper-wrapper .swiper-slide{ height: auto; } 1151 .none-info{ 1152 position: absolute; 1153 top: 50%; 1154 left: 50%; 1155 transform: translate(-50%, -50%); 1156 border-radius: 5px; 1157 padding: 16px 20px; 1158 z-index: 1; 1159 width: calc(100% - 48px); 1160 max-width: 360px; 1161 color: #fff; 1162 text-align: center; 1163 } 1164 .none-info:before{ 1165 content: ""; 1166 display: block; 1167 position: absolute; 1168 top: 50%; 1169 left: 50%; 1170 transform: translate(-50%, -50%); 1171 border-radius: 5px; 1172 background: #222; 1173 z-index: -1; 1174 width: calc(100% - 8px); 1175 max-width: 360px; 1176 height: 75px; 1177 color: #fff; 1178 text-align: center; 1179 opacity: 0.7; 1180 } 1181</style> 1182<body> 1183<div class="wrap" id="wrap" style="padding-bottom: 0;"> 1184 <div class="wrap_in"> 1185 1186 <div class="head"> 1187 <div class="head_in"> 1188 1189 <a href="javascript:popClose('');" class="btn_back">back</a> 1190 1191 <div class="search_div" id="top_search_input"> 1192 <span class="icon_search"></span> 1193 <div class="text_g"><span class="text">ì§ìãë ì§ãì¸ìì¼ë¡ ìì ê²ì</span></div> 1194 <!-- <div class="text_g"><span class="text">ê²ìì´ãmm.dd~mm.dd (në°)ãì±ì¸2/ìì¸1</span></div> --> 1195 </div> 1196 1197 1198 <!-- ë©ì¸ììë§ ë ¸ì¶ --> 1199 1200 <a class="btn_menu" onClick="r_menu('');" style="display:none;">menu</a> 1201
1201<script> 1202 $(document).ready(function(){ 1203 const close = '' 1204 if(!opener && close != 'True') { 1205 $('.btn_menu').show() 1206 } 1207 }); 1208 </script>
1208 1209 1210 1211 <!-- ìº í¡ìì¸ììë§ ë ¸ì¶ --> 1212 1213 </div> 1214 </div><!--// head --> 1215 1216 1217<div class="tot_menu"> 1218 <div class="tot_menu_in mCscroll"> 1219 <div class="log_box"> 1220 1221 <div class="pf_set clear"> 1222 <div class="pic"></div> 1223 <div class="txt_box"> 1224 <p class="tit1"> 1225 <a 1226 href="javascript:location.replace('/join/login.hbb?reurl=%2Fsearch%2FmapSearch%2Ehbb');$('.tot_menu .clo').click();">ë¡ê·¸ì¸</a>ì´ 1227 íìí©ëë¤. 1228 </p> 1229 <p class="txt">Welcome to Q</p> 1230 </div> 1231 </div> 1232 <div class="point_box"> 1233 <a href="/join/login.hbb" class="p_div"> 1234 <div class="p_div_list"> 1235 <div class="p_div_list_value">0</div> 1236 <div class="p_div_list_title">Q-Point</div> 1237 </div> 1238 </a> 1239 <!--a href="/join/login.hbb" class="p_div"> 1240 <div class="p_div_list"> 1241 <div class="p_div_list_value">0</div> 1242 <div class="p_div_list_title">ì ì²´ì 립ê¸</div> 1243 </div> 1244 </a--> 1245 <a href="/join/login.hbb" class="p_div"> 1246 <div class="p_div_list"> 1247 <div class="p_div_list_value">0</div> 1248 <div class="p_div_list_title">ì¿ í°</div> 1249 </div> 1250 </a> 1251 <a href="/join/login.hbb" class="p_div"> 1252 <div class="p_div_list"> 1253 <div class="p_div_list_value">0</div> 1254 <div class="p_div_list_title">íì´ë£°ë </div> 1255 </div> 1256 </a> 1257 </div> 1258 1259 <button type="button" class="clo"></button> 1260 </div> 1261 <!-- //log_box --> 1262 1263 <!-- rolling_banner --> 1264 <div class="rolling_banner" onClick="location.href='/roulette/intro.hbb';"> 1265 <p class="event_name">ìë¡ìì§ íì´ë£°ë ì´ë²¤í¸</p> 1266 <div class="rolling_wrap"> 1267 <ul> 1268 <li>방문í기 ìì±íê³ </li> 1269 <li>ì¶ì ì²´í¬íê³ </li> 1270 <li>ìº íì¥ ë°©ë¬¸íê³ </li> 1271 <li>ìí 구매íê³ </li> 1272 </ul> 1273 </div> 1274 <p class="dp_ib"><span class="strong">ë¬´ë£ íì´ë£°ë ì´ì©ê¶</span> ë°ê¸°</p> 1275 </div> 1276 <!-- //rolling_banner --> 1277 <div class="aside"> 1278 <ul class="aside_ul"> 1279 <li class="res"> 1280 <a href="#n">ìì½<span class="arr"></span></a> 1281 <div class="m_div" style="display: none"> 1282 <ul> 1283 <li><a href="/resv/list.hbb?site_tp=BB000">ì¤í ìº í</a></li> 1284 <li><a href="/resv/list.hbb?site_tp=BB001">ê¸ë¨í</a></li> 1285 <li><a href="/resv/list.hbb?site_tp=BB002">ì¹´ë¼ë°</a></li> 1286 <li><a href="/resv/list.hbb?site_tp=BB003">íì </a></li> 1287 <li><a href="/resv/list.hbb?site_tp=BB006&res_dt=20260926&res_edt=20260926">í¼í¬ë</a></li> 1288 </ul> 1289 </div> 1290 </li> 1291 <li class="shop"> 1292 <a href="#n">ì¼í<span class="arr"></span></a> 1293 <div class="m_div" style="display: none"> 1294 <ul> 1295 <li><a href="/shop/index.hbb">ì¼íí</a></li> 1296 <li><a href="/shop/event.hbb">íìí¹ê°</a></li> 1297 <li><a href="/shop/list.hbb?cate=010">ìº íì©í</a></li> 1298 <li><a href="/shop/list.hbb?cate=020">먹거리</a></li> 1299 <li style="display: none;"><a href="/shop/brand_list.hbb">ë¸ëë</a></li> 1300 <li><a href="/shop/review_list.hbb">리뷰존</a></li> 1301 </ul> 1302 </div> 1303 </li> 1304 <li class="plan"> 1305 <a href="#n">기íì <span class="arr"></span></a> 1306 <div class="m_div" style="display: none"> 1307 <ul> 1308 <li><a href="/cs/event.hbb?bbs_gb=AB008">ë©ì¸ê¸°íì </a></li> 1309 <li><a href="/cs/collect.hbb?tp=S">ì¼í기íì </a></li> 1310 </ul> 1311 </div> 1312 </li> 1313 <li class="event"> 1314 <a href="/cs/co_event.hbb?bbs_gb=AB017">ì´ë²¤í¸</a> 1315 </li> 1316 <li class="camt"> 1317 <a href="/talk/list.hbb">ìº í¡</a> 1318 </li> 1319 1320 <li class="camt"> 1321 <a href="javascript:$('.clo').click();goUrl('/join/non/ser_reservation.hbb','N','');">ë¹íììì½ì¡°í</a> 1322 </li> 1323 1324 </ul> 1325 </div> 1326 <!-- //aside --> 1327 1328 <div class="banner_div" id="banner_HD"> 1329 1330 <!--a href="#n"><img src="/images/banner01.png" alt=""></a--> 1331 </div> 1332 1333 <div class="aside type2"> 1334 <ul class="aside_ul"> 1335 <li class="cus on"> 1336 <div class="m_div"> 1337 <ul> 1338 <li><a href="/cs/notice.hbb">ê³µì§ì¬í</a></li> 1339 <li><a href="/cs/faq.hbb">ì주묻ëì§ë¬¸</a></li> 1340 <li><a href="javascript:outOpen('http://about.thankqcamping.com/contact.html');">ì í´ë¬¸ì</a></li> 1341 <li><a href="tel:02-6959-5622" id="com_tel">
1341ìë´ìì°ê²°</a></li> 1342 1343 </ul> 1344 <p><span>ìë´ìê° : </span>íì¼ 9:30~18:00 (ì ì¬ìê° 12:30~13:30)</p> 1345 </div> 1346 </li> 1347 </ul> 1348 </div> 1349 1350 1351 1352 <div class="aside_btns"> 1353 <ul> 1354 1355 <li class="log"> 1356 <a 1357 onClick="javascript:location.replace('/join/login.hbb?reurl=%2Fsearch%2FmapSearch%2Ehbb');$('.tot_menu .clo').click();">ë¡ê·¸ì¸</a> 1358 </li> 1359 <li class="my"><a onClick="javascript:location.href='/join/join.hbb';$('.tot_menu .clo').click();">íìê°ì </a></li> 1360 1361 </ul> 1362 </div> 1363 </div> 1364 <!-- //tot_menu_in --> 1365</div> 1366<!-- //tot_menu --> 1367<div class="sr_top" id="headFilter"> 1368 1369 <div class="sr_condi"> 1370 <div style="display: flex;"> 1371 <div class="region" id="region_txt" onclick="javascript:goRegionSearch('','','');" style="display:none; margin-left: 24px; border-radius: 19px; background-color: #f7f7f7;height: 38px; padding: 0 15px; letter-spacing: -0.58px; font-size: 12px; color: #1f1f1f; font-weight: 500; line-height: 37px; text-align: center; width: 90px;">ì§ìì í</div> 1372 <div class="date" id="spnResDtInfo" onClick="javascript:openLayer('pop_date_sel')" style="display:none;margin-left: 8px; border-radius: 19px; background-color: #f7f7f7;height: 38px; padding: 0 15px; letter-spacing: -0.58px; font-size: 12px; color: #1f1f1f; font-weight: 500; line-height: 37px; text-align: center;"> 1373 1374 ë ì§ì í 1375 1376 </div> 1377 1378 <div> 1379 <div class="swiper-container sr_condi_swiper"> 1380 <ul class="swiper-wrapper"> 1381 1382 <li class="swiper-slide"> 1383 <button type="button" class="keyword_button tag_name" name="ser_get_coupon_yn" value="Y">ì¦ìí ì¸</button> 1384 </li> 1385 <li class="swiper-slide"> 1386 <button type="button" class="keyword_button tag_name" name="ser_disc_yn" value="Y">í ì¸í¹ê°</button> 1387 </li> 1388 <li class="swiper-slide"> 1389 <button type="button" class="keyword_button tag_name" name="ser_camp_spec" value="BM013">물ëì´ì¥ 구ë¹</button> 1390 </li> 1391 <li class="swiper-slide"> 1392 <button type="button" class="keyword_button tag_name" name="ser_kid" value="Y">ìì´ë¤ ëì´ìì¤ êµ¬ë¹</button> 1393 </li> 1394 <li class="swiper-slide"> 1395 <button type="button" class="keyword_button tag_name" name="ser_camp_spec" value="BP000">ë°ë ¤ë물 ëë°</button> 1396 </li> 1397 <li class="swiper-slide"> 1398 <button type="button" class="keyword_button tag_name" name="ser_camp_position" value="C,D,E">ì°¨ê°ì´ ê³ê³¡ãê° ì£¼ë³</button> 1399 </li> 1400 <li class="swiper-slide"> 1401 <button type="button" class="keyword_button tag_name" name="ser_camp_position" value="A">ììí ë°ë¤ 주ë³</button> 1402 </li> 1403 <li class="swiper-slide"> 1404 <button type="button" class="keyword_button tag_name" name="ser_camp_spec" value="BO003">ì ì ìì ëìì¥ ì£¼ë³</button> 1405 </li> 1406 </ul> 1407 </div> 1408 </div> 1409 </div> 1410 1411 </div> 1412 1413 <div class="filter_cont "> 1414 <div class="swiper-container filter_cont_swiper"> 1415 <ul class="swiper-wrapper"> 1416 <li class="swiper-slide"> 1417 <button type="button" class="btn_filter" id="popFilterButton"></button> 1418 </li> 1419 <li class="swiper-slide"> 1420 <div class="filter_name" id="group1_txt" data-value="filter_item1">ìì구ë¶</div> 1421 </li> 1422 <li class="swiper-slide"> 1423 <div class="filter_name" id="group2_txt" data-value="filter_item2">ê²ì구ë¶</div> 1424 </li> 1425 <li class="swiper-slide"> 1426 <div class="filter_name" id="group3_txt" data-value="filter_item3">ììíê²½</div> 1427 </li> 1428 <li class="swiper-slide"> 1429 <div class="filter_name" id="group4_txt" data-value="filter_item4">주ë³íê²½</div> 1430 </li> 1431 1432 </ul> 1433 </div> 1434 </div> 1435 1436</div> 1437 1438<!-- íí°ì ìì´ì½ XX --> 1439<!-- popup(modal) start --> 1440<div class="pop_layer_set" id="filter_pop"> 1441 <!-- íí° ëë ì ë ëì¤ë ì°½ --> 1442 <div class="pop_layer filter_pop"> 1443 <div class="pop_title"> 1444 <p class="tit">íí°</p> 1445 <button type="button" class="clo2" id="popFilterCloseButton"></button> 1446 </div> 1447 <div class="pop_con"> 1448 <div class="filter_top_fixed swiper-container"> 1449 <div class="swiper-wrapper tabs"> 1450 <div id="tab_filter_item1" class="filter_item swiper-slide active" data-target="filter_item1">ììêµ¬ë¶ 1451 </div> 1452 <div id="tab_filter_item2" class="filter_item swiper-slide" data-target="filter_item2">ê²ì구ë¶</div> 1453 <div id="tab_filter_item3" class="filter_item swiper-slide" data-target="filter_item3">ììíê²½</div> 1454 <div id="tab_filter_item4" class="filter_item swiper-slide" data-target="filter_item4">주ë³íê²½</div> 1455 1456 </div> 1457 </div> 1458 1459 <!-- item_list div ê° item ì íì í´ëì¤ active ì¶ê° --> 1460 <ul class="filter_pop_ul"> 1461 <li id="filter_item1"> 1462 <p class="title">ìì구ë¶</p> 1463 <div class="item_list"> 1464 <button type="button" name="ser_site_tp" value="BB000" id="chk_lodg1">ì¤í ìº í</button> 1465 <button type="button" name="ser_site_tp" value="BB001" id="chk_lodg2">ê¸ë¨í</button> 1466 <button type="button" name="ser_site_tp" value="BB002" id="chk_lodg3">ì¹´ë¼ë°</button> 1467 <button type="button" name="ser_site_tp" value="BB003" id="chk_lodg4">íì </button> 1468 </div> 1469 </li> 1470 1471 <li id="filter_item2"> 1472 <p class="title">ê²ì구ë¶</p> 1473 <!-- <div class="tooltip"> 1474 <p class="tooltip_txt">ì íí ìì½ì ìíì¬ ì ì²´ê° ì¶ê°ë¡ ì ê³µ ë° ìì²íë ì ë³´ì ëë¤.</p> 1475 </div> --> 1476 <div class="item_list"> 1477 <button type="button" name="ser_camp_spec" value="BP000">
1477ë°ë ¤ê²¬ëë°</button> 1478 <button type="button" name="ser_kid" value="Y">í¤ì¦ìº í</button> 1479 <button type="button" name="ser_pg_tp" value="C">ì ì©ì¹´ë</button> 1480 <button type="button" name="ser_pg_tp" value="V">무íµì¥ì ê¸</button> 1481 <button type="button" name="ser_2peopleOnly" value="Y">2ì¸ì ì©</button> 1482 <button type="button" name="ser_camp_spec" value="BP001">í¸ë ì¼ë¬ ì§ì </button> 1483 <button type="button" name="ser_camp_spec" value="BP002">ì¹´ë¼ë° ì§ì </button> 1484 <button type="button" name="ser_camp_spec" value="BP003">ì°¨ë°ìº í</button> 1485 <button type="button" name="ser_q_point" value="Y">Q-Pointì 립</button> 1486 1487 <button type="button" name="ser_disc_yn" value="Y">í ì¸ì¤</button> 1488 <button type="button" name="ser_new_yn" value="Y">ì ê·ì ì </button> 1489 <button type="button" name="ser_long_yn" value="Y">ì¥ë°</button> 1490 <button type="button" name="ser_get_coupon_yn" value="Y">ì ì²´í ì¸ì¿ í°</button> 1491 </div> 1492 </li> 1493 <li id="filter_item3"> 1494 <p class="title">ììíê²½</p> 1495 <div class="item_list"> 1496 <button type="button" name="ser_camp_spec" value="BM000" />ê°ë³íì¥ì¤</button> 1497 <button type="button" name="ser_camp_spec" value="BM001">ê°ë³ì¬ìì¤</button> 1498 <button type="button" name="ser_camp_spec" value="BL004">매ì </button> 1499 <button type="button" name="ser_camp_spec" value="BL003">ìì´íì´</button> 1500 <button type="button" name="ser_camp_spec" value="BM007">ëì´í°</button> 1501 <button type="button" name="ser_camp_spec" value="BM013">ììì¥</button> 1502 <button type="button" name="ser_camp_spec" value="BN000">ì¥ë¹ëì¬</button> 1503 <button type="button" name="ser_camp_spec" value="BM020">ì²´ííë</button> 1504 </div> 1505 </li> 1506 <li id="filter_item4"> 1507 <p class="title">주ë³íê²½</p> 1508 <div class="item_list"> 1509 <button type="button" name="ser_camp_position" value="A">ë°ë¤</button> 1510 <button type="button" name="ser_camp_position" value="B">ì°</button> 1511 <button type="button" name="ser_camp_position" value="C">ê°</button> 1512 <button type="button" name="ser_camp_position" value="D">í¸ì</button> 1513 <button type="button" name="ser_camp_position" value="E">ê³ê³¡</button> 1514 <button type="button" name="ser_camp_position" value="F">ì¬</button> 1515 <button type="button" name="ser_camp_spec" value="BO005">ë±ì°</button> 1516 <button type="button" name="ser_camp_spec" value="BO000">í´ììì¥</button> 1517 <button type="button" name="ser_camp_spec" value="BO002">ììë ì ¸</button> 1518 <button type="button" name="ser_camp_spec" value="BO003">ëì</button> 1519 <button type="button" name="ser_camp_spec" value="BO007">ì¤í¤ì¥</button> 1520 <button type="button" name="ser_camp_spec" value="BO006">ì목ì/í´ì림</button> 1521 </div> 1522 </li> 1523 1524 </ul> 1525 </div> 1526 <div class="btm search_filter"> 1527 <!-- ì´ê¸°í on ì¼ë¡ ì ì´ --> 1528 <a id="popFilterResetButton" class="btn_refresh">ì´ê¸°í</a> 1529 <button type="button" class="btn_orange" id="searchSubmitButton">íí° ê²ì</button> 1530 </div> 1531 </div> 1532</div> 1533
1534<script> 1535 const headFilterManager = { 1536 init: function(){ 1537 this.swiperKeywordFilter(); 1538 this.swiperBadgeFilter(); 1539 this.isHeadFilterCheck(); 1540 1541 let lastScrollTop = 0; 1542 const headFilter = document.getElementById("headFilter"); 1543 1544 window.addEventListener("scroll", () => { 1545 let scrollTop = window.scrollY || document.documentElement.scrollTop; 1546 1547 if (scrollTop < 170) { 1548 // ìµìë¨ììë íì ë³´ì´ê² ì¤ì 1549 headFilter.style.transform = "translate(-50%)"; 1550 headFilter.style.opacity = "1"; 1551 } else if (scrollTop > lastScrollTop) { 1552 // ìëë¡ ì¤í¬ë¡¤ ì ì¨ê¹ 1553 headFilter.style.transform = "translate(-50%,-100%)"; 1554 headFilter.style.opacity = "0"; 1555 } else { 1556 // ìë¡ ì¤í¬ë¡¤ ì ë ¸ì¶ 1557 headFilter.style.transform = "translate(-50%)"; 1558 headFilter.style.opacity = "1"; 1559 } 1560 1561 lastScrollTop = scrollTop; 1562 }); 1563 }, 1564 swiperKeywordFilter: function(){ 1565 const sr_condi_swiper = new Swiper('.sr_condi_swiper', { 1566 pagination: false, 1567 slidesPerView: 'auto', 1568 paginationClickable: true, 1569 spaceBetween: 8, 1570 freeMode: true, 1571 lazyLoading: true, 1572 observer: true, 1573 observeParents: true, 1574 loop: false 1575 }); 1576 1577 return sr_condi_swiper; 1578 }, 1579 swiperBadgeFilter: function(){ 1580 const filter_cont_swiper = new Swiper('.filter_cont_swiper', { 1581 pagination: false, 1582 slidesPerView: 'auto', 1583 paginationClickable: true, 1584 spaceBetween: 8, 1585 freeMode: true, 1586 lazyLoading: true, 1587 observer: true, 1588 observeParents: true, 1589 loop: false, 1590 }); 1591 1592 return filter_cont_swiper; 1593 }, 1594 // êµ¬ë¶ íí° ë²í¼ active ì ë°ì´í¸ ì´ë²¤í¸ 1595 updateActiveFilters: function() { 1596 const selectedFilters = filterManager._selectedFilters; 1597 1598 // 기존 active í´ëì¤ ì ê±° 1599 document.querySelectorAll(".filter_cont_swiper .swiper-slide").forEach(sli
1599de => { 1600 slide.classList.remove("active"); 1601 }); 1602 1603 // íê·¸ íì¤í ë²í¼ active 1604 if (selectedFilters.ser_festa_gbn != ""){ 1605 const buttonEl = document.querySelector(`.tag_name[value='${selectedFilters.ser_festa_gbn}']`); 1606 if(buttonEl){ 1607 buttonEl.classList.add("active"); 1608 } 1609 } 1610 1611 // íê·¸ í ì¸ ë²í¼ active 1612 if (selectedFilters.ser_disc_yn == "Y"){ 1613 const buttonEl = document.querySelector(`.tag_name[name='ser_disc_yn']`); 1614 buttonEl.classList.add("active"); 1615 } 1616 1617 // íê·¸ ë°ë ¤ë물 ë²í¼ active 1618 if (selectedFilters.ser_camp_spec.some(value => ["BP000"].includes(value))){ 1619 const buttonEl = document.querySelector(`.tag_name[value='${selectedFilters.ser_camp_spec}']`); 1620 buttonEl.classList.add("active"); 1621 } 1622 1623 // íê·¸ ìì´ë¤ ë²í¼ active 1624 if (selectedFilters.ser_kid == "Y"){ 1625 const buttonEl = document.querySelector(`.tag_name[name='ser_kid']`); 1626 buttonEl.classList.add("active"); 1627 } 1628 1629 // íê·¸ ì ì²´í ì¸ ë²í¼ active 1630 if (selectedFilters.ser_get_coupon_yn == "Y"){ 1631 const buttonEl = document.querySelector(`.tag_name[name='ser_get_coupon_yn']`); 1632 buttonEl.classList.add("active"); 1633 } 1634 1635 // ììêµ¬ë¶ ë²í¼ active 1636 if (selectedFilters.ser_site_tp.length > 0) { 1637 document.getElementById("group1_txt")?.closest(".swiper-slide")?.classList.add("active"); 1638 } 1639 1640 // ê²ìêµ¬ë¶ ë²í¼ active 1641 if ( 1642 selectedFilters.ser_camp_spec.some(value => ["BP000", "BP001", "BP002", "BP003"].includes(value)) || 1643 selectedFilters.ser_pg_tp.some(value => ["C", "V"].includes(value)) || 1644 selectedFilters.ser_2peopleOnly === "Y" || selectedFilters.ser_q_point === "Y" || selectedFilters.ser_deposit_yn === "Y" || 1645 selectedFilters.ser_disc_yn === "Y" || selectedFilters.ser_new_yn === "Y" || selectedFilters.ser_long_yn === "Y" || selectedFilters.ser_kid === "Y" || selectedFilters.ser_get_coupon_yn === "Y" 1646 ) { 1647 document.getElementById("group2_txt")?.closest(".swiper-slide")?.classList.add("active"); 1648 } 1649 1650 // ììíê²½ ë²í¼ active 1651 if (selectedFilters.ser_camp_spec.some(value => ["BM000", "BM001", "BL004", "BL003", "BM007", "BM013", "BN000", "BM020"].includes(value))) { 1652 document.getElementById("group3_txt")?.closest(".swiper-slide")?.classList.add("active"); 1653 } 1654 1655 // 주ë³íê²½ ë²í¼ active 1656 if (selectedFilters.ser_camp_position.length > 0 || selectedFilters.ser_camp_spec.some(value => ["BO005", "BO000", "BO002", "BO003", "BO007"].includes(value))) { 1657 document.getElementById("group4_txt")?.closest(".swiper-slide")?.classList.add("active"); 1658 } 1659 1660 // íì¤í기 ë²í¼ active 1661 if (selectedFilters.ser_key_sub_cd2.length > 0) { 1662 document.getElementById("group5_txt")?.closest(".swiper-slide")?.classList.add("active"); 1663 } 1664 }, 1665 // êµ¬ë¶ íí° ë¯¸ë ¸ì¶ ì¬ë¶ ì²´í¬ 1666 isHeadFilterCheck: function() { 1667 if(searchFilterManager._filter.res_date == searchFilterManager._filter.res_end_date || (searchFilterManager._filter.res_date != "" && searchFilterManager._filter.res_end_date == "")){ 1668 document.querySelector('.filter_name[data-value="filter_item1"]').closest(".swiper-slide").style.display = "none"; 1669 document.getElementById("tab_filter_item1").style.display = "none"; 1670 document.getElementById("filter_item1").style.display = "none" 1671 }else{ 1672 document.querySelector('.filter_name[data-value="filter_item1"]').closest(".swiper-slide").style.display = "block"; 1673 document.getElementById("tab_filter_item1").style.display = "block"; 1674 document.getElementById("filter_item1").style.display = "block" 1675 } 1676 } 1677 } 1678 1679 /* ê²ì ê´ë ¨ í¨ì */ 1680 const filterUrlParams = new URLSearchParams(window.location.search); 1681 const filterManager = { 1682 _selectedFilters: { 1683 ser_site_tp: [], 1684 ser_pg_tp: [], 1685 ser_camp_spec: [], 1686 ser_camp_position: [], 1687 ser_key_sub_cd2: [], 1688 ser_kid: "", 1689 ser_2peopleOnly: "", 1690 isPg: "", 1691 ser_q_point: "", 1692 ser_deposit_yn: "", 1693 ser_disc_yn: "", 1694 ser_new_yn: "", 1695 ser_long_yn: "", 1696 ser_key_cd: "", 1697 ser_sort: "", 1698 ser_key_cd: "", 1699 ser_key_sub_cd: "", 1700 ser_keyword: "", 1701 ser_only_able: "", 1702 ser_empty_yn: "", 1703 ser_festa_gbn: "", 1704 ser_get_coupon_yn: "", 1705 page: 0 1706 }, 1707 init: function () { 1708 const popFilterButtonEl = document.getElementById("popFilterButton"); 1709 const popFilterCloseButtonEl = document.getElementById("popFilterCloseButton"); 1710 const popFilterResetButtonEl = document.getElementById("popFilterResetButton"); 1711 const filterNameEl = document.querySelectorAll('.filter_name'); 1712 1713 popFilterButtonEl.addEventListener("click", () => { 1714 this.open() 1715 }); 1716 popFilterCloseButtonEl.addEventListener("click", () => { 1717 this.close() 1718 }); 1719 popFilterResetButtonEl.addEventListener("click", () => { 1720 this.resetFilters() 1721 }); 1722 1723 filterNameEl.forEach(el => { 1724 console.log(el.textContent); 1725 1726 el.addEventListener("click", () => { 1727 this.open(el.dataset.value) 1728 }); 1729 }); 1730 1731 // íí° í목 í´ë¦ ì´ë²¤í¸ ë±ë¡ 1732 document.querySelectorAll(".item_list button").forEach(item => { 1733 item.addEventListener("click", (event) => this.toggleFilter(event)); 1734 }); 1735 1736 //this.sortSelect(); 1737 this.setting(); 1738 this.popFilter(); 1739 }, 1740 // íê·¸ íí° ì´ë²¤í¸ ìì± 1741 createTagClickEvent: function(func){ 1742 // íê·¸ íí° í목 í´ë¦ ì´ë²¤í¸ ë±ë¡ 1743 document.querySelectorAll(".tag_name").forEach(item => { 1744 item.addEventListener("click", (event) => { 1745 this.toggleFilter(event); 1746 func(); 1747 }); 1748 }); 1749 }, 1750 // ì´ê¸° ì¸í í¨ì 1751 setting: function(){ 1752 1753 const siteTpValue = filterUrlParams.get("site_tp") ? filterUrlParams.get("site_tp").split(",").filter(
1753Boolean) : []; 1754 const serPgTpValue = filterUrlParams.get("ser_pg_tp") ? filterUrlParams.get("ser_pg_tp").split(",").filter(Boolean) : []; 1755 const serCampSpecValue = filterUrlParams.get("ser_camp_spec") ? filterUrlParams.get("ser_camp_spec").split(",").filter(Boolean) : []; 1756 const serCampPositionValue = filterUrlParams.get("ser_camp_position") ? filterUrlParams.get("ser_camp_position").split(",").filter(Boolean) : []; 1757 const serKeySubCd2Value = filterUrlParams.get("ser_key_sub_cd2") ? filterUrlParams.get("ser_key_sub_cd2").split(",").filter(Boolean) : []; 1758 1759 filterManager._selectedFilters = { 1760 ser_site_tp: siteTpValue, 1761 ser_pg_tp: serPgTpValue, 1762 ser_camp_spec: serCampSpecValue, 1763 ser_camp_position: serCampPositionValue, 1764 ser_key_sub_cd2: serKeySubCd2Value, 1765 ser_kid: filterUrlParams.get("ser_kid") || "", 1766 ser_2peopleOnly: filterUrlParams.get("ser_2peopleOnly") || "", 1767 isPg: filterUrlParams.get("isPg") || "", 1768 ser_q_point: filterUrlParams.get("ser_q_point") || "", 1769 ser_deposit_yn: filterUrlParams.get("ser_deposit_yn") || "", 1770 ser_disc_yn: filterUrlParams.get("ser_disc_yn") || "", 1771 ser_new_yn: filterUrlParams.get("ser_new_yn") || "", 1772 ser_long_yn: filterUrlParams.get("ser_long_yn") || "", 1773 ser_key_cd: filterUrlParams.get("ser_key_cd") || "", 1774 ser_sort: filterUrlParams.get("ser_sort") || "", 1775 ser_key_cd: filterUrlParams.get("ser_key_cd") || "", 1776 ser_key_sub_cd: filterUrlParams.get("ser_key_sub_cd") || "", 1777 ser_keyword: filterUrlParams.get("ser_keyword") || "", 1778 ser_only_able: filterUrlParams.get("ser_only_able") || "", 1779 ser_empty_yn: filterUrlParams.get("ser_empty_yn") || "", 1780 ser_festa_gbn: filterUrlParams.get("ser_festa_gbn") || "", 1781 ser_get_coupon_yn: filterUrlParams.get("ser_get_coupon_yn") || "", 1782 page: 0 1783 } 1784 1785 // í´ë¹ íí°ê°ì´ ì¡´ì¬íë©´ active í´ëì¤ ì¶ê° 1786 Object.keys(filterManager._selectedFilters).forEach(key => { 1787 const value = filterManager._selectedFilters[key]; 1788 1789 if (Array.isArray(value)) { 1790 value.forEach(val => { 1791 document.querySelectorAll(`.item_list button[name='${key}'][value='${val}']`).forEach(btn => btn.classList.add("active")); 1792 }); 1793 } else if (value === "Y") { 1794 document.querySelectorAll(`.item_list button[name='${key}']`).forEach(btn => btn.classList.add("active")); 1795 } 1796 }); 1797 1798 // íì¤í ê²ì ì sort ê° E ì¸í 1799 if(filterManager._selectedFilters.ser_festa_gbn != ""){ 1800 //filterManager._selectedFilters.ser_sort = "E"; 1801 } 1802 1803 // 리ì¤í¸ ìì ë²í¼ ì´ê¸° ì´ë²¤í¸ 1804 filterManager.sortChangeEvent(); 1805 headFilterManager.updateActiveFilters(); 1806 }, 1807 // íí° íì ì´ê¸° 1808 open: function (filterType) { 1809 const scrollPosition = window.scrollY; 1810 const headInElement = document.querySelector('.head_in'); 1811 const containerElement = document.querySelector('.container'); 1812 const top = scrollPosition - 60; // head ëì´ ê° ì ì¸ 1813 1814 document.body.style.position = 'fixed'; 1815 document.body.style.top = `-${top}px`; 1816 1817 containerElement.style.marginTop = '175px'; 1818 1819 headInElement.style.position = 'fixed'; 1820 headInElement.style.top = `0px`; 1821 headInElement.style.left = '50%'; 1822 headInElement.style.width = '100%'; 1823 headInElement.style.transform = 'translateX(-50%)'; 1824 headInElement.style.maxWidth = '640px'; 1825 1826 if(filterType){ 1827 document.querySelector(`.filter_item[data-target='${filterType}']`)?.click(); 1828 } 1829 1830 openLayer('filter_pop'); 1831 }, 1832 // íí° íì ë«ê¸° 1833 close: function () { 1834 const headInElement = document.querySelector('.head_in'); 1835 const containerElement = document.querySelector('.container'); 1836 const scrollY = document.body.style.top; 1837 1838 containerElement.style.marginTop = '115px'; 1839 1840 document.body.style.position = ''; 1841 document.body.style.top = ''; 1842 headInElement.style.position = 'relative'; 1843 headInElement.style.top = ''; 1844 window.scrollTo(0, parseInt(scrollY || '0') * -1); 1845 1846 closeLayer('filter_pop'); 1847 }, 1848 // íì íí° íì´ì§ ì´ë²¤í¸ 1849 popFilter: function () { 1850 const swiper = this.popFilterSwiper(); 1851 1852 const fixedTop = document.querySelector('.filter_top_fixed'); 1853 let initialTopPosition = fixedTop.offsetTop; // ì´ê¸° ìì¹ íì 1854
1855 const updateFixedTop = () => { 1856 if (window.scrollY >= initialTopPosition) { 1857 fixedTop.classList.add('fixed'); 1858 } else { 1859 fixedTop.classList.remove('fixed'); 1860 } 1861 }; 1862 1863 // í ì¤í¬ë¡¤ ì´ë²¤í¸ ì¤ì 1864 const popupContainer = document.querySelector('.filter_pop_ul'); 1865 let isManualScroll = false; 1866 1867 popupContainer.addEventListener('scroll', () => { 1868 if (isManualScroll) return; // ìë ì¤í¬ë¡¤ ì ì¤í¬ë¡¤ ì´ë²¤í¸ 무ì 1869 updateFixedTop(); 1870 1871 const allTabs = document.querySelectorAll('.filter_item'); 1872 let activeTabFound = false; // íì±íë íì í ë²ë§ ì°¾ìë´ëë¡ íëê·¸ ì¤ì 1873 1874 if (popupContainer.scrollTop === 0) { 1875 allTabs.forEach(tab => tab.classList.remove('active')); 1876 allTabs[0].classList.add('active'); 1877 1878 // 모ë°ì¼ììë Swiperë 첫 ë²ì§¸ íì¼ë¡ ì´ë 1879 if (window.innerWidth <= 640) { 1880 swiper.slideTo(0); 1881 } 1882 return; 1883 } 1884 1885 allTabs.forEach((tab, index) => { 1886 const targetId = tab.getAttribute('data-target'); 1887 const targetElement = document.getElementById(targetId); 1888 1889 if (targetElement && !activeTabFound) { 1890 const rect = targetElement.getBoundingClientRect(); 1891 1892 if (rect.top <= 128 && rect.bottom >= 128) { 1893 // ì¹ì ì´ íë©´ ë´ 128px ììì ë³´ì¼ ë íì±í 1894 tab.classList.add('active'); 1895 activeTabFound = true; // 첫 ë²ì§¸ë¡ ë³´ì´ë ì¹ì ì í´ë¹íë íì activeë¡ ì¤ì 1896 1897 // Swiper를 í´ë¹ í ìì¹ë¡ ì´ë (모ë°ì¼ì¼ ê²½ì°ë§ ì ì©) 1898 if (window.innerWidth <= 640) { // 모ë°ì¼ ì²´í¬ 1899 swiper.slideTo(index); // active íì¼ë¡ swiper ì´ë 1900 } 1901 } else { 1902 tab.classList.remove('active'); 1903 } 1904 } else { 1905 tab.classList.remove('active'); 1906 } 1907 }); 1908 }); 1909 1910 1911 // í í´ë¦ ì ìëì¼ë¡ íì±í ì¤ì 1912 document.querySelectorAll('.filter_item').forEach((tab, index) => { 1913 tab.addEventListener('click', function () { 1914 if (tab.style.display === 'none') return; // display: none ìíì íì 무ì 1915 1916 isManualScroll = true; // ì¤í¬ë¡¤ ì´ë²¤í¸ ì¼ì ì¤ì§ 1917 1918 // 모ë íìì active ì ê±° í íì¬ í´ë¦í íì active ì¶ê° 1919 document.querySelectorAll('.filter_item').forEach(item => item.classList 1920 .remove('active')); 1921 this.classList.add('active'); 1922 1923 // í´ë¹ ì¹ì ì¼ë¡ íì ë´ë¶ ì¤í¬ë¡¤ ì´ë 1924 const targetId = this.getAttribute('data-target'); 1925 const targetElement = document.getElementById(targetId); 1926 const popupContainer = document.querySelector('.filter_pop_ul'); 1927 1928 if (targetElement && popupContainer) { 1929 popupContainer.scrollTo({ 1930 top: targetElement.offsetTop - popupContainer.offsetTop, 1931 behavior: 'smooth' 1932 }); 1933 1934 if (window.innerWidth <= 640) { 1935 swiper.slideTo(index); // Swiper í ì´ë 1936 } 1937 1938 // ì¤í¬ë¡¤ì´ ëë í ë¤ì ì¤í¬ë¡¤ ì´ë²¤í¸ íì±í 1939 setTimeout(() => { 1940 isManualScroll = false; 1941 }, 500); 1942 } 1943 }); 1944 }); 1945 1946 1947 // ì´ê¸° ìì¹ ì ë°ì´í¸ë¥¼ ìí 리ì¬ì´ì¦ ì´ë²¤í¸ ì²ë¦¬ 1948 window.addEventListener('resize', () => { 1949 initialTopPosition = fixedTop.offsetTop;
1950 updateFixedTop(); 1951 }); 1952 1953 updateFixedTop(); 1954 }, 1955 // íí° íì íì´ì§ í 1956 popFilterSwiper: function () { 1957 const swiper = new Swiper('.filter_top_fixed', { 1958 slidesPerView: 'auto', 1959 spaceBetween: 8, 1960 freeMode: true 1961 }); 1962 1963 return swiper; 1964 }, 1965 // ì ë ¬ ê¸°ì¤ íì ì´ë²¤í¸ 1966 sortSelect: function (fun) { 1967 const eventBtnEl = document.getElementById('sortChoiceButton'); 1968 const options = document.querySelectorAll(".opt"); 1969 const parentEl = eventBtnEl.parentNode; 1970 1971 // í´ë¦í ìµì ì í ì¤í¸ë¥¼ ë¼ë²¨ ìì ë£ì 1972 const handleSelect = (item) => { 1973 parentEl.classList.remove("on"); 1974 eventBtnEl.innerHTML = item.textContent; 1975 1976 filterManager._selectedFilters.ser_sort = item.dataset.value; 1977 fun(); 1978 }; 1979 1980 // ìµì í´ë¦ ì í´ë¦í ìµì ì ëê¹ 1981 options.forEach((option) => { 1982 option.addEventListener("click", (event) => { 1983 event.stopPropagation(); // ì´ë²¤í¸ ë²ë¸ë§ ë°©ì§ 1984 handleSelect(option); 1985 }); 1986 }); 1987 1988 // ë¼ë²¨ì í´ë¦ ì ìµì 목ë¡ì´ ì´ë¦¼/ë«í 1989 eventBtnEl.addEventListener("click", (event) => { 1990 event.stopPropagation(); // ì´ë²¤í¸ ë²ë¸ë§ ë°©ì§ 1991 parentEl.classList.toggle("on"); 1992 }); 1993 1994 // **ì´ì¸ ìì í´ë¦ ì ë«ê¸°** 1995 const closeDropdown = (event) => { 1996 if (!parentEl.contains(event.target)) { 1997 parentEl.classList.remove("on"); 1998 } 1999 }; 2000 2001 document.addEventListener("click", closeDropdown); 2002 2003 // **ì¤í¬ë¡¤ ì ë«ê¸°** 2004 document.addEventListener("scroll", () => { 2005 parentEl.classList.remove("on"); 2006 }); 2007 }, 2008 // ì ë ¬ê¸°ì¤ ë³ê²½ 2009 sortChangeEvent: function(){ 2010 // 리ì¤í¸ ìì ë²í¼ ì´ê¸° ì´ë²¤í¸ 2011 const sortChoiceButtonEl = document.getElementById("sortChoiceButton"); 2012 if(sortChoiceButtonEl != null){ 2013 let buttonText; 2014 2015 switch (filterManager._selectedFilters.ser_sort) { 2016 case "R": 2017 buttonText = "ì¶ì²ì"; 2018 break; 2019 case "P": 2020 buttonText = "ì¡°íì"; 2021 break; 2022 case "E": 2023 buttonText = "ë¹ì리ì"; 2024 break; 2025 case "F": 2026 buttonText = "ê°ê²©ì"; 2027 break; 2028 case "S": 2029 buttonText = "í기ë§ìì"; 2030 break; 2031 case "N": 2032 buttonText = "ìµê·¼í기ì"; 2033 break; 2034 default: 2035 buttonText = "ì¶ì²ì"; // ê¸°ë³¸ê° 2036 } 2037 2038 sortChoiceButtonEl.innerHTML = buttonText; 2039 } 2040 }, 2041 // ìì½ê°ë¥ ë°ì´í°ë§ 2042 toggleEmpty: function(){ 2043 const isEmpty = filterManager._selectedFilters.ser_only_able; 2044 const emptyButtonEl = document.getElementById("empty_y"); 2045 2046 if(isEmpty == "on"){ 2047 filterManager._selectedFilters.ser_only_able = ""; 2048 filterManager._selectedFilters.ser_empty_yn = "N"; 2049 }else{ 2050 filterManager._selectedFilters.ser_only_able = "on"; 2051 filterManager._selectedFilters.ser_empty_yn = "Y"; 2052 } 2053 2054 this.updateEmptyState(); 2055 }, 2056 // ìì½ê°ë¥ ë²í¼ ì´ë²¤í¸ 2057 updateEmptyState: function(){ 2058 const emptyButtonEl = document.getElementById("empty_y"); 2059 2060 if (filterManager._selectedFilters.ser_only_able == "on") { 2061 emptyButtonEl.classList.add("active"); 2062 } else { 2063 emptyButtonEl.classList.remove("active"); 2064 } 2065 }, 2066 // íí° í목 í´ë¦ ì íì±í/ë¹íì±í 2067 toggleFilter: function (event) { 2068 const searchPageType = 'MAP'; 2069 const target = event.target; 2070 const name = target.getAttribute("name");
2071 const value = target.getAttribute("value"); 2072 2073 // íì¤í ë²í¼ì¼ ë 2074 if(name == "ser_festa_gbn"){ 2075 2076 //ë§ë§íìº íì¸ ê²½ì° ì ì¤ì¼ì ê¸°ë³¸ê° set 2077 if (value == "DL002") { 2078 searchFilterManager._filter.res_date = "20251001"; 2079 searchFilterManager._filter.res_end_date = "20251002"; 2080 } 2081 2082 document.querySelectorAll(".tag_name.festa_button").forEach(item => item.classList.remove("active")); 2083 2084 if(filterManager._selectedFilters[name] == value){ 2085 document.querySelector(`.tag_name.festa_button[value='${value}']`).classList.remove("active"); 2086 filterManager._selectedFilters[name] = ""; 2087 }else{ 2088 document.querySelector(`.tag_name.festa_button[value='${value}']`).classList.add("active"); 2089 filterManager._selectedFilters[name] = value; 2090 2091 //filterManager._selectedFilters.ser_sort = "E"; 2092 filterManager.sortChangeEvent(); 2093 } 2094 2095 return; 2096 } 2097 2098 // _selectedFilters[name]ì´ ì¡´ì¬íì§ ìì¼ë©´ ê¸°ë³¸ê° ì¤ì 2099 if (this._selectedFilters[name] === undefined) { 2100 this._selectedFilters[name] = []; 2101 } 2102 2103 // ë°°ì´ì¸ ê²½ì° (ex: ser_site_tp, ser_pg_tp ë±) 2104 if (Array.isArray(this._selectedFilters[name])) { 2105 2106 // valueì 콤ë§ê° ìì¼ë©´ ë°°ì´ë¡ ë¶ë¦¬ 2107 const valueList = String(value) 2108 .split(",") 2109 .map(item => item.trim()) 2110 .filter(item => item !== ""); 2111 2112 // valueList ê°ë¤ì´ ì ë¶ ì íëì´ ìì¼ë©´ í´ì , ìëë©´ ì í 2113 const isSelected = valueList.every(item => this._selectedFilters[name].includes(item)); 2114 2115 if (isSelected) { 2116 // ì í í´ì 2117 this._selectedFilters[name] = this._selectedFilters[name].filter(item => !valueList.includes(item)); 2118 2119 // ì본 value ë²í¼ ë¹íì±í ex) value="A,B" 2120 document.querySelectorAll(`.item_list button[name='${name}'][value='${value}']`).forEach(item => item.classList.remove("active")); 2121 document.querySelectorAll(`.tag_name[name='${name}'][value='${value}']`).forEach(item => item.classList.remove("active")); 2122 2123 // ë¶ë¦¬ë value ë²í¼ë¤ë ë¹íì±í ex) value="A", value="B" 2124 valueList.forEach(filterValue => { 2125 document.querySelectorAll(`.item_list button[name='${name}'][value='${filterValue}']`).forEach(item => item.classList.remove("active")); 2126 document.querySelectorAll(`.tag_name[name='${name}'][value='${filterValue}']`).forEach(item => item.classList.remove("active")); 2127 }); 2128 2129 if (searchPageType == "LIST" && name == "ser_site_tp") { 2130 searchFilterManager._filter['site_type'] = searchFilterManager._filter['site_type'].filter(item => !valueList.includes(item)); 2131 searchFilterManager.getSiteType(); 2132 } 2133 2134 } else { 2135 // ì í ì¶ê° - ì¤ë³µ ë°©ì§ 2136 valueList.forEach(filterValue => { 2137 if (!this._selectedFilters[name].includes(filterValue)) { 2138 this._selectedFilters[name].push(filterValue); 2139 } 2140 }); 2141 2142 // ì본 value ë²í¼ íì±í ex) value="A,B" 2143 document.querySelectorAll(`.item_list button[name='${name}'][value='${value}']`).forEach(item => item.classList.add("active")); 2144 document.querySelectorAll(`.tag_name[name='${name}'][value='${value}']`).forEach(item => item.classList.add("active")); 2145 2146 // ë¶ë¦¬ë value ë²í¼ë¤ë íì±í ex) value="A", value="B" 2147 valueList.forEach(filterValue => { 2148 document.querySelectorAll(`.item_list button[name='${name}'][value='${filterValue}']`).forEach(item => item.classList.add("active"));
2149 document.querySelectorAll(`.tag_name[name='${name}'][value='${filterValue}']`).forEach(item => item.classList.add("active")); 2150 }); 2151 2152 if (searchPageType == "LIST" && name == "ser_site_tp") { 2153 valueList.forEach(filterValue => { 2154 if (!searchFilterManager._filter['site_type'].includes(filterValue)) { 2155 searchFilterManager._filter['site_type'].push(filterValue); 2156 } 2157 }); 2158 2159 searchFilterManager.getSiteType(); 2160 } 2161 } 2162 } 2163 // ë°°ì´ì´ ìë ê²½ì° (ex: ser_kid, ser_2peopleOnly ë±) 2164 else { 2165 if(this._selectedFilters[name] == ""){ 2166 this._selectedFilters[name] = value; 2167 }else{ 2168 this._selectedFilters[name] = ""; 2169 } 2170 2171 document.querySelectorAll(`.item_list button[name='${name}']`).forEach(item => item.classList.toggle("active", this._selectedFilters[name] === "Y")); // íí° íì±í ì¬ë¶ ì¤ì 2172 document.querySelectorAll(`.tag_name[name='${name}'][value='${value}']`).forEach(item => item.classList.toggle("active", this._selectedFilters[name] === "Y")); // íê·¸ íì±í ì¬ë¶ ì¤ì 2173 } 2174 2175 headFilterManager.updateActiveFilters(); 2176 }, 2177 // íí° ì ì© (ê²ì ì¤í) 2178 applyFilters: function (dataFatch) { 2179 2180 }, 2181 // íí° ì´ê¸°í 2182 resetFilters: function () { 2183 this._selectedFilters = { 2184 resStartDate: '20260924', 2185 resEndDate: '20260924', 2186 ser_site_tp: [], 2187 ser_pg_tp: [], 2188 ser_camp_spec: [], 2189 ser_camp_position: [], 2190 ser_key_sub_cd2: [], 2191 ser_kid: "N", 2192 ser_2peopleOnly: "N", 2193 isPg: "N", 2194 ser_q_point: "N", 2195 ser_deposit_yn: "N", 2196 ser_disc_yn: "N", 2197 ser_new_yn: "N", 2198 ser_long_yn: "N", 2199 ser_get_coupon_yn: "N", 2200 ser_sort: "R", 2201 ser_key_cd: "", 2202 ser_key_sub_cd: "", 2203 ser_keyword: "", 2204 ser_only_able: "", 2205 ser_empty_yn: "", 2206 ser_festa_gbn: "", 2207 page: 0 2208 }; 2209 2210 searchFilterManager.syncFilters(); 2211 headFilterManager.updateActiveFilters(); 2212 2213 // 모ë íí° í목 ë¹íì±í 2214 document.querySelectorAll(".item_list button").forEach(item => { 2215 item.classList.remove("active"); 2216 }); 2217 }, 2218 2219 }; 2220 2221 document.addEventListener("DOMContentLoaded", function() { 2222 headFilterManager.init(); 2223 filterManager.init(); 2224 }); 2225</script>
2225 2226 2227 <div class="container" style="margin-top: 115px;"> 2228 <!--ââââââ 컨í ì¸ ìì ââââââ--> 2229 <form name="form" method="post"> 2230 <input type="hidden" name="region" value=""> 2231 <input type="hidden" name="sub_region" value=""> 2232 <input type="hidden" name="camp_tp" value=""> 2233 <input type="hidden" name="page_num" value=""> 2234 <input type="hidden" name="res_dt" value=""> 2235 <input type="hidden" name="res_edt" value=""> 2236 <input type="hidden" name="ser_res_dt" value=""> 2237 <input type="hidden" name="ser_res_edt" value=""> 2238 <input type="hidden" name="ser_res_days" value=""> 2239 <input type="hidden" name="ser_festa_gbn" value=""> 2240 2241 <div id="map_wrap" style="position: relative; width:100%; height: calc(100dvh - 115px - 61px);"> 2242 <div id="map" style="width:100%; height: calc(100vh - 115px - 61px);"></div> 2243 <div class="map-bottom-wrap"> 2244 <button id="nextPage" type="button" class="next-page" style="display: none;">ë보기(+30)</button> 2245 <button id="mapListOpenButton" type="button" class="search-list-btn" style="display:none;">목ë¡</button> 2246 <button id="nearbySearch" type="button" class="nearby-btn"><img src="../images/nearby.png" alt="ë´ ì£¼ë³ìì ê²ì" /></button> 2247 <div id="marker-info-panel-wrap" class="marker-info-panel view_type view_type_info" style="display:none;"> 2248 <div class="swiper-container camp_swiper"> 2249 <ul class="swiper-wrapper" id="marker-info-panel"></ul> 2250 </div> 2251 </div> 2252 </div> 2253 <button id="reSearch" type="button" class="re-search" style="display: none;">í ì§ëìì ì¬ê²ì</button> 2254 <div id="noneInfo" class="none-info" style="display: none;"> 2255 í´ë¹ ìì¹ì ê²ì ê²°ê³¼ê° ììµëë¤. </br> 2256 ë¤ë¥¸ ìì¹ìì ê²ìí´ì£¼ì기 ë°ëëë¤. 2257 </div> 2258 </div> 2259 2260 <div class="pop_layer_set2" id="mapList"> 2261 <!-- íí° ëë ì ë ëì¤ë ì°½ --> 2262 <div class="filter_pop"> 2263 <div class="search head"> 2264 <div class="head_in"> 2265 <button type="button" class="btn_close" id="popMapListCloseButton"></button> 2266 <h1> 2267 <span class="title">ì§ë ê²ì 목ë¡</span> 2268 </h1> 2269 </div> 2270 </div> 2271 2272 <div> 2273 <!--ââââââ 컨í ì¸ ìì ââââââ--> 2274 <div style="padding: 14px 24px;background: #FAFAFA;color:#6C757D;">ê²ì ê²°ê³¼ <span id="mapListCount">0</span>ê°</div> 2275 <div class="camp_list view_type maplist view_type_info" id="mapListContent"> 2276 2277 </div> 2278 <!--âââââââââ 컨í ì¸ ë âââââââââ --> 2279 </div> 2280 2281 </div> 2282 </div> 2283 2284 </form> 2285 <!---------------- 컨í ì¸ ë ------------------> 2286 </div> <!--// container --> 2287 2288 </div><!-- //wrap_in --> 2289 2290<style> 2291 .search_marker{ 2292 position: absolute; 2293 top: 50%; 2294 left: 50%; 2295 transform: translate(-50%, -50%); 2296 width: 16px; 2297 height: 16px; 2298 border-radius: 16px; 2299 background: #fff; 2300 z-index: 1; 2301 } 2302 .now_marker{ 2303 position: absolute; 2304 top: 50%; 2305 left: 50%; 2306 transform: translate(-50%, -50%); 2307 width: 16px; 2308 height: 16px; 2309 border-radius: 16px; 2310 background: #fff; 2311 z-index: 1; 2312 } 2313 .now_marker:after{ 2314 content: ""; 2315 display: block; 2316 position: absolute; 2317 top: 50%; 2318 left: 50%; 2319 transform: translate(-50%, -50%); 2320 width: 20px; 2321 height: 20px; 2322 border-radius: 20px; 2323 background: #F27226; 2324 opacity: .5; 2325 z-index: -1; 2326 } 2327 .now_marker:before{ 2328 content: ""; 2329 display: block; 2330 position: absolute; 2331 top: 50%; 2332 left: 50%; 2333 transform: translate(-50%, -50%); 2334 width: 10px; 2335 height: 10px; 2336 border-radius: 10px; 2337 border: 2px solid #fff; 2338 background: #F27226; 2339 } 2340 .ui-state-active, .ui-state-active a:hover { 2341 position:relative; 2342 border-radius: 100rem; 2343 } 2344 .ui-state-active a{ 2345 position: relative; 2346 border-radius: 100rem; 2347 background: #f47206 !important; 2348 } 2349 td.ui-state-active.left:before{ 2350 content: ""; 2351 position: absolute; 2352 top:0; 2353 left: 0; 2354 display: block; 2355 width: 50%; 2356 height: 100%; 2357 transform: translateX(100%); 2358 background: #FFCCAD; 2359 } 2360 td.ui-state-active.right:before{ 2361 content: ""; 2362 position: absolute; 2363 top:0; 2364 right: 0; 2365 display: block; 2366 width: 50%; 2367 height: 100%; 2368 transform: translateX(-100%); 2369 background: #FFCCAD; 2370 } 2371 .ui-state-active-a{ 2372 background: #FFCCAD !important; 2373 } 2374 .stay_btn_swiper .swiper-slide{ width: auto; } 2375 2376</style> 2377 2378<div class="pop_layer_set2" id="search_pop"> 2379 <!-- íí° ëë ì ë ëì¤ë ì°½ --> 2380 <div class="filter_pop"> 2381 <div class="search head"> 2382 <div class="head_in" style="overflow: initial"> 2383 <button type="button" class="btn_close" id="popSearchCloseButton"></button> 2384 <ul class="search_tab"> 2385 <li class="main-info-box active" id="listTab">ììê²ì</li> 2386 <li class="main-info-box" id="mapTab"> 2387 ì§ëê²ì 2388 <div class="balloon-badge bottom center" id="mapInfoBox">ê°ê¹ì´ ìì찾기</div> 2389 </li> 2390 </ul> 2391 </div> 2392 </div> 2393 2394 <div> 2395 <!--ââââââ 컨í ì¸ ìì ââââââ--> 2396 <div class="search_content" id="list-search-content" style="display: none;"> 2397 <div class="search_form_box"> 2398 <div class="search_form_input search"> 2399 <input type="text" id="ser_keyword_" list="sear_list" value="" placeholder="ììëª ì ì ë ¥íì¸ì" style="width: 100%; font-size: 14px; outline: 0; border: 0;" /> 2400 <span class="ico_del" id="deleteKeyword" style="display:none;"></span> 2401 <div id="search_result_info_box" class="search_result_info_box"> 2402 <p class="info">ì ì²´ëª í´ë¦ì, ìì¸íì´ì§ë¡ ì´ëí©ëë¤.</p> 2403 <p class="info">ë¤ë¥¸ ì¡°ê±´ì¼ë¡ ê²ìíë ¤ë©´, í ê²ìí목ì ë°ë¡ í´ë¦íì¸ì.</p> 2404 </div> 2405 <ul id="search_result_box" class="search_result_box"></ul> 2406 </div> 2407 <div class="search_form_input place"> 2408 <span class="placeholder">ì§ìì ì í íì¸ì.</span> 2409 <div class="search_choice_box"> 2410 <div style="display: flex;justify-content: space-between;align-items:center;"> 2411 <h3 class="title">ì§ìì ì íí´ ì£¼ì¸ì.</h3> 2412 <p style="color:#8E8E8E;font-size: 12px;">ìµë 3ê° ì í</p> 2413 </div> 2414 <div class="content"> 2415 <div class="swiper-container place_tab_swiper"> 2416 <ul class="swiper-wrapper"> 2417 <li class="swiper-slide place_button" data-value="" data-region="" data-arr="-1">ì§ìì ì²´</li> 2418 <!--li class="swiper-slide place_button" data-value="ê°ìê¶" data-region="" data-arr="0">ê°ì</li> 2419 <li class="swiper-slide place_button" data-value="ê²½ìê¶" data-region="" data-arr="1">ê²½ì</li> 2420 <li class="swiper-slide place_button" data-value="경기ê¶" data-region="" data-arr="2">경기</li> 2421 <li class="swiper-slide place_button" data-value="ì¶©ì²ê¶" data-region="" data-arr="3">ì¶©ì²</li> 2422 <li class="swiper-slide place_button" data-value="ì ë
2422¼ê¶" data-region="" data-arr="4">ì ë¼</li> 2423 <li class="swiper-slide place_button" data-value="ì 주ê¶" data-region="" data-arr="5">ì 주</li> 2424 <li class="swiper-slide place_button" data-value="ì¸ì²" data-region="" data-arr="6">ì¸ì²</li--> 2425 <li class="swiper-slide place_button" data-value="ê°ì" data-region="" data-arr="0">ê°ì</li><li class="swiper-slide place_button" data-value="경기" data-region="" data-arr="1">경기</li><li class="swiper-slide place_button" data-value="ê²½ë¨" data-region="" data-arr="4">ê²½ë¨</li><li class="swiper-slide place_button" data-value="ê²½ë¶" data-region="" data-arr="5">ê²½ë¶</li><li class="swiper-slide place_button" data-value="ì ë¨" data-region="" data-arr="14">ì ë¨</li><li class="swiper-slide place_button" data-value="ì ë¶" data-region="" data-arr="15">ì ë¶</li><li class="swiper-slide place_button" data-value="ì¶©ë¨" data-region="" data-arr="11">ì¶©ë¨</li><li class="swiper-slide place_button" data-value="ì¶©ë¶" data-region="" data-arr="12">ì¶©ë¶</li><li class="swiper-slide place_button" data-value="ì¸ì²" data-region="" data-arr="2">ì¸ì²</li><li class="swiper-slide place_button" data-value="ì 주" data-region="" data-arr="16">ì 주</li><li class="swiper-slide place_button" data-value="ìì¸" data-region="" data-arr="3">ìì¸</li><li class="swiper-slide place_button" data-value="ëì " data-region="" data-arr="9">ëì </li><li class="swiper-slide place_button" data-value="ì¸ì¢ " data-region="" data-arr="10">ì¸ì¢ </li><li class="swiper-slide place_button" data-value="ë구" data-region="" data-arr="6">ë구</li><li class="swiper-slide place_button" data-value="ë¶ì°" data-region="" data-arr="8">ë¶ì°</li><li class="swiper-slide place_button" data-value="ì¸ì°" data-region="" data-arr="7">ì¸ì°</li> 2426 </ul> 2427 </div> 2428 <div id="place_result_box" class="place_result_box"></div> 2429 <div id="place_choice_box" class="place_choice_box"> 2430 <ul></ul> 2431 </div> 2432 </div> 2433 </div> 2434 </div> 2435 <div class="search_form_input calendar"> 2436 <span class="placeholder">ë ì§ë¥¼ ì íí´ ì£¼ì¸ì.</span> 2437 <div class="search_choice_box"> 2438 <h3 class="title">ë ì§ë¥¼ ì íí´ ì£¼ì¸ì.</h3> 2439 <div class="content"> 2440 <div class="datepicker-list"></div> 2441 <div style="display:flex;align-items:center;justify-content:space-between;margin-top:16px;"> 2442 <button type="button" id="calendarResetButton" style="background: #fff url(../images/re-search.png) 1rem center no-repeat;border: 0;padding: 0 1rem 0 3rem;">ì¼ì ì´ê¸°í</button> 2443 <button type="button" class="twonight" >2ë° ì í</button> 2444 </div> 2445 </div> 2446 </div> 2447 </div> 2448 <div class="search_form_button stay" id="search_site_type_box" > 2449 <div class="swiper-container stay_btn_swiper"> 2450 <ul class="swiper-wrapper"> 2451 <li class="swiper-slide"> 2452 <button type="button" class="stay_button active" id="site_tp_all">ì ì²´</button> 2453 </li> 2454 <li class="swiper-slide"> 2455 <button type="button" class="stay_button" name="site_tp" value="BB000">ì¤í ìº í</button> 2456 </li> 2457 <li class="swiper-slide"> 2458 <button type="button" class="stay_button" name="site_tp" value="BB001">ê¸ë¨í</button> 2459 </li> 2460 <li class="swiper-slide"> 2461 <button type="button" class="stay_button" name="site_tp" value="BB002">ì¹´ë¼ë°</button> 2462 </li> 2463 <li class="swiper-slide"> 2464 <button type="button" class="stay_button" name="site_tp" value="BB003">íì </button> 2465 </li> 2466 </ul> 2467 </div> 2468 </div> 2469 <div class="search_form_input people"> 2470 <span class="placeholder">ì±ì¸0, ìì¸0</span> 2471 <div class="search_choice_box"> 2472 <h3 class="title">ì¸ìì ì íí´ ì£¼ì¸ì.</h3> 2473 <p class="text">ìì¸ì ëí ëì´ê¸°ì¤ ë° ì¶ê°ìê¸ ì ì± ì ì ì²´ë³ë¡ ìì´íë ìì½ì ìë´ì¬íì ë°ëì íì¸íì기 ë°ëëë¤.</p> 2474 <div class="content"> 2475 <div class="people_count"> 2476 <span class="people_count_text">ì±ì¸</span> 2477 <div class="count_box adult"> 2478 <!-- 0ì¼ë - ë²í¼ì í´ëì¤ disabled ì¶ê° --> 2479 <button type="button" class="count_box_decrease disabled"></button> 2480 <span class="count_box_num">0</span> 2481 <button type="button" class="count_box_increase"></button> 2482 </div> 2483 </div> 2484 <div class="people_count"> 2485 <span class="people_count_text">ìì¸</span> 2486 <div class="count_box child"> 2487 <button type="button" class="count_box_decrease disabled"></button> 2488 <span class="count_box_num">0</span> 2489 <button type="button" class="count_box_increase disabled"></button> 2490 </div> 2491 </div> 2492 </div> 2493 </div> 2494 </div> 2495 </div> 2496 2497 <!-- <button type="button" class="find_nearby_btn">ë´ ì£¼ë³ìì ê²ì</button> --> 2498 2499 <!-- ìµê·¼ ê²ì ì¡°ê±´ ë ¸ì¶ íì´ì§ SearchTypePage TYPE: "LIST" | "MAP" | "MAIN" --> 2500 2501 <!-- ìµê·¼ ê²ì ì¡°ê±´ ë ¸ì¶ íì´ì§ END --> 2502 2503 <!-- ê²ì ê´ê³ ìì --> 2504 2505 <div class="recent_searches"> 2506 <div class="title"> 2507 <strong>ì´ë¬ì ë¡í ì¶ì² ìº íì¥</strong> 2508 </div> 2509 <div class="content"> 2510 <div class="swiper-container ad_camp_swiper" style="padding: 0;"> 2511 <ul class="swiper-wrapper" id="adContent"> 2512 2513 <li class="swiper-slide swiper-slide-active"> 2514 <a href="javascript:clkCampPr(1812,15408,'SEARCH');"> 2515 <div class="pic"> 2516 <div class="top_bat" style="position: absolute; padding: 6px; margin: 0; justify-content: end;"> 2517 <p class="bat_ad">AD</p> 2518 </div> 2519 <img src="/file/2024/06/27/thumbM_2024062758286.46.jpg"> 2520 </div> 2521 <div class="txt_box"> 2522 <p class="tit">매ìëíí¬ìº íì¥</p> 2523 <p class="txt">ê°ì ì² ìêµ°</p> 2524 <div class="price_g"> 2525 2526 <p class="price">60,000ì~</p> 2527 </div> 2528 </div> 2529 </a> 2530 </li> 2531 2532 <li class="swiper-slide swiper-slide-active"> 2533 <a href="javascript:clkCampPr(2031,15413,'SEARCH');"> 2534 <div class="pic"> 2535 <div class="top_bat" style="position: absolute; padding: 6px; margin: 0; justify-content: end;"> 2536 <p class="bat_ad">AD</p> 2537 </div> 2538 <img src="/file/2026/09/01/thumbM_2026090173170.82.jpg"> 2539 </div> 2540 <div class="txt_box"> 2541 <p class="tit">í¬ë ì¤í¸ ìì¸ ìº íì¥</p> 2542 <p class="txt">경기 ê°íêµ°</p> 2543 <div class="price_g"> 2544 2545 <p class="price">50,000ì~</p> 2546 </div> 2547 </div> 2548 </a> 2549 </li> 2550 2551 <li class="swiper-slide swiper-slide-active"> 2552 <a href="javascript:clkCampPr(1886,17326,'SEARCH');"> 2553 <div class="pic"> 2554 <div class="top_bat" style="position: absolute; padding: 6px; margin: 0; justify-content: end;"> 2555 <p class="bat_ad">AD</p> 2556 </div> 2557 <img src="/file/2025/09/26/thumbM_2025092641771.81.jpg"> 2558 </div> 2559 <div class="txt_box"> 2560 <p class="tit">íì¬ë¦¬ìº íì¥</p> 2561 <p class="txt">ê°ì íì²êµ°</p> 2562 <div class="price_g"> 2563 2564 <p class="price">60,000ì~</p> 2565 </div> 2566 </div> 2567 </a> 2568 </li> 2569 2570 <li class="swiper-slide swiper-slide-active"> 2571 <a href="javascript:clkCampPr(2029,2249,'SEARCH');"> 2572 <div class="pic"> 2573 <div class="top_bat" style="position: absolute; padding: 6px; margin: 0; justify-content: end;"> 2574 <p class="bat_ad">AD</p> 2575 </div> 2576 <img src="https://image.thankqcamping.com/file/2025/12/15/cd9548ad-6759-41d5-b4c2-47aa7829dee5-m.jpg"> 2577 </div> 2578 <div class="txt_box"> 2579 <p class="tit">ê¹í¬íê°ì¤í ìº íì¥</p> 2580 <p class="txt">경기 ê¹í¬ì</p> 2581 <div class="price_g"> 2582 2583 <p class="price">40,000ì~</p> 2584 </div> 2585 </div> 2586 </a> 2587 </li> 2588 2589 <li class="swiper-slide swiper-slide-active"> 2590 <a href="javascript:clkCampPr(2059,354,'SEARCH');"> 2591 <div class="pic"> 2592 <div class="top_bat" style="position: absolute; padding: 6px; margin: 0; justify-content: end;"> 2593 <p class="bat_ad">AD</p> 2594 </div> 2595 <img src="/file/2024/06/11/thumbM_2024061165757.86.jpg"> 2596 </div> 2597 <div class="txt_box"> 2598 <p class="tit">ìì°ì´ ì¬ì£¼ì°¸ì¯ë§ì í¼í¬ëìº í</p> 2599 <p class="txt">경기 ì¬ì£¼ì</p> 2600 <div class="price_g"> 2601 2602 <p class="price">45,000ì~</p> 2603 </div> 2604 </div> 2605 </a> 2606 </li> 2607 2608 <li class="swiper-slide swiper-slide-active"> 2609 <a href="javascript:clkCampPr(2013,15397,'SEARCH');"> 2610 <div class="pic"> 2611 <div class="top_bat" style="position: absolute; padding: 6px; margin: 0; justify-content: end;"> 2612 <p class="bat_ad">AD</p> 2613 </div> 2614 <img src="/file/2024/07/03/thumbM_2024070379848.67.jpg"> 2615 </div> 2616 <div class="txt_box"> 2617 <p class="tit">ë¨ì ëë´ìº íì¥</p> 2618 <p class="txt">ì¶©ë¶ ë¨ìêµ°</p> 2619 <div class="price_g"> 2620 2621 <p class="price">60,000ì~</p> 2622 </div> 2623 </div> 2624 </a> 2625 </li> 2626 2627 </ul> 2628 </div> 2629 </div> 2630 </div> 2631 2632 <!-- ê²ì ê´ê³ ìì END --> 2633 </div> 2634 2635 <div id="map-search-content"> 2636 <div id="map_search_wrap" style="position: relative; width:100%; height: calc(100dvh - 61px - 75px);"> 2637 <div class="search_form_box" style="padding: 16px;position: absolute; top:0; left;0; width: 100%; z-index: 3;"> 2638 <div class="search_form_input calendar"> 2639 <span class="placeholder">ë ì§ë¥¼ ì íí´ ì£¼ì¸ì.</span> 2640 <div class="search_choice_box"> 2641 <h3 class="title">ë ì§ë¥¼ ì íí´ ì£¼ì¸ì.</h3> 2642 <div class="content"> 2643 <div class="datepicker-map"></div> 2644 </div> 2645 </div> 2646 </div> 2647 2648 <div class="search_form_input people"> 2649 <span class="placeholder">ì±ì¸0, ìì¸0</span> 2650 <div class="search_choice_box"> 2651 <h3 class="title">ì¸ìì ì íí´ ì£¼ì¸ì.</h3> 2652 <p class="text">ìì¸ì ëí ëì´ê¸°ì¤ ë° ì¶ê°ìê¸ ì ì± ì ì ì²´ë³ë¡ ìì´íë ìì½ì ìë´ì¬íì ë°ëì íì¸íì기 ë°ëëë¤.</p> 2653 <div class="content"> 2654 <div class="people_count"> 2655 <span class="people_count_text">ì±ì¸</span> 2656 <div class="count_box adult"> 2657 <!-- 0ì¼ë - ë²í¼ì í´ëì¤ disabled ì¶ê° --> 2658 <button type="button" class="count_box_decrease disabled"></button> 2659 <span class="count_box_num">0</span> 2660 <button type="button" class="count_box_increase"></button> 2661 </div> 2662 </div> 2663 <div class="people_count"> 2664 <span class="people_count_text">ìì¸</span> 2665 <div class="count_box child"> 2666 <button type="button" class="count_box_decrease disabled"></button> 2667 <span class="count_box_num">0</span> 2668 <button type="button" class="count_box_increase disabled"></button> 2669 </div> 2670 </div> 2671 </div> 2672 </div> 2673 </div> 2674 </div> 2675 2676 <div class="search_marker"> 2677 <img width="20" src="/images/search/search-place.png" alt="ê²ì ìì¹" /
2677> 2678 </div> 2679 2680 <div id="search_map" style="width:100%; height: calc(100dvh - 61px);"></div> 2681 2682 <div style="position: absolute; bottom: 25px; right: 1rem;"> 2683 <button type="button" class="find_nearby_btn" id="map_nearby_button">ë´ ì£¼ë³ ê²ì</button> 2684 </div> 2685 </div> 2686 </div> 2687 2688 <!--âââââââââ 컨í ì¸ ë âââââââââ --> 2689 </div> 2690 2691 <div class="btm_foot"> 2692 <div class="btn_set type2"> 2693 <ul> 2694 <li class="btn_wp"> 2695 <button type="button" class="btn_res" id="submitSearch"><span id="btn_res_txt">ê²ì</span></button> 2696 </li> 2697 </ul> 2698 </div> 2699 </div> 2700 2701 </div> 2702</div> 2703 2704<!-- camp Search (ìì ê²ì) --> 2705<div class="pop_layer_set" id="filter_pop"> 2706 <div class="pop_layer filter_pop"> 2707 2708 <div class="pop_title"> 2709 <p class="tit">ììê²ì</p> 2710 <button type="button" class="clo2" id="popFilterCloseButton"></button> 2711 </div> 2712 2713 <div class="pop_con"> 2714 <div class="search_box"> 2715 <div class="sear_set" style="max-width:100%;"> 2716 <input type="text" id="ser_camp_keyword" list="sear_list" value="" placeholder="ììëª ëë ì¶ì² í¤ìëë¡ ê²ìí´ë³´ì¸ì" /> 2717 </div> 2718 </div> 2719 2720 <ul id="search_result_box" class="search_result_box"> 2721 <li> 2722 <div class="title"> 2723 <strong>ê°ì ê³°ë°°ë ¹ìë²ê·¸ë¦°</strong> 2724 </div> 2725 <p>íì , ê°ì ì¸ì êµ°</p> 2726 </li> 2727 <li> 2728 <div class="title"> 2729 <strong>ê°ì ê³°ë°°ë ¹ìë²ê·¸ë¦°</strong> 2730 </div> 2731 <p>íì , ê°ì ì¸ì êµ°</p> 2732 </li> 2733 <li> 2734 <div class="title"> 2735 <strong>ê°ì ê³°ë°°ë ¹ìë²ê·¸ë¦°</strong> 2736 </div> 2737 <p>íì , ê°ì ì¸ì êµ°</p> 2738 </li> 2739 <li> 2740 <div class="title"> 2741 <strong>ê°ì ê³°ë°°ë ¹ìë²ê·¸ë¦°</strong> 2742 </div> 2743 <p>íì , ê°ì ì¸ì êµ°</p> 2744 </li> 2745 </ul> 2746 2747 2748 <div class="recent_searches"> 2749 <div class="title"> 2750 <strong>ìµê·¼ê²ìì´</strong> 2751 <button type="button">ì ì²´ìì </button> 2752 </div> 2753 <div class="content"> 2754 <div class="swiper-container pop_recent_keyword_swiper"> 2755 <ul class="swiper-wrapper"> 2756 <li class="swiper-slide"> 2757 <div class="box"> 2758 <span>í¤ìë 1</span> 2759 <button class="deleted_button" type="button"><img src="/images/tot_clo.png" alt="" /></button> 2760 </div> 2761 </li> 2762 <li class="swiper-slide"> 2763 <div class="box"> 2764 <span>í¤ìë 2</span> 2765 <button class="deleted_button" type="button"><img src="/images/tot_clo.png" alt="" /></button> 2766 </div> 2767 </li> 2768 </ul> 2769 </div> 2770 </div> 2771 </div> 2772 2773 <div class="recent_searches"> 2774 <div class="title"> 2775 <strong>ë¡í ê²ì í¤ìë ì¶ì²</strong> 2776 </div> 2777 <div class="content"> 2778 <div class="swiper-container pop_recent_keyword_swiper"> 2779 <ul class="swiper-wrapper"> 2780 <li class="swiper-slide"> 2781 <div class="box keyword">ìë° ì¸ì¼ íì¤í</div> 2782 </li> 2783 <li class="swiper-slide"> 2784 <div class="box keyword">ëëì´ë íìê°ë ë¬</div> 2785 </li> 2786 <li class="swiper-slide"> 2787 <div class="box keyword">ì ê·ì ì </div> 2788 </li> 2789 </ul> 2790 </div> 2791 </div> 2792 </div> 2793 2794 <div class="recent_searches"> 2795 <div class="title"> 2796 <strong>ì´ì©ê° í기ìì ì°¾ì ê²ì í¤ìë ì¶ì²</strong> 2797 </div> 2798 <div class="content"> 2799 <div class="none_slide_box"> 2800 <div class="box keyword2">ëì´ìì¤ì´ ë§ì ìì´ë¤ê³¼ í¨ê»í기 ì¢ì ìº íì¥</div> 2801 <div class="box keyword2">ì¬ì§ì´ ìëì¤ë ë·°ê° ë©ì§ ìº íì¥</div> 2802 <div class="box keyword2">ì¬ì¥ëì´ ì¹ì íê³ ìì¤ê´ë¦¬ê° ìëì´ìë ìº íì¥</div> 2803 <div class="box keyword2">ì¡°ì©íê³ ë§¤ëíìì´ ìì§ì¼ì§ë ìº íì¥</div> 2804 </div> 2805 </div> 2806 </div> 2807 2808 <div class="recent_searches"> 2809 <div class="title" style="display: block"> 2810 <strong>ì¤ìê° ê¸ìì¹ ê²ì ìì</strong> 2811 <p class="description">ì§ìë³ ì¤ìê° ê²ì ìì를 ë³´ê³ ì¶ì¼ìë©´ <span>ì¬ê¸°</span>를 ëë¬ ì í¸ì§ìì ì íí´ì£¼ì¸ì. (ìµë3ê°ì§ì ë±ë¡ ê°ë¥)</p> 2812 </div> 2813 <div class="content"> 2814 <ul class="rank"> 2815 <li><span class="rank-number">1</span> <span class="company-name">ì ì²´ëª </span></li> 2816 <li><span class="rank-number">2</span> <span class="company-name">ì ì²´ëª </span></li> 2817 <li><span class="rank-number">3</span> <span class="company-name">ì ì²´ëª </span></li> 2818 <li><span class="rank-number">4</span> <span class="company-name">ì ì²´ëª </span></li> 2819 <li><span class="rank-number">5</span> <span class="company-name">ì ì²´ëª </span></li> 2820 <li><span class="rank-number">6</span> <span class="company-name">ì ì²´ëª </span></li> 2821 <li><span class="rank-number">7</span> <span class="company-name">ì ì²´ëª </span></li> 2822 <li><span class="rank-number">8</span> <span class="company-name">ì ì²´ëª </span></li> 2823 <li><span class="rank-number">9</span> <span class="company-name">ì ì²´ëª </span></li> 2824 <li><span class="rank-number">10</span> <span class="company-name">ì ì²´ëª </span></li> 2825 </ul> 2826 </div> 2827 </div> 2828 2829 <div class="btm_foot"> 2830 <div class="btn_set type2"> 2831 <ul> 2832 <li class="btn_wp"> 2833 <button type="button" class="btn_res"><span id="btn_res_txt">ê²ì</span></button> 2834 </li> 2835 </ul> 2836 </div> 2837 </div> 2838 2839 </div> 2840 2841 </div> 2842</div> 2843 2844<!-- script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=9qnra9njt9"></script -->
2845<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=7pi6a4tp01"></script>
2845
2846<script> 2847 // SearchTypePage ê°: "MAIN" | "MAP" | "LIST" | "COLLECT" 2848 2849 /* íì ê´ë ¨ í¨ì */ 2850 const popSearchManager = { 2851 scrollPosition: 0, 2852 init: function(){ 2853 const popFilterButtonEl = document.getElementById("top_search_input"); 2854 const popFilterCloseButtonEl = document.getElementById("popSearchCloseButton"); 2855 2856 popFilterButtonEl.addEventListener("click", () => { 2857 this.open(); 2858 tabManager.init(); 2859 2860 this.createInfoBox(); 2861 }); 2862 2863 popFilterCloseButtonEl.addEventListener("click", () => { 2864 this.deleteInfoBox(); 2865 this.close(); 2866 }); 2867 2868 this.pageSet(); 2869 }, 2870 // íì ë³ íì´ì§ ì¸í 2871 pageSet: function(){ 2872 const listType = "MAP"; 2873 2874 if(listType == "COLLECT" || listType == "CAMPCOUPON"){ 2875 // 리ì¤í¸ ê²ì ë²í¼ëª ë³ê²½ 2876 const listTabButtonEl = document.getElementById("listTab") 2877 const searchKeywordInputEl = document.querySelector(".search_form_input.search") 2878 listTabButtonEl.innerText = "íí° ê²ì" 2879 searchKeywordInputEl.style.display = "none" 2880 2881 // ì§ë ê²ì ë²í¼ ë¯¸ë ¸ì¶ 2882 const mapTabButtonEl = document.getElementById("mapTab") 2883 mapTabButtonEl.style.display = "none" 2884 } 2885 }, 2886 // íí° íì ì´ê¸° 2887 open: function (filterType) { 2888 this.scrollPosition = window.scrollY; // íì¬ ì¤í¬ë¡¤ ìì¹ ì ì¥ 2889 document.getElementById("search_pop").classList.add("on"); 2890 document.body.style.overflow = "hidden"; 2891 document.body.style.top = `-${this.scrollPosition}px`; // íì¬ ìì¹ ì ì§ 2892 }, 2893 // íí° íì ë«ê¸° 2894 close: function () { 2895 document.getElementById("search_pop").classList.remove("on"); 2896 document.body.style.overflow = "visible"; 2897 document.body.style.top = ""; // ìë ìíë¡ ë³µêµ¬ 2898 window.scrollTo(0, this.scrollPosition); // ì¤í¬ë¡¤ ìì¹ ë³µì 2899 }, 2900 // íì ì¤í ì ë§íì ë ¸ì¶ 2901 createInfoBox: function(){ 2902 document.getElementById("mapInfoBox").classList.add("active"); 2903 setTimeout(() => { 2904 mapInfoBox.classList.remove("active"); 2905 }, 5000); 2906 }, 2907 // íì ë«ì ì ë§íì ì ê±° 2908 deleteInfoBox: function(){ 2909 document.getElementById("mapInfoBox").classList.remove("active"); 2910 }, 2911 2912 // ê²ì íì´ì§ íì ì´ MAP, LIST, COLLECT ì¼ ë search input placeholder ì ë°ì´í¸ 2913 updateSearchInput: function(){ 2914 const listType = "MAP"; 2915 const popFilterInputEl = document.querySelector(".search_div .text"); 2916 let filterTexts = []; 2917 2918 // ê²ì í¤ìë ì¶ê° 2919 if (searchFilterManager._inputFieldEl.value) { 2920 filterTexts.push(searchFilterManager._inputFieldEl.value); 2921 } 2922 2923 // ì§ì ì ë³´ ì¶ê° 2924 if (searchFilterManager._filter.region || searchFilterManager._filter.sub_region.length > 0) { 2925 let regionText = ""; 2926 if (searchFilterManager._filter.sub_region.length > 0) { 2927 regionText += " " + searchFilterManager._filter.sub_region.join(", ").replace(/ã/g, ", "); // ìë¸ ì§ì ì¬ë¬ ê°ì¼ ê²½ì° ì½¤ë§ë¡ ì°ê²° 2928 }else{ 2929 regionText += searchFilterManager._filter.region; 2930 } 2931 filterTexts.push(regionText); 2932 }else{ 2933 if(listType == "LIST" || listType == "COLLECT" || listType == "CAMPCOUPON"){ 2934 filterTexts.push("ì§ì ì ì²´"); 2935 } 2936 } 2937 2938 // ë ì§ ì¶ê° 2939 const dateStr = searchFilterManager.choiceDateStr(); 2940 if (dateStr) { 2941 filterTexts.push(dateStr); 2942 } 2943 2944 // COLLECT ì¼ë, ììêµ¬ë¶ íì 2945 if (listType == "COLLECT" || listType == "CAMPCOUPON") { 2946 let siteTypeText = ""; 2947 2948 if (searchFilterManager._filter.site_type.length > 0) { 2949 const siteTypeMap = { 2950 "BB000": "ì¤í ìº í", 2951 "BB001": "ê¸ë¨í", 2952 "BB002": "ì¹´ë¼ë°", 2953 "BB003": "íì " 2954 }; 2955 2956 // ì½ë ê°ì íê¸ë¡ ë³í 2957 siteTypeText += " " + searchFilterManager._filter.site_type 2958 .map(code => siteTypeMap[code] || code) // 매íë ê°ì´ ìì¼ë©´ ìë ì½ë ì ì§ 2959 .join(", "); 2960 2961 filterTexts.push(siteTypeText); 2962 } else { 2963 filterTexts.push("ììêµ¬ë¶ ì ì²´"); 2964 } 2965 } 2966 2967 2968 // ì¸ì ì¶ê° 2969 let peopleText = []; 2970 if (searchFilterManager._filter.adultCount > 0) { 2971 peopleText.push(`ì±ì¸ ${searchFilterManager._filter.adultCount}`); 2972 } 2973 if (searchFilterManager._filter.childCount > 0) { 2974 peopleText.push(`ìì¸ ${searchFilterManager._filter.childCount}`); 2975 } 2976 if (peopleText.length > 0) { 2977 filterTexts.push(peopleText.join("/")); 2978 } 2979 2980 popFilterInputEl.innerHTML = filterTexts.join("ã"); 2981 } 2982 2983 } 2984 2985 /* í ê´ë ¨ í¨ì */ 2986 const tabManager = { 2987 init: function(){
2988 const tabs = document.querySelectorAll(".search_tab li"); 2989 const listType = "MAP"; 2990 const listTypeNum = listType == "MAP" ? 1 : 0; 2991 2992 // ì´ê¸°ì ìì ê²ì íì±í 2993 this.setActiveTab(listTypeNum); 2994 2995 // í í´ë¦ ì´ë²¤í¸ 2996 tabs.forEach((tab, index) => { 2997 tab.addEventListener("click", () => tabManager.setActiveTab(index)); 2998 }); 2999 }, 3000 isListActive: function() { 3001 return this.currentTab === 'list'; // 'list' íì´ íì±íëìì¼ë©´ true 3002 }, 3003 setActiveTab: function(index){ 3004 const listType = "MAP"; 3005 const tabs = document.querySelectorAll(".search_tab li"); 3006 const listSearchContent = document.getElementById("list-search-content"); 3007 const mapSearchContent = document.getElementById("map-search-content"); 3008 const mapBoxContent = document.getElementById("map_search_wrap"); 3009 3010 // 모ë íìì active ì ê±° 3011 tabs.forEach(tab => tab.classList.remove("active")); 3012 // í´ë¦í íì active ì¶ê° 3013 tabs[index].classList.add("active"); 3014 3015 if (index === 0) { 3016 // ììê²ì íì±í 3017 listSearchContent.style.display = "block"; 3018 mapSearchContent.style.display = "none"; 3019 3020 this.updateSearchButton(() => searchFilterManager.submitSearch()); 3021 } else { 3022 // ì§ëê²ì íì±í 3023 listSearchContent.style.display = "none"; 3024 mapSearchContent.style.display = "block"; 3025 3026 const width = mapBoxContent.clientWidth; // ê°ë¡ê° 3027 const height = mapBoxContent.clientHeight; // ì¸ë¡ê° 3028 3029 console.log("ê°ë¡:", width, "ì¸ë¡:", height); 3030 3031 if(searchMapManager._MAP == null){ 3032 // ì§ë ê´ë ¨ ì´ë²¤í¸ 3033 searchMapManager.init(); 3034 } 3035 3036 if(listType == "MAP"){ 3037 // ì§ë íì´ì§ì ìë ë©ì¸ ì§ë ê°ì´ë° ì¢í ê°ì ¸ì
3037¤ê¸° 3038 if(typeof _MAP != "undefined"){ 3039 const mainMapCenter = _MAP.getCenter(); 3040 searchMapManager._MAP.setCenter(new naver.maps.LatLng(mainMapCenter._lat, mainMapCenter._lng)); 3041 searchMapManager._MAP.setSize(new naver.maps.Size(width, height)); 3042 } 3043 } else{ 3044 searchMapManager._MAP.setSize(new naver.maps.Size(width, height)); 3045 } 3046 3047 this.updateSearchButton(() => searchFilterManager.submitMapSearch()); 3048 } 3049 }, 3050 updateSearchButton: function(eventHandler){ 3051 const searchButton = document.getElementById("submitSearch"); 3052 3053 // 기존 ì´ë²¤í¸ ì ê±° í ìë¡ì´ ì´ë²¤í¸ ì¶ê° 3054 searchButton.replaceWith(searchButton.cloneNode(true)); 3055 const newSearchButton = document.getElementById("submitSearch"); 3056 3057 newSearchButton.addEventListener("click", eventHandler); 3058 } 3059 } 3060 3061 /* ì¤ìì´í¼ ê´ë ¨ í¨ì */ 3062 const swiperManager = { 3063 init: function(){ 3064 this.listFilter(); 3065 this.popRecentKeyword(); 3066 this.placeTab(); 3067 this.stayBtn(); 3068 this.adCampList(); 3069 }, 3070 // 리ì¤í¸ íì´ì§ íí° ì í êµ¬ë¶ 3071 listFilter: function(){ 3072 const recent_swiper = new Swiper('.recent_swiper', { 3073 pagination: false, 3074 slidesPerView: 'auto', 3075 paginationClickable: true, 3076 spaceBetween: 8, 3077 freeMode: true, 3078 lazyLoading: true, 3079 observer: true, 3080 observeParents: true, 3081 loop: false, 3082 }); 3083 3084 return recent_swiper; 3085 }, 3086 // ìë°êµ¬ë¶ë¶ ì í í 3087 stayBtn: function(){ 3088 const recent_swiper = new Swiper('.stay_btn_swiper', { 3089 pagination: false, 3090 slidesPerView: 'auto', 3091 paginationClickable: true, 3092 spaceBetween: 6, 3093 freeMode: true, 3094 lazyLoading: true, 3095 observer: true, 3096 observeParents: true, 3097 loop: false, 3098 }); 3099 3100 return recent_swiper; 3101 }, 3102 // ì§ì ì í í 3103 placeTab: function(){ 3104 const recent_swiper = new Swiper('.place_tab_swiper', { 3105 pagination: false, 3106 slidesPerView: 'auto', 3107 paginationClickable: true, 3108 spaceBetween: 8, 3109 freeMode: true, 3110 lazyLoading: true, 3111 observer: true, 3112 observeParents: true, 3113 loop: false, 3114 }); 3115 3116 return recent_swiper; 3117 }, 3118 // íì ìµê·¼ ê²ìì´ 3119 popRecentKeyword: function(){ 3120 const recent_swiper = new Swiper('.pop_recent_keyword_swiper', { 3121 pagination: false, 3122 slidesPerView: 'auto', 3123 paginationClickable: true, 3124 spaceBetween: 8, 3125 freeMode: true, 3126 lazyLoading: true, 3127 observer: true, 3128 observeParents: true, 3129 loop: false, 3130 }); 3131 3132 return recent_swiper; 3133 }, 3134 // ê²ì ê´ê³ ìì 3135 adCampList: function(){ 3136 const ad_camp_swiper = new Swiper('.ad_camp_swiper', { 3137 pagination: false, 3138 slidesPerView: 'auto', 3139 paginationClickable: true, 3140 spaceBetween: 8, 3141 freeMode: true, 3142 lazyLoading: true, 3143 observer: true, 3144 observeParents: true, 3145 loop: false, 3146 }); 3147 3148 return ad_camp_swiper; 3149 }, 3150 }; 3151 3152 3153 /* ê²ìì´ ì ë ¥ ê´ë ¨ í¨ì */ 3154 const searchUrlParams = new URLSearchParams(window.location.search); 3155 const searchFilterManager = { 3156 _searchType: "MAP", 3157 _searchFormEl: document.querySelectorAll('.search_form_input'), 3158 _inputFieldEl: document.getElementById("ser_keyword_"), 3159 _placeCategoryButtonEl: document.querySelectorAll(".place_button"), 3160 _filter: { 3161 site_type: searchUrlParams.get("site_tp") ? searchUrlParams.get("site_tp").split(",") : [], 3162 res_date: searchUrlParams.get("res_dt") || "", 3163 res_end_date: searchUrlParams.get("res_edt") || "", 3164 ser_res_date: searchUrlParams.get("res_dt") || "", 3165 ser_res_end_date: searchUrlParams.get("res_edt") || "", 3166 region: searchUrlParams.get("region") || "", 3167 sub_region: searchUrlParams.get("sub_region") ? searchUrlParams.get("sub_region").split(",") : [], 3168 adultCount: searchUrlParams.get("ser_adult_count") || 0, 3169 childCount: searchUrlParams.get("ser_child_count") || 0, 3170 lat: null, 3171 lng: null 3172 }, 3173 init: function(){
3174 // 기존 ë ì§ ì¸í 3175 this.getResDate(); 3176 // 기존 ì¸ì ì¸í 3177 this.getPersonCount(); 3178 // í¤ìë ê²ì ì´ë²¤í¸ 3179 this._inputFieldEl.value = searchUrlParams.get("ser_keyword"); 3180 this._inputFieldEl.addEventListener("keyup", this.getKeywordCampName); 3181 if(this._inputFieldEl.value != ""){ 3182 document.getElementById("deleteKeyword").style.display = "inline"; 3183 } 3184 // 기존 ììêµ¬ë¶ ì¸í 3185 this.getSiteType(); 3186 this.choiceSiteType(); 3187 3188 // íì ì¤í input í ì¤í¸ ì¸í 3189 if(searchFilterManager._searchType == "MAP" || searchFilterManager._searchType == "LIST" || searchFilterManager._searchType == "COLLECT" || searchFilterManager._searchType == "CAMPCOUPON"){ 3190 popSearchManager.updateSearchInput(); 3191 } 3192 3193 if(searchFilterManager._searchType == "LIST" && !(searchFilterManager._filter.ser_res_date == "" && searchFilterManager._filter.ser_res_end_date == "" )){ 3194 const emptyButtonEl = document.getElementById("empty_y"); 3195 emptyButtonEl.style.display = "block"; 3196 } 3197 3198 // ê²ìí기 ë²í¼ ì´ë²¤í¸ 3199 document.getElementById("submitSearch").addEventListener("click", this.submitSearch); 3200 3201 // ê²ì ì¸í ì´ê¸°í ë²í¼ ì´ë²¤í¸ 3202 document.getElementById("deleteKeyword").addEventListener("click", function(){ 3203 document.getElementById("search_result_box").style.display = "none"; 3204 document.getElementById("search_result_info_box").style.display = "none"; 3205 document.getElementById("deleteKeyword").style.display = "none"; 3206 searchFilterManager._inputFieldEl.value = "" 3207 }); 3208 3209 // ë¬ë ¥ ì¼ì ì´ê¸°í ë²í¼ 3210 document.getElementById("calendarResetButton").addEventListener("click", function(){ 3211 searchFilterManager.getResDate(true); 3212 }); 3213 3214 3215 // íí° ì¸í ë²í¼ ì´ë²¤í¸ 3216 this._searchFormEl.forEach(input => { 3217 input.addEventListener('click', function(event) { 3218 document.querySelectorAll('.search_form_input').forEach(el => { 3219 document.getElementById("search_result_box").style.display = "none"; 3220 document.getElementById("search_result_info_box").style.disply = "none"; 3221 el.classList.remove("active"); 3222 }); 3223 3224 this.classList.add("active"); 3225 document.querySelectorAll('.search_choice_box').forEach(box => { 3226 box.style.display = 'none'; 3227 }); 3228 3229 const choiceBox = this.querySelector('.search_choice_box'); 3230 if (choiceBox) { 3231 choiceBox.style.display = 'block'; 3232 } 3233 3234 event.stopPropagation(); 3235 }); 3236 }); 3237 3238 document.addEventListener('click', function() { 3239 document.querySelectorAll('.search_choice_box').forEach(box => { 3240 box.style.display = 'none'; 3241 if(searchFilterManager._filter.res_date != "" && searchFilterManager._filter.res_end_date == ""){ 3242 searchFilterManager._filter.res_end_date = searchFilterManager._filter.res_date; 3243 searchFilterManager.updateDatePlaceholder(); 3244 } 3245 }); 3246 document.querySelectorAll('.search_form_input').forEach(el => { 3247 document.getElementById("search_result_box").style.display = "none"; 3248 document.getElementById("search_result_info_box").style.display = "none"; 3249 el.classList.remove("active"); 3250 }); 3251 }); 3252 3253 this.updateRegionPlaceholder(); 3254 this._placeCategoryButtonEl.forEach((button, index) => { 3255 button.addEventListener('click', function () { 3256 searchFilterManager._placeCategoryButtonEl.forEach(btn => btn.classList.remove("active")); 3257 3258 const region_grp = button.getAttribute('data-value'); 3259 const region = button.getAttribute('data-region'); 3260 const region_arr = button.getAttribute('data-arr'); 3261 const placeChoiceBox = document.getElementById('place_choice_box'); 3262 const placeChoiceUl = placeChoiceBox.querySelector('ul'); 3263 3264 button.classList.add("active"); 3265 searchFilterManager._filter.region = region_grp; 3266 searchFilterManager._filter.sub_region = []; 3267 placeChoiceUl.innerHTML = ''; 3268 searchFilterManager.updateRegionPlaceholder(); 3269 3270 3271 searchFilterManager.getRegionList(region_grp, region, region_arr); 3272 }); 3273 }); 3274 3275 3276 3277 // ë´ ì£¼ë³ìì ê²ì ë²í¼ 3278 document.getElementById("map_nearby_button").addEventListener("click", function(){ 3279 location.href="/search/mapSearch.hbb"; 3280 }) 3281 3282 }, 3283 3284 // ì±í¬ ë§ì¶°ì¼í ë°ì´í° ê´ë¦¬ searchFilterManager.syncFilters(); 3285 syncFilters: function () { 3286 3287 // LIST íì´ì§ ë기í 3288 if (searchFilterManager._searchType == "LIST") { 3289 filterManager._selectedFilters.ser_site_tp = [...searchFilterManager._filter.site_type]; 3290 filterManager._selectedFilters['ser_site_tp'] = [...searchFilterManager._filter.site_type]; 3291 3292 // UI ë°ì 3293 document.querySelectorAll(`.item_list button[name='ser_site_tp']`).forEach(item => { 3294 const value = item.getAttribute('value'); 3295 if (searchFilterManager._filter.site_type.includes(value)) { 3296 item.classList.add("active"); 3297 } else { 3298 item.classList.remove("active"); 3299 } 3300 }); 3301 3302 document.querySelectorAll(`.stay_button[name='site_tp']`).forEach(item => { 3303 const value = item.getAttribute('value'); 3304 if (searchFilterManager._filter.site_type.includes(value)) { 3305 item.classList.add("active"); 3306 } else { 3307 item.classList.remove("active"); 3308 } 3309 }); 3310 3311 headFilterManager.updateActiveFilters(); 3312 } 3313 3314 // site_typeì´ ë¹ì´ ìì¼ë©´ 'ì ì²´' ë²í¼ íì±í, ìëë©´ ë¹íì±í 3315 const allButtonEl = document.getElementById("site_tp_all"); 3316 if (searchFilterManager._filter.site_type.length === 0) { 3317 allButtonEl.classList.add("active"); 3318 } else { 3319 allButtonEl.classList.remove("active"); 3320 } 3321 }, 3322 3323 // í¤ìë ê²ì 3324 getKeywordCampName: function(){
3325 const resultBoxEl = document.getElementById("search_result_box"); 3326 const resultInfoBoxEl = document.getElementById("search_result_info_box"); 3327 3328 if(searchFilterManager._inputFieldEl.value.length > 0) { 3329 document.getElementById("deleteKeyword").style.display = "inline"; 3330 }else{ 3331 document.getElementById("deleteKeyword").style.display = "none"; 3332 } 3333 3334 if(searchFilterManager._inputFieldEl.value.length > 1) { 3335 console.log(searchFilterManager._inputFieldEl.value); 3336 3337 $.ajax({ 3338 type: "POST", 3339 url: "/resv/ax_camp_name.hbb", 3340 data:{ser_camp_name: searchFilterManager._inputFieldEl.value}, 3341 success: onSuccess, 3342 error: onError 3343 }); 3344 3345 function onSuccess(dataobj) { 3346 const result = JSON.parse(dataobj); 3347 const keyword = searchFilterManager._inputFieldEl.value.trim(); 3348 let contents = []; 3349 3350 if (result.length === 0) { 3351 // ê²°ê³¼ê° ìì ë 3352 contents.push( 3353 `<li> 3354 <a href="javascript:;"> 3355 <span class="searchPlace_icon"></span> 3356 <p class="keword_text">ê²ìë ìº íì¥ì´ ììµëë¤.</span></p> 3357 </a> 3358 </li>`); 3359 } else { 3360 // ê²°ê³¼ê° ìì ë 3361 result.forEach((data) => { 3362 const highlightedName = data.campName.replace( 3363 new RegExp(`(${keyword})`, "gi"), 3364 `<span style="color: #F27226; font-weight: bold;">$1</span>` 3365 ); 3366 3367 const el = 3368 `<li> 3369 <a href="javascript:clkViewDirect('${data.campSeq}');"> 3370 <span class="searchPlace_icon"></span> 3371 <p class="keword_text">${highlightedName}</p> 3372 <p class="keword_content">${data.campType}, ${data.shortAddress}</p> 3373 </a> 3374 </li>`; 3375 contents.push(el); 3376 }); 3377 } 3378 3379 document.getElementById('search_result_box').innerHTML = contents.join(""); 3380 } 3381 3382 3383 function onError() {} 3384 3385 resultBoxEl.style.display = 'block'; 3386 resultInfoBoxEl.style.display = 'block'; 3387 } else { 3388 document.getElementById('search_result_box').innerHTML = ""; 3389 resultBoxEl.style.display = 'none'; 3390 resultInfoBoxEl.style.display = 'none'; 3391 } 3392 }, 3393 3394 getRegionList: function(region_grp, region, arr){ 3395 const site_tp = searchFilterManager._filter.site_type ? searchFilterManager._filter.site_type.join(",") : ""; 3396 const listType = "MAP"; 3397 3398 $.ajax({ 3399 type: "POST", 3400 url: "/search/axRegion.hbb", 3401 data: {region_grp: region_grp, region: region, site_tp: site_tp}, 3402 success: onSuccess, 3403 error: onError 3404 }); 3405 3406 function onSuccess(dataobj) { 3407 document.getElementById('place_result_box').innerHTML = dataobj; 3408 3409 if(listType == "COLLECT" || listType == "CAMPCOUPON"){ 3410 document.querySelectorAll('.sub_region .tnum').forEach(el => el.remove()); 3411 } 3412 3413 searchFilterManager.choiceRegion(); 3414 } 3415 3416 function onError() {} 3417 }, 3418 choiceRegion: function() { 3419 const allSubRegionButtonEl = document.getElementById("all_sub_region"); 3420 const subRegionButtonsEl = document.querySelectorAll('.sub_region'); 3421 3422 // íì´ì§ ë¡ë ì ì íë ì§ìë¤ì ëí UI ìí ë기í 3423 this.syncSubRegionUI(); 3424 3425 subRegionButtonsEl.forEach(button => { 3426 button.addEventListener('click', () => { 3427 const value = button.getAttribute('data-sub-region'); 3428 3429 if (this._filter.sub_region.includes(value)) { 3430 // ì íë ì§ììì ì ê±° 3431 this._filter.sub_region = this._filter.sub_region.filter(item => item !== value); 3432 button.classList.remove('active'); 3433 } else { 3434 // ì íë ê°ìê° 3ê° ë¯¸ë§ì¼ ëë§ ì¶ê° 3435 if (this._filter.sub_region.length < 3) { 3436 this._filter.sub_region.push(value); 3437 button.classList.add('active'); 3438 } else { 3439 return; // ì í ê°ì ì í ì´ê³¼ ì ì²ë¦¬ 3440 } 3441 } 3442 3443 // ì§ì ë±ì§ ì ë°ì´í¸ 3444 this.addRegionBadge(); 3445 this.updateRegionPlaceholder(); 3446 }); 3447 }); 3448 3449 // "모ë ì§ì ì í" ë²í¼ ì²ë¦¬ 3450 allSubRegionButtonEl.addEventListener('click', () => { 3451 this._filter.sub_region = []; 3452 subRegionButtonsEl.forEach(button => button.classList.remove('active')); 3453 allSubRegionButtonEl.classList.add('active'); 3454 3455 // ì§ì ë±ì§ ë° íëì´ì¤íë ì ë°ì´í¸ 3456 this.addRegionBadge(); 3457 this.updateRegionPlaceholder(); 3458 }); 3459 }, 3460 // ì§ì UI ìí ë기í 3461 syncSubRegionUI: function() { 3462 const subRegionButtonsEl = document.querySelectorAll('.sub_region');
3463 const allSubRegionButtonEl = document.getElementById("all_sub_region"); 3464 3465 // 기존 ì íë ì§ìë¤ì ëí UI ìí ì ë°ì´í¸ 3466 subRegionButtonsEl.forEach(button => { 3467 const value = button.getAttribute('data-sub-region'); 3468 if (this._filter.sub_region.includes(value)) { 3469 button.classList.add('active'); 3470 } else { 3471 button.classList.remove('active'); 3472 } 3473 }); 3474 3475 // "모ë ì§ì ì í" ë²í¼ ì²ë¦¬ 3476 if (this._filter.sub_region.length === 0) { 3477 allSubRegionButtonEl.classList.add('active'); 3478 } else { 3479 allSubRegionButtonEl.classList.remove('active'); 3480 } 3481 }, 3482 // ì§ì ì í ì ìë ë±ì§ ì¶ê° 3483 addRegionBadge: function () { 3484 const placeChoiceBox = document.getElementById('place_choice_box'); 3485 const placeChoiceUl = placeChoiceBox.querySelector('ul'); 3486 3487 // 기존 ë±ì§ë¤ì´ ì¤ë³µëì§ ìëë¡ ì²ë¦¬ 3488 placeChoiceUl.innerHTML = ''; // 기존 ë±ì§ë¤ ì´ê¸°í 3489 this._filter.sub_region.forEach(sub_region => { 3490 const li = document.createElement('li'); 3491 li.classList.add('badge_button'); 3492 li.setAttribute('data-value', sub_region); 3493 li.innerHTML = ` 3494 ${sub_region} 3495 <button type="button" class="place_choice_delete btn_close" data-value="${sub_region}"> 3496 <img src="/images/tot_clo.png"> 3497 </button> 3498 `; 3499 3500 li.querySelector('.place_choice_delete').addEventListener('click', () => { 3501 this._filter.sub_region = this._filter.sub_region.filter(item => item !== sub_region); 3502 document.querySelector(`.sub_region[data-sub-region="${sub_region}"]`)?.classList.remove('active'); 3503 this.addRegionBadge(); // ë±ì§ ì ë°ì´í¸ 3504 this.updateRegionPlaceholder(); // íëì´ì¤íë ì ë°ì´í¸ 3505 }); 3506 3507 placeChoiceUl.appendChild(li); 3508 }); 3509 }, 3510 // ì§ì ì í ì placeholder ì ë°ì´í¸ 3511 updateRegionPlaceholder: function() { 3512 const regionPlaceholder = document.querySelector('.place .placeholder'); 3513 3514 if (this._filter.region.length > 0) { 3515 if(this._filter.sub_region.length > 0){ 3516 document.getElementById('all_sub_region')?.classList.remove("active"); 3517 regionPlaceholder.innerHTML = this._filter.region + ' ' + (this._filter.sub_region.length > 0 ? this._filter.sub_region.join(', ') : ''); 3518 }else{ 3519 document.getElementById('all_sub_region')?.classList.add("active"); 3520 regionPlaceholder.innerHTML = this._filter.region; 3521 } 3522 } else { 3523 document.getElementById('all_sub_region')?.classList.add("active"); 3524 regionPlaceholder.innerHTML = 'ì§ìì ì í íì¸ì.'; 3525 } 3526 }, 3527 3528 getPersonCount: function() { 3529 // ì±ì¸ ì¹´ì´í¸ ê´ë ¨ ìì 3530 const adultCountEl = document.querySelectorAll(".count_box.adult .count_box_num"); 3531 const adultIncreaseBtn = document.querySelectorAll(".count_box.adult .count_box_increase"); 3532 const adultDecreaseBtn = document.querySelectorAll(".count_box.adult .count_box_decrease"); 3533 3534 // ìì´(ìì¸) ì¹´ì´í¸ ê´ë ¨ ìì 3535 const childCountEl = document.querySelectorAll(".count_box.child .count_box_num"); 3536 const childIncreaseBtn = document.querySelectorAll(".count_box.child .count_box_increase"); 3537 const childDecreaseBtn = document.querySelectorAll(".count_box.child .count_box_decrease"); 3538 3539 // ì´ê¸° ê° ë°ì 3540 adultCountEl.forEach(el => el.textContent = searchFilterManager._filter.adultCount); 3541 childCountEl.forEach(el => el.textContent = searchFilterManager._filter.childCount); 3542 3543 // ì±ì¸ ì¦ê° ë²í¼ í´ë¦ ì´ë²¤í¸ 3544 adultIncreaseBtn.forEach(btn => { 3545 btn.addEventListener("click", function () { 3546 searchFilterManager._filter.adultCount++; 3547 adultCountEl.forEach(el => el.textContent = searchFilterManager._filter.adultCount); 3548 3549 searchFilterManager.updatePersonPlaceholder(); 3550 searchFilterManager.updateButtonState(); 3551 }); 3552 }); 3553 3554 // ì±ì¸ ê°ì ë²í¼ í´ë¦ ì´ë²¤í¸ 3555 adultDecreaseBtn.forEach(btn => { 3556 btn.addEventListener("click", function () { 3557 if (searchFilterManager._filter.adultCount > 1 || (searchFilterManager._filter.adultCount == 1 && searchFilterManager._filter.childCount == 0)) { 3558 searchFilterManager._filter.adultCount--; 3559 adultCountEl.forEach(el => el.textContent = searchFilterManager._filter.adultCount); 3560 3561 searchFilterManager.updatePersonPlaceholder(); 3562 searchFilterManager.updateButtonState(); 3563 } 3564 }); 3565 }); 3566 3567 // ìì´(ìì¸) ì¦ê° ë²í¼ í´ë¦ ì´ë²¤í¸
3568 childIncreaseBtn.forEach(btn => { 3569 btn.addEventListener("click", function () { 3570 if (searchFilterManager._filter.adultCount > 0) { 3571 searchFilterManager._filter.childCount++; 3572 childCountEl.forEach(el => el.textContent = searchFilterManager._filter.childCount); 3573 3574 searchFilterManager.updatePersonPlaceholder(); 3575 searchFilterManager.updateButtonState(); 3576 } 3577 }); 3578 }); 3579 3580 // ìì´(ìì¸) ê°ì ë²í¼ í´ë¦ ì´ë²¤í¸ 3581 childDecreaseBtn.forEach(btn => { 3582 btn.addEventListener("click", function () { 3583 if (searchFilterManager._filter.childCount > 0) { 3584 searchFilterManager._filter.childCount--; 3585 childCountEl.forEach(el => el.textContent = searchFilterManager._filter.childCount); 3586 3587 searchFilterManager.updatePersonPlaceholder(); 3588 searchFilterManager.updateButtonState(); 3589 } 3590 }); 3591 }); 3592 3593 // ì ë°ì´í¸ ìí 3594 this.updateButtonState(); 3595 this.updatePersonPlaceholder(); 3596 }, 3597 // ì¸ì ë²í¼ ìí ì ë°ì´í¸ 3598 updateButtonState: function(){ 3599 const adultDecreaseBtn = document.querySelectorAll(".count_box.adult .count_box_decrease"); 3600 const childDecreaseBtn = document.querySelectorAll(".count_box.child .count_box_decrease"); 3601 const childIncreaseBtn = document.querySelectorAll(".count_box.child .count_box_increase"); 3602 3603 // ì±ì¸ ë²í¼ ìí 3604 if (searchFilterManager._filter.adultCount == 0 || (searchFilterManager._filter.adultCount == 1 && searchFilterManager._filter.childCount > 0)) { 3605 adultDecreaseBtn.forEach(adult => { 3606 adult.classList.add("disabled"); 3607 }) 3608 } else { 3609 adultDecreaseBtn.forEach(adult => { 3610 adult.classList.remove("disabled"); 3611 }) 3612 } 3613 // ìì´ ë²í¼ ìí 3614 if (searchFilterManager._filter.adultCount == 0) { 3615 childIncreaseBtn.forEach(child => { 3616 child.classList.add("disabled"); 3617 }) 3618 } else { 3619 childIncreaseBtn.forEach(child => { 3620 child.classList.remove("disabled"); 3621 }) 3622 } 3623 // ìì´ ë²í¼ ìí 3624 if (searchFilterManager._filter.childCount == 0) { 3625 childDecreaseBtn.forEach(child => { 3626 child.classList.add("disabled"); 3627 }) 3628 } else { 3629 childDecreaseBtn.forEach(child => { 3630 child.classList.remove("disabled"); 3631 }) 3632 } 3633 }, 3634 // ì¸ì ì ì í ì placeholder ì ë°ì´í¸ 3635 updatePersonPlaceholder: function() { 3636 const personPlaceholders = document.querySelectorAll('.people .placeholder'); 3637 const adultCount = this._filter.adultCount; 3638 const childCount = this._filter.childCount; 3639 3640 personPlaceholders.forEach(holder => holder.innerHTML = `ì±ì¸${adultCount}, ìì¸${childCount}`); 3641 }, 3642 3643 getResDate: function(isReset){ 3644 if(isReset || (searchFilterManager._filter.res_date == "" && searchFilterManager._filter.res_end_date == "")){ 3645 const today = new Date(); 3646 const tomorrow = new Date(today); 3647 tomorrow.setDate(today.getDate() + 1); 3648 3649 // ë ì§ í¬ë§· (yyyyMMdd) 3650 const todayStr = today.getFullYear() + ('0' + (today.getMonth() + 1)).slice(-2) + ('0' + today.getDate()).slice(-2); 3651 const tomorrowStr = tomorrow.getFullYear() + ('0' + (tomorrow.getMonth() + 1)).slice(-2) + ('0' + tomorrow.getDate()).slice(-2); 3652 3653 this._filter.res_date = todayStr; 3654 this._filter.res_end_date = tomorrowStr; 3655 3656 // datePicker ê°ë ê°ë³ì ì¼ë¡ ì´ê¸°í 3657 $(".datepicker-list").datepicker("setDate", today); 3658 $(".datepicker-map").datepicker("setDate", today); 3659 } 3660 3661 if(searchFilterManager._filter.res_date == searchFilterManager._filter.res_end_date || (searchFilterManager._filter.res_date != "" && searchFilterManager._filter.res_end_date == "")){ 3662 const siteTypeBoxEl = document.getElementById("search_site_type_box"); 3663 siteTypeBoxEl.style.display = "none"; 3664 } 3665 3666 // ë ì§ë¥¼ placeholderì ë°ì 3667 this.updateDatePlaceholder(); 3668 }, 3669 choiceDateStr: function(){ 3670 const datePlaceholders = document.querySelectorAll('.calendar .placeholder'); 3671 3672 // res_date를 Date ê°ì²´ë¡ ë³í (yyyyMMdd íì) 3673 const startDate = new Date(this._filter.ser_res_date.substring(0, 4), this._filter.ser_res_date.substring(4, 6) - 1, this._filter.ser_res_date.substring(6, 8)); 3674 const serStartDate = new Date(this._filter.res_date.substring(0, 4), this._filter.res_date.substring(4, 6) - 1, this._filter.res_date.substring(6, 8)); 3675 3676 // res_end_dateë ëì¼íê² ì²ë¦¬
3677 const endDate = new Date(this._filter.ser_res_end_date.substring(0, 4), this._filter.ser_res_end_date.substring(4, 6) - 1, this._filter.ser_res_end_date.substring(6, 8)); 3678 const serEndDate = new Date(this._filter.res_end_date.substring(0, 4), this._filter.res_end_date.substring(4, 6) - 1, this._filter.res_end_date.substring(6, 8)); 3679 3680 // ë ì§ íìì´ ì¬ë°ë¥¸ì§ íì¸ 3681 if (isNaN(startDate) || isNaN(endDate)) { 3682 datePlaceholders.forEach(holder => holder.innerHTML = 'ë ì§ë¥¼ ì íí´ ì£¼ì¸ì.'); 3683 return; 3684 } 3685 3686 // ë ì§ë¥¼ 'yyyy.MM.dd' íìì¼ë¡ ë³í (02.02) 3687 //const startFormatted = startDate.getFullYear().toString().slice(-2) + '.' + ('0' + (startDate.getMonth() + 1)).slice(-2) + '.' + ('0' + startDate.getDate()).slice(-2); 3688 //const endFormatted = startDate.getFullYear().toString().slice(-2) + '.' + ('0' + (endDate.getMonth() + 1)).slice(-2) + '.' + ('0' + endDate.getDate()).slice(-2); 3689 const startFormatted = ('0' + (startDate.getMonth() + 1)).slice(-2) + '.' + ('0' + startDate.getDate()).slice(-2); 3690 const endFormatted = ('0' + (endDate.getMonth() + 1)).slice(-2) + '.' + ('0' + endDate.getDate()).slice(-2); 3691 const serStartFormatted = ('0' + (serStartDate.getMonth() + 1)).slice(-2) + '.' + ('0' + serStartDate.getDate()).slice(-2); 3692 const serEndFormatted = ('0' + (serEndDate.getMonth() + 1)).slice(-2) + '.' + ('0' + serEndDate.getDate()).slice(-2); 3693 3694 // ìì¼ ê³ì° (ì§§ì ìì¼ ì´ë¦)
3695 const startDay = startDate.toLocaleString('ko-KR', { weekday: 'short' }); 3696 const endDay = endDate.toLocaleString('ko-KR', { weekday: 'short' }); 3697 const serStartDay = serStartDate.toLocaleString('ko-KR', { weekday: 'short' }); 3698 const serEndDay = serEndDate.toLocaleString('ko-KR', { weekday: 'short' }); 3699 3700 if (this._filter.ser_res_date == "" || this._filter.ser_res_end_date == "") { 3701 datePlaceholders.forEach(holder => holder.innerHTML = `${serStartFormatted} ${serStartDay} - ${serEndFormatted} ${serEndDay}, ${this.calculateNights()}`); 3702 return 'ì¼ì ì í'; 3703 } 3704 3705 if((this._filter.res_date != "" && this._filter.res_end_date == "") || startFormatted == endFormatted){ 3706 return `${startFormatted} ${startDay}, ${this.calculateNights()}(í¼í¬ë)`; 3707 } 3708 3709 return `${startFormatted} ${startDay} - ${endFormatted} ${endDay}, ${this.calculateNights()}`; 3710 }, 3711 // ë ì§ ë³ê²½ ì placeholder ì ë°ì´í¸ 3712 updateDatePlaceholder: function() { 3713 const datePlaceholders = document.querySelectorAll('.calendar .placeholder'); 3714 const dateChoiceInfo = document.querySelector(".twonight"); 3715 3716 // ê²°ê³¼ ì¶ë ¥ (ì: 2025.02.19 목 - 2025.02.20 ê¸, 1ë°) 3717 datePlaceholders.forEach(holder => holder.innerHTML = searchFilterManager.choiceDateStr()); 3718 // ê²°ê³¼ ì¶ë ¥ (ì: ë¹ì¼, 1ë° ì í, 2ë° ì í) 3719 dateChoiceInfo.innerHTML = searchFilterManager.choiceDateStr(); 3720 }, 3721 // ìë°ì¼ì ê³ì° 3722 calculateNights: function() { 3723 // ìì ë ì§ì ì¢ ë£ ë ì§ë¥¼ yyyyMMdd íììì Date ê°ì²´ë¡ ë³í 3724 const startDate = new Date(this._filter.res_date.substring(0, 4), this._filter.res_date.substring(4, 6) - 1, this._filter.res_date.substring(6, 8)); 3725 const endDate = new Date(this._filter.res_end_date.substring(0, 4), this._filter.res_end_date.substring(4, 6) - 1, this._filter.res_end_date.substring(6, 8)); 3726 3727 // ë ì§ê° ì í¨íì§ íì¸ 3728 if (isNaN(startDate) || isNaN(endDate)) { 3729 console.error("Invalid date format"); 3730 return 0; // ë ì§ê° ì í¨íì§ ìì¼ë©´ 0ë° 3731 } 3732 3733 // ë ì§ ì°¨ì´ ê³ì° (ë¨ì: ë°) 3734 const difference = (endDate - startDate) / (1000 * 60 * 60 * 24); 3735 3736 // 0ë° ì´íë¡ ê³ì°ë ê²½ì°ìë ë¹ì¼ë¡ ì²ë¦¬ 3737 return difference <= 0 ? `ë¹ì¼` : `${difference}ë°`; 3738 }, 3739 3740 // ìì êµ¬ë¶ ì¸í 3741 getSiteType: function () { 3742 const allButtonEl = document.getElementById("site_tp_all"); 3743 const value = searchFilterManager._filter['site_type']; 3744 3745 // 모ë ë²í¼ì 'active' í´ëì¤ ì´ê¸°í 3746 document.querySelectorAll(`.stay_button[name='site_tp']`).forEach(btn => btn.classList.remove("active")); 3747 3748 if (Array.isArray(value) && value.length > 0) { 3749 value.forEach(val => { 3750 document.querySelectorAll(`.stay_button[name='site_tp'][value='${val}']`).forEach(btn => btn.classList.add("active")); 3751 }); 3752 allButtonEl.classList.remove("active"); // ê°ë³ ì í ì 'ì ì²´' ë¹íì±í 3753 } else { 3754 allButtonEl.classList.add("active"); // ì무ê²ë ì íëì§ ìì¼ë©´ 'ì ì²´' íì±í 3755 } 3756 }, 3757 // ìì êµ¬ë¶ ë ¸ì¶ ì¬ë¶ 3758 isSiteType: function(){ 3759 const siteTypeBoxEl = document.getElementById("search_site_type_box"); 3760 3761 if(searchFilterManager._filter.res_date == searchFilterManager._filter.res_end_date || (searchFilterManager._filter.res_date != "" && searchFilterManager._filter.res_end_date == "")){ 3762 siteTypeBoxEl.style.display = "none"; 3763 }else{ 3764 siteTypeBoxEl.style.display = "block"; 3765 } 3766 }, 3767 // ìì êµ¬ë¶ ì í 3768 choiceSiteType: function () { 3769 const allButtonEl = document.getElementById("site_tp_all"); 3770 const siteTypeButtonEl = document.querySelectorAll('button[name="site_tp"]'); 3771 3772 // ì ì²´ ë²í¼ í´ë¦ ì´ë²¤í¸ 3773 allButtonEl.addEventListener('click', () => { 3774 // ì ì²´ ì í ì 모ë ê°ë³ ë²í¼ ë¹íì±í & site_type ì´ê¸°í 3775 this._filter.site_type = []; 3776 document.querySelectorAll(`button[name='site_tp']`).forEach(btn => btn.classList.remove('active')); 3777 allButtonEl.classList.add("active"); // ì ì²´ ë²í¼ íì±í 3778 3779 // LIST íì´ì§ íí° ë기í 3780 searchFilterManager.syncFilters(); 3781 }); 3782 3783 // ê°ë³ ë²í¼ í´ë¦ ì´ë²¤í¸ 3784 siteTypeButtonEl.forEach(button => { 3785 button.addEventListener('click', () => { 3786 const value = button.getAttribute('value'); 3787 3788 if (this._filter.site_type.includes(value)) { 3789 // ì íë ê° ì ê±° 3790 this._filter.site_type = this._filter.site_type.filter(item => item !== value); 3791 document.querySelectorAll(`button[name='site_tp'][value='${value}']`).forEach(btn => btn.classList.remove('active')); 3792 } else { 3793 // ì íë ê° ì¶ê°
3794 this._filter.site_type.push(value); 3795 document.querySelectorAll(`button[name='site_tp'][value='${value}']`).forEach(btn => btn.classList.add('active')); 3796 } 3797 3798 // ìì êµ¬ë¶ íí° ì±í¬ ë§ì¶ê¸° 3799 searchFilterManager.syncFilters(); 3800 }); 3801 }); 3802 }, 3803 // ìµê·¼ ê²ì í ì´ë¸ ë±ë¡ 3804 insertRecentSearch: function(){ 3805 let status = "NO"; 3806 3807 const params = { 3808 search_keyword: searchFilterManager._inputFieldEl.value, 3809 site_tp: searchFilterManager._filter.site_type.join(","), 3810 res_date: searchFilterManager._filter.res_date, 3811 res_end_date: searchFilterManager._filter.res_end_date, 3812 region: searchFilterManager._filter.region, 3813 sub_region: searchFilterManager._filter.sub_region.join(","), 3814 adult_count: searchFilterManager._filter.adultCount, 3815 child_count: searchFilterManager._filter.childCount, 3816 }; 3817 3818 $.ajax({
3819 type: "POST", 3820 url: "/search/ax_insert_recent_search.hbb", 3821 data: params, 3822 success: onSuccess, 3823 error: onError 3824 }); 3825 3826 function onSuccess(dataobj) { 3827 status = dataobj; 3828 searchFilterManager.getRecentSearch(); 3829 } 3830 function onError() {} 3831 3832 return status; 3833 }, 3834 //ìµê·¼ê²ì리ì¤í¸ ê°ì ¸ì¤ê¸° 3835 getRecentSearch: function(){ 3836 $.ajax({ 3837 type: "POST", 3838 url: "/search/ax_get_recent_search.hbb", 3839 success: onSuccess, 3840 error: onError 3841 }); 3842 3843 function onSuccess(dataobj){ 3844 const recentContentEl = document.getElementById("recentContent"); 3845 recentContent.innerHTML = dataobj; 3846 3847 document.addEventListener("click", function (event) { 3848 const deleteButton = event.target.closest(".recentDeleteButton"); 3849 const searchButton = event.target.closest(".recentButton"); 3850 3851 // ìµê·¼ê²ìì¡°ê±´ ìì ì´ë²¤í¸ 3852 if (deleteButton) { 3853 event.stopPropagation(); 3854 searchFilterManager.deleteRecentSearch(deleteButton); 3855 return; 3856 } 3857 3858 // ìµê·¼ê²ìì¡°ê±´ ì´ë ì´ë²¤í¸ 3859 if (searchButton) { 3860 searchFilterManager.submitRecentSearch(searchButton); 3861 } 3862 }); 3863 } 3864 3865 function onError(){} 3866 }, 3867 //ìµê·¼ê²ì ê°ë³ ìì 3868 deleteRecentSearch: function(el){ 3869 const campSearchSeq = el.dataset.seq; 3870 3871 $.ajax({
3872 type: "POST", 3873 url: "/search/ax_delete_recent_search.hbb", 3874 data: { delete_type: "ONE", camp_search_seq: campSearchSeq }, 3875 success: function (response) { 3876 const element = document.querySelector(`[data-value="${campSearchSeq}"]`); 3877 if (element) { 3878 element.remove(); 3879 } 3880 }, 3881 error: function () { 3882 3883 } 3884 }); 3885 }, 3886 //ìµê·¼ê²ì ì ì²´ ìì 3887 deleteALLRecentSearch: function(){ 3888 $.ajax({ 3889 type: "POST", 3890 url: "/search/ax_delete_recent_search.hbb", 3891 data: { delete_type: "ALL" }, 3892 success: function (response) { 3893 const element = document.getElementById("recentContent"); 3894 if (element) { 3895 element.innerHTML = `<li class="swiper-slide" style="width: 100%"><div class="box" style="justify-content: center">ì¡°íë ë´ìì´ ììµëë¤.</div></li>`; 3896 } 3897 }, 3898 error: function () { 3899 3900 } 3901 }); 3902 }, 3903 //ìµê·¼ê²ì í´ë¦ ì´ë²¤í¸ 3904 submitRecentSearch: function(el){ 3905 popSearchManager.close(); 3906 3907 if(searchFilterManager._searchType == "LIST"){ 3908 searchFilterManager._filter.site_type = el.dataset.sitetp.split(",") 3909 searchFilterManager._filter.res_date = el.dataset.resdate 3910 searchFilterManager._filter.res_end_date = el.dataset.resenddate 3911 searchFilterManager._filter.ser_res_date = el.dataset.resdate 3912 searchFilterManager._filter.ser_res_end_date = el.dataset.resenddate 3913 searchFilterManager._filter.region = el.dataset.region 3914 searchFilterManager._filter.sub_region = el.dataset.subregion.split(",") 3915 searchFilterManager._filter.adultCount = el.dataset.adultcount 3916 searchFilterManager._filter.childCount = el.dataset.childcount 3917 3918 popSearchManager.updateSearchInput(); 3919 searchFilterManager.updateRegionPlaceholder(); 3920 headFilterManager.isHeadFilterCheck(); 3921 DataListManager.fetchData(true); 3922 3923 return; 3924 } 3925 3926 // URLSearchParams ê°ì²´ ìì± 3927 const searchParams = new URLSearchParams({ 3928 site_tp: el.dataset.sitetp, 3929 res_dt: el.dataset.resdate, 3930 res_edt: el.dataset.resenddate, 3931 region: el.dataset.region, 3932 sub_region: el.dataset.subregion, 3933 ser_adult_count: el.dataset.adultcount, 3934 ser_child_count: el.dataset.childcount, 3935 ser_keyword: "" 3936 }); 3937 3938 window.location.href = `/resv/list.hbb?${searchParams.toString()}`; 3939 }, 3940 //리ì¤í¸ ê²ìí기 3941 submitSearch: function () { 3942 popSearchManager.close(); 3943 3944 if(searchFilterManager._searchType == "COLLECT" || searchFilterManager._searchType == "CAMPCOUPON"){ 3945 searchFilterManager._filter.ser_res_date = searchFilterManager._filter.res_date; 3946 searchFilterManager._filter.ser_res_end_date = searchFilterManager._filter.res_end_date; 3947 3948 popSearchManager.updateSearchInput(); 3949 CollectManager.fetchDatas(true); 3950 return; 3951 } 3952 3953 if(searchFilterManager._searchType == "LIST"){ 3954 const result = searchFilterManager.insertRecentSearch(); 3955 console.log(result); 3956 3957 searchFilterManager._filter.ser_res_date = searchFilterManager._filter.res_date; 3958 searchFilterManager._filter.ser_res_end_date = searchFilterManager._filter.res_end_date; 3959 3960 popSearchManager.updateSearchInput(); 3961 headFilterManager.isHeadFilterCheck(); 3962 DataListManager.fetchData(true); 3963 3964 return; 3965 } 3966 3967 // ìµê·¼ ê²ì ë´ì ë±ë¡ 3968 const result = searchFilterManager.insertRecentSearch(); 3969 console.log(result); 3970 3971 const strSubRegion = searchFilterManager._filter.sub_region.join(",");
3972 const keyword = searchFilterManager._inputFieldEl.value; 3973 3974 // URLSearchParams ê°ì²´ ìì± 3975 const searchParams = new URLSearchParams({ 3976 site_tp: searchFilterManager._filter.site_type, 3977 res_dt: searchFilterManager._filter.res_date, 3978 res_edt: searchFilterManager._filter.res_end_date, 3979 region: searchFilterManager._filter.region, 3980 sub_region: strSubRegion, 3981 ser_adult_count: searchFilterManager._filter.adultCount, 3982 ser_child_count: searchFilterManager._filter.childCount, 3983 ser_keyword: keyword 3984 }); 3985 3986 // filterManager._selectedFiltersê° ì¡´ì¬í ê²½ì° URLì ì¶ê° 3987 const params = (typeof filterManager !== "undefined" && filterManager._selectedFilters) ? filterManager._selectedFilters : {}; 3988 3989 // filterManager._selectedFilters ê°ì´ ìì¼ë©´ ì¶ê° 3990 Object.keys(params).forEach((key) => { 3991 const value = filterManager._selectedFilters[key]; 3992 3993 if (Array.isArray(value) && value.length > 0) { 3994 // ë°°ì´ì´ë©´ ì¼íë¡ êµ¬ë¶ë 문ìì´ë¡ ë³ííì¬ ì¶ê° 3995 searchParams.append(key, value.join(",")); 3996 } else if (value) { 3997 // ê°ì´ ë¹ì´ìì§ ìì¼ë©´ ì¶ê° 3998 searchParams.append(key, value); 3999 } 4000 }); 4001 4002 // ìµì¢ URL ì´ë 4003 window.location.href = `/resv/list.hbb?${searchParams.toString()}`; 4004 }, 4005 //ì§ë ê²ìí기 4006 submitMapSearch: function(){ 4007 popSearchManager.close(); 4008 4009 const markerCoordinate = searchMapManager.getMarkerCoordinate(); 4010 const lat = markerCoordinate.lat(); 4011 const lng = markerCoordinate.lng(); 4012 const zoom = searchMapManager._MAP.getZoom(); 4013 4014 if(searchFilterManager._searchType == "MAP"){ 4015 popSearchManager.updateSearchInput(); 4016 4017 _MAP.setZoom(zoom); 4018 _MAP.setCenter(new naver.maps.LatLng(lat, lng)); 4019 DataManager.fetchData(_MAP, true); 4020 return; 4021 } 4022 4023 const URL= `/search/mapSearch.hbb?zoom=${zoom}&res_dt=${searchFilterManager._filter.res_date}&res_edt=${searchFilterManager._filter.res_end_date}&lat=${lat}&lng=${lng}`; 4024 4025 // URL ì´ë 4026 window.location.href = URL; 4027 } 4028 } 4029 4030 /* ë¬ë ¥ ê´ë ¨ í¨ì */ 4031 const searchCalendarManager = { 4032 init: function(){ 4033 $.datepicker.setDefaults({ 4034 closeText: "ë«ê¸°", 4035 prevText: "ì´ì ë¬", 4036 nextText: "ë¤ìë¬", 4037 currentText: "ì¤ë", 4038 monthNames: ["1ì", "2ì", "3ì", "4ì", "5ì", "6ì","7ì", "8ì", "9ì", "10ì", "11ì", "12ì"], 4039 monthNamesShort: ["1ì", "2ì", "3ì", "4ì", "5ì", "6ì","7ì", "8ì", "9ì", "10ì", "11ì", "12ì"], 4040 dayNames: ["ì¼ìì¼", "ììì¼", "íìì¼", "ììì¼", "목ìì¼", "ê¸ìì¼", "í ìì¼"], 4041 dayNamesShort: ["ì¼", "ì", "í", "ì", "목", "ê¸", "í "], 4042 dayNamesMin: ["ì¼", "ì", "í", "ì", "목", "ê¸", "í "], 4043 weekHeader: "주", 4044 dateFormat: "yymmdd", 4045 firstDay: 0, 4046 isRTL: false, 4047 showMonthAfterYear: true, 4048 yearSuffix: "ë ", 4049 defaultDate: searchFilterManager._filter.ser_res_date 4050 }) 4051 $(".datepicker-list").datepicker({ 4052 minDate: 0, 4053 selectOtherMonths: true, 4054 beforeShowDay: searchCalendarManager.funcBeforeShowDay, 4055 onSelect: function (selected, event) { 4056 var dt = $(this).val(); 4057 searchCalendarManager.selectCalendar(dt); 4058 } 4059 }); 4060 4061 $(".datepicker-map").datepicker({ 4062 minDate: 0, 4063 selectOtherMonths: true, 4064 beforeShowDay: searchCalendarManager.funcBeforeShowDay, 4065 onSelect: function (selected, event) { 4066 var dt = $(this).val(); 4067 searchCalendarManager.selectCalendar(dt); 4068 } 4069 }); 4070 }, 4071 selectCalendar: function(dt){ 4072 if(searchFilterManager._filter.res_end_date=="" && searchFilterManager._filter.res_date <= dt) { 4073 //ìì½ë¶ê°ê²ì 4074 if(searchFilterManager._filter.res_date < dt) { 4075 var s_dt = searchFilterManager._filter.res_date 4076 var s_days = diff_date(searchFilterManager._filter.res_date, dt) 4077 } else { 4078 var s_dt = dt 4079 var s_days = diff_date(dt,searchFilterManager._filter.res_date) 4080 } 4081 4082 if (s_days > 6) { 4083 action_popup.alert("ìµë 6ë°ê¹ì§ ê²ìì´ ê°ë¥í©ëë¤.") 4084 searchFilterManager._filter.res_date = dt 4085 searchFilterManager._filter.res_end_date = "" 4086 searchFilterManager._filter.ser_res_date = dt 4087 searchFilterManager._filter.ser_res_end_date = "" 4088 searchFilterManager._filter.site_type = ['BB006'] 4089 4090 // ìì êµ¬ë¶ íí° ì±í¬ ë§ì¶ê¸° 4091 searchFilterManager.syncFilters(); 4092 4093 return 4094 } 4095 4096 searchFilterManager._filter.res_date = s_dt 4097 searchFilterManager._filter.ser_res_date = s_dt 4098 var ndt = new Date(s_dt.substr(0,4),parseInt(s_dt.substr(4,2))-1,parseInt(s_dt.substr(6,2))); 4099 ndt.setDate(ndt.getDate() + s_days); 4100 searchFilterManager._filter.res_end_date = ndt.getFullYear()+''+filldate(ndt.getMonth()+1)+''+filldate(ndt.getDate()) 4101 searchFilterManager._filter.ser_res_end_date = searchFilterManager._filter.res_end_date 4102 searchFilterManager._filter.res_day = s_days 4103 if(searchFilterManager._filter.ser_res_date == searchFilterManager._filter.ser_res_end_date){ 4104 searchFilterManager._filter.site_type = ['BB006'] 4105 }else{ 4106 searchFilterManager._filter.site_type = [] 4107 } 4108 $(".datepicker-list").datepicker({beforeShowDay: searchCalendarManager.funcBeforeShowDay}); 4109 $(".datepicker-map").datepicker({beforeShowDay: searchCalendarManager.funcBeforeShowDay}); 4110 } else { 4111 searchFilterManager._filter.res_date = dt 4112 searchFilterManager._filter.res_end_date = "" 4113 searchFilterManager._filter.ser_res_date = dt 4114 searchFilterManager._filter.ser_res_end_date = "" 4115 searchFilterManager._filter.site_type = ['BB006'] 4116 } 4117 4118 searchFilterManager.syncFilters(); 4119 searchFilterManager.isSiteType(); 4120 searchFilterManager.updateDatePlaceholder(); 4121 }, 4122 funcBeforeShowDay: function (date) { 4123 var result = null; 4124 var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); 4125 result = [true, ""]; // 기본ê°ì ë¹ ë¬¸ìì´ 4126 4127 var formattedDate = y + '' + filldate(m + 1) + '' + filldate(d); // íì¬ ë ì§ í¬ë§·í 4128 4129 // ì íí ë ì§ê° ë²ì ë´ì ìì ë ui-state-active í´ëì¤ ì¶ê° 4130 if (searchFilterManager._filter.res_date <= formattedDate && searchFilterManager._filter.res_end_date >= formattedDate) { 4131 if(searchFilterManager._filter.res_date == searchFilterManager._filter.res_end_date){ 4132 result = [true, "ui-state-active"]; 4133 }else{ 4134 if(searchFilterManager._filter.res_date == formattedDate){ 4135 result = [true, "ui-state-active left"]; 4136 }else if(searchFilterManager._filter.res_end_date == formattedDate){ 4137 result = [true, "ui-state-active right"]; 4138 }else{ 4139 result = [true, "ui-state-active-a"]; 4140 } 4141 } 4142 4143 } 4144 // ê·¸ ì¸ìë 기본ê°ì¼ë¡ ë¹ ë¬¸ìì´ì ë°í 4145 else { 4146 result = [true, ""]; 4147 } 4148 4149 return result; 4150 }, 4151 } 4152 4153 // ë¤ì´ë² ì§ë ê´ë ¨ 4154 const searchMapManager = { 4155 _LAT: null, 4156 _LNG: null, 4157 _MAP: null, 4158 init: function() { 4159 // ëì²´ ì¢í 4160 this._LAT = 37.82883056; 4161 this._LNG = 127.5117778; 4162 this.createMap(searchMapManager._LAT, searchMapManager._LNG); 4163 4164 if(app_yn=='Y') { 4165 if(app_os=='android'){ 4166 window.Android.getGpsLocation(); 4167 } 4168 if(app_os=='ios'){ 4169 goIosAp('getGpsLocation'); 4170 } 4171 }else{ 4172 if (navigator.geolocation) { 4173 navigator.geolocation.getCurrentPosition(searchMapManager.locationSuccess.bind(this), searchMapManager.locationError.bind(this)); 4174 } else { 4175 this.locationError("ì´ ë¸ë¼ì°ì ë Geolocationì ì§ìíì§ ììµëë¤."); 4176 } 4177 } 4178 4179 }, 4180 locationSuccess: function(position) { 4181 this._LAT = position.coords.latitude; 4182 this._LNG = position.coords.longitude; 4183 searchMapManager.createMap(searchMapManager._LAT, searchMapManager._LNG); 4184 }, 4185 locationError: function(error) { 4186 switch(error.code) { 4187 case error.PERMISSION_DENIED: 4188 console.log("ì¬ì©ìê° ìì¹ ì ë³´ ìì²ì ê±°ë¶íìµëë¤."); 4189 break; 4190 case error.POSITION_UNAVAILABLE: 4191 console.log("ìì¹ ì 보를 ì¬ì©í ì ììµëë¤."); 4192 break; 4193 case error.TIMEOUT: 4194 console.log("ìì¹ ì ë³´ ìì²ì´ ìê° ì´ê³¼ëììµëë¤."); 4195 break; 4196 case error.UNKNOWN_ERROR: 4197 console.log("ì ì ìë ì¤ë¥ê° ë°ìíìµëë¤."); 4198 break; 4199 } 4200 }, 4201 createMap: function(lat, lng) { 4202 const mapOptions = { 4203 center: new naver.maps.LatLng(lat, lng), 4204 zoom: 10 4205 }; 4206 4207 this._MAP = new naver.maps.Map("search_map", mapOptions); 4208 }, 4209 getMarkerCoordinate: function(){ 4210 return this._MAP.getCenter(); 4211 } 4212 }; 4213 4214 // ì± í¨ì 4215 function getLocation(data) { 4216 console.log("===== ì± í¸ì¶ ====="); 4217 // ê²ì ë°ì´í° 4218 const serLat = parseFloat(""); 4219 const serLng = parseFloat(""); 4220 4221 // data를 ','ë¡ ë¶ë¦¬íì¬ ë³ìì ì ì¥ 4222 let [lat, lng] = data.split(',').map(Number); 4223
4224 // ê° ì¤ì 4225 searchMapManager._LAT = lat; 4226 searchMapManager._LNG = lng; 4227 4228 if(searchMapManager._MAP == null){ 4229 searchMapManager.createMap(searchMapManager._LAT, searchMapManager._LNG); 4230 } 4231 4232 if (typeof _LAT !== "undefined" && typeof _LNG !== "undefined") { 4233 _myLat = lat; 4234 _myLng = lng; 4235 4236 _LAT = _myLat; 4237 _LNG = _myLng; 4238 4239 if(_MAP == null){ 4240 if(!isNaN(serLat) || !isNaN(serLng)){ 4241 MapManager.init(serLat, serLng); 4242 return; 4243 } 4244 4245 MapManager.init(_LAT, _LNG); 4246 } 4247 } 4248 } 4249 4250 4251 // ì´ê¸°í ì½ë 4252 $(document).ready(function () { 4253 // íì ê´ë ¨ ì´ë²¤í¸ 4254 popSearchManager.init(); 4255 // í ê´ë ¨ ì´ë²¤í¸ 4256 tabManager.init(); 4257 // ì¤ìì´í¼ ê´ë ¨ ì´ë²¤í¸ 4258 swiperManager.init(); 4259 // ê²ì ê´ë ¨ ì´ë²¤í¸ 4260 searchFilterManager.init(); 4261 // ë¬ë ¥ ê´ë ¨ ì´ë²¤í¸ 4262 searchCalendarManager.init(); 4263 }); 4264</script>
4264 4265</div> <!--// wrap --> 4266
4267<script> 4268 4269 // _LAT: ìë(37.5665) / _LNG: ê²½ë(126.978) 4270 let _LAT = 37.82883056; 4271 let _LNG = 127.5117778; 4272 4273 let _myLat; 4274 let _myLng; 4275 4276 // API ë¡ ê°ì ¸ì¨ ë§ì»¤ ì ë³´ ì ì¥ 4277 let _MARKER_LIST; 4278 // ìº íì¥ ìì¸ì ë³´ ì¤í ì¬ë¶ (true, false) 4279 let _OPEN_INFO; 4280 // ë¤ì´ë² ë§µ ìì±ì ì ì¥ 4281 let _MAP; 4282 4283 // ì¬ì©ì ìì¹ ì ë³´ ê´ë ¨ 4284 const LocationManager = { 4285 init: function() { 4286 const serLat = parseFloat(""); 4287 const serLng = parseFloat(""); 4288 4289 if(app_yn=='Y') { 4290 if(app_os=='android'){ 4291 window.Android.getGpsLocation(); 4292 } 4293 if(app_os=='ios'){ 4294 goIosAp('getGpsLocation'); 4295 } 4296 4297 return; 4298 } 4299 4300 if(!serLat || !serLng){ 4301 if (navigator.geolocation) { 4302 navigator.geolocation.getCurrentPosition(this.locationSuccess.bind(this), this.locationError.bind(this)); 4303 } else { 4304 this.locationError("ì´ ë¸ë¼ì°ì ë Geolocationì ì§ìíì§ ììµëë¤."); 4305 } 4306 4307 return; 4308 } 4309 4310 MapManager.init(serLat, serLng); 4311 if (navigator.geolocation) { 4312 navigator.geolocation.getCurrentPosition(this.myGps.bind(this), this.locationError2.bind(this)); 4313 } 4314 }, 4315 myGps: function(position){ 4316 _myLat = position.coords.latitude; 4317 _myLng = position.coords.longitude; 4318 4319 // ë´ ìì¹ ë§ì»¤ 그리기 4320 if(_myLat != "undefined" && _myLng != "undefined"){ 4321 const position = new naver.maps.LatLng(parseFloat(_myLat), parseFloat(_myLng)); 4322 const content = `<div class="now_marker"></div>`; 4323 const myMarker = new naver.maps.Marker({ 4324 map: _MAP, 4325 position: position, 4326 title: "", 4327 icon: { 4328 content: content, 4329 size: new naver.maps.Size(12, 12), 4330 anchor: new naver.maps.Point(12, 12), 4331 }, 4332 zIndex: 100 4333 }); 4334 } 4335 }, 4336 myGpsCenter: function(){ 4337 _MAP.setCenter(new naver.maps.LatLng(_myLat, _myLng)); 4338 }, 4339 locationSuccess: function(position) { 4340 _myLat = position.coords.latitude; 4341 _myLng = position.coords.longitude; 4342 4343 _LAT = _myLat; 4344 _LNG = _myLng; 4345 4346 MapManager.init(_LAT, _LNG); 4347 }, 4348 locationError: function(error) { 4349 switch(error.code) { 4350 case error.PERMISSION_DENIED: 4351 console.log("ì¬ì©ìê° ìì¹ ì ë³´ ìì²ì ê±°ë¶íìµëë¤."); 4352 break; 4353 case error.POSITION_UNAVAILABLE: 4354 console.log("ìì¹ ì 보를 ì¬ì©í ì ììµëë¤."); 4355 break; 4356 case error.TIMEOUT: 4357 console.log("ìì¹ ì ë³´ ìì²ì´ ìê° ì´ê³¼ëììµëë¤."); 4358 break; 4359 case error.UNKNOWN_ERROR: 4360 console.log("ì ì ìë ì¤ë¥ê° ë°ìíìµëë¤."); 4361 break; 4362 } 4363 4364 // ëì²´ ì¢í 4365 _LAT = 37.82883056; 4366 _LNG = 127.5117778; 4367 MapManager.init(_LAT, _LNG); 4368 }, 4369 locationError2: function(error) { 4370 switch(error.code) { 4371 case error.PERMISSION_DENIED: 4372 console.log("ì¬ì©ìê° ìì¹ ì ë³´ ìì²ì ê±°ë¶íìµëë¤."); 4373 break; 4374 case error.POSITION_UNAVAILABLE: 4375 console.log("ìì¹ ì 보를 ì¬ì©í ì ììµëë¤."); 4376 break; 4377 case error.TIMEOUT: 4378 console.log("ìì¹ ì ë³´ ìì²ì´ ìê° ì´ê³¼ëììµëë¤."); 4379 break; 4380 case error.UNKNOWN_ERROR: 4381 console.log("ì ì ìë ì¤ë¥ê° ë°ìíìµëë¤."); 4382 break; 4383 } 4384 } 4385 }; 4386 4387 // ë¤ì´ë² ì§ë ê´ë ¨ 4388 const MapManager = { 4389 init: function(lat, lng) {
4390 const urlParams = new URLSearchParams(window.location.search); 4391 const zoom = searchUrlParams.get("zoom") || 10; 4392 4393 const mapOptions = { 4394 center: new naver.maps.LatLng(lat, lng), 4395 zoom: parseInt(zoom, 10) 4396 }; 4397 4398 _MAP = new naver.maps.Map('map', mapOptions); 4399 4400 // ë´ ìì¹ ë§ì»¤ 그리기 4401 if(_myLat != "undefined" && _myLng != "undefined"){ 4402 const position = new naver.maps.LatLng(parseFloat(_myLat), parseFloat(_myLng)); 4403 const content = `<div class="now_marker"></div>`; 4404 const myMarker = new naver.maps.Marker({ 4405 map: _MAP, 4406 position: position, 4407 title: "", 4408 icon: { 4409 content: content, 4410 size: new naver.maps.Size(12, 12), 4411 anchor: new naver.maps.Point(12, 12), 4412 }, 4413 zIndex: 100 4414 }); 4415 } 4416 DataManager.init(_MAP); 4417 }, 4418 }; 4419 4420 // ë°ì´í° ì¡°í ê´ë ¨ 4421 const DataManager = { 4422 map: null, 4423 maxPage: 0, 4424 init: function(map) { 4425 DataManager.map = map; 4426 DataManager.fetchData(map); 4427 }, 4428 fetchData: function(map, isReset) { 4429 const bounds = map.getBounds(); 4430 const selecMaxLat = bounds._max.y; 4431 const selecMaxLng = bounds._max.x; 4432 const selecMinLat = bounds._min.y; 4433 const selecMinLng = bounds._min.x; 4434 4435 const siteTpValue = filterManager._selectedFilters.ser_site_tp.length > 0 ? filterManager._selectedFilters.ser_site_tp.join(",") : ""; 4436 const campPositionValue = filterManager._selectedFilters.ser_camp_position.length > 0 ? filterManager._selectedFilters.ser_camp_position.join(",") : ""; 4437 const campSpecValue = filterManager._selectedFilters.ser_camp_spec.length > 0 ? filterManager._selectedFilters.ser_camp_spec.join(",") : ""; 4438 4439 4440 const param = { 4441 resStartDate: searchFilterManager._filter.res_date, 4442 resEndDate: searchFilterManager._filter.res_end_date, 4443 minLng: selecMinLng, 4444 minLat: selecMinLat, 4445 maxLng: selecMaxLng, 4446 maxLat: selecMaxLat, 4447 siteTp: siteTpValue, 4448 campSpec: campSpecValue, 4449 campPosition: campPositionValue, 4450 isKid: filterManager._selectedFilters.ser_kid, 4451 is2people: filterManager._selectedFilters.ser_2peopleOnly, 4452 isPg: filterManager._selectedFilters.isPg, 4453 isQPoint: filterManager._selectedFilters.ser_q_point, 4454 isDeposit: filterManager._selectedFilters.ser_deposit_yn, 4455 isDisc: filterManager._selectedFilters.ser_disc_yn, 4456 isNew: filterManager._selectedFilters.ser_new_yn, 4457 page: filterManager._selectedFilters.page 4458 }; 4459 4460 console.log(param); 4461 4462 $.ajax({
4463 type: "POST", 4464 url: "/search/ax_list.hbb", 4465 data: param, 4466 success: function(dataObj) { 4467 DataManager.onSuccess(dataObj, isReset); 4468 }, 4469 error: DataManager.onError 4470 }); 4471 }, 4472 onSuccess: function(dataObj, isReset){ 4473 const data = JSON.parse(dataObj); 4474 _MARKER_LIST = data.data.content; 4475 4476 // ì´ íì´ì§ ë°ì´í° 4477 this.maxPage = data.data.totalPages; 4478 //document.getElementById("totalPage").textContent = data.data.totalPages; 4479 4480 filterManager._selectedFilters.page = filterManager._selectedFilters.page; 4481 //document.getElementById("nowPage").textContent = FilterManager._selectedFilters.page + 1; 4482 4483 if(data.data.totalElements == 0){ 4484 document.getElementById("noneInfo").style.display = "block"; 4485 } 4486 4487 if(Math.max(DataManager.maxPage - 1, 0) == filterManager._selectedFilters.page){ 4488 document.getElementById("nextPage").style.display = "none"; 4489 }else{ 4490 document.getElementById("nextPage").style.display = "flex"; 4491 } 4492 4493 if(isReset){ 4494 document.getElementById('mapListContent').innerHTML = ""; 4495 } 4496 4497 MarkerManager.init(DataManager.map, isReset); 4498 }, 4499 onError: function(e){ 4500 console.log(e); 4501 } 4502 }; 4503 4504 // ë§ì»¤ ê´ë ¨ 4505 const MarkerManager = { 4506 HOME_PATH: window.HOME_PATH || '.', 4507 markers: [], 4508 infoContents: [], 4509 listContents: [], 4510 swiperInstance: null, // Swiper ì¸ì¤í´ì¤ ì ì¥ 4511 map: null, // ë¤ì´ë² ë§µ ì¸ì¤í´ì¤ ì ì¥ 4512 4513 init: function(map, isReset) { 4514 this.map = map; // ë§µ ì¸ì¤í´ì¤ ì ì¥ 4515 4516 if (isReset) { 4517 this.clearMarkers(); 4518 } 4519 4520 _MARKER_LIST.forEach((data, index) => { 4521 const position = new naver.maps.LatLng(parseFloat(data.lat), parseFloat(data.lng)); 4522 const content = `<div class='thank-q-marker' data-value='${index}'>${Utile.formatPrice(data.salePrice)}</div>`; 4523 4524 const marker = new naver.maps.Marker({ 4525 map: map, 4526 position: position, 4527 title: data.campNm, 4528 icon: { 4529 content: content, 4530 size: new naver.maps.Size(24, 37), 4531 anchor: new naver.maps.Point(12, 37), 4532 }, 4533 zIndex: 100 4534 }); 4535 4536 let topBenefits = []; 4537 let benefits = []; 4538 let prices = []; 4539 let per = ""; 4540 let isReserve = data.isReserve == "ìì½ë§ê°" ? "<p class='q_res clo'>ìì½ë§ê°</p>" : "<p class='q_res ok'>ìì½ê°ë¥</p>"; 4541 4542 // 기본 ê²°ì ë°©ìì ë°ë¥¸ íê·¸ ì¶ê° 4543 if (data.pgType.includes("C")) benefits.push('<p class="bat_card">ì ì©ì¹´ë</p>'); 4544 if (data.pgType.includes("V")) benefits.push('<p class="bat_a">ê°ìê³ì¢</p>'); 4545 if (data.pgType.includes("M")) benefits.push('<p class="bat_company_a">ì ì²´ê³ì¢</p>'); 4546 4547 // ê°ê²© ë¹êµ í í ì¸í¹ê° íê·¸ ì¶ê° 4548 if (data.basicPrice > data.salePrice) { 4549 const percent = Math.floor((data.basicPrice - data.salePrice) / data.basicPrice * 100); 4550 4551 topBenefits.push('<p class="bat_s">í ì¸í¹ê°</p>'); 4552 prices.push(`<p class="ex_price">${Utile.formatPrice(data.basicPrice)}</p>`); 4553 per = `<p class="per">${percent}%</p>`; 4554 } 4555 4556 // ì°ëí ì¸í¹ê° íê·¸ ì¶ê° 4557 if (data.isSpecDiscount === "Y") topBenefits.push('<p class="bat_s">ì°ëí ì¸í¹ê°</p>'); 4558 4559 // í¬ì¸í¸ ì 립 ì¬ë¶ì ë°ë¥¸ íê·¸ ì¶ê° 4560 if (data.isQPoint === "Y") topBenefits.push('<p class="bat_p">ë¡íí¬ì¸í¸ ì 립</p>'); 4561 if (data.isDepositPoint === "Y") topBenefits.push('<p class="bat_cp">ì ì²´í¬ì¸í¸ ì 립</p>'); 4562 4563 const infoContent = ` 4564 <li class="swiper-slide map-slide" data-index="${index}" style="background: #fff; padding: 1rem;"> 4565 <div class="camp_div type_info" style="padding-bottom: 0; border: 0; margin: 0; height: 100%;"> 4566 <a href="javascript:clkNewView(${data.campSeq},'');" style="height: 100%"> 4567 <div class="box_g" style="height: 100%"> 4568 4569 <div class="pic" style="border-radius: .5rem; overflow: hidden;"> 4570 <!-- <div class="bat_zzim"> 4571 <button type="button" class="btn_zzim"></button> 4572 </div> --> 4573 <img src="${data.campPic}" alt="${data.campNm}"> 4574 </div> 4575 4576 <div class="text_box" style="height: 100%"> 4577 <div> 4578 4579 <div class="top_text"> 4580 <!-- <p class="bat_gocamping">ê³ ìº íì¸ì¦</p> --> 4581 <p class="name">${data.campNm}</p> 4582 </div> 4583 4584 <div class="center_text"> 4585 <p class="addr">${data.region} ${data.subRegion}</p> 4586 <!-- p class="review">í기 187(ìµê·¼ 15)</p --> 4587 </div> 4588 4589 <div class="top_bat"> 4590 <div class="benefit_bat"> 4591 ${topBenefits.join("")} 4592 </div> 4593 </div> 4594 4595 <!-- <div class="btm_bat"> 4596 <div class="benefit_bat">
4597 ${benefits.join("")} 4598 </div> 4599 </div> --> 4600 </div> 4601 4602 <div class="btm_text"> 4603 ${isReserve} 4604 <!-- <p class="q_res ok">ìì½ê°ë¥</p><p class="q_res imm">ë§ê°ìë°</p><p class="q_res clo">ìì½ë§ê°</p> --> 4605 <p></p> 4606 <div class="price_div"> 4607 ${per} 4608 <div class="price_g"> 4609 ${prices.join("")} 4610 <p class="price">${Utile.formatPrice(data.salePrice)}~</p> 4611 </div> 4612 </div> 4613 </div> 4614 4615 </div> 4616 </div> 4617 </a> 4618 </div> 4619 </li> 4620 `; 4621 4622 const listContent = ` 4623 <div class="camp_div type_info"> 4624 <a href="javascript:clkNewView(${data.campSeq},'');"> 4625 <div class="box_g"> 4626 4627 <div class="pic" style="border-radius: .5rem; overflow: hidden;"> 4628 <!-- <div class="bat_zzim"> 4629 <button type="button" class="btn_zzim"></button> 4630 </div> --> 4631 <img src="${data.campPic}" alt="${data.campNm}"> 4632 </div> 4633 4634 <div class="text_box"> 4635 <div> 4636 <div class="top_text"> 4637 <!-- <p class="bat_gocamping">ê³ ìº íì¸ì¦</p> --> 4638 <p class="name">${data.campNm}</p> 4639 </div> 4640 4641 <div class="center_text"> 4642 <p class="addr">${data.region} ${data.subRegion}</p> 4643 <!-- p class="review">í기 187(ìµê·¼ 15)</p --> 4644 </div> 4645 4646 <div class="top_bat"> 4647 <div class="benefit_bat"> 4648 ${topBenefits.join("")} 4649 </div> 4650 </div> 4651 4652 <div class="btm_bat"> 4653 <div class="benefit_bat"> 4654 ${benefits.join("")} 4655 </div> 4656 </div> 4657 </div> 4658 <div class="btm_text"> 4659 ${isReserve} 4660 <!-- <p class="q_res ok">ìì½ê°ë¥</p><p class="q_res imm">ë§ê°ìë°</p><p class="q_res clo">ìì½ë§ê°</p> --> 4661 <p></p> 4662 <div class="price_div"> 4663 ${per} 4664 <div class="price_g"> 4665 ${prices.join("")} 4666 <p class="price">${Utile.formatPrice(data.salePrice)}~</p> 4667 </div> 4668 </div> 4669 </div> 4670 </div> 4671 </div> 4672 </a> 4673 </div> 4674 `; 4675 4676 this.markers.push(marker); 4677 this.infoContents.push(infoContent); 4678 this.listContents.push(listContent); 4679 }); 4680 4681 document.getElementById('mapListOpenButton').addEventListener("click", function(){ 4682 document.getElementById("mapList").classList.add("on"); 4683 }) 4684 4685 document.getElementById('popMapListCloseButton').addEventListener("click", function(){ 4686 document.getElementById("mapList").classList.remove("on"); 4687 }) 4688 4689 if(this.listContents.length > 0){ 4690 document.getElementById('mapListOpenButton').style.display = "inline"; 4691 }else{ 4692 document.getElementById('mapListOpenButton').style.display = "none"; 4693 } 4694 4695 // 리ì¤í¸ì ë°ì´í° ì¶ê° 4696 document.getElementById('mapListContent').innerHTML = this.listContents.join(""); 4697 document.getElementById('mapListCount').innerHTML = this.listContents.length; 4698 4699 // HTMLì infoPanelì í ë²ë§ ì¤ì 4700 const infoPanel = document.getElementById('marker-info-panel'); 4701 infoPanel.innerHTML = this.infoContents.join(""); 4702
4703 // Swiper ì´ê¸°í 4704 this.initSwiper(); 4705 4706 // ì§ë ì´ë²¤í¸ ë±ë¡ 4707 this.addMapEvents(); 4708 }, 4709 addMapEvents: function() { 4710 // ë¤ì´ë² ì§ëì ìì¹íì§ ìì ë§ì»¤ ì ì ì§ì°ê¸° 4711 //if (this.map) { 4712 // naver.maps.Event.addListener(MarkerManager.map, 'idle', () => { 4713 // MarkerManager.updateMarkers(); 4714 // }); 4715 //} 4716 4717 naver.maps.Event.addListener(this.map, "dragend", function() { 4718 document.getElementById("reSearch").style.display = "block"; 4719 document.getElementById("noneInfo").style.display = "none"; 4720 }); 4721 4722 naver.maps.Event.addListener(this.map, 'click', () => { 4723 // 모ë ë§ì»¤ìì active í´ëì¤ ì ê±° 4724 document.querySelectorAll(".thank-q-marker").forEach(marker => marker.classList.remove("active")); 4725 4726 this.hideInfoPanel(); 4727 }); 4728 4729 this.markers.forEach((marker, i) => { 4730 naver.maps.Event.addListener(marker, 'click', this.getClickHandler(i)); 4731 }); 4732 }, 4733 // ë§ì»¤ active ì´ë²¤í¸ 4734 setActiveMarker: function(index) { 4735 // 모ë ë§ì»¤ìì active í´ëì¤ ì ê±° 4736 document.querySelectorAll(".thank-q-marker").forEach(marker => marker.classList.remove("active")); 4737 4738 // `data-value`ê° `index`ì ê°ì `.thank-q-marker` ìì 찾기 4739 const activeMarker = [...document.querySelectorAll(".thank-q-marker")].find(marker => marker.dataset.value == index); 4740 4741 if (activeMarker) { 4742 activeMarker.classList.add("active"); 4743 } 4744 }, 4745 initSwiper: function() { 4746 if (this.swiperInstance) { 4747 this.swiperInstance.destroy(); 4748 } 4749 4750 this.swiperInstance = new Swiper('.camp_swiper', { 4751 slidesPerView: 1.1, 4752 spaceBetween: 10, 4753 centeredSlides: true, 4754 loop: false, 4755 observer: true, 4756 observeParents: true, 4757 on: { 4758 slideChange: () => { 4759 this.handleSlideChange(); 4760 } 4761 } 4762 }); 4763 }, 4764 4765 handleSlideChange: function() { 4766 if (!this.swiperInstance || !this.map) return; 4767 4768 const activeIndex = this.swiperInstance.activeIndex; 4769 const marker = this.markers[activeIndex]; 4770 4771 if (marker) { 4772 this.map.panTo(marker.getPosition()); 4773 } 4774 4775 this.setActiveMarker(activeIndex); 4776 }, 4777 4778 updateMarkers: function() { 4779 const mapBounds = this.map.getBounds(); 4780 4781 this.markers.forEach(marker => { 4782 const position = marker.getPosition(); 4783 if (mapBounds.hasLatLng(position)) { 4784 marker.setMap(this.map); 4785 } else { 4786 marker.setMap(null); 4787 } 4788 }); 4789 }, 4790 4791 clearMarkers: function() { 4792 this.markers.forEach(marker => marker.setMap(null)); 4793 this.markers = []; 4794 this.infoContents = []; 4795 this.listContents = []; 4796 this.hideInfoPanel(); 4797 }, 4798 4799 getClickHandler: function(index) { 4800 return () => { 4801 // ë§µ ìì¹ ì´ë 4802 //const marker = this.markers[index]; 4803 //if (marker) { 4804 // this.map.panTo(marker.getPosition()); 4805 //} 4806 4807 if (this.swiperInstance) { 4808 this.swiperInstance.slideTo(index); 4809 } 4810 4811 this.setActiveMarker(index); 4812 this.showInfoPanel(); 4813 }; 4814 }, 4815 4816 showInfoPanel: function() { 4817 const infoPanel = document.getElementById('marker-info-panel-wrap'); 4818 infoPanel.style.display = 'block'; 4819 }, 4820 4821 hideInfoPanel: function() { 4822 const infoPanel = document.getElementById('marker-info-panel-wrap'); 4823 infoPanel.style.display = 'none'; 4824 } 4825 }; 4826 4827 // 기í ì í¸ ê´ë ¨ 4828 const Utile = { 4829 formatPrice: function(price){ 4830 if (price == 0) return "ì í문ì"; 4831 return price.toLocaleString() + "ì"; 4832 }, 4833 updateMapHeight: function(){ 4834 const map = document.getElementById('map'); 4835 const vh = window.innerHeight * 0.01; 4836 map.style.height = `calc(${vh * 100}px - 115px - 61px)`; 4837 } 4838 } 4839 4840 document.addEventListener("DOMContentLoaded", function() { 4841 // ì§ë 그리기 4842 LocationManager.init(); 4843 4844 // ì²ì íì´ì§ê° ë¡ëë ë ëì´ë¥¼ ì¤ì 4845 Utile.updateMapHeight(); 4846 4847 // ì°½ í¬ê¸°ê° ë³ê²½ë ëë§ë¤ ëì´ë¥¼ ë¤ì ê³ì° 4848 window.addEventListener('resize', Utile.updateMapHeight); 4849 }); 4850 4851 // ì¬ê²ì ë²í¼ ì´ë²¤í¸ 4852 document.getElementById("reSearch").addEventListener('click', function(){ 4853 filterManager._selectedFilters.page = 0; 4854 DataManager.fetchData(_MAP, true); 4855 });
4856 4857 // ë´ ìì¹ ê²ì ë²í¼ ì´ë²¤í¸ 4858 document.getElementById("nearbySearch").addEventListener('click', function(){ 4859 filterManager._selectedFilters.page = 0; 4860 LocationManager.myGpsCenter(); 4861 DataManager.fetchData(_MAP, true); 4862 }); 4863 4864 // ë¤ì íì´ì§ ì¡°í 4865 document.getElementById("nextPage").addEventListener('click', function(){ 4866 if(DataManager.maxPage - 1 > filterManager._selectedFilters.page){ 4867 filterManager._selectedFilters.page = filterManager._selectedFilters.page + 1; 4868 DataManager.fetchData(_MAP, false); 4869 } 4870 }); 4871 4872 // íê·¸ ê²ìí기 ë²í¼ ì´ë²¤í¸ 4873 filterManager.createTagClickEvent(()=>{ 4874 filterManager._selectedFilters.page = 0; 4875 DataManager.fetchData(_MAP, true); 4876 }); 4877 4878 // íí° ê²ìí기 ë²í¼ ì´ë²¤í¸ 4879 document.getElementById("searchSubmitButton").addEventListener('click', function(){ 4880 filterManager.close(); 4881 filterManager._selectedFilters.page = 0; 4882 DataManager.fetchData(_MAP, true); 4883 }) 4884 4885</script>
4885 4886 4887</body> 4888</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.