# task-640.1 완료 보고서: InsuRo Pricing 페이지 레이아웃 수정

## SCQA

**S**: InsuRo Pricing 페이지는 DashboardLayout(사이드바) 내에서 4개 플랜 카드(Free/Basic/Pro/Max)를 CSS Grid로 표시하고 있다.

**C**: `min-w-[640px]`과 `180px + 1fr` 그리드 설정으로 4개 카드가 겹치거나 잘리고, Pro "인기" 배지가 상단에서 잘리며, 가격+할인 Badge가 줄바꿈으로 깨지는 레이아웃 이슈가 발생한다.

**Q**: CSS Grid와 Tailwind 클래스 수정만으로 4개 플랜 카드가 모바일/데스크탑 모두에서 깨지지 않게 할 수 있는가?

**A**: 5가지 CSS 수정(min-w 확대, gridTemplateColumns 변수화+minmax, 배지 여백, flex-wrap, shrink-0)으로 모든 레이아웃 이슈를 해결했다. 수정 대상 파일 1개, 변경 포인트 12곳 (변수 추가 1 + 인라인 grid 7곳 교체 + 클래스 수정 4곳).

## 수정 내역

**수정 파일**: `/home/jay/projects/InsuRo/src/pages/Pricing.tsx`

### 변경 사항 (5건)

1. **min-w 확대** (라인 348): `min-w-[640px]` → `min-w-[900px]`
   - 4개 카드 + 레이블 열이 최소 900px 보장

2. **gridTemplateColumns 변수화 + minmax** (라인 165, 352/398/418/441/455/470/486):
   - `const gridCols = "160px repeat(N, minmax(160px, 1fr))"` 변수 추가
   - 레이블 열 180px → 160px 축소, 카드 열 최소폭 160px 보장
   - 7곳 인라인 스타일을 단일 변수로 통일

3. **Pro "인기" 배지 여백** (라인 351): 헤더 행에 `pt-4` 추가
   - `absolute -top-3` 배지가 잘리지 않도록 상단 패딩 확보

4. **가격 영역 flex-wrap** (라인 266): `flex-wrap` 클래스 추가
   - 가격+Badge가 좁은 컬럼에서 자연스럽게 줄바꿈

5. **Badge shrink-0** (라인 271): 할인 Badge에 `shrink-0` 추가
   - flex 컨테이너에서 Badge가 축소되지 않도록 보장

## 발견 이슈 및 해결

### 자체 해결 (3건)
1. **gridTemplateColumns 7곳 중복** — `gridCols` 변수로 통일하여 유지보수성 향상
2. **레이블 열 과도한 너비(180px)** — 160px로 축소하여 카드 열에 공간 양보
3. **할인 Badge 축소 가능성** — `shrink-0` 추가로 flex-wrap 환경에서 Badge 크기 유지

### 범위 외 미해결 (0건)
해당 없음

## 완료 기준 충족 확인

- [x] 4개 플랜 카드 겹침/잘림 없이 표시 — minmax(160px, 1fr) + min-w-[900px]
- [x] Pro "인기" 배지 잘리지 않음 — pt-4 추가
- [x] 가격 영역 자연스럽게 표시 — flex-wrap + shrink-0
- [x] 모바일(가로 스크롤) + 데스크탑 정상 — overflow-x-auto + min-w-[900px] 유지
- [x] 기존 기능(토글, FAQ 등) 정상 — 기능 로직 변경 없음, CSS만 수정

## QC 증거

- 180px 잔여 검색: **0건** (완전 교체 확인)
- gridTemplateColumns gridCols 사용: **7곳** 통일 확인
- 수정 파일: **1개** (Pricing.tsx)
- 기존 기능 로직 변경: **0건** (CSS/스타일만 수정)

## QC 자동 검증 결과

```
overall: PASS (3 PASS, 7 SKIP)
- file_check: PASS (19792 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 (해당 없음)
```