# InsuRo 복합설계 AI 계산기 + 확장 가이드 — UI 폴리싱

## 작업 레벨: Lv.1 (간단한 UI 개선)

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

## 배경

2026-05-02 사용자 보고 2건:

### 1. 복합설계 담보 체크박스 크기 과대
- 페이지: `/composite-design`
- 화면: 담보 선택창의 체크박스가 카드 높이의 절반 이상 차지하는 거대한 파란 사각형 (약 50x50px 추정)
- UX 부담: 카드당 시각 무게 너무 큼, 가독성 저하

### 2. 확장 다운로드 버튼이 페이지 이동 트리거
- 페이지: `/composite-design/setup`
- 현재 동작: "확장 다운로드" 버튼 클릭 → 새 페이지로 이동하는 듯 (또는 페이지 reload)
- 기대 동작: **페이지 이동 없이 Chrome/Edge 기본 다운로드 팝업으로 zip 다운만 트리거**
- 사용자 피드백: "굳이 페이지 이동은 필요 없이 크롬이나 엣지에서 팝업으로 다운기능만 진행되면 되는거 같아"

## 수정 사항

### 1. CompositeDesign 체크박스 크기 축소

**대상 파일**: `src/pages/CompositeDesign.tsx`

**원인 가설**:
- shadcn/ui Checkbox의 기본 크기 또는
- Tailwind 클래스로 의도적 large 사이즈 적용 (`w-12 h-12` 등)
- 또는 shadcn 기본값 그대로인데 너무 큰 경우

**수정 방안**:
- 표준 체크박스 크기로 (~20px = `w-5 h-5` 또는 shadcn 기본 `h-4 w-4`)
- 또는 카드 디자인 자체를 "체크박스 + 라벨 + 입력값" 가로 배치 + 적당한 비율
- 다른 InsuRo 페이지(예: 설정 페이지)의 체크박스 사이즈와 일관성 맞추기

**검증**:
- Playwright 스크린샷 비교 (변경 전/후)
- 모바일 반응형 확인

### 2. 확장 zip 다운로드 — 페이지 이동 없이 다운로드만

**대상 파일**: `src/pages/CompositeExtensionGuide.tsx`

**현재 코드** (추정 — 직접 확인 필요):
```tsx
<button onClick={() => navigate('/downloads/insuro-helper-0.1.0.zip')}>
  확장 다운로드
</button>
// 또는
<a href="/downloads/insuro-helper-0.1.0.zip">
```

**수정 방안 A — `<a>` 태그 + `download` 속성 (가장 표준)**:
```tsx
<a
  href={downloadUrl}
  download="insuro-helper-0.1.0.zip"
  className="..."
>
  확장 다운로드
</a>
```
- `download` 속성이 있으면 브라우저가 페이지 이동 대신 다운로드 트리거
- Cloudflare Pages `_headers`에 이미 `Content-Disposition: attachment` 추가됨 (task-2342) → 이중 보장

**수정 방안 B — programmatic download (anchor 동적 생성)**:
```tsx
const handleDownload = async () => {
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = 'insuro-helper-0.1.0.zip';
  document.body.appendChild(a);
  a.click();
  a.remove();
};
```

**추천**: A (단순 + 표준 + SSR 안전)

**검증**:
- 일반 모드 + 시크릿 모드 모두 다운로드 팝업 트리거 확인
- 페이지 URL 그대로 유지 확인
- Service Worker가 가로채지 않는지 확인 (task-2342에서 navigateFallbackDenylist 추가됨 → 이미 안전)

## affected_files

**수정:**
- `src/pages/CompositeDesign.tsx` (체크박스 크기)
- `src/pages/CompositeExtensionGuide.tsx` (다운로드 버튼)

**선택:**
- `src/components/ui/checkbox.tsx` (shadcn 기본값 자체가 큰 거면 — 단 다른 페이지 영향 주의)

## 검증 시나리오

1. **체크박스**: `/composite-design` 페이지에서 체크박스 크기가 표준(~20px)으로 줄어듦
2. 32개 담보 카드 모두 시각적으로 균형 잡힘
3. 체크/언체크 기능 정상 작동
4. **다운로드**: `/composite-design/setup` "확장 다운로드" 버튼 클릭 → 페이지 이동 없이 zip 다운로드 시작
5. 일반 모드 + 시크릿 모드 모두 작동
6. `npm run build` 성공
7. Playwright 스크린샷 첨부 (전/후 비교)

## 보고

- `memory/reports/insuro-composite-ui-polish.md`
- 변경 전/후 스크린샷
- L1 검증 결과

## 운영 메모

- 두 변경 모두 작은 UI 폴리싱 — 기능 회귀 위험 거의 없음
- shadcn 기본 체크박스 자체를 손대면 다른 페이지에도 영향 → 페이지 스코프로만 적용 권장
- 가이드 페이지 다운로드 안내 이미지(step1.png "확장 .zip 다운로드")와 실제 동작 일치하도록 점검

## goal_assertions (auto-generated)
- `npm run build`