Alphea App

iframe 또는 웹뷰로 실시간 프리뷰

완료 내역¶

• HtmlViewerScreen 구현 (src/screens/Chat/HtmlViewerScreen.tsx)
  • react-native-webview WebView로 풀스크린 HTML 렌더
  • source={{ html }} 메모리 HTML 직접 주입 / filePath 로 비동기 파일 로드 (readHtmlFile())
  • 응답 완료 직후 AttachmentCard 탭 → 네비게이션으로 프리뷰 전환 (ChatStackParamList.HtmlViewer 라우트)
• 보안 기본 정책:
  • domStorageEnabled={false} — localStorage 비활성화
  • onShouldStartLoadWithRequest 로 about:blank 및 data: 스킴 외 네비게이션 차단
  • originWhitelist={['*']} (null origin에서 실행)
• WebViewLoader 로딩 오버레이 (src/components/WebViewLoader.tsx) — WebView onLoadEnd 후 페이드아웃
• 상단 플로팅 UI: 공유 버튼 (react-native-share), 닫기 버튼
• SafeArea insets 기반 상단 패딩 처리
• 공유 기능: 캐시 경로에 임시 파일 저장 후 Share.open() 호출 (제목 기반 sanitize 파일명)

주요 파일¶

• src/screens/Chat/HtmlViewerScreen.tsx — WebView 프리뷰 화면
• src/components/WebViewLoader.tsx — 로딩 인디케이터
• src/components/AttachmentCard.tsx — 프리뷰 진입점 (탭 → 네비게이션)
• src/services/storage/htmlFiles.ts — 파일 읽기
• src/navigation/types.ts — HtmlViewer 라우트 파라미터

관련 커밋¶

• 91a0930 (fixes ref #238) — HtmlViewerScreen + WebViewLoader 추가 (본 이슈 범위 포함)

후속 처리¶

• #243 (6-4): HTML 검증/보안 처리 (XSS·CSP·CDN allowlist) — 서버 작업 확정 후 재개 예정 (보류)
• 본 이슈의 "실시간"은 "응답 완료 직후 프리뷰 진입 가능" 해석 기준 (해석 A). 스트리밍 중 부분 렌더는 범위 외.