function pinSearchResults(q) { const places = [ { name: '청년다방 역삼점', category: '분식', addr: '서울 강남구 테헤란로 132 2층' }, { name: '할매순대국 강남점', category: '한식', addr: '서울 강남구 역삼로 123' }, { name: '로스트림 로스터스', category: '카페·디저트', addr: '서울 강남구 강남대로 98길 12' } ]; const addrs = [ { addr: '서울 강남구 테헤란로 132', old: '역삼동 45-6' }, { addr: '서울 강남구 테헤란로 132길 8', old: '역삼동 48-1' }, { addr: '서울 강남구 역삼로 123', old: '역삼동 720-3' } ]; const regions = [ { name: '평동', path: '서울특별시 서대문구', code: '11410', km: 8 }, { name: '평동', path: '경기도 광주시 남종면', code: '41610', km: 34 }, { name: '평동마을', path: '강원특별자치도 홍천군 서면', code: '51720', km: 71 }, { name: '평동리', path: '충청남도 논산시 광석면', code: '44230', km: 132 }, { name: '평동리', path: '경상북도 상주시 낙동면', code: '47250', km: 176 }, { name: '평동', path: '광주광역시 광산구', code: '29200', km: 267 }, { name: '평동', path: '전라남도 나주시 다시면', code: '46710', km: 281 } ].sort((a, b) => a.km - b.km).map(r => ({ ...r, dist: r.km + 'km' })); const isRegion = /^[가-힣]{2,4}(동|리|읍|면|구|시|군|마을)?$/.test(q) && !/[0-9]/.test(q); const isAddr = /[0-9]|로|길/.test(q); if (isRegion) return { places: [ { name: q + '국밥', category: '한식', addr: '광주광역시 광산구 ' + q + ' 123' }, { name: q + '분식', category: '분식', addr: '서울특별시 서대문구 ' + q + ' 45-6' } ], addrs: [], regions }; return { places: isAddr ? places.slice(0, 1) : places, addrs: isAddr ? addrs : addrs.slice(0, 1), regions: [] }; } function PinSearchResults({ q, onPick, onRegion, selected, only }) { const raw = pinSearchResults(q); const places = only === 'addr' ? [] : raw.places; const addrs = only === 'place' ? [] : raw.addrs; const regions = only === 'place' ? [] : raw.regions; const [showAll, setShowAll] = React.useState(false); React.useEffect(() => setShowAll(false), [q]); const hl = (text) => { const i = q ? text.indexOf(q) : -1; if (i < 0) return text; return {text.slice(0, i)}{text.slice(i, i + q.length)}{text.slice(i + q.length)}; }; const Head = ({ children, count }) => (
{children} {count}
); const total = places.length + addrs.length + regions.length; if (!total) { return (
검색 결과가 없어요 지도를 직접 움직여 핀을 찍어주세요
); } return (
{places.length > 0 && ( 상호
{places.map(p => (
onPick({ addr: p.addr, label: p.name })} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 12px', borderBottom: '1px solid var(--border)', cursor: 'pointer', background: selected === p.name ? 'var(--bg-accent)' : 'transparent', borderRadius: selected === p.name ? 10 : 0 }}>
{hl(p.name)} {p.category}
{p.addr}
))}
)} {regions.length > 0 && ( 지역

지역을 고르면 그 동네로 지도가 이동해요

{(showAll ? regions : regions.slice(0, 4)).map(r => (
(onRegion || onPick)({ region: r.name, path: r.path, addr: r.path + ' ' + r.name })} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 12px', borderBottom: '1px solid var(--border)', cursor: 'pointer' }}>
{hl(r.name)} {r.path}
{r.dist}
))} {!showAll && regions.length > 4 && (
setShowAll(true)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '13px 0', cursor: 'pointer' }}> 지역 {regions.length - 4}곳 더보기
)}
)} {addrs.length > 0 && ( 주소
{addrs.map(a => (
onPick({ addr: a.addr })} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 12px', borderBottom: '1px solid var(--border)', cursor: 'pointer', background: selected === a.addr ? 'var(--bg-accent)' : 'transparent', borderRadius: selected === a.addr ? 10 : 0 }}>
{hl(a.addr)} 지번 {a.old}
))}
)}
); } window.PinSearchResults = PinSearchResults;