# Task-508 완료 보고서: FcpaGuide.tsx 마크다운 렌더링 개선

## SCQA

**S**: InsuRo의 금소법(FCPA) 가이드 페이지(`FcpaGuide.tsx`)가 `line.startsWith()` 방식의 수동 마크다운 파싱으로 summary를 렌더링 중이며, `react-markdown@^10.1.0`과 `rehype-raw@^7.0.0`이 이미 설치되어 있으나 미사용 상태이다.

**C**: `**bold**` 텍스트가 원문 그대로 표시되고, 마크다운 표(table)가 `| text | text |` 파이프 문자로 표시되어 사용자 가독성이 현저히 떨어진다.

**Q**: react-markdown을 적용하여 bold, 표, 헤더, 리스트 등 전체 마크다운 요소를 정상 렌더링할 수 있는가?

**A**: `ReactMarkdown` + `rehypeRaw` 적용 완료. 수동 파싱 코드 6줄을 ReactMarkdown 컴포넌트로 교체하고, `components` prop으로 table/th/td/tr/h2/h3/ul/li/strong/p에 Tailwind CSS 스타일을 적용했다. `npx tsc --noEmit` 에러 0건 통과. 체크리스트 카드 UI는 변경 없음.

---

## 수정 파일

- `/home/jay/projects/InsuRo/src/pages/FcpaGuide.tsx` (120줄 → 137줄)

## 변경 내용

### 1. Import 추가 (8-9줄)
```tsx
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
```

### 2. 수동 파싱 → ReactMarkdown 교체 (75-95줄)
- 기존: `config.summary.split("\n").map()` + `line.startsWith()` 분기 (6줄)
- 변경: `<ReactMarkdown rehypePlugins={[rehypeRaw]} components={{...}}>` (21줄)
- 커스텀 컴포넌트: h2, h3, p, ul, li, strong, table, thead, th, td, tr
- 테이블: overflow-x-auto 래퍼 + border-collapse + 짝수행 bg-gray-50 줄무늬
- 헤더: h2에 하단 경계선(border-b), h3에 서브헤더 스타일

### 3. 체크리스트 카드 UI
- 변경 없음 (기존 코드 100% 보존)

## 테스트 결과

- `npx tsc --noEmit`: 에러 0건 통과
- 기존 테스트 파일 없음 (Lv.1 UI 수정, TDD 대상 아님)

## 발견 이슈

1. **rehypeRaw XSS 리스크 (낮음)**: summary는 관리자만 입력하는 데이터로 현재 리스크 낮음. 향후 사용자 입력 확장 시 `rehype-sanitize` 검토 권장
2. **tr 줄무늬 로직**: `node.position.start.line` 기반 홀짝 판별로, 실제 테이블 행 인덱스와 불일치 가능. 시각적 일관성만 영향, 기능 문제 없음
3. **prose 클래스 중복**: 부모 div의 `prose prose-sm`과 커스텀 components 스타일 일부 중복. 커스텀이 우선 적용되므로 실질 문제 없음

## 완료 기준 충족 여부

- [x] `**bold**` 텍스트가 굵게 표시됨 → `strong` 컴포넌트로 처리
- [x] 마크다운 표가 깔끔한 테이블로 렌더링됨 → table/th/td/tr 스타일링 적용
- [x] 헤더, 리스트 등 전체 마크다운 요소 정상 표시 → h2/h3/ul/li/p 커스텀 컴포넌트
- [x] 기존 체크리스트 카드 UI 변화 없음 → 99줄 이후 코드 미변경