테마
Story: 직접 메모 작성 기능
메타
| 항목 | 값 |
|---|---|
| Story ID | E-10-S-04 |
| Epic | E-10 업무노트 |
| 상태 | draft |
| 우선순위 | P0 |
| 규모 | S |
| 담당 개발자 | 수민 (FE) |
사용자 스토리
As a 조언 외에도 기록하고 싶은 게 있는 셀러,
I want 직접 메모를 작성하고 캠페인/키워드에 연결하고 싶다,
So that 광고 운영 관련 모든 내용을 한 곳에서 관리할 수 있다.
수락 기준 (Acceptance Criteria)
AC-01: 메모 추가 버튼
| 항목 | 내용 |
|---|---|
| Given | 타임라인 뷰 또는 캠페인 카드에서 |
| When | [+ 메모 추가] 버튼이 보이면 |
| Then | 클릭 시 메모 작성 모달이 열린다 |
AC-02: 메모 작성 모달
| 항목 | 내용 |
|---|---|
| Given | 메모 작성 모달이 열리면 |
| When | 폼을 작성할 때 |
| Then | 연결 대상(전체/캠페인/키워드), 메모 내용, 효과 추적 여부를 입력할 수 있다 |
┌─────────────────────────────────────────────────────────────────┐
│ 📝 업무 메모 작성 │
│ │
│ 연결 대상: │
│ ○ 전체 (일반 메모) │
│ ● 캠페인 선택 [봄 신상품 ▼] │
│ ○ 키워드 선택 [선택하기... ▼] │
│ │
│ 메모 내용: * │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ 경쟁사 A가 같은 키워드로 입찰가 올림. │ │
│ │ 당분간 이 키워드 입찰가 유지하고 다른 키워드 테스트 예정 │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ ☐ 7일 후 효과 확인 (선택 시 전/후 지표 비교) │
│ │
│ [취소] [저장] │
└─────────────────────────────────────────────────────────────────┘AC-03: 캠페인/키워드 선택
| 항목 | 내용 |
|---|---|
| Given | 연결 대상을 "캠페인 선택" 또는 "키워드 선택"으로 선택하면 |
| When | 드롭다운을 클릭하면 |
| Then | 사용자의 캠페인/키워드 목록이 검색 가능한 형태로 표시된다 |
AC-04: 메모 저장
| 항목 | 내용 |
|---|---|
| Given | 메모 내용(필수)을 입력하고 |
| When | [저장] 버튼을 클릭하면 |
| Then | API 호출로 노트가 저장되고 타임라인에 즉시 반영된다 |
AC-05: 캠페인 카드에서 바로 작성
| 항목 | 내용 |
|---|---|
| Given | 캠페인 카드의 [메모 추가] 버튼을 클릭하면 |
| When | 모달이 열릴 때 |
| Then | 해당 캠페인이 자동 선택되어 있다 |
태스크 분해
Task 1: 메모 추가 버튼 AC-01
- [ ] 1.1: 타임라인 뷰 헤더에 [+ 메모 추가] 버튼 추가
- [ ] 1.2: 캠페인 카드에 [메모 추가] 버튼 추가
Task 2: 메모 작성 모달 AC-02, AC-03
- [ ] 2.1: ManualNoteModal 컴포넌트 생성
- [ ] 2.2: 연결 대상 라디오 버튼 구현
- [ ] 2.3: 캠페인/키워드 검색 가능 드롭다운
- [ ] 2.4: 메모 텍스트영역 (필수 validation)
- [ ] 2.5: 효과 추적 체크박스
Task 3: 저장 및 연동 AC-04, AC-05
- [ ] 3.1: POST /api/work-notes API 연동 (noteType: 'manual')
- [ ] 3.2: 저장 후 타임라인 목록 갱신
- [ ] 3.3: 캠페인 카드에서 호출 시 자동 선택 로직
Dev Notes
아키텍처 패턴
| 항목 | 내용 |
|---|---|
| 사용할 패턴 | React Form + Searchable Dropdown |
| 참고 구현 | E-10-S-02 WorkNoteModal 재사용/확장 |
| 피해야 할 것 | 캠페인 목록 전체 로드 (검색 시 API 호출) |
영향 받는 소스 트리
src/
├── components/
│ └── WorkNote/
│ ├── ManualNoteModal.tsx # 🆕 신규 생성
│ └── TargetSelector.tsx # 🆕 신규 생성 (캠페인/키워드 선택)
└── api/
└── campaigns.ts # 검색 API 사용 (기존)의존성
- E-10-S-01: WorkNote API
- E-10-S-03: 타임라인 뷰 (목록 갱신)
이벤트 로깅
| 이벤트명 | 트리거 | 파라미터 | GA4 여부 |
|---|---|---|---|
open_manual_note_modal | 모달 열림 | `{source: 'timeline' | 'campaign_card'}` |
create_manual_note | 저장 완료 | {targetType, hasEffectTracking} | ✅ |
생성일: 2026-01-21