# task-1242.1 완료 보고서

## SCQA

**S**: 대시보드 ArchiveView에서는 보고서 내 이미지 경로가 `initInlineImagePreviews()`를 통해 인라인 미리보기로 표시된다.

**C**: CampaignView에서 FileViewerModal로 보고서를 열면 마크다운이 `dangerouslySetInnerHTML`로 삽입된 후 `initInlineImagePreviews()` 미호출로 이미지 경로가 텍스트 링크로만 표시된다. 동일한 문제가 ReportModal에도 존재했다.

**Q**: FileViewerModal과 ReportModal에서 마크다운 렌더링 후 인라인 이미지 미리보기를 활성화할 수 있는가?

**A**: 두 컴포넌트 모두 ArchiveView와 동일한 패턴(`useRef` + `useEffect` + `initInlineImagePreviews`)을 적용하여 수정 완료. 변경 파일 1개, 변경 지점 6곳 (컴포넌트당 3곳).

## 수정 내역

### FileViewerModal (utils.js:802-890)
1. **Line 806**: `const mdRef = useRef(null);` 추가 — 마크다운 div 참조
2. **Lines 825-829**: `React.useEffect` 추가 — `!loading && !error && content && mdRef.current` 조건에서 `initInlineImagePreviews(mdRef.current)` 호출
3. **Line 874**: 마크다운 div에 `ref={mdRef}` 속성 추가

### ReportModal (utils.js:893-936)
4. **Line 896**: `const reportMdRef = useRef(null);` 추가
5. **Lines 907-911**: `React.useEffect` 추가 — `!loading && content && reportMdRef.current` 조건에서 `initInlineImagePreviews(reportMdRef.current)` 호출
6. **Line 926**: 마크다운 div에 `ref={reportMdRef}` 속성 추가

## 산출물

- `/home/jay/workspace/dashboard/components/utils.js`

## 셀프 QC 체크리스트

- [x] 1. 영향 파일: `utils.js` 1개만 변경. 다른 파일 영향 없음 (함수 시그니처 미변경)
- [x] 2. 엣지 케이스: filePath=null (early return), content=null (guard), 비마크다운 파일 (mdRef.current=null → useEffect 스킵), IntersectionObserver 미지원 (initInlineImagePreviews 내부 fallback 존재)
- [x] 3. 작업 지시와 일치: FileViewerModal에 useRef + useEffect + initInlineImagePreviews 호출 추가 (지시 그대로)
- [x] 4. 보안: DOMPurify.sanitize 기존 적용 유지, 새 코드에 XSS 벡터 없음
- [x] 5. 테스트: 대시보드 컴포넌트는 브라우저 스크립트 태그 방식이라 pytest/단위 테스트 없음. 수동 검증 필요 (아래 검증 절차 참조)
- [x] 6. 발견 이슈 모두 해결 (아래 참조)
- [x] 7. 아키텍처: ArchiveView와 동일 패턴 재사용, DRY 준수
- [x] 8. 인터페이스 변경 없음

## 발견 이슈 및 해결

### 자체 해결 (1건)
1. **ReportModal도 동일 버그 존재** — FileViewerModal과 같은 패턴으로 함께 수정
   - 상세: `utils.js:893-936` ReportModal도 `dangerouslySetInnerHTML`로 마크다운 삽입 후 `initInlineImagePreviews` 미호출. useRef + useEffect 추가로 해결.

### 범위 외 미해결 (2건)
1. **TypeScript 진단 경고 (6133)**: 브라우저 스크립트 태그 방식 JS 파일이라 TS가 변수 사용처 추적 불가 → 구조적 false positive. tsconfig 또는 JSDoc 주석으로 해소 가능하나 별도 작업 필요.
2. **async 변환 제안 (80006, line 814)**: `tryLoad` 함수를 async로 변환 가능하다는 제안. 기능 변경 없는 리팩토링이며 현재 작업 범위 외.

## 수동 검증 절차

대시보드 서버 재시작 후:
1. 캠페인뷰 → 디자인테마 → 50선/15선 클릭 → FileViewerModal에서 이미지 인라인 미리보기 확인
2. 보고서 목록 → 이미지 경로가 포함된 보고서 클릭 → ReportModal에서 이미지 인라인 미리보기 확인

## QC 자동 검증

- **Overall**: PASS (5 PASS, 7 SKIP)
- file_check: PASS (57,418 bytes)
- data_integrity: PASS
- test_runner: SKIP (관련 테스트 파일 0개 — JS 컴포넌트, 정당한 SKIP)
- pyright_check: SKIP (Python 파일 아님)
- critical_gap: PASS
- spec_compliance: PASS
- duplicate_check: PASS (최대 유사도 8.4%)