테마
Story: 캠페인 카드 업무노트 연동
메타
| 항목 | 값 |
|---|---|
| Story ID | E-10-S-06 |
| Epic | E-10 업무노트 |
| 상태 | draft |
| 우선순위 | P0 |
| 규모 | M |
| 담당 개발자 | 수민 (FE) |
사용자 스토리
As a 특정 캠페인을 분석하는 셀러,
I want 해당 캠페인 관련 메모를 캠페인 카드에서 바로 보고 싶다,
So that 이 캠페인에 무슨 조정을 했는지 맥락을 빠르게 파악할 수 있다.
수락 기준 (Acceptance Criteria)
AC-01: 캠페인 카드에 최근 메모 미리보기
| 항목 | 내용 |
|---|---|
| Given | 캠페인에 연결된 메모가 있을 때 |
| When | 캠페인 카드(접힌 상태)를 보면 |
| Then | 가장 최근 메모 1개가 요약으로 표시된다 |
┌───────────────────────────────────────────────────────────────┐
│ 🟡 봄 신상품 캠페인 ROAS 320% │
│ 광고비 ₩500,000 | 매출 ₩1,600,000 | 순이익 ₩50,000 │
│ │
│ 📝 최근 메모: "비검색 입찰가 120원으로 낮춤" (1일 전) │
│ │
│ [메모 추가] [펼쳐보기 ▼] │
└───────────────────────────────────────────────────────────────┘AC-02: 펼친 상태에서 최근 3개 메모 표시
| 항목 | 내용 |
|---|---|
| Given | 캠페인 카드를 펼쳤을 때 |
| When | 연결된 메모가 있으면 |
| Then | 최근 3개 메모가 요약 목록으로 표시된다 |
┌───────────────────────────────────────────────────────────────┐
│ 🟡 봄 신상품 캠페인 ROAS 320% │
│ ... │
├───────────────────────────────────────────────────────────────┤
│ │
│ 📋 이 캠페인 업무노트 (최근 3개) │
│ │
│ • 01-21: 비검색 입찰가 200→120원 (⏳ 효과 추적 중) │
│ • 01-14: 목표 ROAS 300→400% (✨ ROAS +37%) │
│ • 01-07: 키워드 5개 제외 │
│ │
│ [전체 보기 →] │
└───────────────────────────────────────────────────────────────┘AC-03: 전체 보기 클릭 시 타임라인 이동
| 항목 | 내용 |
|---|---|
| Given | [전체 보기 →] 버튼을 클릭하면 |
| When | 타임라인 뷰로 이동할 때 |
| Then | 해당 캠페인으로 필터가 적용된 상태로 표시된다 |
AC-04: 메모가 없는 경우
| 항목 | 내용 |
|---|---|
| Given | 캠페인에 연결된 메모가 없을 때 |
| When | 캠페인 카드를 보면 |
| Then | 미리보기 영역이 표시되지 않고, [메모 추가] 버튼만 표시된다 |
AC-05: 효과 추적 상태 표시
| 항목 | 내용 |
|---|---|
| Given | 메모에 효과 추적 정보가 있을 때 |
| When | 요약 목록에 표시될 때 |
| Then | 추적 상태 (⏳ 추적 중 / ✨ ROAS +37%) 가 표시된다 |
태스크 분해
Task 1: 캠페인별 메모 조회 API 연동 AC-01, AC-02
- [ ] 1.1: 캠페인 ID로 최근 메모 조회 hook
- [ ] 1.2: 캠페인 목록 조회 시 메모 요약 포함 옵션
Task 2: 접힌 상태 미리보기 AC-01
- [ ] 2.1: 캠페인 카드에 최근 메모 미리보기 영역 추가
- [ ] 2.2: 메모 내용 truncate (50자)
- [ ] 2.3: 상대 시간 표시 (1일 전, 3일 전)
Task 3: 펼친 상태 메모 목록 AC-02, AC-05
- [ ] 3.1: 최근 3개 메모 목록 컴포넌트
- [ ] 3.2: 효과 추적 상태 배지 (⏳ / ✨)
- [ ] 3.3: 변경 전→후 요약 표시
Task 4: 네비게이션 AC-03, AC-04
- [ ] 4.1: [전체 보기 →] 클릭 시 타임라인으로 이동 + 필터 적용
- [ ] 4.2: 메모 없을 때 영역 숨김 처리
Dev Notes
아키텍처 패턴
| 항목 | 내용 |
|---|---|
| 사용할 패턴 | React Query + Prefetch |
| 참고 구현 | 기존 캠페인 카드 확장 |
| 피해야 할 것 | 캠페인마다 개별 API 호출 (N+1) |
영향 받는 소스 트리
src/
├── components/
│ ├── SurfaceLayer/
│ │ └── CampaignCard.tsx # 수정: 메모 연동
│ └── WorkNote/
│ └── CampaignNoteSummary.tsx # 🆕 신규 생성
├── hooks/
│ └── useCampaignNotes.ts # 🆕 신규 생성
└── api/
└── workNotes.ts # 수정: 캠페인별 조회 파라미터의존성
- E-10-S-01: 캠페인별 메모 조회 API
- E-10-S-03: 타임라인 뷰 (필터 적용 연동)
- E-03: Surface Layer 캠페인 카드
충돌 감지
| 항목 | 상태 | 설명 |
|---|---|---|
| 기존 코드 충돌 | ⚠️ 주의 | CampaignCard 컴포넌트 수정 필요 |
| API 계약 변경 | ✅ 없음 | - |
| DB 스키마 변경 | ✅ 없음 | - |
| 환경 변수 변경 | ✅ 없음 | - |
이벤트 로깅
| 이벤트명 | 트리거 | 파라미터 | GA4 여부 |
|---|---|---|---|
view_campaign_notes_preview | 캠페인 카드에서 메모 노출 | {campaignId, noteCount} | ✅ |
click_view_all_notes | 전체 보기 클릭 | {campaignId} | ✅ |
생성일: 2026-01-21