// trade-detail.jsx — 실거래 클릭 시 상세 모달 // 거래 이력 + 학술/실무 핵심 요인 SHAP + 한국부동산원 호재 리포트 + AI 예측/매수적기 + AI인프라 투자관점 // 지역별 호재 리포트 (한국부동산원·국토부·언론 중심, 호재 위주 큐레이션) const REGION_BOONS = { '강남': [{ src: '한국부동산원', t: '강남권 재건축 정비사업 가속 — 대치·개포 일대 사업시행인가 확대', impact: 'high' }, { src: '국토부', t: '영동대로 복합환승센터 2026 착공 — GTX-A/C 환승 허브', impact: 'high' }], '서초': [{ src: '한국부동산원', t: '반포 일대 재건축 일반분양 흥행 — 인근 시세 견인', impact: 'high' }, { src: '언론', t: '서초 방배 재개발 구역 다수 관리처분 통과', impact: 'mid' }], '송파': [{ src: '국토부', t: '잠실 마이스(MICE) 복합개발 본격화 — 일자리·유동인구 증가', impact: 'high' }, { src: '한국부동산원', t: '가락·문정 업무지구 확장', impact: 'mid' }], '용산': [{ src: '국토부', t: '용산국제업무지구 개발계획 확정 — 초대형 복합단지', impact: 'high' }, { src: '언론', t: '한남뉴타운 재개발 속도', impact: 'high' }], '성동': [{ src: '한국부동산원', t: '성수 IT·지식산업센터 클러스터 확장 — 직주근접 수요', impact: 'high' }], '마포': [{ src: '한국부동산원', t: '마포·공덕 업무지구 + 경의선숲길 프리미엄', impact: 'mid' }], '분당': [{ src: '국토부', t: '1기 신도시 특별법 — 분당 선도지구 재건축 추진', impact: 'high' }, { src: '언론', t: '판교 제3테크노밸리 조성 — AI·바이오 기업 유치', impact: 'high' }], '판교': [{ src: '언론', t: '판교 테크노밸리 AI 기업 집적 — 네이버·카카오 R&D 확대', impact: 'high' }], '수원': [{ src: '국토부', t: '수원 영통 삼성 DX 캠퍼스 인접 — R&D 수요', impact: 'high' }, { src: '한국부동산원', t: '광교신도시 인프라 성숙', impact: 'mid' }], '용인': [{ src: '국토부', t: '용인 반도체 클러스터(SK하이닉스) 착공 — 사상 최대 투자', impact: 'high' }, { src: '언론', t: '경기 남부 반도체 메가클러스터 핵심', impact: 'high' }], '평택': [{ src: '언론', t: '삼성 평택 반도체 캠퍼스 P4~P6 증설 — 고용 폭증', impact: 'high' }, { src: '국토부', t: 'GTX-A 평택 연장 논의', impact: 'mid' }], '화성': [{ src: '국토부', t: '동탄2 SRT·GTX-A 개통 효과 — 강남 30분권', impact: 'high' }, { src: '언론', t: '삼성 화성 반도체 인접', impact: 'high' }], '하남': [{ src: '국토부', t: '3호선·5호선 연장 + 미사·교산신도시', impact: 'high' }], '인천': [{ src: '한국부동산원', t: '송도 국제업무지구 바이오 클러스터 + GTX-B', impact: 'high' }], '해운대': [{ src: '한국부동산원', t: '해운대 관광·마이스 + 동부산 개발', impact: 'mid' }], '세종': [{ src: '국토부', t: '행정수도 기능 강화 + 데이터센터 집적', impact: 'mid' }], }; function boonsFor(region, name) { for (const k of Object.keys(REGION_BOONS)) { if (region.includes(k) || name.includes(k)) return REGION_BOONS[k]; } return [{ src: '한국부동산원', t: '지역 생활 인프라 안정 — 실수요 기반 견조', impact: 'mid' }]; } function TradeDetailModal({ data, onClose, isMobile }) { const { apt, region } = data; const ai = useMemo(() => window.analyzeUnit({ name: apt.name, region, trades: apt.trades, area: apt.area, buildYear: apt.buildYear }), [apt.name]); const boons = boonsFor(region, apt.name); const sorted = [...apt.trades].sort((a, b) => { const ka = +(a.ymd + ('' + (a.day || 0)).padStart(2, '0')), kb = +(b.ymd + ('' + (b.day || 0)).padStart(2, '0')); return kb - ka; }); useEffect(() => { window.UJTrack.track('view_apt_detail', { apt_name: apt.name, region, signal: ai.signal, ai_growth: ai.annualGrowth }); // XAI 모달 활성화 로그 window.UJLog.log(window.UJLog.EVENT_TYPES.MODAL_OPEN, { modal: 'xai_detail', aptCode: apt.code || (region + '-' + apt.name), aptName: apt.name, region, opinion: ai.signal, score: ai.score, bestBuyMonth: ai.bestBuyMonth }); const esc = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', esc); document.body.style.overflow = 'hidden'; return () => { window.removeEventListener('keydown', esc); document.body.style.overflow = ''; window.UJLog.log(window.UJLog.EVENT_TYPES.MODAL_CLOSE, { modal: 'xai_detail', aptName: apt.name }); }; }, []); const prices = sorted.map(t => t.price); const spark = prices.slice(0, 14).reverse(); return (
e.stopPropagation()} className="uj-scroll" style={{ background: T.bg, border: '1px solid ' + T.lineHi, borderRadius: isMobile ? '16px 16px 0 0' : 12, width: '100%', maxWidth: 720, maxHeight: isMobile ? '92vh' : '90vh', overflowY: 'auto', }}> {/* 헤더 */}

