function Onboarding({ onDone, start }) { const { Button } = window.SpotureDesignSystem_f7ad96; const [i, setI] = React.useState(Number(start) || 0); const last = 3; const next = () => (i === last ? onDone && onDone() : setI(i + 1)); const Tile = ({ h, w, r, label, big, src }) => (
{src ? : } {label && {label}}
); const road = (x, y, w, h, deg, main) => ({ position: 'absolute', left: x, top: y, width: w, height: h, transform: 'rotate(' + deg + 'deg)', background: main ? '#FFFFFF' : '#FBFBF9', boxShadow: '0 0 0 1px rgba(26,26,26,.07)', borderRadius: 2 }); const Art1 = () => (
{[[-40, 74, 360, 15, -7, true], [-40, 196, 360, 11, 5, true], [82, -40, 13, 360, 6, true], [190, -40, 10, 360, -4, false], [-30, 136, 340, 7, 9, false], [28, -30, 6, 340, -12, false], [138, -30, 6, 340, 3, false]].map((r, k) =>
)} {[[12, 20, 30, 22], [48, 14, 22, 26], [150, 18, 34, 20], [206, 96, 26, 30], [44, 108, 24, 18], [108, 216, 30, 20], [214, 214, 28, 24], [96, 42, 20, 22]].map((b, k) =>
)}
100m
{[[46, 58, '120m'], [188, 74, '80m'], [64, 196, '40m'], [176, 176, '210m']].map(p => (
{p[2]}
))}
); const Art2 = () => (
연남 옥동식자동으로 위치 연결
); const Art3 = () => (
이번 주 국밥 3곳인증 2/3 · 남은 기간 4일
{[['award', '#E8A33D', '골목 탐험가'], ['flame', '#E31E24', '7일 연속'], ['soup', '#1B8F5A', '국밥 10']].map(b => (
{b[2]}
))}
); const Art4 = () => (
GPS 기록됨
연남 버거하우스37.5602, 126.9255 · 12m
카메라 위치 정보촬영할 때 GPS 함께 저장
꺼져 있으면 가게를 직접 찾아 입력해야 하고, 주변 추천도 부정확해져요.
); const pages = [ { art: , title: '걸어서 갈 수 있는\n맛집만 먼저', body: '내 위치 100m 안의 가게를 가까운 순으로 보여드려요. 멀리 있는 광고 맛집은 없습니다.' }, { art: , title: '사진 한 장이면\n기록 완료', body: '사진을 고르면 위치와 가게 정보가 자동으로 붙어요. 최대 5장 또는 짧은 영상까지.' }, { art: , title: '촬영할 때 GPS를\n켜두세요', body: '사진에 위치가 남아야 가게를 정확히 찾아 붙일 수 있어요. 추천도 내 동선에 맞게 정확해집니다.' }, { art: , title: '기록이 미션이 되고\n배지가 됩니다', body: '동네 미션을 깨고 배지를 모으세요. 이웃과 기록 수를 겨루는 재미도 있어요.' }, ]; return (
건너뛰기
{pages.map((p, k) => (
{p.art}
{p.title}

{p.body}

))}
{pages.map((p, k) =>
setI(k)} style={{ width: k === i ? 22 : 7, height: 7, borderRadius: 999, background: k === i ? 'var(--text-accent)' : 'var(--border-strong)', cursor: 'pointer', transition: 'width .3s, background .3s' }}>
)}
); } window.Onboarding = Onboarding;