# Task-508: FcpaGuide.tsx 마크다운 렌더링 개선

## 목표
금소법(FCPA) 가이드 페이지의 마크다운 렌더링을 개선하여 사용자가 보기 좋게 표시

## 현황
- `FcpaGuide.tsx`에서 마크다운을 **수동 파싱** 중 (line.startsWith 방식)
- `**bold**`가 텍스트로 표시됨 (렌더링 안 됨)
- 마크다운 표(table)가 `| text | text |` 파이프 문자 그대로 표시됨
- `react-markdown@^10.1.0`과 `rehype-raw@^7.0.0`이 **이미 설치되어 있으나 미사용**

## 수정 대상
- `/home/jay/projects/InsuRo/src/pages/FcpaGuide.tsx` (120줄)

## 수정 내용

### 1. react-markdown 적용
- 수동 파싱 코드 제거
- `import ReactMarkdown from 'react-markdown'`
- `import rehypeRaw from 'rehype-raw'`
- summary 렌더링 부분을 `<ReactMarkdown rehypePlugins={[rehypeRaw]}>{summary}</ReactMarkdown>` 으로 교체

### 2. 마크다운 표(table) 스타일링
- table, th, td에 대한 Tailwind CSS 또는 인라인 스타일 적용
- 테두리, 패딩, 줄무늬(stripe) 배경으로 가독성 확보
- react-markdown의 `components` prop으로 커스텀 테이블 렌더링:
```tsx
components={{
  table: ({children}) => <table className="w-full border-collapse my-4">{children}</table>,
  th: ({children}) => <th className="border border-gray-300 bg-gray-100 px-4 py-2 text-left font-semibold">{children}</th>,
  td: ({children}) => <td className="border border-gray-300 px-4 py-2">{children}</td>,
}}
```

### 3. 전체적 시각 개선
- 헤더(h2, h3) 스타일링: 적절한 크기, 색상, 하단 경계선
- 리스트(ul, li) 스타일링: 인덴트, 불릿 포인트
- `**bold**` 텍스트 정상 렌더링 확인
- 섹션 간 적절한 여백(margin/padding)

### 4. 기존 체크리스트 카드 UI 유지
- 체크리스트 부분(카테고리별 카드)은 현재 잘 되어있으므로 건드리지 말 것
- summary 마크다운 렌더링 부분만 개선

## 주의사항
- 기존 페이지 레이아웃/구조 유지
- react-markdown, rehype-raw 이미 설치됨 (npm install 불필요)
- FcpaGuide.tsx만 수정, 다른 파일 건드리지 말 것
- 테스트: 빌드 에러 없는지 확인 (`npx tsc --noEmit` 또는 vite build)

## 완료 기준
- `**bold**` 텍스트가 굵게 표시됨
- 마크다운 표가 깔끔한 테이블로 렌더링됨
- 헤더, 리스트 등 전체 마크다운 요소 정상 표시
- 기존 체크리스트 카드 UI 변화 없음