💡 어떻게 작동하나요?
모든 페이지뷰·클릭·검색·로그인·가입·필터 변경이 자동으로 적재됩니다.
현재는 localStorage 에 저장되며,
실제 배포 시 tracker.jsx 의 mockSend() 만
POST https://api.uri-jib.com/v1/events 로 바꾸면 백엔드(Cloudflare Workers + Supabase)로 전송됩니다.
8초마다 자동 배치 전송 + 페이지 비활성화 시 즉시 flush.
);
}
function HourlyChart({ data }) {
const max = Math.max(...data.map(d => d.count), 1);
const w = 480, h = 140;
const bw = w / data.length;
return (
);
}
function computeHourly(events) {
// last 7 days, per-hour bucket = 168 bars
const now = Date.now();
const start = now - 7 * 86400000;
const buckets = Array.from({ length: 168 }, (_, i) => {
const t = start + i * 3600000;
return { t, count: 0, label: (i === 0 || i === 24 || i === 72 || i === 168) ? new Date(t).toLocaleDateString('ko-KR', { month: 'numeric', day: 'numeric' }) : '' };
});
events.forEach(e => {
if (e.ts < start) return;
const i = Math.floor((e.ts - start) / 3600000);
if (i >= 0 && i < 168) buckets[i].count++;
});
// label every 24h
for (let i = 0; i < 168; i += 24) {
buckets[i].label = new Date(buckets[i].t).toLocaleDateString('ko-KR', { month: 'numeric', day: 'numeric' });
}
return buckets;
}
function computeFunnel(all) {
const visited = new Set(all.filter(e => e.event === 'page_view').map(e => e.uid));
const signupStarted = new Set(all.filter(e => e.event === 'signup_start' || e.event === 'signup_attempt').map(e => e.uid));
const signedUp = new Set(all.filter(e => e.event === 'signup_complete' || e.event === 'login_success').map(e => e.uid));
const onboarded = new Set(all.filter(e => e.event === 'onboarding_complete').map(e => e.uid));
const activated = new Set(all.filter(e => e.event === 'view_apt_detail' || e.event === 'watchlist_add').map(e => e.uid));
return [
{ key: 'visit', label: '방문', value: visited.size },
{ key: 'signup', label: '가입 시도', value: signupStarted.size },
{ key: 'auth', label: '가입·로그인', value: signedUp.size },
{ key: 'onboard', label: '온보딩 완료', value: onboarded.size },
{ key: 'active', label: '단지 조회·관심', value: activated.size },
];
}
function eventColor(name) {
if (name.includes('login') || name.includes('signup')) return T.up;
if (name.includes('error') || name.includes('fail')) return T.down;
if (name === 'page_view') return T.info;
if (name === 'click') return T.fgDim;
if (name.includes('search')) return T.ai;
if (name.includes('watchlist') || name.includes('compare')) return T.hot;
return T.fg;
}
function exportCSV(events) {
const headers = ['ts', 'event', 'path', 'uid', 'sid', 'authed', 'props'];
const rows = events.map(e => [
new Date(e.ts).toISOString(),
e.event,
e.path,
e.uid,
e.sid,
e.authed,
JSON.stringify(e.props || {}).replace(/"/g, '""'),
].map(c => '"' + String(c == null ? '' : c) + '"').join(','));
const csv = [headers.join(','), ...rows].join('\n');
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = `urijib-events-${Date.now()}.csv`; a.click();
URL.revokeObjectURL(url);
window.UJTrack.track('admin_export_csv', { count: events.length });
}
const tinySelect = {
padding: '6px 10px', borderRadius: 3,
background: T.cardLo, color: T.fg, border: '1px solid ' + T.line,
fontSize: 11, fontFamily: T.mono,
};
function tinyBtn(active) {
return {
padding: '6px 12px', borderRadius: 3,
background: active ? T.hot : T.card, color: active ? T.bg : T.fgDim,
border: '1px solid ' + (active ? T.hot : T.line),
fontSize: 11, fontFamily: T.mono, cursor: 'pointer', fontWeight: 600,
};
}
// ─── Misc routes ────────────────────────────────────────
function LegalPage({ type }) {
const titles = { terms: '이용약관', privacy: '개인정보 처리방침', disclaimer: '투자 면책 고지' };
useEffect(() => { document.title = titles[type] + ' — 우리집사기'; }, [type]);
return (