8장 실제 대시보드와 근거 비교 UI

app.js의 상태는 작다. snapshot과 현재 evidenceIndex만 가진다. render()는 프로젝트·지표·작업자 목록을, renderEvidence()는 현재 근거를 그린다. 작은 구조 덕분에 독자가 네트워크 응답에서 DOM까지 한 번에 따라갈 수 있다.

중국어 원문에는 lang="zh"를 유지하고 한국어 요약은 별도 문단에 둔다. 링크는 새 탭으로 열되 rel="noreferrer"를 붙인다. 기본 구현은 safe-html.js로 외부 문자열을 escape하고 링크 프로토콜을 HTTP(S)로 제한한다. 더 복잡한 HTML을 허용해야 할 때만 검증된 sanitizer를 추가한다. 안전하지 않은 원문 HTML을 템플릿에 직접 넣지 않는다. 이 경계가 프롬프트 주입과 XSS의 접점이다.

실습: 실패 상태 추가

fixture의 BP-04 상태를 failed로 바꾸고 errors 요약을 화면에 표시한다. 빨간색만 쓰지 말고 “원문 URL 2개가 403을 반환함, 공식 미러 필요”처럼 다음 행동을 적는다. 접근성을 위해 아이콘·텍스트를 함께 쓴다.