Story: Deep Layer 캠페인 수 제한 UI

메타

항목	값
Story ID	E-05-S-03
Epic	E-05 요금제 정책 재설계 및 가드레일
상태	draft
우선순위	P0
규모	M
담당	창훈님 (하록님, 수민님)

---

사용자 스토리

As a 셀러, I want 요금제에 따라 볼 수 있는 캠페인 수를 명확히 알고 싶다, So that 업그레이드 필요성을 인지하고 결정할 수 있다.

---

수락 기준 (Acceptance Criteria)

AC-01: 캠페인 수 제한 표시

항목	내용
Given	Deep Layer 캠페인 목록 진입
When	캠페인 수가 제한 초과
Then	제한 내 캠페인은 정상 표시, 초과분은 블러 처리

제한 수치:

티어	캠페인 수
Starter	1개 (미리보기)
Basic	10개
Pro	30개
Business	무제한

AC-02: 블러 처리 UI

항목	내용
Given	제한 초과 캠페인
When	화면 렌더링
Then	블러 + 자물쇠 아이콘 + 업그레이드 CTA

UI 스펙:

┌────────────────────────────────────────┐
│ 캠페인 1 ✅                             │
│ ROAS 180% | 광고비 50,000원             │
├────────────────────────────────────────┤
│ 캠페인 2 ✅                             │
│ ROAS 220% | 광고비 30,000원             │
├────────────────────────────────────────┤
│ ░░░░░░░░░░░░ 🔒 ░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│                                        │
│  Pro 요금제로 업그레이드하면            │
│  30개 캠페인을 분석할 수 있어요         │
│                                        │
│         [업그레이드 하기]              │
└────────────────────────────────────────┘

AC-03: 잔여 한도 표시

항목	내용
Given	캠페인 목록 상단
When	화면 렌더링
Then	"10개 중 8개 사용 중" 표시

UI 스펙:

캠페인 분석 (8/10)  [Basic]
─────────────────────────────

---

태스크 분해

Task 1: API 연동 AC-01

• [ ] 1.1: 요금제 정보 API 호출 (PlanGuardService)
• [ ] 1.2: 캠페인 수 제한 가져오기
• [ ] 1.3: 현재 캠페인 수 vs 제한 비교

Task 2: 블러 처리 컴포넌트 AC-02

• [ ] 2.1: BlurredCampaignCard 컴포넌트 생성
• [ ] 2.2: 블러 효과 CSS (backdrop-filter 또는 gradient)
• [ ] 2.3: 자물쇠 아이콘 오버레이
• [ ] 2.4: 업그레이드 CTA 버튼

Task 3: 잔여 한도 표시 AC-03

• [ ] 3.1: CampaignLimitBadge 컴포넌트
• [ ] 3.2: 요금제 티어 뱃지 (색상 구분)
• [ ] 3.3: 한도 근접 시 경고 색상

Task 4: 업그레이드 플로우

• [ ] 4.1: 업그레이드 버튼 클릭 → 요금제 페이지 이동
• [ ] 4.2: 현재 티어 → 다음 티어 하이라이트

---

Dev Notes (AI Agent 최적화)

영향 받는 소스 트리

src/
├── components/
│   ├── campaign/
│   │   ├── CampaignList.tsx          # 🔄 수정
│   │   ├── BlurredCampaignCard.tsx   # 🆕
│   │   └── CampaignLimitBadge.tsx    # 🆕
│   └── common/
│       └── UpgradeCTA.tsx            # 🆕 재사용 가능
└── hooks/
    └── usePlanGuard.ts               # 🆕

블러 CSS 예시

.blurred-campaign {
  filter: blur(8px);
  pointer-events: none;
  position: relative;
}

.blurred-campaign::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
}

---

의존성

의존	설명	상태
E-05-S-02	PlanGuardService API	선행 필수

---

생성일: 2026-01-27