1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[345],{10345:(e,n,t)=>{t.r(n),t.d(n,{default:()=>l});var r=t(95155),i=t(13767),a=t(24274),o=t(12115);let s=function(){arguments.length>0&&void 0!==arguments[0]&&arguments[0];let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",t=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"",a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"",o=arguments.length>6&&void 0!==arguments[6]?arguments[6]:0,s=arguments.length>7&&void 0!==arguments[7]?arguments[7]:0,l=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0,p=arguments.length>9&&void 0!==arguments[9]?arguments[9]:"",c=e=>String(null!=e?e:"").replace(/&/g,"&").replace(/</g,"<").replace(/"/g,"""),d="";t&&p?d='<img class="pm-img-default" src="'.concat(c(t),'" alt="" onerror="this.style.display=\'none\';this.parentNode.classList.add(\'pm-fb-active\')" />')+'<img class="pm-img-hover" src="'.concat(c(p),'" alt="" onerror="this.style.display=\'none\'" />'):t&&(d='<img src="'.concat(c(t),'" alt="" onerror="this.style.display=\'none\';this.parentNode.classList.add(\'pm-fb-active\')" />'));let m=!t,u=[];if(a&&u.push('<span class="pm-meta-dist">'.concat(c(a),"</span>")),l>0&&u.push('<span class="pm-meta-rating">â
<em>'.concat(Number(l).toFixed(1),"</em></span>")),o>0||s>0){let e=s>0?i.Ay.t("gathering:detail.participantCount",{current:o,max:s}):"<em>".concat(o,"</em>").concat(i.Ay.t("gathering:detail.infoCard.personUnit"));u.push('<span class="pm-meta-count">'.concat(e,"</span>"))}let g=u.length>0?'<div class="pm-info-meta">'.concat(u.join('<span class="pm-meta-sep">\xb7</span>'),"</div>"):"";return'<div class="pm-wrap'.concat(e?" t-".concat(e):"",'">\n <div class="pm-pulse-ring"></div><div class="pm-pulse-ring r2"></div>\n <div class="pm-card">\n <div class="pm-img').concat(m?" pm-fb":"",'">').concat(m?'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>':d,'</div>\n <div class="pm-info"><div class="pm-info-inner">\n <div class="pm-info-name">').concat(c(n),"</div>\n ").concat(r?'<div class="pm-info-cat">'.concat(c(r),"</div>"):"","\n ").concat(g,'\n </div></div>\n </div>\n <div class="pm-tip"></div>\n <div class="pm-shd"></div>\n</div>')};function l(e){let{center:n={lat:10.8231,lng:106.6297},zoom:t=14,markers:i=[],currentLocation:l=null,searchCenter:p=null,searchRadiusMeters:c=0,onMarkerClick:d,onMapClick:m,onMoveEnd:u,apiKey:g=null,className:h=""}=e,{t:f}=(0,a.Bd)(),v=(0,o.useRef)(null),b=(0,o.useRef)(null),x=(0,o.useRef)([]),w=(0,o.useRef)(null),y=(0,o.useRef)(null),k=(0,o.useRef)(null),E=(0,o.useRef)(null),[L,C]=(0,o.useState)(!1),z=(0,o.useRef)(u),M=(0,o.useRef)(m);return(z.current=u,M.current=m,(0,o.useEffect)(()=>{var e,n;if(!g)return;if(null==(e=window.google)?void 0:e.maps)return void C(!0);let t=document.querySelector('script[src*="maps.googleapis.com"]');if(t){t.addEventListener("load",()=>C(!0)),(null==(n=window.google)?void 0:n.maps)&&C(!0);return}let r=document.createElement("script");r.src="https://maps.googleapis.com/maps/api/js?key=".concat(g,"&libraries=places"),r.async=!0,r.defer=!0,r.onload=()=>C(!0),document.head.appendChild(r)},[g]),(0,o.useEffect)(()=>{if(!L||!v.current||!window.google||b.current)return;if(!document.getElementById("gmap-marker-styles")){let e=document.createElement("style");e.id="gmap-marker-styles",e.textContent="\n .pm-wrap {\n width: 60px;\n height: 72px;\n position: relative;\n cursor: pointer;\n }\n\n .pm-card {\n position: absolute;\n left: 50%;\n bottom: 12px;\n transform: translateX(-50%);\n width: 48px;\n height: 48px;\n border-radius: 50%;\n overflow: hidden;\n border: 2.5px solid #fff;\n background: #1e293b;\n box-shadow: 0 2px 8px rgba(0,0,0,0.3);\n transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);\n z-index: 2;\n display: flex;\n flex-direction: column;\n }\n\n .pm-wrap:hover .pm-card,\n .pm-wrap.is-selected .pm-card {\n width: 160px;\n height: auto;\n border-radius: 14px;\n box-shadow: 0 10px 32px rgba(0,0,0,0.5);\n z-index: 9999;\n }\n\n .pm-wrap.t-gathering .pm-card { border-color: #f59e0b; }\n .pm-wrap.t-club .pm-card { border-color: #8b5cf6; }\n .pm-wrap.t-sponsor .pm-card { border-color: #10b981; }\n .pm-wrap.is-selected .pm-card {\n border-color: var(--color-primary);\n box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.35), 0 4px 16px rgba(var(--color-primary-rgb), 0.2);\n }\n\n .pm-img {\n position: relative;\n width: 100%;\n height: 48px;\n min-height: 48px;\n overflow: hidden;\n background: linear-gradient(135deg, #1e293b, #334155);\n display: flex;
1\n align-items: center;\n justify-content: center;\n }\n .pm-img img {\n display: block;\n width: 100% !important;\n height: 100% !important;\n object-fit: cover !important;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .pm-img .pm-img-hover { display: none !important; }\n .pm-wrap:hover .pm-img .pm-img-default,\n .pm-wrap.is-selected .pm-img .pm-img-default { display: none !important; }\n .pm-wrap:hover .pm-img .pm-img-hover,\n .pm-wrap.is-selected .pm-img .pm-img-hover { display: block !important; }\n\n .pm-wrap:hover .pm-img,\n .pm-wrap.is-selected .pm-img {\n height: 90px;\n min-height: 90px;\n }\n\n .pm-fb {\n width: 100%; height: 100%;\n display: flex; align-items: center; justify-content: center;\n background: linear-gradient(135deg, #334155, #1e293b);\n }\n .pm-fb svg { width: 22px; height: 22px; color: rgba(255,255,255,0.6); }\n .pm-wrap.t-gathering .pm-fb, .pm-wrap.t-gathering .pm-fb-active { background: linear-gradient(135deg, #fbbf24, #d97706); }\n .pm-wrap.t-club .pm-fb, .pm-wrap.t-club .pm-fb-active { background: linear-gradient(135deg, #a78bfa, #7c3aed); }\n .pm-wrap.t-sponsor .pm-fb, .pm-wrap.t-sponsor .pm-fb-active { background: linear-gradient(135deg, #34d399, #059669); }\n .pm-fb-active { background: linear-gradient(135deg, #334155, #1e293b); }\n\n .pm-info {\n max-height: 0; opacity: 0; overflow: hidden;\n background: #0f172a;\n transition: max-height 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;\n }\n .pm-wrap:hover .pm-info,\n .pm-wrap.is-selected .pm-info { max-height: 68px; opacity: 1; }\n .pm-info-inner { padding: 5px 8px 6px; }\n .pm-info-name {\n font: 700 11px/1.3 -apple-system, BlinkMacSystemFont, 'Pretendard', sans-serif;\n color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.02em;\n }\n .pm-info-cat {\n font: 400 9px/1.2 -apple-system, BlinkMacSystemFont, 'Pretendard', sans-serif;\n color: #94a3b8; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n }\n .pm-info-meta {\n display: flex; align-items: center; gap: 4px; margin-top: 3px;\n font: 500 9px/1.2 -apple-system, BlinkMacSystemFont, 'Pretendard', sans-serif;\n color: #64748b; white-space: nowrap;\n }\n .pm-meta-dist { color: var(--color-primary); }\n .pm-meta-sep { color: #475569; font-size: 7px; }\n .pm-meta-count { color: #94a3b8; }\n .pm-meta-count em { font-style: normal; color: #e2e8f0; font-weight: 700; }\n .pm-meta-rating { color: #fbbf24; }\n .pm-meta-rating em { font-style: normal; color: #e2e8f0; font-weight: 600; }\n .pm-wrap.is-selected .pm-info-name { color: var(--color-primary-light); }\n\n .pm-tip {\n position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);\n width: 0; height: 0;\n border-left: 7px solid transparent; border-right: 7px solid transparent;\n border-top: 9px solid #fff; z-index: 1; transition: border-top-color 0.2s ease;\n }\n .pm-wrap.t-gathering .pm-tip { border-top-color: #f59e0b; }\n .pm-wrap.t-club .pm-tip { border-top-color: #8b5cf6; }\n .pm-wrap.t-sponsor .pm-tip { border-top-color: #10b981; }\n .pm-wrap.is-selected .pm-tip { border-top-color: var(--color-primary); }\n\n .pm-shd {\n position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);\n width: 20px; height: 6px; border-radius: 50%;\n background: radial-gradient(ellipse, rgba(0,0,0,0.25), transparent 70%);\n transition: width 0.2s ease;\n }\n .pm-wrap:hover .pm-shd, .pm-wrap.is-selected .pm-shd { width: 36px; }\n .pm-wrap.is-selected .pm-shd {\n background: radial-gradient(ellipse, rgba(var(--color-primary-rgb),0.25), transparent 70%);\n }\n\n .pm-pulse-ring {\n position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);\n width: 48px; height: 48px; border-radius: 50%;\n border: 2px solid rgba(var(--color-primary-rgb),0.6);\n pointer-events: none; animation: pmRingPulse 2s ease-out infinite; z-index: 1; display: none;\n }\n .pm-wrap.is-selected .pm-pulse-ring { display: block; }\n .pm-pulse-ring.r2 { border-width: 1.5px; border-color: rgba(var(--color-primary-rgb),0.35); animation-delay: 0.7s; }\n @keyframes pmRingPulse {\n 0% { transform: translateX(-50%) scale(1); opacity: 0.8; }\n 100% { transform: translateX(-50%) scale(1.7); opacity: 0; }\n }\n\n .current-location-marker {\n position: relative; width: 80px; height: 80px;\n display: flex; align-items: center; justify-content: center;\n }\n .current-location-marker .core {\n position: absolute; width: 18px; height: 18px;\n background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 50%, #2563EB 100%);\n border-radius: 50%; border: 3px solid white;\n box-shadow: 0 0 0 2px rgba(59,130,246,0.3), 0 2px 8px rgba(59,130,246,0.5),\n 0 0 20px rgba(59,130,246,0.4), inset 0 -2px 4px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.4);\n z-index: 10; animation: coreGlow 2s ease-in-out infinite;\n }\n .current-location-marker .core::before {\n content: ''; position: absolute; top: 3px; left: 3px; width: 6px; height: 6px;\n background: rgba(255,255,255,0.8); border-radius: 50%; filter: blur(1px);\n }\n .current-location-marker .wave-1 {\n position: absolute; width: 18px; height: 18px;\n border: 2px solid rgba(59,130,246,0.8); border-radius: 50%;\n animation: waveExpand 2s ease-out infinite; opacity: 0;\n }\n .current-location-marker .wave-2 {\n position: absolute; width: 18px; height: 18px;\n border: 2px solid rgba(59,130,246,0.6); border-radius: 50%;\n animation: waveExpand 2s ease-out infinite; animation-delay: 0.5s;
1 opacity: 0;\n }\n .current-location-marker .wave-3 {\n position: absolute; width: 18px; height: 18px;\n border: 2px solid rgba(59,130,246,0.4); border-radius: 50%;\n animation: waveExpand 2s ease-out infinite; animation-delay: 1s; opacity: 0;\n }\n .current-location-marker .wave-4 {\n position: absolute; width: 18px; height: 18px;\n border: 1.5px solid rgba(59,130,246,0.25); border-radius: 50%;\n animation: waveExpandWide 3s ease-out infinite; animation-delay: 0.2s; opacity: 0;\n }\n .current-location-marker .accuracy-ring {\n position: absolute; width: 60px; height: 60px;\n background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, rgba(59,130,246,0.05) 50%, transparent 70%);\n border-radius: 50%; animation: accuracyPulse 3s ease-in-out infinite;\n }\n @keyframes coreGlow {\n 0%, 100% {\n box-shadow: 0 0 0 2px rgba(59,130,246,0.3), 0 2px 8px rgba(59,130,246,0.5),\n 0 0 20px rgba(59,130,246,0.4), inset 0 -2px 4px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.4);\n transform: scale(1);\n }\n 50% {\n box-shadow: 0 0 0 3px rgba(59,130,246,0.4), 0 2px 12px rgba(59,130,246,0.6),\n 0 0 30px rgba(59,130,246,0.5), inset 0 -2px 4px rgba(0,0,0,0.1), inset 0 2px 4px rgba(255,255,255,0.5);\n transform: scale(1.05);\n }\n }\n @keyframes waveExpand { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3.5); opacity: 0; } }\n @keyframes waveExpandWide { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(5); opacity: 0; } }\n @keyframes accuracyPulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.1); opacity: 0.8; } }\n",document.head.appendChild(e)}E.current=function(){class e extends google.maps.OverlayView{onAdd(){this.div=document.createElement("div"),this.div.style.position="absolute",this.div.style.zIndex=this.zIdx,this.div.style.pointerEvents="auto",this.div.innerHTML=this.html,this.getPanes().overlayMouseTarget.appendChild(this.div)}draw(){if(!this.div)return;let e=this.getProjection();if(!e)return;let n=e.fromLatLngToDivPixel(this.position);n&&(this.div.style.left=n.x-this.anchorX+"px",this.div.style.top=n.y-this.anchorY+"px")}onRemove(){this.div&&this.div.parentNode&&this.div.parentNode.removeChild(this.div),this.div=null}setZIndex(e){this.zIdx=e,this.div&&(this.div.style.zIndex=e)}getElement(){return this.div}onClick(e){this._clickHandler=e,this.div&&this.div.addEventListener("click",n=>{n.stopPropagation(),e()})}onMouseEnter(e){this._mouseEnterHandler=e,this.div&&this.div.addEventListener("mouseenter",e)}onMouseLeave(e){this._mouseLeaveHandler=e,this.div&&this.div.addEventListener("mouseleave",e)}remove(){this.setMap(null)}constructor(e,n,t=30,r=72,i=0){super(),this.position=e,this.html=n,this.anchorX=t,this.anchorY=r,this.zIdx=i,this.div=null,this._clickHandler=null,this._mouseEnterHandler=null,this._mouseLeaveHandler=null}}return e}();let e=new window.google.maps.Map(v.current,{center:n,zoom:t,disableDefaultUI:!0,zoomControl:!0,zoomControlOptions:{position:window.google.maps.ControlPosition.RIGHT_BOTTOM},styles:[{featureType:"poi",elementType:"labels",stylers:[{visibility:"off"}]},{featureType:"transit",elementType:"labels",stylers:[{visibility:"off"}]}],clickableIcons:!1});return e.addListener("idle",()=>{if(!z.current)return;let n=e.getCenter(),t=e.getBounds();n&&t&&z.current({center:{lat:n.lat(),lng:n.lng()}
1,bounds:{north:t.getNorthEast().lat(),south:t.getSouthWest().lat(),east:t.getNorthEast().lng(),west:t.getSouthWest().lng()},zoom:e.getZoom()})}),e.addListener("click",e=>{M.current&&M.current(e)}),b.current=e,()=>{b.current&&(window.google.maps.event.clearInstanceListeners(b.current),b.current=null)}},[L]),(0,o.useEffect)(()=>{if(!b.current)return;let e=b.current,r=e.getCenter();if(!r)return;let i=Math.abs(r.lat()-n.lat),a=Math.abs(r.lng()-n.lng),o=e.getZoom()!==t;(i>1e-5||a>1e-5||o)&&(e.panTo(n),o&&e.setZoom(t))},[n,t]),(0,o.useEffect)(()=>{if(!b.current||!E.current)return;let e=E.current,n=b.current;x.current.forEach(e=>e.remove()),x.current=[],i.forEach(t=>{let r=!0===t.selected,i=s(!1,t.type||"",t.name,t.image,t.category,t.distance,t.participantCount,t.maxParticipants,t.rating,t.coverImage),a=new e(new window.google.maps.LatLng(t.lat,t.lng),i,30,72,1e3*!!r);a.setMap(n);let o=()=>{let e=a.getElement();if(!e)return void requestAnimationFrame(o);e.addEventListener("click",e=>{e.stopPropagation(),null==d||d(t)}),e.addEventListener("mouseenter",()=>a.setZIndex(2e3)),e.addEventListener("mouseleave",()=>a.setZIndex(1e3*!!r)),r&&requestAnimationFrame(()=>{requestAnimationFrame(()=>{let n=e.querySelector(".pm-wrap");n&&n.classList.add("is-selected")})})};requestAnimationFrame(o),x.current.push(a)})},[i,d]),(0,o.useEffect)(()=>{if(!b.current||!E.current)return;let e=E.current;if(w.current&&(w.current.remove(),w.current=null),l){let n=new e(new window.google.maps.LatLng(l.lat,l.lng),'\n <div class="current-location-marker">\n <div class="accuracy-ring"></div>\n <div class="wave-1"></div>\n <div class="wave-2"></div>\n <div class="wave-3"></div>\n <div class="wave-4"></div>\n <div class="core"></div>\n </div>\n',40,40,-100);n.setMap(b.current),w.current=n}},[l]),(0,o.useEffect)(()=>{if(!b.current||!E.current)return;let e=E.current;if(!p||!c){y.current&&(y.current.setMap(null),y.current=null),k.current&&(k.current.remove(),k.current=null);return}let n={lat:p.lat,lng:p.lng},t=getComputedStyle(document.documentElement).getPropertyValue("--color-primary-rgb").trim()||"42, 193, 188";y.current?(y.current.setCenter(n),y.current.setRadius(c)):y.current=new window.google.maps.Circle({map:b.current,center:n,radius:c,strokeColor:"rgba(".concat(t,", 0.55)"),strokeWeight:2.5,strokeOpacity:1,fillColor:"rgba(".concat(t,", 0.06)"),fillOpacity:1,clickable:!1}),k.current&&k.current.remove();let r=new e(new window.google.maps.LatLng(p.lat,p.lng),'<div style="width:44px;height:44px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.18))">\n <svg viewBox="0 0 44 44" width="44" height="44" xmlns="http://www.w3.org/2000/svg">\n <circle cx="22" cy="22" r="4" fill="none" style="stroke:var(--color-primary);stroke-width:1.5" opacity="0.4">\n <animate attributeName="r" values="4;14;4" dur="3s" repeatCount="indefinite"/>\n <animate attributeName="opacity" values="0.4;0;0.4" dur="3s" repeatCount="indefinite"/>\n </circle>\n <line x1="22" y1="1" x2="22" y2="14" style="stroke:rgba(var(--color-primary-rgb),0.7);stroke-width:2;stroke-linecap:round"/>\n <line x1="22" y1="30" x2="22" y2="43" style="stroke:rgba(var(--color-primary-rgb),0.7);stroke-width:2;stroke-linecap:round"/>\n <line x1="1" y1="22" x2="14" y2="22" style="stroke:rgba(var(--color-primary-rgb),0.7);stroke-width:2;stroke-linecap:round"/>\n <line x1="30" y1="22" x2="43" y2="22" style="stroke:rgba(var(--color-primary-rgb),0.7);stroke-width:2;stroke-linecap:round"/>\n <circle cx="22" cy="22" r="4.5" style="fill:var(--color-primary);stroke:white;stroke-width:2"/>\n </svg>\n</div>',22,22,-500);r.setMap(b.current),k.current=r},[p,c]),g)?(0,r.jsxs)("div",{className:"relative ".concat(h),style:{height:"100%",width:"100%"},children:[!L&&(0,r.jsx)("div",{className:"absolute inset-0 bg-slate-200 animate-pulse flex items-center justify-center z-10",children:(0,r.jsx)("span",{className:"text-slate-400",children:f("common:_auto.k701f7814")})}),(0,r.jsx)("div",{ref:v,style:{height:"100%",width:"100%"}})]}):(0,r.jsx)("div",{className:"bg-slate-200 flex items-center justify-center ".concat(h),children:(0,r.jsx)("span",{className:"text-slate-500",children:f("common:_auto.k3e04efff")})})}}}]);
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.