https://lesvacances.co.kr/assets/FlightMapExplorePage-CgXn7zLZ.js

1import{r as o,j as e,B as j,I as m,M as h,X as w}from"./index-BIjT-aNh.js";import{A as L}from"./arrow-left-DvZnGT50.js";import{T as u}from"./trending-down-C5BmMj7D.js";import{H as $}from"./heart-DKTxfLdp.js";import{C as P}from"./clock-BtDMEZ6h.js";import{P as R}from"./plane-jT1lZh40.js";function T({onPageChange:x}){const[r,N]=o.useState("all"),[n,v]=o.useState("all"),[C,B]=o.useState("popular"),[t,g]=o.useState(null),[f,b]=o.useState(new Set),[c,p]=o.useState("map"),k=[{id:"city-1",name:"도쿄",country:"일본",region:"asia",price:115e3,priceChange:-12,duration:"2시간 15분",image:"https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=800",coordinates:{x:85,y:35},popular:!0},{id:"city-2",name:"오사카",country:"일본",region:"asia",price:12e4,priceChange:-8,duration:"2시간 30분",image:"https://images.unsplash.com/photo-1590559899731-a382839e5549?w=800",coordinates:{x:84,y:36},popular:!0},{id:"city-3",name:"후쿠오카",country:"일본",region:"asia",price:105e3,priceChange:-10,duration:"1시간 45분",image:"https://images.unsplash.com/photo-1542051841857-5f90071e7989?w=800",coordinates:{x:83,y:37},popular:!0},{id:"city-4",name:"방콕",country:"태국",region:"asia",price:31e4,priceChange:3,duration:"5시간 50분",image:"https://images.unsplash.com/photo-1508009603885-50cf7c579365?w=800",coordinates:{x:68,y:52},popular:!0},{id:"city-5",name:"다낭",country:"베트남",region:"asia",price:23e4,priceChange:-5,duration:"4시간 30분",image:"https://images.unsplash.com/photo-1559592413-7cec4d0cae2b?w=800",coordinates:{x:71,y:50},popular:!0},{id:"city-6",name:"싱가포르",country:"싱가포르",region:"asia",price:35e4,priceChange:0,duration:"6시간 20분",image:"https://images.unsplash.com/photo-1525625293386-3f8f99389edd?w=800",coordinates:{x:70,y:58},popular:!0},{id:"city-7",name:"홍콩",country:"중국",region:"asia",price:28e4,priceChange:-2,duration:"3시간 50분",image:"https://images.unsplash.com/photo-1536599018102-9f803c140fc1?w=800",coordinates:{x:74,y:46},popular:!0},{id:"city-8",name:"타이베이",country:"대만",region:"asia",price:195e3,priceChange:-6,duration:"2시간 45분",image:"https://images.unsplash.com/photo-1565700464047-02049ba2b6e7?w=800",coordinates:{x:77,y:45},popular:!0},{id:"city-9",name:"세부",country:"필리핀",region:"asia",price:19e4,priceChange:-15,duration:"4시간 10분",image:"https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=800",coordinates:{x:77,y:54},popular:!0},{id:"city-10",name:"마닐라",country:"필리핀",region:"asia",price:22e4,priceChange:-7,duration:"3시간 55분",image:"https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=800",coordinates:{x:77,y:52},popular:!1},{id:"city-11",name:"파리",country:"프랑스",region:"europe",price:85e4,priceChange:-3,duration:"11시간 50분",image:"https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=800",coordinates:{x:38,y:25},popular:!0},{id:"city-12",name:"런던",country:"영국",region:"europe",price:92e4,priceChange:-1,duration:"12시간 35분",image:"https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?w=800",coordinates:{x:37,y:23},popular:!0},{id:"city-13",name:"로마",country:"이탈리아",region:"europe",price:88e4,priceChange:-2,duration:"12시간 10분",image:"https://images.unsplash.com/photo-1515542622106-78bda8ba0e5b?w=800",coordinates:{x:40,y:28},popular:!0},{id:"city-14",name:"바르셀로나",country:"스페인",region:"europe",price:89e4,priceChange:0,duration:"13시간 20분",image:"https://images.unsplash.com/photo-1539037116277-4db20889f2d4?w=800",coordinates:{x:37,y:28},popular:!0},{id:"city-15",name:"프라하",country:"체코",region:"europe",price:82e4,priceChange:-4,duration:"11시간 40분",image:"https://images.unsplash.com/photo-1541849546-216549ae216d?w=800",coordinates:{x:41,y:25},popular:!1},{id:"city-16",name:"빈",country:"오스트리아",region:"europe",price:84e4,priceChange:-2,duration:"11시간 55분",image:"https://images.unsplash.com/photo-1516550893923-42d28e5677af?w=800",coordinates:{x:42,y:26},popular:!1},{id:"city-17",name:"베를린",country:"독일",region:"europe",price:86e4,priceChange:-1,duration:"12시간 05분",image:"https://images.unsplash.com/photo-1560969184-10fe8719e047?w=800",coordinates:{x:41,y:24},popular:!1}

1,{id:"city-18",name:"뉴욕",country:"미국",region:"americas",price:12e5,priceChange:2,duration:"14시간 30분",image:"https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?w=800",coordinates:{x:20,y:28},popular:!0},{id:"city-19",name:"로스앤젤레스",country:"미국",region:"americas",price:115e4,priceChange:1,duration:"11시간 20분",image:"https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?w=800",coordinates:{x:12,y:34},popular:!0},{id:"city-20",name:"샌프란시스코",country:"미국",region:"americas",price:118e4,priceChange:0,duration:"11시간 50분",image:"https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=800",coordinates:{x:11,y:32},popular:!0},{id:"city-21",name:"시카고",country:"미국",region:"americas",price:122e4,priceChange:3,duration:"13시간 40분",image:"https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=800",coordinates:{x:18,y:30},popular:!1},{id:"city-22",name:"밴쿠버",country:"캐나다",region:"americas",price:98e4,priceChange:-2,duration:"10시간 15분",image:"https://images.unsplash.com/photo-1559511260-66a654ae982a?w=800",coordinates:{x:11,y:25},popular:!0},{id:"city-23",name:"토론토",country:"캐나다",region:"americas",price:11e5,priceChange:1,duration:"13시간 10분",image:"https://images.unsplash.com/photo-1517935706615-2717063c2225?w=800",coordinates:{x:19,y:27},popular:!1},{id:"city-24",name:"시드니",country:"호주",region:"oceania",price:85e4,priceChange:-3,duration:"10시간 45분",image:"https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9?w=800",coordinates:{x:88,y:72},popular:!0},{id:"city-25",name:"멜버른",country:"호주",region:"oceania",price:88e4,priceChange:-2,duration:"11시간 05분",image:"https://images.unsplash.com/photo-1514395462725-fb4566210144?w=800",coordinates:{x:87,y:74},popular:!0},{id:"city-26",name:"오클랜드",country:"뉴질랜드",region:"oceania",price:92e4,priceChange:0,duration:"11시간 30분",image:"https://images.unsplash.com/photo-1507699622108-4be3abd695ad?w=800",coordinates:{x:92,y:75},popular:!1},{id:"city-27",name:"괌",country:"미국",region:"oceania",price:42e4,priceChange:5,duration:"4시간 20분",image:"https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=800",coordinates:{x:87,y:52},popular:!0},{id:"city-28",name:"푸켓",country:"태국",region:"asia",price:34e4,priceChange:-1,duration:"6시간 10분",image:"https://images.unsplash.com/photo-1589394815804-964ed0be2eb5?w=800",coordinates:{x:67,y:55},popular:!1},{id:"city-29",name:"발리",country:"인도네시아",region:"asia",price:38e4,priceChange:-3,duration:"7시간 15분",image:"https://images.unsplash.com/photo-1537996194471-e657df975ab4?w=800",coordinates:{x:73,y:60},popular:!0},{id:"city-30",name:"상하이",country:"중국",region:"asia",price:26e4,priceChange:-4,duration:"2시간 50분",image:"https://images.unsplash.com/photo-1545893835-abaa50cbe628?w=800",coordinates:{x:76,y:40},popular:!0}];o.useEffect(()=>{const a=localStorage.getItem("flightMapLikes");a&&b(new Set(JSON.parse(a)))},[]);const S=(a,s)=>{a.stopPropagation(),b(i=>{const l=new Set(i);return l.has(s)?l.delete(s):l.add(s),localStorage.setItem("flightMapLikes",JSON.stringify([...l])),l})},M=()=>{let a=[...k];return r!=="all"&&(a=a.filter(s=>s.region===r)),n==="under20"?a=a.filter(s=>s.price<2e5):n==="20to50"?a=a.filter(s=>s.price>=2e5&&s.price<5e5):n==="50to100"?a=a.filter(s=>s.price>

1=5e5&&s.price<1e6):n==="over100"&&(a=a.filter(s=>s.price>=1e6)),a},d=(()=>{const a=M();return C==="price"?[...a].sort((s,i)=>s.price-i.price):[...a].sort((s,i)=>s.popular&&!i.popular?-1:!s.popular&&i.popular?1:s.price-i.price)})(),y=a=>{g(a)},z=a=>{x("flights-full",{arrival:a.name})};return e.jsxs("div",{className:"min-h-screen page-bg",children:[e.jsx("div",{className:"bg-white sticky top-0 z-50 border-b border-gray-200",children:e.jsxs("div",{className:"flex items-center justify-between p-4 max-w-7xl mx-auto relative",children:[e.jsx(j,{variant:"ghost",size:"sm",onClick:()=>x("flights-full"),className:"p-1",children:e.jsx(L,{className:"w-5 h-5"})}),e.jsx("h1",{className:"text-xl absolute left-1/2 -translate-x-1/2 text-[18px]",children:"지도에서 최저가 탐색"}),e.jsx("div",{className:"w-10"})]})}),e.jsx("div",{className:"lg:hidden bg-white border-b border-gray-200",children:e.jsxs("div",{className:"flex",children:[e.jsx("button",{onClick:()=>p("map"),className:`flex-1 py-3 text-sm ${c==="map"?"border-b-2 border-blue-500 text-blue-600":"text-gray-600"}`,children:"지도 보기"}),e.jsx("button",{onClick:()=>p("list"),className:`flex-1 py-3 text-sm ${c==="list"?"border-b-2 border-blue-500 text-blue-600":"text-gray-600"}`,children:"리스트 보기"})]})}),e.jsxs("div",{className:"relative h-screen overflow-hidden",children:[e.jsx("div",{className:"absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-100",children:e.jsxs("div",{className:"absolute inset-0 transition-transform duration-700 ease-in-out origin-center",style:{transform:r==="asia"?"scale(5) translate(-20%, -5%)":r==="europe"?"scale(5) translate(15%, -10%)":r==="americas"?"scale(4) translate(20%, 5%)":r==="oceania"?"scale(4.5) translate(-25%, 25%)":"scale(1) translate(0, 0)"},children:[e.jsx("div",{className:"absolute inset-0 opacity-20",children:e.jsx(m,{src:"https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?w=1200",alt:"World Map",className:"w-full h-full object-cover"})}),d.map(a=>e.jsx("button",{onClick:()=>y(a),className:"absolute group z-10",style:{left:`${a.coordinates.x}%`,top:`${a.coordinates.y}%`,transform:"translate(-50%, -50%)"},children:e.jsxs("div",{className:"relative flex flex-col items-center",children:[e.jsxs("div",{className:"mb-1 px-3 py-1.5 bg-white rounded-lg shadow-lg whitespace-nowrap text-xs backdrop-blur-sm bg-opacity-95 transition-transform group-hover:scale-110",children:[e.jsxs("div",{className:"font-semibold text-gray-800",children:[(a.price/1e4).toFixed(0),"만~"]}),a.priceChange<0&&e.jsxs("div",{className:"text-xs text-green-600 flex items-center justify-center gap-1",children:[e.jsx(u,{className:"w-3 h-3"}),Math.abs(a.priceChange),"%"]})]}),e.jsx(h,{className:`w-7 h-7 ${a.popular?"text-red-500 fill-red-500":"text-blue-500 fill-blue-500"} drop-shadow-lg transition-transform group-hover:scale-125`}),e.jsxs("div",{className:"absolute top-full mt-2 px-3 py-2 bg-white rounded-lg shadow-xl opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap text-sm pointer-events-none z-20",children:[e.jsx("div",{className:"font-semibold text-gray-800",children:a.name}),e.jsx("div",{className:"text-xs text-gray-600",children:a.country}),e.jsx("div",{className:"text-xs text-gray-500 mt-1",children:a.duration})]})]})},a.id))]})}),e.jsxs("div",{className:"absolute top-4 left-4 z-30 flex flex-wrap gap-2 max-w-[calc(100%-8rem)]",children:[e.jsxs("select",{value:r,onChange:a=>N(a.target.value),className:"px-4 py-2 bg-white/90 backdrop-blur-sm border border-gray-200 rounded-full text-[16px] shadow-lg hover:bg-white transition-all cursor-pointer",children:[e.jsx("option",{value:"all",children:"🌍 전체 지역"}),e.jsx("option",{value:"asia",children:"🌏 아시아"}),e.jsx("option",{value:"europe",children:"🇪🇺 유럽"}),e.jsx("option",{value:"americas",children:"🌎 미주"}),e.jsx("option",{value:"oceania",children:"🏝️ 오세아니아"})]}),e.jsxs("select",{value:n,onChange:a=>v(a.target.value),className:"px-4 py-2 bg-white/90 backdrop-blur-sm border border-gray-200 rounded-full text-[16px] shadow-lg hover:bg-white transition-all cursor-pointer",children:[e.jsx("option",{value:"all",children:"💰 전체 가격"}),e.jsx("option",{value:"under20",children:"~20만원"}),e.jsx("option",{value:"20to50",children:"20~50만원"}),e.jsx("option",{value:"50to100",children:"50~100만원"}),e.jsx("option",{value:"over100",children:"100만원+"})]})]}),e.jsx("div",{className:"absolute bottom-4 left-4 bg-white/90 backdrop-blur-sm rounded-lg shadow-lg p-3 z-20",children:e.jsxs("div",{className:"text-xs space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(h,{className:"w-4 h-4 text-red-500 fill-red-500"}),e.jsx("span",{children:"인기 도시"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(h,{className:"w-4 h-4 text-blue-500 fill-blue-500"}),e.jsx("span",{children:"일반 도시"})]})]})}),e.jsx("div",{className:`absolute top-0 right-0 h-full w-full md:w-96 bg-white shadow-2xl z-30 transition-transform duration-300 ${c==="map"?"translate-x-full":"translate-x-0"}`,children:e.jsxs("div",{className:"h-full flex flex-col",children:[e.jsxs("div",{className:"flex items-center justify-between p-4 border-b border-gray-200",children:[e.jsxs("h2",{className:"font-semibold",children:["도시 목록 ",e.jsxs("span",{className:"text-sm text-gray-600",children:["(",d.length,"개)"]})]}),e.jsx("button",{onClick:()=>p("map"),className:"p-2 hover:bg-gray-100 rounded-full transition-colors","aria-label":"패널 닫기",children:e.jsx(w,{className:"w-5 h-5 text-gray-600"})})]}),e.jsx("div",{className:"flex-1 overflow-y-auto p-4 space-y-3",children:d.map(a=>e.jsxs("div",{onClick:()=>y(a),className:"border border-gray-200 rounded-lg p-3 hover:border-blue-500 hover:shadow-md cursor-pointer transition-all relative",children:[e.jsx("button",{onClick:s=>S(s,a.id),className:"absolute top-2 right-2 p-1 hover:bg-gray-100 rounded-full transition-all z-10","aria-label":f.has(a.id)?"찜 취소":"찜하기",children:e.jsx($,{className:`w-4 h-4 ${f.has(a.id)?"fill-red-500 stroke-red-500":"stroke-gray-400"}`})}),e.jsxs("div",{className:"flex gap-3",children:[e.jsx("div",{className:"w-16 h-16 rounded-lg overflow-hidden flex-shrink-0",children:e.jsx(m,{src:a.image,alt:a.name,className:"w-full h-full object-cover"})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-1",children:[e.jsx("h3",{className:"text-sm font-medium truncate",children:a.name}),a.popular&&e.jsx("span",{className:"text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded",children:"인기"})]}),e.jsx("p",{className:"text-xs text-gray-600 mb-1",children:a.country}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("span",{className:"text-sm text-blue-600 font-semibold",children:[a.price.toLocaleStr

1ing(),"원~"]}),a.priceChange<0&&e.jsxs("span",{className:"text-xs text-green-600 flex items-center gap-1",children:[e.jsx(u,{className:"w-3 h-3"}),Math.abs(a.priceChange),"%"]})]}),e.jsx("p",{className:"text-xs text-gray-500 mt-1",children:a.duration})]})]})]},a.id))})]})}),c==="map"&&e.jsxs("button",{onClick:()=>p("list"),className:"absolute top-4 right-4 z-20 px-4 py-2 bg-white/90 backdrop-blur-sm border border-gray-200 rounded-full text-sm shadow-lg hover:bg-white transition-all flex items-center gap-2",children:[e.jsx("span",{children:"도시 목록"}),e.jsx("span",{className:"bg-blue-500 text-white text-xs px-2 py-0.5 rounded-full",children:d.length})]})]}),t&&e.jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50",children:e.jsxs("div",{className:"bg-white rounded-lg max-w-md w-full overflow-hidden shadow-2xl",children:[e.jsxs("div",{className:"aspect-[16/10] relative",children:[e.jsx(m,{src:t.image,alt:t.name,className:"w-full h-full object-cover"}),e.jsx("button",{onClick:()=>g(null),className:"absolute top-2 right-2 p-2 bg-white rounded-full shadow-lg hover:bg-gray-100",children:e.jsx(w,{className:"w-5 h-5"})}),t.popular&&e.jsx("div",{className:"absolute top-2 left-2 bg-red-500 text-white px-3 py-1 rounded-full text-xs",children:"인기 도시"})]}),e.jsxs("div",{className:"p-6",children:[e.jsx("h2",{className:"text-2xl mb-1",children:t.name}),e.jsx("p",{className:"text-sm text-gray-600 mb-4",children:t.country}),e.jsxs("div",{className:"space-y-3 mb-6",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-sm text-gray-600",children:"최저가 항공권"}),e.jsxs("span",{className:"text-2xl text-blue-600",children:[t.price.toLocaleString(),"원~"]})]}),t.priceChange<0&&e.jsxs("div",{className:"flex items-center justify-between bg-green-50 rounded-lg p-3",children:[e.jsx("span",{className:"text-sm text-gray-600",children:"지난주 대비"}),e.jsxs("span",{className:"text-sm text-green-600 flex items-center gap-1",children:[e.jsx(u,{className:"w-4 h-4"}),Math.abs(t.priceChange),"% 저렴"]})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-sm text-gray-600",children:"평균 소요시간"}),e.jsxs("span",{className:"text-sm flex items-center gap-1",children:[e.jsx(P,{className:"w-4 h-4 text-gray-400"}),t.duration]})]})]}),e.jsxs(j,{onClick:()=>z(t),className:"w-full bg-blue-500 hover:bg-blue-600 text-white py-6",children:[e.jsx(R,{className:"w-5 h-5 mr-2"}),t.name," 항공권 검색하기"]})]})]})})]})}export{T as FlightMapExplorePage};