fix: [문서스냅샷] 캡처 방식 보정 - 오프스크린 성적서 렌더링, readOnly 자동 캡처 제거

- ImportInspectionInputModal: 입력폼 캡처 → 오프스크린 성적서 문서 렌더링으로 변경
- InspectionReportModal: readOnly 자동 캡처 useEffect 제거 (불필요 PUT 방지)
- capture-rendered-html.tsx: 오프스크린 렌더링 유틸리티 신규 추가
This commit is contained in:
2026-03-06 20:35:30 +09:00
parent 31f523c88f
commit 72a2a3e9a9
3 changed files with 70 additions and 22 deletions

View File

@@ -0,0 +1,36 @@
/**
* 오프스크린 렌더링으로 React 컴포넌트의 HTML을 캡처하는 유틸리티
*
* 사용 사례: 입력 화면에서 저장 시, 해당 데이터의 "문서 뷰" HTML을 캡처하여
* rendered_html로 저장 (MNG 출력용)
*/
import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';
/**
* React 엘리먼트를 오프스크린에서 렌더링하고 innerHTML을 캡처합니다.
*
* @param element - 렌더링할 React 엘리먼트 (예: <ImportInspectionDocument template={...} readOnly />)
* @returns 캡처된 HTML 문자열, 실패 시 undefined
*/
export function captureRenderedHtml(element: React.ReactElement): string | undefined {
try {
const container = document.createElement('div');
container.style.cssText = 'position:fixed;left:-9999px;top:0;visibility:hidden;width:210mm;';
document.body.appendChild(container);
const root = createRoot(container);
flushSync(() => {
root.render(element);
});
const html = container.innerHTML;
root.unmount();
document.body.removeChild(container);
return html && html.length > 50 ? html : undefined;
} catch {
return undefined;
}
}