테마
Story: 패턴 표시 UI (타임라인/카드/배지)
메타
| 항목 | 값 |
|---|---|
| Story ID | E-10-S-10 |
| Epic | E-10 업무노트 |
| 상태 | draft |
| 우선순위 | P1-a (v2.0) |
| 규모 | M |
| 담당 개발자 | 수민 (FE) |
사용자 스토리
As a 패턴이 발견된 셀러,
I want 나에게 맞는 방법이 무엇인지 시각적으로 확인하고 싶다,
So that "실력이 늘었다"는 확신을 가지고 다음 결정에 참고할 수 있다.
배경
왜 필요한가?
- 패턴 발견 → 보여줘야 의미 있음
- "나에게 맞는 방법" 시각화 = 성장 확신의 시각적 증거
- 캠페인 카드에서 힌트 제공 → 조언 신뢰도 ↑
표시 위치
| 위치 | 표시 내용 |
|---|---|
| 타임라인 상단 | "나에게 맞는 방법" 요약 카드 |
| 효과 추적 완료 카드 | 패턴 발견 시 배지 |
| 캠페인 카드 조언 영역 | 성공률 힌트 |
수락 기준 (Acceptance Criteria)
AC-01: 타임라인 상단 패턴 요약 카드
| 항목 | 내용 |
|---|---|
| Given | 셀러에게 발견된 패턴이 1개 이상 있을 때 |
| When | 타임라인 뷰에 진입할 때 |
| Then | 상단에 "나에게 맞는 방법" 요약 카드가 표시된다 |
┌─────────────────────────────────────────────────────────────────┐
│ 💡 나에게 맞는 방법을 찾았어요! │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ ✅ 비검색 입찰가 낮추기 (5회 적용, 80% 성공) │ │
│ │ ✅ 목표 ROAS 올리기 (4회 적용, 75% 성공) │ │
│ │ │ │
│ │ ⚠️ 키워드 추가 (4회 적용, 75% 실패) │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ [접기 ▲] │
└─────────────────────────────────────────────────────────────────┘AC-02: 패턴 없을 때
| 항목 | 내용 |
|---|---|
| Given | 셀러에게 발견된 패턴이 없을 때 |
| When | 타임라인 뷰에 진입할 때 |
| Then | 패턴 요약 카드가 표시되지 않는다 |
AC-03: 효과 추적 완료 카드 - 패턴 발견 배지
| 항목 | 내용 |
|---|---|
| Given | 효과 추적 완료 시 새 패턴이 발견되었을 때 |
| When | 해당 노트 카드를 볼 때 |
| Then | "🎉 패턴 발견!" 배지가 표시된다 |
┌─────────────────────────────────────────────────────────────────┐
│ 🏷 봄 신상품 캠페인 2026-01-28 │
│ │
│ ✓ 조언 적용: 비검색 입찰가 낮추기 │
│ 200원 → 120원 │
│ │
│ ✨ 효과 확인됨: ROAS +18% │
│ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ 🎉 패턴 발견! │ │
│ │ "비검색 입찰가 낮추기"가 5회 중 4회 효과 있었어요. │ │
│ │ 이 방법이 당신에게 잘 맞아요! │ │
│ └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘AC-04: 캠페인 카드 - 패턴 힌트
| 항목 | 내용 |
|---|---|
| Given | Surface Layer 조언이 표시되고, 해당 adviceType이 패턴으로 등록되어 있을 때 |
| When | 캠페인 카드 조언 영역에서 |
| Then | 성공률 힌트가 표시된다 |
┌───────────────────────────────────────────────────────────────┐
│ 🟡 봄 신상품 캠페인 ROAS 320% │
│ │
│ 💡 Surface Layer 조언: 비검색 입찰가 낮추기 │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ ✅ 이 방법 5회 적용, 80% 성공률 - 당신에게 맞는 방법! │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ [✓ 적용했어요] [나중에] │
└───────────────────────────────────────────────────────────────┘AC-05: 비선호 방법 경고 힌트
| 항목 | 내용 |
|---|---|
| Given | 조언의 adviceType이 avoidedActions에 있을 때 |
| When | 캠페인 카드 조언 영역에서 |
| Then | 경고 힌트가 표시된다 |
┌───────────────────────────────────────────────────────────────┐
│ │ ⚠️ 이 방법 4회 적용, 75% 실패 - 다른 방법을 고려해보세요 │ │
└───────────────────────────────────────────────────────────────┘AC-06: 패턴 요약 카드 접기/펼치기
| 항목 | 내용 |
|---|---|
| Given | 패턴 요약 카드가 표시된 상태에서 |
| When | [접기] 버튼 클릭 시 |
| Then | 카드가 접히고 상태가 localStorage에 저장된다 |
태스크 분해
Task 1: 패턴 데이터 조회 훅
- [ ] 1.1: useSellerPatterns 커스텀 훅 생성
- [ ] 1.2: GET /api/seller-patterns 호출
- [ ] 1.3: preferredActions, avoidedActions 파싱
Task 2: 타임라인 패턴 요약 카드 AC-01, AC-02, AC-06
- [ ] 2.1: PatternSummaryCard 컴포넌트 생성
- [ ] 2.2: preferredActions 목록 렌더링 (✅)
- [ ] 2.3: avoidedActions 목록 렌더링 (⚠️)
- [ ] 2.4: 접기/펼치기 상태 관리 (localStorage)
- [ ] 2.5: 패턴 없을 때 미표시 로직
Task 3: 패턴 발견 배지 AC-03
- [ ] 3.1: PatternDiscoveredBadge 컴포넌트 생성
- [ ] 3.2: 효과 추적 완료 카드에 조건부 렌더링
- [ ] 3.3: 애니메이션 (선택: 최초 표시 시)
Task 4: 캠페인 카드 패턴 힌트 AC-04, AC-05
- [ ] 4.1: PatternHintBadge 컴포넌트 생성
- [ ] 4.2: adviceType과 패턴 매칭 로직
- [ ] 4.3: 선호 방법 힌트 (✅ 초록)
- [ ] 4.4: 비선호 방법 경고 (⚠️ 주황)
- [ ] 4.5: Surface Layer 조언 영역에 삽입
Dev Notes
아키텍처 패턴
| 항목 | 내용 |
|---|---|
| 사용할 패턴 | React Query + 컴포넌트 분리 |
| 참고 구현 | 기존 Surface Layer 조언 카드 |
| 피해야 할 것 | 패턴 데이터 중복 호출 (캐싱 활용) |
의존성
| 항목 | 상태 | 설명 |
|---|---|---|
| 선행 작업 | E-10-S-09 | SellerPatterns API 필요 |
| 선행 작업 | E-10-S-05 | 효과 추적 완료 UI 필요 |
| 연계 | Surface Layer | 캠페인 카드 조언 영역 수정 |
E-03 Surface Layer UI 수정 범위
E-10-S-10에서 E-03 캠페인 카드 조언 영역을 수정함
[수정 대상]
E-03 캠페인 카드 > 펼친 상태 > 조언 영역
[수정 내용]
기존:
┌───────────────────────────────────────────────────────────────┐
│ 💡 비검색 입찰가를 낮추세요 │
│ [쿠팡 광고센터에서 조정하기 →] │
│ [✓ 적용했어요] [나중에] │
└───────────────────────────────────────────────────────────────┘
변경 후 (패턴 있을 때):
┌───────────────────────────────────────────────────────────────┐
│ 💡 비검색 입찰가를 낮추세요 │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ ✅ 이 방법 5회 적용, 80% 성공률 - 당신에게 맞는 방법! │ │ ← 신규 추가
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ [쿠팡 광고센터에서 조정하기 →] │
│ [✓ 적용했어요] [나중에] │
└───────────────────────────────────────────────────────────────┘
[구현 방식]
- PatternHintBadge 컴포넌트를 E-03 캠페인 카드에 삽입
- adviceType 매칭으로 패턴 여부 판단
- E-03 코드 수정 최소화 (컴포넌트 삽입만)영향 받는 소스 트리
src/
├── hooks/
│ └── useSellerPatterns.ts # 🆕 신규 생성
├── components/
│ ├── WorkNote/
│ │ ├── PatternSummaryCard.tsx # 🆕 신규 생성
│ │ └── PatternDiscoveredBadge.tsx # 🆕 신규 생성
│ └── Campaign/
│ └── PatternHintBadge.tsx # 🆕 신규 생성
└── pages/
└── WorkNotePage.tsx # 수정: PatternSummaryCard 삽입UI 색상 가이드
| 요소 | 색상 | 용도 |
|---|---|---|
| 선호 방법 (✅) | #00C853 (Green) | preferredActions |
| 비선호 방법 (⚠️) | #FF9800 (Orange) | avoidedActions |
| 패턴 발견 배지 (🎉) | #2196F3 (Blue) | 새 패턴 알림 |
이벤트 로깅
| 이벤트명 | 트리거 | 파라미터 | GA4 여부 |
|---|---|---|---|
view_pattern_summary | 패턴 요약 카드 노출 | {preferredCount, avoidedCount} | ✅ |
click_pattern_toggle | 접기/펼치기 클릭 | `{action: 'fold' | 'expand'}` |
view_pattern_hint | 캠페인 카드 패턴 힌트 노출 | {adviceType, patternType} | ✅ |
테스트 시나리오
| # | 시나리오 | 예상 결과 |
|---|---|---|
| 1 | 패턴 2개 있는 셀러 타임라인 진입 | 패턴 요약 카드 표시 |
| 2 | 패턴 없는 셀러 타임라인 진입 | 패턴 요약 카드 미표시 |
| 3 | 효과 추적 완료 + 패턴 발견 | 🎉 배지 표시 |
| 4 | 효과 추적 완료 + 패턴 미발견 | 배지 없이 결과만 표시 |
| 5 | 조언의 adviceType이 preferredActions | ✅ 힌트 표시 |
| 6 | 조언의 adviceType이 avoidedActions | ⚠️ 경고 힌트 표시 |
| 7 | 조언의 adviceType이 패턴에 없음 | 힌트 미표시 |
| 8 | 패턴 요약 카드 접기 후 새로고침 | 접힌 상태 유지 |
생성일: 2026-01-29
📋 Penny