테마
Story: 키워드 분석 수 제한 UI
메타
| 항목 | 값 |
|---|---|
| Story ID | E-05-S-04 |
| Epic | E-05 요금제 정책 재설계 및 가드레일 |
| 상태 | draft |
| 우선순위 | P0 |
| 규모 | M |
| 담당 | 창훈님 (하록님, 수민님) |
사용자 스토리
As a 셀러, I want 요금제에 따라 분석할 수 있는 키워드 수를 알고 싶다, So that 필요에 따라 업그레이드를 결정할 수 있다.
수락 기준 (Acceptance Criteria)
AC-01: 키워드 수 제한 표시
| 항목 | 내용 |
|---|---|
| Given | 키워드 분석 화면 진입 |
| When | 키워드 수가 제한 초과 |
| Then | 제한 내 키워드는 정상 표시, 초과분은 블러 처리 |
제한 수치:
| 티어 | 키워드 수 |
|---|---|
| Starter | 3개 |
| Basic | 10개 |
| Pro | 50개 |
| Business | 무제한 |
AC-02: 블러 처리 UI
| 항목 | 내용 |
|---|---|
| Given | 제한 초과 키워드 |
| When | 화면 렌더링 |
| Then | 블러 + 업그레이드 CTA |
UI 스펙:
┌─────────────────────────────────────────────────────┐
│ 키워드 분석 (3/3) [Starter] │
├─────────────────────────────────────────────────────┤
│ 키워드 │ 노출수 │ 클릭수 │ ROAS │ 상태 │
├─────────────────────────────────────────────────────┤
│ 강아지사료 │ 12,500 │ 450 │ 320% │ 🟢 │
│ 고양이간식 │ 8,200 │ 280 │ 180% │ 🟡 │
│ 펫용품 │ 5,100 │ 120 │ 95% │ 🔴 │
├─────────────────────────────────────────────────────┤
│ ░░░░░░░░░░░░░ 🔒 ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ │
│ Basic 요금제로 업그레이드하면 │
│ 10개 키워드를 분석할 수 있어요 │
│ │
│ [업그레이드 하기] │
└─────────────────────────────────────────────────────┘AC-03: 잔여 한도 근접 경고
| 항목 | 내용 |
|---|---|
| Given | 키워드 사용량이 한도의 80% 이상 |
| When | 화면 렌더링 |
| Then | 경고 색상 + 툴팁 표시 |
태스크 분해
Task 1: API 연동 AC-01
- [ ] 1.1: 키워드 제한 정보 API 호출
- [ ] 1.2: 현재 키워드 사용량 조회
- [ ] 1.3: 제한 비교 로직
Task 2: 블러 처리 컴포넌트 AC-02
- [ ] 2.1: BlurredKeywordRow 컴포넌트 생성
- [ ] 2.2: 테이블 행 블러 효과
- [ ] 2.3: UpgradeCTA 재사용 (E-05-S-03)
Task 3: 한도 경고 AC-03
- [ ] 3.1: KeywordLimitBadge 컴포넌트
- [ ] 3.2: 80% 이상 시 주황색, 100% 시 빨간색
- [ ] 3.3: 툴팁: "3개 키워드 중 3개 사용 중"
Dev Notes (AI Agent 최적화)
영향 받는 소스 트리
src/
├── components/
│ ├── keyword/
│ │ ├── KeywordAnalysisTable.tsx # 🔄 수정
│ │ ├── BlurredKeywordRow.tsx # 🆕
│ │ └── KeywordLimitBadge.tsx # 🆕
└── hooks/
└── usePlanGuard.ts # 🔄 (E-05-S-03에서 생성)E-05-S-03과 공통 컴포넌트
UpgradeCTA.tsx- 재사용usePlanGuard.ts- 재사용
의존성
| 의존 | 설명 | 상태 |
|---|---|---|
| E-05-S-02 | PlanGuardService API | 선행 필수 |
| E-05-S-03 | UpgradeCTA 컴포넌트 | 병렬 가능 |
생성일: 2026-01-27