# InsuRo 토큰 시스템 수정 — DB 설정 + 네비바 잔액 표시

## 작업 레벨: Lv.2

## 프로젝트 시스템 3문서
- DevSystem: `/home/jay/workspace/memory/plans/anu-guide-system/plan.md`

## 프로젝트
- InsuRo: `/home/jay/projects/InsuRo`
- 배포: Cloudflare Pages (GitHub push → CI → 자동 배포)

## 문제 상황
1. 블로그 콘텐츠 생성 시 "토큰이 없다" 에러 — 히든 플랜인데도 발생
2. 토큰 잔액을 확인할 수 있는 화면이 없음

## 원인
- `plan_token_config` 테이블이 **비어있음** → 모든 플랜에서 `monthly_token_quota = 0`으로 fallback
- 히든 플랜은 `quota = -1` (무제한) 이어야 하는데 DB에 설정이 없음
- `TokenBalance.tsx` 컴포넌트는 만들어져 있지만 어디에도 사용되지 않음

## 수정 사항

### 1. Supabase DB: plan_token_config 설정 추가
Supabase 대시보드 또는 SQL로 설정 추가:

```sql
-- 1. subscription_plans에서 플랜 ID 조회
SELECT id, name, tier FROM subscription_plans;

-- 2. 각 플랜별 토큰 설정 추가 (plan_id는 위 쿼리 결과로 대체)
-- 히든: 무제한 (-1)
INSERT INTO plan_token_config (plan_id, monthly_token_quota) 
VALUES ('<hidden_plan_id>', -1)
ON CONFLICT (plan_id) DO UPDATE SET monthly_token_quota = -1;

-- 맥스: 10000
INSERT INTO plan_token_config (plan_id, monthly_token_quota) 
VALUES ('<max_plan_id>', 10000)
ON CONFLICT (plan_id) DO UPDATE SET monthly_token_quota = 10000;

-- 프로: 3000
INSERT INTO plan_token_config (plan_id, monthly_token_quota) 
VALUES ('<pro_plan_id>', 3000)
ON CONFLICT (plan_id) DO UPDATE SET monthly_token_quota = 3000;

-- 베이직: 1000
INSERT INTO plan_token_config (plan_id, monthly_token_quota) 
VALUES ('<basic_plan_id>', 1000)
ON CONFLICT (plan_id) DO UPDATE SET monthly_token_quota = 1000;

-- 무료: 100
INSERT INTO plan_token_config (plan_id, monthly_token_quota) 
VALUES ('<free_plan_id>', 100)
ON CONFLICT (plan_id) DO UPDATE SET monthly_token_quota = 100;
```

**★ RLS 정책 확인**: anon key로 `subscription_plans` 조회가 null 반환 — RLS 정책이 인증된 사용자만 허용하도록 설정되어 있을 수 있음. `plan_token_config`도 마찬가지. Edge Function은 service_role key를 사용하므로 문제없지만, 프론트엔드 `useUserTokens` 훅은 anon key 사용 → RLS 때문에 빈 데이터 반환 가능. 확인 필요.

### 2. TopNavBar에 토큰 잔액 표시
- **위치**: `src/components/navigation/TopNavBar.tsx` — 플랜 배지(Crown 아이콘) **왼쪽**에 배치
- **스타일**: 컴팩트 인라인 (카드 아님). 예시:
  - 무제한: `🪙 무제한`
  - 제한 있을 때: `🪙 2,450 / 5,000`
  - 부족 시: `⚠️ 50 / 5,000` (amber 색상)
- **구현**: 기존 `TokenBalance.tsx`의 로직을 재사용하되, TopNavBar 전용 컴팩트 버전 생성 또는 `TokenBalance`를 size prop으로 분기

## affected_files
- `src/components/navigation/TopNavBar.tsx` (수정 — 토큰 잔액 컴팩트 표시 추가)
- `src/components/TokenBalance.tsx` (수정 가능 — 컴팩트 모드 추가 또는 인라인 컴포넌트 신규)
- Supabase DB: `plan_token_config` 테이블 (INSERT)

## 검증 시나리오
1. Supabase SQL 편집기에서 `SELECT * FROM plan_token_config` → 각 플랜별 quota 확인
2. 블로그 콘텐츠 생성 → "토큰이 없다" 에러 해소 (히든 플랜 무제한)
3. TopNavBar 오른쪽에 토큰 잔액 표시 (히든: "무제한", 유료: "N / M", 부족 시 amber)
4. npm run build 성공