docs: [문서스냅샷] 계획 문서 보정 - API 수정, 오프스크린 렌더링, 변경이력 반영

- Phase 2 보정 내용 변경이력 3건 추가
- 참고 파일에 UpsertRequest.php, capture-rendered-html.tsx 추가
- 자기완결성 점검 작업 수 업데이트

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-06 20:35:39 +09:00
parent 614e90066f
commit f1683f753e

View File

@@ -2,7 +2,7 @@
> **작성일**: 2026-03-06
> **목적**: 문서 보기/인쇄 시 HTML 스냅샷 기반 출력으로 전환 (B안 + 구조화 데이터 병행)
> **상태**: 🔄 진행중
> **상태**: ✅ 코드 완료 (검증 대기)
> **영향 범위**: API(저장), React(캡처/전송), MNG(출력)
---
@@ -11,9 +11,9 @@
| 항목 | 내용 |
|------|------|
| **마지막 완료 작업** | Phase 3.3: print.blade.php 스냅샷 출력 |
| **마지막 완료 작업** | Phase 2 전면 보정: API 누락 수정, 오프스크린 렌더링 적용, readOnly 자동 캡처 제거 |
| **다음 작업** | Phase 4: 브라우저 검증 + 기존 partial 정리 |
| **진행률** | 10/10 (100% 코드 완료, 검증 대기) |
| **진행률** | 13/13 (100% 코드 완료, 검증 대기) |
| **마지막 업데이트** | 2026-03-06 |
---
@@ -74,31 +74,35 @@
- 현재 값: 모든 문서에서 NULL (사용 안 됨)
- **DB 변경 불필요**
### 2.2 React 현황
### 2.2 React 현황 (구현 완료)
문서 저장 흐름 (`InspectionReportModal.tsx`):
```
handleSave()
├── contentRef.current.getInspectionData() → 구조화 데이터 추출
├── 템플릿 모드: saveInspectionDocument(workOrderId, { data: records })
└── 레거시 모드: saveInspectionData(workOrderId, processType, data)
```
rendered_html 캡처 원칙: **입력 화면에서 저장할 때** 해당 데이터의 "문서 뷰"를 캡처.
보기(readOnly)에서는 캡처하지 않음.
현재 `rendered_html`을 전송하지 않음. 추가 필요:
- 문서 DOM에서 HTML 캡처 → API 전송 시 포함
| Save Path | 파일 | 방식 | 캡처 대상 |
|-----------|------|------|----------|
| 작업일지 저장 | `WorkLogModal.tsx` | contentWrapperRef.innerHTML | 작업일지 문서 뷰 |
| 검사성적서 저장 (edit) | `InspectionReportModal.tsx` | contentWrapperRef.innerHTML | 검사 성적서 문서 뷰 |
| 수입검사 저장 | `ImportInspectionInputModal.tsx` | 오프스크린 렌더링 (`captureRenderedHtml`) | 수입검사 성적서 문서 (`ImportInspectionDocument`) |
| WorkerScreen 인라인 검사 저장 | `index.tsx` | 미캡처 (데이터만 저장) | 성적서 모달에서 저장 시 캡처 |
### 2.3 API 현황
> **WorkerScreen 인라인 저장**: 검사 입력 시점에 성적서 문서가 렌더링되지 않으므로 rendered_html 미포함.
> 이후 InspectionReportModal을 edit 모드로 열어 저장하면 캡처됨.
> 향후 오프스크린 렌더링으로 확장 가능 (템플릿 로딩 등 async 의존성 해결 필요).
`DocumentService` / `DocumentController`:
- `rendered_html` 필드를 받아서 저장하는 로직 없음
- Document 모델의 `$fillable``rendered_html` 포함 여부 확인 필요
### 2.3 API 현황 (구현 완료)
### 2.4 MNG 현황
- Document 모델 `$fillable``rendered_html` 포함 ✅
- `DocumentService` store/update에서 `rendered_html` 저장 ✅
- `DocumentService` upsert에서 `rendered_html` 전달 ✅ (수입검사 경로)
- `StoreRequest`/`UpdateRequest``rendered_html` nullable string 검증 ✅
- `UpsertRequest``rendered_html` nullable string 검증 ✅
`show.blade.php`:
- 문서 양식별 조건 분기 + 전용 partial include
- `rendered_html` 출력 로직 없음
- 전용 partial 파일:
### 2.4 MNG 현황 (구현 완료)
- `show.blade.php`: rendered_html 우선 출력, 없으면 기존 동적 렌더링 fallback ✅
- `print.blade.php`: 동일 패턴 적용 ✅
- 전용 partial 파일 (삭제 대기):
- `partials/bending-inspection-data.blade.php`
- `partials/bending-worklog.blade.php`
@@ -126,9 +130,12 @@ handleSave()
| # | 작업 항목 | 상태 | 비고 |
|---|----------|:----:|------|
| 2.1 | 문서 DOM에서 HTML 캡처 (contentWrapperRef) | ✅ | innerHTML 직접 캡처 |
| 2.2 | InspectionReportModal 저장 시 rendered_html 포함 전송 | ✅ | saveInspectionDocument에 전달 |
| 2.3 | 작업일지 저장 시 rendered_html 포함 전송 | ✅ | saveWorkLog에 전달 |
| 2.1 | 오프스크린 렌더링 유틸리티 생성 | ✅ | `captureRenderedHtml()``flushSync` + `createRoot` |
| 2.2 | InspectionReportModal 저장 시 rendered_html 포함 전송 | ✅ | contentWrapperRef.innerHTML 캡처 |
| 2.3 | 작업일지 저장 시 rendered_html 포함 전송 | ✅ | contentWrapperRef.innerHTML 캡처 |
| 2.4 | ImportInspectionInputModal 수입검사 저장 시 rendered_html | ✅ | 오프스크린 성적서 문서 렌더링 |
| 2.5 | ReceivingManagement/actions saveInspectionData 파라미터 추가 | ✅ | rendered_html → /documents/upsert 전달 |
| 2.6 | API UpsertRequest에 rendered_html 검증 추가 | ✅ | nullable string |
### Phase 3: MNG - 스냅샷 출력
@@ -218,16 +225,21 @@ const captureHtml = () => {
## 5. 참고 파일
### React (수정 대상)
- `react/src/components/production/WorkOrders/documents/InspectionReportModal.tsx` — 저장 흐름
- `react/src/components/production/WorkOrders/documents/InspectionReportModal.tsx` — 저장 흐름 (contentWrapperRef)
- `react/src/components/production/WorkOrders/documents/BendingInspectionContent.tsx` — 검사 문서 렌더링
- `react/src/components/production/WorkOrders/documents/BendingWorkLogContent.tsx` — 작업일지 렌더링
- `react/src/components/production/WorkOrders/documents/bending/` — 절곡 섹션 컴포넌트들
- `react/src/components/production/WorkerScreen/WorkLogModal.tsx` — 작업일지 저장 시 캡처
- `react/src/components/material/ReceivingManagement/ImportInspectionInputModal.tsx` — 수입검사 저장 시 오프스크린 캡처
- `react/src/components/material/ReceivingManagement/actions.ts` — saveInspectionData rendered_html 전달
- `react/src/lib/utils/capture-rendered-html.tsx` — 오프스크린 렌더링 유틸리티 (신규)
### API (수정 대상)
- `api/app/Models/Documents/Document.php` — $fillable
- `api/app/Services/DocumentService.php` — store/update
- `api/app/Services/DocumentService.php` — store/update/upsert
- `api/app/Http/Requests/Documents/StoreRequest.php` — 검증
- `api/app/Http/Requests/Documents/UpdateRequest.php` — 검증
- `api/app/Http/Requests/Document/UpsertRequest.php` — 검증 (수입검사 경로)
### MNG (수정 대상)
- `mng/resources/views/documents/show.blade.php` — 메인 보기
@@ -281,6 +293,11 @@ Phase 1과 Phase 3의 MNG 코드 수정은 병렬 가능 (fallback 유지).
| 날짜 | 항목 | 변경 내용 | 파일 | 승인 |
|------|------|----------|------|------|
| 2026-03-06 | - | 계획 문서 작성 | - | - |
| 2026-03-06 | Phase 0~3 | Phase 0~3 전체 구현 완료 | API/React/MNG 다수 | ✅ |
| 2026-03-06 | Phase 2.4~2.6 | 모든 저장 경로에 rendered_html 추가 | InspectionReportModal, ImportInspectionInputModal, actions.ts | ✅ |
| 2026-03-06 | Phase 2 보정 | API UpsertRequest rendered_html 누락 수정, DocumentService upsert() rendered_html 전달 추가 | UpsertRequest.php, DocumentService.php | ✅ |
| 2026-03-06 | Phase 2 보정 | ImportInspection: 입력폼 캡처 → 오프스크린 성적서 렌더링으로 변경 | ImportInspectionInputModal.tsx, capture-rendered-html.tsx | ✅ |
| 2026-03-06 | Phase 2 보정 | InspectionReportModal readOnly 자동 캡처 useEffect 제거 | InspectionReportModal.tsx | ✅ |
---
@@ -309,7 +326,7 @@ Phase 1과 Phase 3의 MNG 코드 수정은 병렬 가능 (fallback 유지).
|---|----------|:----:|------|
| 1 | 작업 목적이 명확한가? | ✅ | 스냅샷 기반 문서 출력 |
| 2 | 성공 기준이 정의되어 있는가? | ✅ | 9.1 참조 |
| 3 | 작업 범위가 구체적인가? | ✅ | 4 Phase, 10개 작업 |
| 3 | 작업 범위가 구체적인가? | ✅ | 5 Phase, 15개 작업 |
| 4 | 의존성이 명시되어 있는가? | ✅ | 6. 의존성 참조 |
| 5 | 참고 파일 경로가 정확한가? | ✅ | 5. 참고 파일 |
| 6 | 단계별 절차가 실행 가능한가? | ✅ | 3. 작업 범위 |