Alphea App

이슈 #244

Ryan Lee이(가) 7달 전에 변경

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). 스트리밍 중 부분 렌더는 범위 외. 

뒤로