QA 체크리스트

# 대시보드 QA 체크리스트 (`/dashboard`)

**목적**: 무료/유료/오류 시나리오를 빠르게 재현해, 대시보드 변경 후 회귀를 줄인다.  
**사용 시점**: 대시보드·구독·사용량 UI/API 수정 직후, 배포 전 확인.

---

## 1. 사전 점검

1. `cd "$(git rev-parse --show-toplevel)"` *(과거 표기: `cd CLAUDE/projects/openclaw`)*
2. `pnpm check-env`
3. `pnpm dev` 실행 후 `http://localhost:3000/dashboard` 접근
4. 테스트 계정 상태 확인(무료 / 유료 / 구독오류 재현 가능한 계정)

---

## 2. 시나리오별 확인

## A. 인증·헬스 배너

- [ ] 비로그인 접근 시 `/login?next=/dashboard`로 리다이렉트
- [ ] `/api/health`에서 env 누락 시 amber 경고 + 누락 키 노출
- [ ] env 정상 시 경고 배너가 사라지고 페이지가 정상 렌더링
- [ ] 로그인 화면에서 불필요한 안내 문구(디버그/테스트용)가 노출되지 않음

## B. 무료 사용자 (`free` + `none`)

- [ ] 환영 카드에 무료 상태 안내 문구 표시
- [ ] 구독 섹션에 "유료 구독 레코드 없음" 안내 문구 표시
- [ ] 사용량 위젯에 월간 `current/limit/remaining` 값 표시
- [ ] 시작하기 타임라인에서 AI 채팅 단계가 `진행`으로 표시

## C. 유료 사용자 (`active`/`trialing`)

- [ ] 환영 카드에 `현재 플랜: {plan} · {status}` 노출
- [ ] 구독 섹션에 플랜/상태/기간 종료 표시
- [ ] Polar 고객 포털 버튼 동작
- [ ] 시작하기 타임라인의 플랜 단계가 `완료` 또는 기대 상태로 표시

## D. 오류 재현 (`/api/subscription`, `/api/usage`)

- [ ] 구독 API 오류 시 에러 문구 + `hint`(있으면) 노출
- [ ] 구독 섹션 `다시 불러오기` 버튼 동작
- [ ] 사용량 API 오류 시 에러 문구 + `다시 불러오기` 버튼 동작
- [ ] 오류 복구 후 정상 데이터로 UI가 갱신

## E. 링크·액션

- [ ] `AI 채팅` 버튼 → `/chat`
- [ ] `요금 보기` / `요금 / 결제하기` → `/pricing` 또는 결제 플로우
- [ ] `Polar 고객 포털` 링크 동작(미등록 사용자의 경우 안내 문구와 실제 결과 일치)
- [ ] `로그아웃` 후 `/login` 이동

---

## 3. 코드 수정일 필수 검증

- [ ] `pnpm exec eslint app/dashboard/page.tsx components/dashboard/usage-summary-section.tsx`
- [ ] 연관 파일 수정 시 해당 경로 ESLint 추가 실행
- [ ] `pnpm build` 성공
- [ ] `docs/work-log.md`에 변경 요약 1줄 기록

---

## 4. 실패 시 기록 템플릿

아래 포맷으로 `docs/work-log.md`에 남긴다.

```md
| YYYY-MM-DD | 대시보드 QA 실패: [시나리오] [증상]. 재현 경로: [...]. 원인: [...]. 조치: [...]. |
```

