# task-642.1 완료 보고서: InsuRo Pricing 페이지 UI 개선 v3

## SCQA

**S**: InsuRo Pricing 페이지가 `min-w-[1200px]`로 설정되어 사이드바 포함 시 가로 스크롤이 필요하고, Pro 카드가 gradient 배경으로 과도하게 강조되며, 하단에 불필요한 CTA 버튼이 중복 표시되고 있었다.

**C**: 일반 데스크탑(1440px)에서 가로 스크롤이 발생하여 사용성이 저하되고, Pro 카드의 gradient 스타일이 디자인 톤에 비해 과한 상태였다.

**Q**: 가로 스크롤 없이 5개 플랜을 한 화면에 표시하고, Pro 카드를 절제된 스타일로 변경할 수 있는가?

**A**: `Pricing.tsx` 1개 파일 수정으로 3가지 지시사항을 모두 반영. 빌드 성공(vite build 7.17s), 서버 재시작 후 HTTP 200 정상 응답 확인.

## 수정 내역

### 1. 가로 스크롤 제거 (좌우 폭 축소)
- `min-w-[1200px]` 완전 제거
- gridCols 레이블 열: 160px → 120px
- 카드 열 minmax: 170px → 140px
- 전체 grid gap: 3 → 2
- 카드 내부 padding: p-4 → p-3
- 계산: 사이드바 240px + 레이블 120px + 5카드×140px + gap 12×4 = 1108px → 1440px 화면에서 여유 332px

### 2. Pro 카드 스타일 변경
- 카드: `gradient-border shadow-md` → `border-blue-500 border-[3px] shadow-sm`
- "인기" Badge: `gradient-bg` → `bg-blue-500 text-white`
- CTA 버튼: `gradient-bg` → `bg-blue-500 hover:bg-blue-600`

### 3. 하단 CTA 행 삭제
- 기존 lines 483-492의 하단 CTA 행 반복 블록 완전 제거

## 수정 파일
- `/home/jay/projects/InsuRo/src/pages/Pricing.tsx` (수정)

## 발견 이슈 및 해결

### 자체 해결 (3건)
1. **Pro 카드에 border-2와 border-[3px] 중복 가능성** — 기존 `border-2`는 공통 클래스로 유지하되, Pro일 때 `border-[3px]`이 우선 적용되어 정상 동작 확인
2. **grid gap 축소 시 카드 간 여백 부족 우려** — gap-2(8px)로 변경 후에도 카드 간 구분이 명확하여 문제 없음
3. **하단 CTA 삭제 후 토큰 섹션과 FAQ 사이 여백** — 기존 mb-2 + FAQ의 space-y-4로 자연스러운 간격 유지 확인

### 범위 외 미해결 (0건)

## 검증 결과
- vite build: 성공 (7.17s, 에러 0건)
- 서버 재시작: HTTP 200 정상 응답
- TSX 문법: 빌드 과정에서 자동 검증 (에러 없음)

## QC 자동 검증
- overall: **PASS** (3 PASS, 7 SKIP)
- file_check: PASS (19,385 bytes)
- data_integrity: PASS
- critical_gap: PASS
- tdd_check: SKIP (Lv.1 CSS 수정 작업 — TDD 대상 외)
- api_health, test_runner, schema_contract, pyright_check, style_check, scope_check: SKIP (해당 없음)