Story: 검색/비검색 영역 비교 탭 UI

메타

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

---

사용자 스토리

As a 중수 셀러,
I want 캠페인 상세에서 검색 영역과 비검색 영역의 퍼포먼스를 비교해서 보고 싶다,
So that 어느 영역에서 광고 효율이 좋은지/나쁜지 파악하고 최적화할 수 있다.

---

배경 설명

[검색 영역]
- 키워드 검색 결과에서 광고가 노출됐을 때의 퍼포먼스
- 높은 구매 의도, 키워드 품질이 중요

[비검색 영역]
- 상품 리스트, 다른 상품 상세페이지 추천상품 등에서 노출됐을 때의 퍼포먼스
- 브라우징 노출, 노출량이 중요

→ 이 둘을 한 화면에서 비교하여 어디서 최적화가 필요한지 파악

---

수락 기준 (Acceptance Criteria)

AC-01: 검색/비검색 영역 탭 표시

항목	내용
Given	캠페인 상세 페이지에 진입했을 때
When	페이지가 로드되면
Then	[키워드별] [상품별] [검색/비검색 영역] ... 등 탭 중 "검색/비검색 영역" 탭이 표시된다

AC-02: 검색/비검색 영역 비교 테이블

항목	내용
Given	[검색/비검색 영역] 탭을 클릭했을 때
When	데이터가 로드되면
Then	검색 영역 vs 비검색 영역 퍼포먼스 비교 테이블이 표시된다

테이블 컬럼: 구분(검색/비검색) | 광고비 | 노출수 | 클릭수 | CTR | 전환수 | CVR | 전환매출 | ROAS | 순이익 | CPC

AC-03: 추이 차트

항목	내용
Given	[검색/비검색 영역] 탭이 선택된 상태에서
When	데이터가 로드되면
Then	검색/비검색 영역별 추이 차트가 표시된다 (막대: 광고비/순이익/전환매출, 라인: ROAS)

AC-04: 데이터 없음 처리

항목	내용
Given	검색 또는 비검색 영역 데이터가 없을 때
When	탭을 선택하면
Then	해당 영역 행에 "데이터 없음" 표시 또는 "-" 표시

---

태스크 분해

Task 1: 탭 컴포넌트 AC-01

• [ ] 1.1: 캠페인 상세 탭 목록에 "검색/비검색 영역" 탭 추가
• [ ] 1.2: 탭 상태 관리
• [ ] 1.3: GA4 이벤트 (click_ad_type_tab)

Task 2: 비교 테이블 AC-02

• [ ] 2.1: 검색 영역 vs 비검색 영역 비교 테이블 UI
• [ ] 2.2: 컬럼: 구분, 광고비, 노출수, 클릭수, CTR, 전환수, CVR, 전환매출, ROAS, 순이익, CPC
• [ ] 2.3: 순이익 컬럼 컬러 처리 (양수=초록, 음수=빨강)

Task 3: 추이 차트 AC-03

• [ ] 3.1: 막대 차트 (광고비, 순이익, 전환매출)
• [ ] 3.2: 라인 차트 (ROAS 추이)
• [ ] 3.3: 검색/비검색 영역 구분 범례

Task 4: 예외 처리 AC-04

• [ ] 4.1: Empty state 처리
• [ ] 4.2: 로딩 상태 처리

---

이벤트 로깅

이벤트명	트리거	파라미터
click_ad_type_tab	검색/비검색 영역 탭 클릭	{tab: 'search_non_search'}

---

생성일: 2026-01-20수정일: 2026-01-22 (검색/비검색 영역 비교 개념 명확화, 요약 카드 제거)