{apt.name}

{region} {apt.dong} · {apt.buildYear ? apt.buildYear + '년식 · ' : ''}{apt.trades.length}건 실거래
{/* ① XAI 핵심 이유 요약 */} {/* AI 예측 핵심 */}
0 ? '+' : ''}${ai.annualGrowth}%`} color={ai.annualGrowth >= 0 ? T.up : T.down} sub={manWon(ai.forecast12)} />
{/* ② 오늘(TODAY) 기점 매수적기 + 실거래가 추이 미니차트 */} {/* ③ 주요 지표 대시보드 (점수판) */} {/* AI BUY SIGNAL 카드 */}
AI 종합 분석 · 모델 v3.2 · {ai.factors.length}개 요인
{apt.name}은(는) 최근 거래 모멘텀 = 0 ? T.up : T.down }}>{ai.stats.momentum > 0 ? '+' : ''}{ai.stats.momentum}%, AI·반도체 인프라 인접도 {ai.infra.score}점 기준, 향후 12개월 = 0 ? T.up : T.down }}>{ai.annualGrowth > 0 ? '약 ' + ai.annualGrowth + '% 상승' : ai.annualGrowth + '% 조정'} 전망입니다. {ai.stats.momentum > 8 ? ' 단기 과열 구간으로 ' + ai.bestBuyMonth + ' 조정 후 매수가 유리합니다.' : ' 매수 적기는 ' + ai.bestBuyMonth + ' 전후로 분석됩니다.'}
{/* AI 인프라 투자 관점 */}
AI·반도체 인프라 투자 매력
{ai.infra.score}
{ai.infra.label}
{ai.infra.tags.map(t => {t})}
반도체 Fab·데이터센터·AI R&D 등 HW/SW/인프라 인접 단지는 양질의 일자리 유입으로 중장기 수요가 견조합니다.
{/* 핵심 요인 SHAP */}
매수 의사결정 핵심 요인 (실무 + 논문 기반)
{ai.factors.map(f => { const s = Math.round(ai.factorScores[f.id]); return (
{f.label}
{f.source} · {f.kind}
= 70 ? T.up : s >= 50 ? T.hot : T.fgMuted, borderRadius: 3 }} />
{s}
{f.weight}%
); })}
{/* 한국부동산원 호재 리포트 */}
호재 리포트 (한국부동산원·국토부 중심)
{boons.map((b, i) => (
↑
{b.t}
{b.src} · 영향도 {b.impact === 'high' ? '높음' : b.impact === 'mid' ? '보통' : '낮음'}
))}
{/* 실거래 이력 */}
실거래 이력 (국토부 RTMS)
{['거래월', '전용', '층', '거래가'].map(h => )} {sorted.slice(0, 40).map((t, i) => ( ))}
{h}
{t.ymd.slice(2, 4)}.{t.ymd.slice(4)}{t.day ? '.' + ('' + t.day).padStart(2, '0') : ''} {t.area ? t.area + '㎡' : '-'} {t.floor ? t.floor + 'F' : '-'} {manWon(t.price)}
※ 본 분석은 국토부 RTMS 실거래가와 통계 모델 기반 정보이며 투자 자문이 아닙니다. 매매 결정은 본인 책임입니다.
); } // ① XAI 핵심 이유 요약 function XAIReason({ ai, apt }) { const op = window.opinionOf(ai.signal); return (
XAI · AI가 이렇게 판단한 이유 종합 {ai.score}점 · 신뢰도 {ai.confidence}%
“{ai.reason.headline}”
{op.label} · {ai.reason.verdict}
); } function isMobile2() { return window.innerWidth <= 640 ? 16 : 18; } // ② 오늘(TODAY) 기점 매수적기 + 실거래가 추이 미니차트 function BuyTimingChart({ ai, trades, isMobile }) { const W = 640, H = isMobile ? 150 : 170, padL = 8, padR = 8, padT = 16, padB = 26; const ymNum = (y, m) => y * 12 + (m - 1); const series = useMemo(() => { const byM = {}; (trades || []).forEach(t => { if (!t.ymd || !(t.price > 0)) return; const y = +t.ymd.slice(0, 4), m = +t.ymd.slice(4, 6); const k = ymNum(y, m); if (!byM[k]) byM[k] = { n: 0, sum: 0, y, m }; byM[k].n++; byM[k].sum += t.price; }); return Object.keys(byM).map(Number).sort((a, b) => a - b) .map(k => ({ x: k, price: Math.round(byM[k].sum / byM[k].n), y: byM[k].y, m: byM[k].m })); }, [trades]); const now = new Date(); const todayX = ymNum(now.getFullYear(), now.getMonth() + 1); const bb = ai.bestBuyDate ? ai.bestBuyDate.split('-') : null; const bestX = bb ? ymNum(+bb[0], +bb[1]) : todayX + (ai.buyMonthsAhead || 3); if (series.length < 1) { return (
매수 타이밍 차트
거래 데이터가 부족해 추이 차트를 표시할 수 없습니다.
); } const lastHist = series[series.length - 1]; const projPrice = ai.forecast12 || ai.targetPrice || lastHist.price; const pts = series.map(p => ({ x: p.x, price: p.price })); const proj = { x: bestX, price: projPrice }; const xMin = Math.min(series[0].x, todayX); const xMax = Math.max(bestX, lastHist.x, todayX); const allPrices = pts.map(p => p.price).concat([projPrice]); const yMin = Math.min(...allPrices), yMax = Math.max(...allPrices); const yRange = (yMax - yMin) || 1; const xRange = (xMax - xMin) || 1; const sx = (x) => padL + ((x - xMin) / xRange) * (W - padL - padR); const sy = (p) => padT + (1 - (p - yMin) / yRange) * (H - padT - padB); const histPath = 'M ' + pts.map(p => sx(p.x) + ' ' + sy(p.price)).join(' L '); const projPath = `M ${sx(lastHist.x)} ${sy(lastHist.price)} L ${sx(proj.x)} ${sy(proj.price)}`; const up = ai.annualGrowth >= 0; const histColor = (ai.stats.momentum || 0) >= 0 ? T.up : T.down; const op = window.opinionOf(ai.signal); const fmtMon = (x) => { const y = Math.floor(x / 12), m = (x % 12) + 1; return `${('' + y).slice(2)}.${('' + m).padStart(2, '0')}`; }; return (
매수 타이밍 · 실거래가 추이
실거래 AI 예측
{/* grid */} {[0.25, 0.5, 0.75].map((f, i) => )} {/* TODAY 세로선 */} 오늘 {fmtMon(todayX)} {/* 매수적기 세로선 */} {/* 실거래 라인 + 점 */} {pts.map((p, i) => )} {/* 예측 점선 */} {/* 매수적기 마커 */} {/* x축 라벨 */} {fmtMon(series[0].x)} 매수적기 {ai.bestBuyMonth}
최근 실거래 {manWon(lastHist.price)} → 매수적기 예상 {manWon(projPrice)} ({up ? '+' : ''}{ai.annualGrowth}%)
{op.label} · 적기 {ai.bestBuyMonth}
); } // ③ 주요 지표 대시보드 (점수판) function MetricScoreboard({ ai, isMobile }) { const fs = ai.factorScores || {}; const cnt = ai.stats.count || 0; const mom = ai.stats.momentum || 0; const absorb = cnt >= 6 ? { label: '빠름', score: Math.min(95, cnt * 12) } : cnt >= 3 ? { label: '보통', score: 55 } : { label: '느림', score: 32 }; const metrics = [ { k: '거래가 모멘텀', v: `${mom > 0 ? '+' : ''}${mom}%`, score: Math.round(fs.transaction || 50), color: mom >= 0 ? T.up : T.down, note: '최근 vs 이전 평균' }, { k: '거래량(건수)', v: `${cnt}건`, score: Math.min(95, cnt * 12), color: T.info, note: '최근 3개월 신고' }, { k: '매물 소화 속도', v: absorb.label, score: absorb.score, color: T.hot, note: '거래 회전 추정' }, { k: '학군 점수', v: `${Math.round(fs.school || 0)}`, score: Math.round(fs.school || 0), color: T.ai, note: '학원가·배정' }, { k: '교통 호재', v: `${Math.round(fs.transit || 0)}`, score: Math.round(fs.transit || 0), color: T.info, note: 'GTX·역세권' }, { k: 'AI·반도체 인프라', v: `${ai.infra.score}`, score: ai.infra.score, color: T.ai, note: '일자리 인접' }, ]; return (
주요 지표 점수판 (AI가 매긴 항목별 점수)
{metrics.map(m => (
{m.k}
{m.v}
{m.note} · {Math.round(m.score)}점
))}
); } function StatBox({ label, value, sub, color }) { return (
{label}
{value}
{sub &&
{sub}
}
); } function SectionTitle({ children }) { return
{children}
; } Object.assign(window, { TradeDetailModal });