<h1>대시보드 QA 체크리스트 (<code>/dashboard</code>)</h1>
<p><strong>목적</strong>: 무료/유료/오류 시나리오를 빠르게 재현해, 대시보드 변경 후 회귀를 줄인다.<br><strong>사용 시점</strong>: 대시보드·구독·사용량 UI/API 수정 직후, 배포 전 확인.</p>
<hr>
<h2>1. 사전 점검</h2>
<ol>
<li><code>cd &quot;$(git rev-parse --show-toplevel)&quot;</code> <em>(과거 표기: <code>cd CLAUDE/projects/openclaw</code>)</em></li>
<li><code>pnpm check-env</code></li>
<li><code>pnpm dev</code> 실행 후 <code>http://localhost:3000/dashboard</code> 접근</li>
<li>테스트 계정 상태 확인(무료 / 유료 / 구독오류 재현 가능한 계정)</li>
</ol>
<hr>
<h2>2. 시나리오별 확인</h2>
<h2>A. 인증·헬스 배너</h2>
<ul>
<li><input disabled="" type="checkbox"> 비로그인 접근 시 <code>/login?next=/dashboard</code>로 리다이렉트</li>
<li><input disabled="" type="checkbox"> <code>/api/health</code>에서 env 누락 시 amber 경고 + 누락 키 노출</li>
<li><input disabled="" type="checkbox"> env 정상 시 경고 배너가 사라지고 페이지가 정상 렌더링</li>
<li><input disabled="" type="checkbox"> 로그인 화면에서 불필요한 안내 문구(디버그/테스트용)가 노출되지 않음</li>
</ul>
<h2>B. 무료 사용자 (<code>free</code> + <code>none</code>)</h2>
<ul>
<li><input disabled="" type="checkbox"> 환영 카드에 무료 상태 안내 문구 표시</li>
<li><input disabled="" type="checkbox"> 구독 섹션에 &quot;유료 구독 레코드 없음&quot; 안내 문구 표시</li>
<li><input disabled="" type="checkbox"> 사용량 위젯에 월간 <code>current/limit/remaining</code> 값 표시</li>
<li><input disabled="" type="checkbox"> 시작하기 타임라인에서 AI 채팅 단계가 <code>진행</code>으로 표시</li>
</ul>
<h2>C. 유료 사용자 (<code>active</code>/<code>trialing</code>)</h2>
<ul>
<li><input disabled="" type="checkbox"> 환영 카드에 <code>현재 플랜: {plan} · {status}</code> 노출</li>
<li><input disabled="" type="checkbox"> 구독 섹션에 플랜/상태/기간 종료 표시</li>
<li><input disabled="" type="checkbox"> Polar 고객 포털 버튼 동작</li>
<li><input disabled="" type="checkbox"> 시작하기 타임라인의 플랜 단계가 <code>완료</code> 또는 기대 상태로 표시</li>
</ul>
<h2>D. 오류 재현 (<code>/api/subscription</code>, <code>/api/usage</code>)</h2>
<ul>
<li><input disabled="" type="checkbox"> 구독 API 오류 시 에러 문구 + <code>hint</code>(있으면) 노출</li>
<li><input disabled="" type="checkbox"> 구독 섹션 <code>다시 불러오기</code> 버튼 동작</li>
<li><input disabled="" type="checkbox"> 사용량 API 오류 시 에러 문구 + <code>다시 불러오기</code> 버튼 동작</li>
<li><input disabled="" type="checkbox"> 오류 복구 후 정상 데이터로 UI가 갱신</li>
</ul>
<h2>E. 링크·액션</h2>
<ul>
<li><input disabled="" type="checkbox"> <code>AI 채팅</code> 버튼 → <code>/chat</code></li>
<li><input disabled="" type="checkbox"> <code>요금 보기</code> / <code>요금 / 결제하기</code> → <code>/pricing</code> 또는 결제 플로우</li>
<li><input disabled="" type="checkbox"> <code>Polar 고객 포털</code> 링크 동작(미등록 사용자의 경우 안내 문구와 실제 결과 일치)</li>
<li><input disabled="" type="checkbox"> <code>로그아웃</code> 후 <code>/login</code> 이동</li>
</ul>
<hr>
<h2>3. 코드 수정일 필수 검증</h2>
<ul>
<li><input disabled="" type="checkbox"> <code>pnpm exec eslint app/dashboard/page.tsx components/dashboard/usage-summary-section.tsx</code></li>
<li><input disabled="" type="checkbox"> 연관 파일 수정 시 해당 경로 ESLint 추가 실행</li>
<li><input disabled="" type="checkbox"> <code>pnpm build</code> 성공</li>
<li><input disabled="" type="checkbox"> <code>docs/work-log.md</code>에 변경 요약 1줄 기록</li>
</ul>
<hr>
<h2>4. 실패 시 기록 템플릿</h2>
<p>아래 포맷으로 <code>docs/work-log.md</code>에 남긴다.</p>
<pre><code class="language-md">| YYYY-MM-DD | 대시보드 QA 실패: [시나리오] [증상]. 재현 경로: [...]. 원인: [...]. 조치: [...]. |
</code></pre>