Story: 캠페인 카드 UI 확장 (검색/비검색)

메타

항목	값
Story ID	E-03-S-02
Epic	E-03 Surface Layer
상태	ready-for-dev
우선순위	P0
규모	M
담당 개발자	수민 (FE)

---

사용자 스토리

As a 셀러,
I want 캠페인 카드를 펼쳤을 때 검색/비검색 상태를 나란히 보고 싶다,
So that 한눈에 어느 영역이 문제인지 비교할 수 있다.

---

수락 기준 (Acceptance Criteria)

AC-01: 카드 펼치기/접기

항목	내용
Given	캠페인 카드가 접힌 상태에서
When	"펼쳐보기"를 클릭하면
Then	검색/비검색 상세 영역이 펼쳐진다

AC-02: 검색/비검색/리타게팅 카드 표시 (리타게팅 추가 2026-01-27)

항목	내용
Given	카드가 펼쳐진 상태에서
When	검색/비검색/리타게팅 데이터가 있으면
Then	각 영역 카드가 표시된다 (광고비, ROAS, 순이익)

┌─────────────────────────┐ ┌─────────────────────────┐ ┌─────────────────────────┐
│ 🔍 검색 광고      🟢    │ │ 📺 비검색 광고    🔴    │ │ 🎯 리타게팅       🟡    │
│ 광고비 ₩300,000         │ │ 광고비 ₩200,000         │ │ 광고비 ₩100,000   참고  │
│ ROAS 480%               │ │ ROAS 80%                │ │ ROAS 313%               │
│ 순이익 ₩120,000         │ │ 순이익 -₩70,000         │ │ 순이익 ₩15,000          │
└─────────────────────────┘ └─────────────────────────┘ └─────────────────────────┘

※ 리타게팅: 우측에 "참고" 라벨 (셀러 컨트롤 제한적)

AC-03: 데이터 없음 처리

항목	내용
Given	검색 또는 비검색 중 하나만 있을 때
When	카드가 펼쳐지면
Then	없는 영역은 "데이터 없음" (⚪)으로 표시

AC-04: 모바일 반응형

항목	내용
Given	모바일(375px)에서
When	카드가 펼쳐지면
Then	검색/비검색 카드가 세로로 배치된다

---

태스크 분해

Task 1: 펼치기/접기 AC-01

• [ ] 1.1: 토글 상태 관리
• [ ] 1.2: 애니메이션 적용
• [ ] 1.3: GA4 이벤트 (expand_campaign_card)

Task 2: 검색/비검색/리타게팅 카드 AC-02, AC-03

• [ ] 2.1: 검색 광고 카드 컴포넌트
• [ ] 2.2: 비검색 광고 카드 컴포넌트
• [ ] 2.3: 리타게팅 광고 카드 컴포넌트 ⭐ 신규
  • "참고" 라벨 표시
  • 셀러 컨트롤 제한 안내 툴팁
• [ ] 2.4: Empty state 처리

Task 3: 반응형 AC-04

• [ ] 3.1: 모바일 세로 배치 CSS

---

이벤트 로깅

이벤트명	트리거	파라미터
expand_campaign_card	카드 펼치기	{campaign_id}
view_search_nonsearch_status	상태 노출	{search_status, nonsearch_status}

---

생성일: 2026-01-20