# 세션 요약: task-2307

## 기본 정보
- 작업 ID: task-2307
- 팀: dev6-team
- 생성 시각: 20260429T104750
- 토큰 사용량: 8,801,531 / 200,000 (4400.8%)
- 레벨: CRITICAL

## 원래 작업 설명
# InsuRo AI 응답 마크다운 렌더링 — 전체 적용

## 작업 레벨: Lv.2

## 프로젝트
- InsuRo: `/home/jay/projects/InsuRo`

## 버그 설명
AI가 응답한 내용에 마크다운 표(| --- |)나 줄바꿈이 포함되어 있는데, plain text로 그대로 출력되어 가독성이 매우 떨어짐. 표가 파이프(|)와 대시(---)로 나열됨.

## 현재 상태
- `react-markdown@10.1.0` 설치되어 있음
- 일부 페이지에서만 ReactMarkdown 사용 중:
  - `FcpaGuide.tsx` ✅
  - `PremiumComparison.tsx` ✅
  - `MarketNewsletter.tsx` ✅
- 나머지 AI 응답 표시 영역에서는 미사용:
  - `CrmMessenger.tsx` ❌
  - `CustomerChat.tsx` ❌
  - `Generate.tsx` ❌ (콘텐츠 결과)
  - 기타 AI 응답 표시 컴포넌트 ❌

## 수정 방법

### 1. AI 응답을 표시하는 모든 곳에 ReactMarkdown 적용

검색 패턴: AI 응답 텍스트를 `<p>`, `<div>`, `<span>` 등으로 직접 렌더링하는 곳을 찾아서 ReactMarkdown으로 교체.

```tsx
// Before:
<p className="whitespace-pre-wrap">{aiResponse}</p>

// After:
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";

<div className="prose prose-sm max-w-none">
  <ReactMarkdown rehypePlugins={[rehypeRaw]}>{aiResponse}</ReactMarkdown>
</div>
```

### 2. 대상 파일 목록 (확인 필요)
- `src/pages/CrmMessenger.tsx` — CRM 메신저 AI 응답
- `src/pages/CustomerChat.tsx` — 고객 채팅 AI 응답
- `src/pages/Generate.tsx` — AI 콘텐츠 생성 결과
- `src/components/ContentHistoryTab.tsx` — 콘텐츠 히스토리
- `src/pages/AdminNewsletters.tsx` — 소식지 AI 분석 결과
- `src/pages/AdminPremiumData.tsx` — 보험료 AI 분석 결과
- 기타: AI 응답을 plain text로 표시하는 모든 곳

### 3. 마크다운 테이블 스타일
`@tailwindcss/typography` 플러그인의 `prose` 클래스를 사용하면 테이블이 자동 스타일링됨.
설치 확인 후 없으면 추가: `npm install -D @tailwindcss/typography`

## affected_files
- AI 응답을 표시하는 모든 페이지/컴포넌트 (수정 — ReactMarkdown 적용)

## 검증 시나리오
1. 소식지 AI 질문 응답에 표가 포함된 경우 → HTML 테이블로 렌더링
2. CRM 메신저 AI 응답 → 줄바꿈, 굵게, 리스트 정상 표시
3. AI 콘텐츠 생성 결과 → 마크다운 렌더링
4. 기존 ReactMarkdown 사용 페이지 → 영향 없음
5. npm run build 성공

## goal_assertions (auto-generated)
- `npm install -D @tailwindcss/typography`


## 자동 요약
세션 task-2307이 CRITICAL 임계값(85%)에 도달하여 자동으로 요약되었습니다.
토큰 사용량: 4400.8%

## 재시작 안내
이 요약 파일을 기반으로 새 세션이 자동 시작됩니다.
팀: dev6-team