// app.jsx — Authenticated app shell + main pages // Pages: dashboard, detail/:id, search, portfolio, compare, loan, profile, notifications function AppShell({ route, children }) { const { user, logout } = useAuth(); const wl = useWatchlist(); useEffect(() => { if (!user) navigate('/login'); }, [user]); if (!user) return null; const nav = [ { id: 'dashboard', label: '대시보드', icon: '◉', path: '/app/dashboard' }, { id: 'search', label: '검색·지도', icon: '⌕', path: '/app/search' }, { id: 'portfolio', label: '관심 단지', icon: '★', path: '/app/portfolio', badge: wl.ids.length || null }, { id: 'compare', label: '지역 비교', icon: '⇄', path: '/app/compare' }, { id: 'loan', label: '대출·세금', icon: '₩', path: '/app/loan' }, { id: 'notifications', label: '알림', icon: '◷', path: '/app/notifications', badge: 3 }, ]; return (
{children}
); } function AppHeader({ user, onLogout }) { const [searchOpen, setSearchOpen] = useState(false); const [q, setQ] = useState(''); const [showMenu, setShowMenu] = useState(false); return (
우리집사기 TERMINAL
{ e.preventDefault(); if (q.trim()) { window.UJTrack.track('search', { query: q, source: 'header' }); navigate('/app/search?q=' + encodeURIComponent(q)); } }}> setQ(e.target.value)} onFocus={() => { setSearchOpen(true); window.UJTrack.track('search_focus', {}); }} onBlur={() => setTimeout(() => setSearchOpen(false), 150)} style={{ width: '100%', padding: '8px 14px', borderRadius: 4, background: T.card, color: T.fg, border: '1px solid ' + T.line, fontSize: 13, fontFamily: T.font, outline: 'none', }} />
{searchOpen && q.length > 0 && (
{APTS.filter(a => (a.name + a.region + a.dong).toLowerCase().includes(q.toLowerCase())).slice(0, 6).map((a) => (
{a.name}
{a.region}
 ))}
)}
); } function MenuItem({ href, onClick, label, danger }) { const props = href ? { href, as: 'a' } : { onClick }; const Tag = href ? 'a' : 'div'; return ( e.currentTarget.style.background = T.cardHi} onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'} >{label} ); } function Avatar({ name, size = 24 }) { const initial = (name || '?').charAt(0).toUpperCase(); return (
{initial}
); } // ─── DASHBOARD ──────────────────────────────────────── function DashboardPage() { const wl = useWatchlist(); useEffect(() => { document.title = '대시보드 — 우리집사기'; }, []); const topApt = APTS[4]; // 대치 은마 return (
{/* KPI row */}
{[ { label: 'AI 추천 단지', value: '42', sub: '7건 vs 어제', color: T.up }, { label: '강력매수 신호', value: '14', sub: '3등급 6 · 4등급 8', color: T.hot }, { label: '내 관심 단지', value: wl.ids.length || 8, sub: '6건 알림 대기', color: T.info }, { label: '평균 상승률', value: '+0.42%', sub: 'WoW · 매주', color: T.up }, { label: '기준금리', value: '2.75%', sub: '6월 동결 (78%)', color: T.fgDim }, ].map((k) => ( ))}
{/* AI Top Pick */} {['1Y', '3Y', '5Y', '10Y'].map((p, i) => ( ))}
}>
{topApt.region} · {topApt.dong}
{topApt.area} · {topApt.built}년식 · {topApt.units.toLocaleString()}세대 · {topApt.tags.join(' · ')}
{won(topApt.currentPrice)}
AI BUY SIGNAL
매수 적기
{topApt.bestBuyMonth}
적정 매수가
{won(topApt.targetPrice)}
현재가 대비 -1.6%
모델 확신도
{/* Top recommendations table */} {['실거주', '투자', '혼합'].map((m, i) => ( ))}
}> {['#', '단지명', '지역', '등급', '현재가', '1M / 1Y', '매수 적기', '적정가', '신호'].map((h) => ( ))} {APTS.slice().sort((a, b) => b.score - a.score).slice(0, 12).map((a, i) => ( { window.UJTrack.track('table_row_click', { apt_id: a.id }); navigate('/app/detail/' + a.id); }} onMouseEnter={(e) => e.currentTarget.style.background = T.cardHi} onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'} style={{ cursor: 'pointer' }} > ))}
{h}
{String(i + 1).padStart(2, '0')} {a.name} {a.region} {won(a.currentPrice)}   {a.bestBuyMonth} {won(a.targetPrice)}
{/* Right column */}
}>
{NEWS.map((n, i) => (
{n.tag} {n.region}
{n.time}
{n.title}
{n.source}
 ))}
{FACTORS.slice(0, 8).map((f) => ( ))}
전체 12개 요인 보기 →
); } // ─── DETAIL ─────────────────────────────────────────── function DetailPage({ id }) { const apt = APTS.find(a => a.id === id) || APTS[0]; const wl = useWatchlist(); const isFav = wl.has(apt.id); useEffect(() => { document.title = apt.name + ' — 우리집사기'; window.UJTrack.track('view_apt_detail', { apt_id: apt.id, apt_name: apt.name }); }, [apt.id]); const fc = forecast(apt.currentPrice, 12, 0.005, 0.025); return (
← 대시보드

