Story: "적용했어요" 버튼 및 입력 모달

메타

항목	값
Story ID	E-10-S-02
Epic	E-10 업무노트
상태	draft
우선순위	P0
규모	M
담당 개발자	수민 (FE)

---

사용자 스토리

As a Surface Layer 조언을 받은 셀러,
I want "적용했어요" 버튼을 클릭해서 조언 적용 내용을 기록하고 싶다,
So that 나중에 무엇을 바꿨는지 확인하고 효과를 추적할 수 있다.

---

수락 기준 (Acceptance Criteria)

AC-01: "적용했어요" 버튼 표시

항목	내용
Given	Surface Layer 조언 카드가 표시된 상태에서
When	조언 카드 하단을 보면
Then	[✓ 적용했어요] [나중에] [이 조언 숨기기] 버튼이 표시된다

┌─────────────────────────────────────────────────────────────┐
│ 💡 비검색 광고비가 높아요                                    │
│                                                             │
│ 현재 비검색 입찰가: 200원                                   │
│ 권장 비검색 입찰가: 100~120원                               │
│                                                             │
│ [쿠팡 광고센터에서 조정하기 →]                              │
│                                                             │
│ ─────────────────────────────────────────────────────────── │
│ [✓ 적용했어요]  [나중에]  [이 조언 숨기기]                  │
└─────────────────────────────────────────────────────────────┘

AC-02: 입력 모달 표시

항목	내용
Given	[✓ 적용했어요] 버튼을 클릭하면
When	모달이 열리면
Then	변경 전/후 값, 메모, 알림 설정을 입력할 수 있다

┌─────────────────────────────────────────────────────────────┐
│ 📝 적용 내용 기록                                            │
│                                                             │
│ 캠페인: 봄 신상품                                           │
│ 조언: 비검색 입찰가 낮추기                                  │
│                                                             │
│ 어떻게 변경하셨나요?                                        │
│                                                             │
│ 변경 전: [200원        ]  (프리필)                          │
│ 변경 후: [             ]  (필수 입력)                       │
│                                                             │
│ 메모 (선택):                                                │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │                                                         │ │
│ └─────────────────────────────────────────────────────────┘ │
│                                                             │
│ ☑ 7일 후 효과 확인 알림 받기                                │
│                                                             │
│                              [취소]  [기록하기]             │
└─────────────────────────────────────────────────────────────┘

AC-03: 변경 전 값 프리필

항목	내용
Given	조언에 현재 값 정보가 있을 때
When	모달이 열리면
Then	"변경 전" 필드에 현재 값이 자동 입력된다

AC-04: 기록 저장

항목	내용
Given	필수 입력(변경 후 값)을 완료하고
When	[기록하기] 버튼을 클릭하면
Then	API 호출로 노트가 저장되고 성공 토스트가 표시된다

AC-05: 저장 완료 후 UI 변경

항목	내용
Given	노트 저장이 완료되면
When	조언 카드를 다시 보면
Then	[✓ 적용했어요] 버튼이 [✓ 기록됨] 상태로 변경된다

---

태스크 분해

Task 1: 버튼 영역 추가 AC-01

• [ ] 1.1: Surface Layer 조언 카드 컴포넌트에 버튼 영역 추가
• [ ] 1.2: [✓ 적용했어요] 버튼 스타일링
• [ ] 1.3: [나중에], [이 조언 숨기기] 버튼 추가

Task 2: 입력 모달 컴포넌트 AC-02, AC-03

• [ ] 2.1: WorkNoteModal 컴포넌트 생성
• [ ] 2.2: 변경 전/후 입력 필드 구현
• [ ] 2.3: 메모 텍스트영역 구현
• [ ] 2.4: 효과 추적 알림 체크박스 구현
• [ ] 2.5: 조언 정보 기반 프리필 로직

Task 3: 저장 로직 AC-04

• [ ] 3.1: POST /api/work-notes API 연동
• [ ] 3.2: 로딩 상태 처리
• [ ] 3.3: 성공/실패 토스트 메시지

Task 4: 저장 후 상태 변경 AC-05

• [ ] 4.1: 조언별 기록 상태 관리
• [ ] 4.2: [✓ 기록됨] 상태 UI 변경
• [ ] 4.3: 기록된 노트 빠른 확인 링크

---

Dev Notes

아키텍처 패턴

항목	내용
사용할 패턴	React Modal, Form State
참고 구현	기존 설정 모달 참고
피해야 할 것	모달 중첩, 불필요한 리렌더링

영향 받는 소스 트리

src/
├── components/
│   ├── SurfaceLayer/
│   │   ├── AdviceCard.tsx        # 수정: 버튼 영역 추가
│   │   └── AdviceActionButtons.tsx # 🆕 신규 생성
│   └── WorkNote/
│       ├── WorkNoteModal.tsx     # 🆕 신규 생성
│       └── WorkNoteForm.tsx      # 🆕 신규 생성
├── hooks/
│   └── useWorkNote.ts            # 🆕 신규 생성
└── api/
    └── workNotes.ts              # 🆕 신규 생성

의존성

• E-10-S-01: WorkNote API 필요
• E-03: Surface Layer 조언 카드 컴포넌트

충돌 감지

항목	상태	설명
기존 코드 충돌	⚠️ 주의	AdviceCard 컴포넌트 수정 필요
API 계약 변경	✅ 없음	-
DB 스키마 변경	✅ 없음	-
환경 변수 변경	✅ 없음	-

---

이벤트 로깅

이벤트명	트리거	파라미터	GA4 여부
click_advice_applied	"적용했어요" 버튼 클릭	{adviceType, campaignId}	✅
open_work_note_modal	모달 열림	{adviceType}	✅
submit_work_note	기록하기 클릭	{noteType: 'advice_applied'}	✅

---

생성일: 2026-01-21