테마
Story: 타임라인 뷰 UI
메타
| 항목 | 값 |
|---|---|
| Story ID | E-10-S-03 |
| Epic | E-10 업무노트 |
| 상태 | draft |
| 우선순위 | P0 |
| 규모 | L |
| 담당 개발자 | 수민 (FE) |
사용자 스토리
As a 광고를 운영하는 셀러,
I want 날짜별로 업무 기록을 한눈에 보고 싶다,
So that "저번에 뭐 바꿨더라?" 기억을 되살릴 수 있다.
수락 기준 (Acceptance Criteria)
AC-01: 타임라인 뷰 기본 화면
| 항목 | 내용 |
|---|---|
| Given | 업무노트 메뉴에 진입하면 |
| When | 노트가 있을 때 |
| Then | 날짜별로 그룹화된 노트 목록이 최신순으로 표시된다 |
┌─────────────────────────────────────────────────────────────────┐
│ 📋 업무노트 [+ 메모 추가] │
├─────────────────────────────────────────────────────────────────┤
│ │
│ [전체] [캠페인별 ▼] [효과 추적 중] │
│ │
│ ─────────────────────────────────────────────────────────────── │
│ │
│ 📅 2026-01-21 (오늘) │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ 🏷 봄 신상품 캠페인 10:30 AM │ │
│ │ ✓ 조언 적용: 비검색 입찰가 낮추기 │ │
│ │ 200원 → 120원 │ │
│ │ 📝 "일단 120원으로 낮춤..." │ │
│ │ ⏳ 효과 추적 중 (D+0) [수정] │ │
│ └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘AC-02: 필터 기능
| 항목 | 내용 |
|---|---|
| Given | 타임라인 뷰 상단에서 |
| When | 필터를 선택하면 |
| Then | 해당 조건의 노트만 표시된다 |
필터 옵션:
- [전체]: 모든 노트
- [캠페인별 ▼]: 특정 캠페인 선택
- [효과 추적 중]: effectTrackingStatus = 'tracking' 인 것만AC-03: 노트 카드 - 조언 적용 타입
| 항목 | 내용 |
|---|---|
| Given | noteType이 'advice_applied'인 노트가 |
| When | 타임라인에 표시될 때 |
| Then | 조언 정보, 변경 전/후 값, 메모가 표시된다 |
┌─────────────────────────────────────────────────────────────────┐
│ 🏷 봄 신상품 캠페인 10:30 AM │
│ │
│ ✓ 조언 적용: 비검색 입찰가 낮추기 │
│ 200원 → 120원 │
│ │
│ 📝 "일단 120원으로 낮춰봄. 효과 보고 100원까지 내릴 예정" │
│ │
│ ⏳ 효과 추적 중 (D+3, 7일 후 결과) [수정] │
└─────────────────────────────────────────────────────────────────┘AC-04: 노트 카드 - 효과 확인 완료 타입
| 항목 | 내용 |
|---|---|
| Given | 효과 추적이 완료된 노트가 |
| When | 타임라인에 표시될 때 |
| Then | Before/After 비교 테이블과 효과 요약이 표시된다 |
┌─────────────────────────────────────────────────────────────────┐
│ 🏷 여름 쿨매트 캠페인 2:15 PM │
│ │
│ ✓ 조언 적용: 목표 ROAS 조정 │
│ 300% → 400% │
│ │
│ ✨ 효과 확인됨: │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ 적용 전 (7일) 적용 후 (7일) 변화 │ │
│ │ ROAS 280% 385% +37% ↑ │ │
│ │ 100원당 5원 18원 +13원 ↑ │ │
│ │ 광고비 ₩150,000 ₩120,000 -20% ↓ │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ 💡 조언이 효과적이었어요! ROAS +37% 개선 [수정] │
└─────────────────────────────────────────────────────────────────┘AC-05: 노트 카드 - 일반 메모 타입
| 항목 | 내용 |
|---|---|
| Given | noteType이 'manual'인 노트가 |
| When | 타임라인에 표시될 때 |
| Then | 메모 내용과 연결된 캠페인/키워드가 표시된다 |
AC-06: 무한 스크롤
| 항목 | 내용 |
|---|---|
| Given | 노트가 20개 이상일 때 |
| When | 스크롤을 끝까지 내리면 |
| Then | 다음 페이지 노트가 로드된다 |
AC-07: 빈 상태
| 항목 | 내용 |
|---|---|
| Given | 노트가 없을 때 |
| When | 타임라인 뷰에 진입하면 |
| Then | 빈 상태 일러스트와 "첫 메모를 작성해보세요" 안내가 표시된다 |
태스크 분해
Task 1: 타임라인 페이지 구조 AC-01
- [ ] 1.1: 업무노트 메뉴 및 라우트 추가
- [ ] 1.2: 타임라인 페이지 레이아웃 구현
- [ ] 1.3: 날짜별 그룹핑 로직
Task 2: 필터 컴포넌트 AC-02
- [ ] 2.1: 필터 탭 컴포넌트 구현 (전체/캠페인별/효과추적중)
- [ ] 2.2: 캠페인 선택 드롭다운
- [ ] 2.3: 필터 상태에 따른 API 호출
Task 3: 노트 카드 컴포넌트 AC-03, AC-04, AC-05
- [ ] 3.1: WorkNoteCard 베이스 컴포넌트
- [ ] 3.2: 조언 적용 타입 카드 (beforeValue → afterValue)
- [ ] 3.3: 효과 확인 완료 카드 (Before/After 테이블)
- [ ] 3.4: 일반 메모 카드
- [ ] 3.5: 효과 추적 상태 배지 (⏳ D+N / ✨ 완료)
Task 4: 리스트 기능 AC-06, AC-07
- [ ] 4.1: 무한 스크롤 구현 (Intersection Observer)
- [ ] 4.2: 로딩 스켈레톤
- [ ] 4.3: 빈 상태 컴포넌트
Task 5: 수정 기능
- [ ] 5.1: [수정] 버튼 클릭 시 모달 열기
- [ ] 5.2: 수정 저장 후 목록 갱신
Dev Notes
아키텍처 패턴
| 항목 | 내용 |
|---|---|
| 사용할 패턴 | React Query + Infinite Scroll |
| 참고 구현 | 기존 리스트 페이지 참고 |
| 피해야 할 것 | 전체 데이터 한번에 로드, 불필요한 리렌더링 |
영향 받는 소스 트리
src/
├── pages/
│ └── work-notes/
│ └── index.tsx # 🆕 신규 생성
├── components/
│ └── WorkNote/
│ ├── TimelineView.tsx # 🆕 신규 생성
│ ├── WorkNoteCard.tsx # 🆕 신규 생성
│ ├── WorkNoteFilter.tsx # 🆕 신규 생성
│ ├── EffectCompareTable.tsx # 🆕 신규 생성
│ └── EmptyState.tsx # 🆕 신규 생성
├── hooks/
│ └── useWorkNotes.ts # 🆕 신규 생성 (infinite query)
└── navigation/
└── menu.ts # 수정: 업무노트 메뉴 추가의존성
- E-10-S-01: WorkNote 조회 API 필요
이벤트 로깅
| 이벤트명 | 트리거 | 파라미터 | GA4 여부 |
|---|---|---|---|
view_timeline | 타임라인 뷰 진입 | - | ✅ |
filter_work_notes | 필터 변경 | {filterType} | ✅ |
view_effect_result | 효과 결과 카드 노출 | {effectResult} | ✅ |
생성일: 2026-01-21