{apt.name}

{apt.region} · {apt.dong} · {apt.area} · {apt.built}년식 · {apt.units.toLocaleString()}세대
25 ? '고평가' : '적정'} />
{FACTORS.slice(0, 6).map((f) => ( ))}
최적 매수 시점
{apt.bestBuyMonth}
{Math.round((new Date(2026, parseInt(apt.bestBuyMonth.split('.')[1]) - 1) - new Date()) / 86400000)}일 후
적정 매수가
{won(apt.targetPrice)}
현재가 대비 {pct((apt.targetPrice - apt.currentPrice) / apt.currentPrice * 100)}
신뢰도 {apt.confidence}%
대출 한도로 매수 가능 시뮬레이션 →
    {apt.boons.map((b, i) => (
  • + {b}
    • ))}
    {apt.risks.map((r, i) => (
  • − {r}
    • ))}
); } // ─── PORTFOLIO ──────────────────────────────────────── function PortfolioPage() { const wl = useWatchlist(); useEffect(() => { document.title = '관심 단지 — 우리집사기'; }, []); const items = APTS.filter(a => wl.ids.includes(a.id)); return (
{items.length === 0 ? ( ) : (
{items.map((a) => (
{a.name}
{a.region}
{won(a.currentPrice)}
h.v)} w={300} h={36} />
매수 적기 {a.bestBuyMonth} · 적정가 {won(a.targetPrice)}
))}
)}
); } // ─── COMPARE ────────────────────────────────────────── function ComparePage() { useEffect(() => { document.title = '지역 비교 — 우리집사기'; }, []); const [selected, setSelected] = useState(['강남구', '분당구', '수원영통']); return (
{REGIONS.map((r) => ( ))}
{['지역', '점수', '1Y 변동', 'PIR', '전세가율', '신호', '추세'].map(h => ( ))} {REGIONS.filter(r => selected.includes(r.name)).map((r) => ( ))}
{h}
{r.name}
= 80 ? T.hot : r.score >= 65 ? T.up : T.info, fontWeight: 700 }}>{r.score}
{r.pir.toFixed(1)} {r.jeonse.toFixed(1)}%
); } // ─── LOAN ───────────────────────────────────────────── function LoanPage() { useEffect(() => { document.title = '대출·세금 시뮬레이터 — 우리집사기'; }, []); const [price, setPrice] = useState(120000); // 12억 const [income, setIncome] = useState(8000); // 연 8000만 const [own, setOwn] = useState(30); // 자기자본 % const [rate, setRate] = useState(4.2); const [years, setYears] = useState(30); const loanAmount = price * (1 - own / 100); const monthRate = rate / 100 / 12; const months = years * 12; const monthly = loanAmount * monthRate * Math.pow(1 + monthRate, months) / (Math.pow(1 + monthRate, months) - 1); const dsr = (monthly * 12) / (income * 10) * 100; // % const dsrOk = dsr <= 40; // 취득세 (1.1%~3.3% 가정) const acqTax = Math.round(price * 0.011); // 양도세 (20% 가정) const capGainTax = Math.round(price * 0.02); // 재산세 연간 const propTax = Math.round(price * 0.0015); useEffect(() => { const t = setTimeout(() => window.UJTrack.track('loan_calc', { price, income, own, rate, years, dsr: dsr.toFixed(1) }), 500); return () => clearTimeout(t); }, [price, income, own, rate, years]); return (
setRate(parseFloat(v))} min={2.5} max={7} step={0.05} />
DSR
{dsr.toFixed(1)}%
{dsrOk ? '✓ DSR 40% 이내 — 대출 가능' : '⚠ DSR 한도 초과'}
); } function RangeField({ label, unit, value, onChange, min, max, step }) { return (
{label} {unit}
onChange(parseFloat(e.target.value))} style={{ width: '100%', accentColor: T.hot }} />
); } function TaxRow({ label, value, sub, bold }) { return (
{label}
{sub &&
{sub}
}
{value}
); } // ─── SEARCH ─────────────────────────────────────────── function SearchPage() { useEffect(() => { document.title = '검색 — 우리집사기'; }, []); const params = new URLSearchParams(location.hash.split('?')[1] || ''); const initialQ = params.get('q') || ''; const [q, setQ] = useState(initialQ); const [signal, setSignal] = useState('all'); const [grade, setGrade] = useState('all'); const [limit, setLimit] = useState(20); const [sort, setSort] = useState('score'); const filtered = APTS.filter((a) => { if (q && !(a.name + a.region + a.dong + a.tags.join('')).toLowerCase().includes(q.toLowerCase())) return false; if (signal !== 'all' && a.signal !== signal) return false; if (grade !== 'all' && a.grade !== grade) return false; return true; }).sort((a, b) => { if (sort === 'score') return b.score - a.score; if (sort === 'price_asc') return a.currentPrice - b.currentPrice; if (sort === 'price_desc') return b.currentPrice - a.currentPrice; if (sort === 'delta') return b.delta1y - a.delta1y; return 0; }); useEffect(() => { setLimit(20); if (q) window.UJTrack.track('search_filter', { q, signal, grade, sort, results: filtered.length }); }, [q, signal, grade, sort]); const visible = filtered.slice(0, limit); return (
setQ(e.target.value)} placeholder="단지명·지역·동·태그… (예: 강남, 정자, 자이, GTX)" style={{ flex: 1, minWidth: 240, padding: '10px 14px', borderRadius: 4, background: T.cardLo, color: T.fg, border: '1px solid ' + T.line, fontSize: 13, fontFamily: T.font, outline: 'none', }} />
{!q && (
빠른 검색: {['강남', '서초', '송파', '마포', '용산', '분당', '판교', '광교', '송도', '해운대', '동탄', '광명'].map((kw) => ( ))}
)}
{visible.map((a) => (
{a.name}
{a.region} · {a.dong}
{a.tags.slice(0, 3).map((t) => ( {t} ))}
{won(a.currentPrice)}
 ))} {filtered.length === 0 && }
{limit < filtered.length && ( )}
); } function Filter({ label, value, onChange, options }) { return (
{label}
); } // ─── PROFILE ────────────────────────────────────────── function ProfilePage() { const { user, logout } = useAuth(); useEffect(() => { document.title = '프로필 — 우리집사기'; }, []); return (
{user.name}
{user.email}
{user.provider.toUpperCase()} · 가입일 {new Date(user.joinedAt).toLocaleDateString('ko-KR')}
); } function ProfileStats() { const [stats, setStats] = useState(() => computeMyStats()); useEffect(() => { const h = () => setStats(computeMyStats()); window.addEventListener('urijib:event', h); return () => window.removeEventListener('urijib:event', h); }, []); return (
); } function computeMyStats() { const uid = window.UJTrack.getUid(); const all = window.UJTrack.readAll(); const mine = all.filter(e => e.uid === uid); return { detailViews: mine.filter(e => e.event === 'view_apt_detail').length, searches: mine.filter(e => e.event === 'search').length, activeDays: new Set(mine.map(e => new Date(e.ts).toDateString())).size, alerts: 3, }; } // ─── NOTIFICATIONS ──────────────────────────────────── function NotificationsPage() { useEffect(() => { document.title = '알림 — 우리집사기'; }, []); const items = [ { ts: '12분 전', tag: 'BUY 시그널', title: '대치 은마, BUY → STRONG BUY 변경', body: '재건축 사업시행계획 가결로 시그널 강화', kind: 'signal' }, { ts: '1시간 전', tag: '뉴스', title: 'GTX-A 성남역 6월 부분 개통 확정', body: '관심 단지 3개 영향 — 분당 시세 +2.4% 전망', kind: 'news' }, { ts: '오늘 09:00', tag: '주간 요약', title: '이번 주 매수 적기 단지 5건', body: '관심 지역 강남·분당·수원에서 BUY 시그널 5건', kind: 'digest' }, ]; return (
{items.map((n, i) => (
{n.tag} {n.ts}
{n.title}
{n.body}
))}
); } // ─── Atoms ──────────────────────────────────────────── function PageHead({ title, sub }) { return (

{title}

{sub &&
{sub}
}
); } function EmptyState({ title, desc, cta, ctaHref }) { return (
○
{title}
{desc}
{cta && {cta} →}
); } Object.assign(window, { AppShell, DashboardPage, DetailPage, SearchPage, PortfolioPage, ComparePage, LoanPage, ProfilePage, NotificationsPage, EmptyState, PageHead, });