/* --- src/screens-dashboard.jsx --- */ // Presentation-grade Dashboard — "관제센터" view // Replaces DashboardScreen in screens-1.jsx const { useState: useStateD, useEffect: useEffectD } = React; function DashboardScreen({ go }){ const [region, setRegion] = useStateD('전체'); const [type, setType] = useStateD('전체'); const [priorityFilter, setPriorityFilter] = useStateD('전체'); const [now, setNow] = useStateD(new Date('2026-04-30T23:48:00')); const [day5Metrics, setDay5Metrics] = useStateD(RSData.DAY5_DEFAULT_METRICS); useEffectD(()=>{ const id = setInterval(()=> setNow(new Date(Date.now())), 30000); return ()=> clearInterval(id); },[]); useEffectD(() => { let alive = true; RSData.loadDay5Metrics() .then((metrics) => { if (alive) setDay5Metrics(metrics); }) .catch(() => { if (alive) setDay5Metrics({ ...RSData.DAY5_DEFAULT_METRICS, status:'error' }); }); return () => { alive = false; }; }, []); const t = now; const ts = `${t.getFullYear()}.${String(t.getMonth()+1).padStart(2,'0')}.${String(t.getDate()).padStart(2,'0')} ${String(t.getHours()).padStart(2,'0')}:${String(t.getMinutes()).padStart(2,'0')}:${String(t.getSeconds()).padStart(2,'0')}`; const m = day5Metrics; const liveTrend = RSData.TREND.map((item, idx, arr) => { const p = (idx + 1) / arr.length; return { ...item, total: Math.max(1, Math.round(m.sourceTotal * (0.64 + p * 0.36))), residual: Math.max(1, Math.round(m.totalAClassificationCandidates * (0.50 + p * 0.50))), shadow: Math.max(1, Math.round(m.highAnomalyCount * (0.45 + p * 0.55))) }; }); const kpiItems = [ { tone:'amber', icon:'shield', label:'정비 검토 권고 자치법규', value:m.flaggedOrdinances, delta:`+${m.flaggedOrdinances}`, share:m.sampleSize ? Number((m.flaggedOrdinances / m.sampleSize * 100).toFixed(1)) : null, sub:'본문 점검에서 정비 신호 발견', kpiKey:'flagged-ordinances' }, { tone:'amber', icon:'layers', label:'명시적 차이 신호', value:m.totalAClassificationCandidates, delta:`+${m.aRuleSignals}`, share:null, sub:'숫자·기간·권한자·폐지·시행일', kpiKey:'rule-signals' }, { tone:'teal', icon:'check', label:'경과조치·정비 제외 자치법규', value:m.bClassificationOrdinances, delta:`+${m.bRuleSignals}`, share:m.sampleSize ? Number((m.bClassificationOrdinances / m.sampleSize * 100).toFixed(1)) : null, sub:'의도적 존치로 분리', kpiKey:'exempt-ordinances' }, { tone:'steel', icon:'building', label:'건축법 영향 자치법규', value:m.uniqueOrdinances, delta:`${m.sourceTotal.toLocaleString()} 연계`, share:null, sub:'법제처 ELIS 실측', kpiKey:'linked-ordinances' }, { tone:'steel', icon:'compare', label:'표준 표현에서 이탈 (보조 지표)', value:m.highAnomalyCount, delta:`${m.anomalyChunks} 청크`, share:m.anomalyOrdinances ? Number((m.highAnomalyCount / m.anomalyOrdinances * 100).toFixed(1)) : null, sub:'정렬용 참고만', kpiKey:'standard-deviation' }, { tone:'teal', icon:'brain', label:'AI 검토 메모 생성', value:m.level4Reviews, delta:`+${m.level4Reviews}`, share:null, sub:'직접 비교 기반 자동 작성', kpiKey:'ai-review-memos' }, ]; const allPriorityItems = (m.reformPool && m.reformPool.length) ? m.reformPool : (m.topAnomalies || []); const priorityItems = priorityFilter === 'A' ? allPriorityItems.filter(r => r.grade === 'A' || r.source === 'direct-comparison' || r.source === 'policy-hunter') : priorityFilter === 'B' ? allPriorityItems.filter(r => r.grade === 'B' || (r.source !== 'direct-comparison' && r.source !== 'policy-hunter')) : allPriorityItems; const poolCounts = m.reformPoolCounts || { A: 0, APolicy: 0, ADirect: 0, B: 0, total: allPriorityItems.length }; const openPriorityAnalysis = (item) => { try { const payload = { ordinanceId: item.ordinanceId, mst: item.mst, title: item.title, agency: item.agency, source: item.source || null, grade: item.grade || null }; if (item.source === 'policy-hunter' && item.policyHunterItem) { payload.source = 'policyHunter'; payload.policyHunterItem = item.policyHunterItem; } else if (item.source === 'policy-hunter') { payload.source = 'policyHunter'; payload.localArticle = item.localArticle || null; payload.upperLawArticle = item.upperLawArticle || null; payload.upperValue = item.upperValue || null; payload.lowerValue = item.lowerValue || null; payload.policyHunterItem = { id: item.ordinanceId || item.mst, mst: item.mst, title: item.title, agency: item.agency, type: item.worstErrorType || '기간 불일치', localArticle: item.localArticle || null, upperLawArticle: item.upperLawArticle || null, upperValue: item.upperValue || null, lowerValue: item.lowerValue || null, aiReview: item.aiConfidence ? { source:'gemini', confidence:item.aiConfidence } : null }; } sessionStorage.setItem('syncLaw.analysisOrdinance', JSON.stringify(payload)); } catch(e) {} RSData.setCurrentCase('building'); go('analysis'); }; return (
{/* Live data notice */}
법제처 API · 자치법규정보(ELIS) 실측 데이터 연결 · 최종 정비 판단은 담당 부서가 합니다
{/* ─────────── HERO BAND ─────────── */}
{/* decorative grid */}
범정부 규제 동기화 플랫폼 · LIVE {ts}
상위법 개정 효과의 현장 도달 수준을
싱크Law율로 수치화합니다.
상위법 → 행정규칙·고시 → 자치법규 → 민원서식·안내문 → 국민 제보까지 규제의 동기화 수준을 점검하고, 정비 필요성 검토 리포트를 자동 생성합니다.
{/* right pulse status */}
{/* Filter strip embedded in hero */}
필터
{}}/>
{/* ─────────── MAIN GRID: KPIs (left+center) | TOP10 (right) ─────────── */}
{/* LEFT: KPIs (7 cards) + alert ribbon */}
{/* Hero KPI — 전체 탐지 건수 + sparkline (구 디자인 복원, 싱크Law율은 괄호 보조) */}
{/* LEFT: count + sub-counts */}
연계 조문 row 최근 12주 {/* parenthetical sync-law badge */} (건축법 싱크Law율 {m.syncLawRate}% · A {m.flaggedOrdinances}건)
건
+{m.totalAClassificationCandidates} AI가 본문까지 읽은 사례 {m.sampleSize}건
{/* 3 institutional buckets */}
{[ {l:'확인한 자치법규', v:m.uniqueOrdinances, tone:'#0B2E5C'}, {l:'본문 확인 사례', v:m.sampleSize, tone:'#2E5FB0'}, {l:'AI 검토 메모', v: m.level4Reviews, tone:'#5B7C99'}, ].map(s=>(
{s.l}
{s.v.toLocaleString()} 건
))}
{/* RIGHT: trend chart fills the column */}
주별 누적 추이
{liveTrend.filter((_,i)=>i%3===0).map(t=> {t.w})}
{/* 6 type KPIs */}
{kpiItems.map((item) => ( ))}
{/* Recent upper-law alert ribbon */}
최근 상위법 개정 감지
국가법령정보센터 5분 간격 수집 · 영향도 자동 계산
go('upper')}>전체 알림
{RSData.RECENT_ALERTS.map((a,i)=>( ))}
{/* RIGHT: TOP 10 priority */}
정비 검토 후보 A {poolCounts.A}건 B {poolCounts.B}건
정비 검토 후보 통합 목록
정책 탐색·직접 비교·검토 신호 세 출처를 등급별로 정렬합니다. A는 직접 상위근거가 확인된 후보, B는 검토 신호만 잡힌 후보입니다.
setPriorityFilter('전체')}>전체 {allPriorityItems.length} setPriorityFilter('A')}>A 등급 {poolCounts.A} setPriorityFilter('B')}>B 등급 {poolCounts.B}
{priorityItems.map((r,i)=>{ const isPolicy = r.source === 'policy-hunter'; const isDirect = r.source === 'direct-comparison' || r.directComparisonAvailable; const isIndicator = r.source === 'indicator-only' || (!isPolicy && !isDirect); const isAGrade = isPolicy || isDirect; const gradeColor = isPolicy ? '#155F53' : isDirect ? '#991B1B' : '#5B7C99'; const gradeBg = isPolicy ? '#DBEEEA' : isDirect ? '#FEE2E2' : '#EEF2F7'; const gradeLabel = isAGrade ? 'A · AI 탐색 + 직접 검증' : 'B · 검토 신호'; const rankColor = isPolicy ? 'linear-gradient(135deg, #1F7A6B, #2EA08D)' : isDirect ? 'linear-gradient(135deg, #DC2626, #B91C1C)' : '#EEF2F7'; const rankFg = (isPolicy || isDirect) ? '#fff' : 'var(--ink-3)'; const hasLineCompare = (isPolicy || isDirect) && r.upperValue && r.lowerValue; // A 등급(실측 발굴) 카드는 외곽이 은은하게 빛나는 효과 + 좌측 보더 강조 const cardBg = isAGrade ? (isDirect ? 'linear-gradient(90deg, #FEF7F7 0%, #fff 22%)' : 'linear-gradient(90deg, #F0FBF8 0%, #fff 22%)') : 'transparent'; const cardBorderLeft = isDirect ? '4px solid #DC2626' : isPolicy ? '4px solid #1F7A6B' : '4px solid transparent'; const cardShadow = isAGrade ? (isDirect ? 'inset 0 0 0 1px #FCA5A555, 0 0 8px rgba(220,38,38,0.06)' : 'inset 0 0 0 1px #A7D8CF55, 0 0 8px rgba(31,122,107,0.06)') : 'none'; return ( ); })}
가중치: 권리 0.30 · 금전 0.20 · 시행일 0.15 · 민원 0.15 · 기관 0.10 · 취약계층 0.10 go('insight')}>전체 순위
{/* ─────────── DATA FLOW ─────────── */}
DATA PIPELINE · 실시간 추적
법령 개정 효과의 현장 도달 경로
각 단계의 정비 도달율과 미정비 의심 건수를 실시간 표시
); } // ─────────── SUB COMPONENTS ─────────── // SyncLaw circular gauge function SyncLawGauge({ value }){ const R = 36, C = 2*Math.PI*R; const dash = C * (value/100); return (
{value} %
전체 싱크Law율
일부 싱크
불일치 감지
); } function PulseStat({ label, value, unit, highlight }){ return (
{label}
{value} {unit}
); } function DarkChips({ label, value, options, onChange, filterKey }){ const [open, setOpen] = useStateD(false); const [pos, setPos] = useStateD(null); const wrapRef = React.useRef(null); const menuRef = React.useRef(null); const updatePosition = React.useCallback(()=>{ if(!wrapRef.current) return; const r = wrapRef.current.getBoundingClientRect(); setPos({ left:r.left, top:r.bottom + 6, width:Math.max(190, r.width) }); },[]); React.useEffect(()=>{ if(!open) return; updatePosition(); const onWindow = ()=> updatePosition(); const onDoc = (ev)=>{ if(wrapRef.current && wrapRef.current.contains(ev.target)) return; if(menuRef.current && menuRef.current.contains(ev.target)) return; setOpen(false); }; window.addEventListener('resize', onWindow); window.addEventListener('scroll', onWindow, true); document.addEventListener('pointerdown', onDoc); return ()=>{ window.removeEventListener('resize', onWindow); window.removeEventListener('scroll', onWindow, true); document.removeEventListener('pointerdown', onDoc); }; }, [open, updatePosition]); const menu = open && pos ? ReactDOM.createPortal(
{options.map(o=>( ))}
, document.body ) : null; return (
{menu}
); } const heroBtn = (primary)=>({ display:'inline-flex', alignItems:'center', gap:6, padding:'8px 14px', borderRadius:7, fontSize:12, fontWeight:600, background: primary ? '#fff' : 'rgba(255,255,255,0.08)', color: primary ? 'var(--navy)' : '#fff', border: '1px solid ' + (primary ? '#fff' : 'rgba(255,255,255,0.18)'), fontFamily:'inherit' }); // Animated count-up function CountUp({ value, style }){ const [v, setV] = useStateD(0); useEffectD(()=>{ const start = performance.now(); const dur = 900; let raf; const tick = (now)=>{ const p = Math.min(1, (now-start)/dur); const e = 1 - Math.pow(1-p, 3); setV(Math.round(value*e)); if(p<1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return ()=> cancelAnimationFrame(raf); }, [value]); return {v.toLocaleString()}; } function KPI({ tone, icon, label, value, delta, share, sub, kpiKey }){ const tones = { amber: { strip:'#C77A1B', dot:'#C77A1B', soft:'#FBEFD9' }, steel: { strip:'#5B7C99', dot:'#5B7C99', soft:'#EEF2F7' }, teal: { strip:'#1F7A6B', dot:'#1F7A6B', soft:'#DBEEEA' }, navy: { strip:'#0B2E5C', dot:'#0B2E5C', soft:'#E6EEFB' }, }; const t = tones[tone] || tones.steel; return (
{label}
{share!==null && share!==undefined && ( {share}% )}
건
{delta} {sub || '전주 대비'}
); } // ───────── Data Flow visualization ───────── function DataFlow({ metrics }){ const m = metrics || RSData.DAY5_DEFAULT_METRICS; const stages = [ { id:'law', t:'상위법 기준점', icon:'pulse', count:'3', done:3, pending:0, miss:0, note:'건축법·시행령·시행규칙 MST' }, { id:'link', t:'연계 조문 row', icon:'building', count:m.sourceTotal.toLocaleString(), done:m.sourceTotal, pending:0, miss:0, note:`고유 조례 ${m.uniqueOrdinances.toLocaleString()}건` }, { id:'sample',t:'본문 확인 사례', icon:'layers', count:m.sampleSize.toLocaleString(), done:m.bodyFetched, pending:Math.max(0, m.sampleSize - m.bodyFetched), miss:m.flaggedOrdinances, note:'18건 본문 확인' }, { id:'rule', t:'규칙으로 1차 점검', icon:'shield', count:m.totalRuleSignals.toLocaleString(), done:m.bRuleSignals, pending:m.aRuleSignals, miss:m.totalAClassificationCandidates, note:`정비 후보 ${m.totalAClassificationCandidates} · 제외 ${m.bRuleSignals}` }, { id:'embed', t:'표준 사례와 비교', icon:'compare', count:m.anomalyChunks.toLocaleString(), done:m.anomalyOrdinances, pending:m.highAnomalyCount, miss:m.highAnomalyCount, note:'참고용 유사도' }, { id:'review',t:'AI 검토 메모', icon:'brain', count:m.level4Reviews.toLocaleString(), done:m.level4Reviews, pending:0, miss:m.flaggedOrdinances, note:'담당자 확인용 3문장' }, ]; // canvas size const W = 1380, H = 280; const colW = W / stages.length; return (
{/* base flow band */} {/* moving dashes */} {/* stage nodes */} {stages.map((s,i)=>{ const cx = colW/2 + i*colW; const total = s.done + s.pending + s.miss; const rDone = total ? s.done/total : 0; const rPend = total ? s.pending/total : 0; // donut around node const R = 38, C = 2*Math.PI*R; const dDone = C * rDone; const dPend = C * rPend; const dMiss = C - dDone - dPend; return ( {/* outer ring base */} {/* miss segment */} {/* pending */} {/* done */} {/* center dot */} {/* count center */} {s.count} 건 {/* step number tag */} STEP {String(i+1).padStart(2,'0')} {/* title */} {s.t} {s.note} {/* completion percentage */} 처리율 {Math.round(rDone*100)}% ); })} {/* arrows between stages */} {stages.slice(0,-1).map((_,i)=>{ const x1 = colW/2 + i*colW + 42; const x2 = colW/2 + (i+1)*colW - 42; return ( ); })} {/* breakdown chips below */}
{stages.map(s=>{ const total = s.done + s.pending + s.miss || 1; return (
{s.done.toLocaleString()} 완료 {s.miss.toLocaleString()} 미정비
); })}
); } Object.assign(window, { DashboardScreen });