Story: 기간 필터 기능

메타

항목	값
Story ID	E-02-S-04
Epic	E-02 Deep Layer
상태	ready-for-dev
우선순위	P1
규모	S
담당 개발자	수민 (FE)

---

사용자 스토리

As a 중수 셀러,
I want 광고 분석 기간을 직접 선택하고 싶다,
So that 추이 분석이나 특정 기간 성과를 확인할 수 있다.

---

수락 기준 (Acceptance Criteria)

AC-01: 기간 드롭다운

항목	내용
Given	Deep Layer 페이지에 있을 때
When	기간 드롭다운을 클릭하면
Then	7일/14일/30일/커스텀 옵션이 표시된다

AC-02: 프리셋 선택

항목	내용
Given	기간 드롭다운에서 "최근 14일"을 선택했을 때
When	선택이 완료되면
Then	최근 14일 데이터로 화면이 갱신된다

AC-03: 커스텀 기간 선택

항목	내용
Given	"커스텀"을 선택했을 때
When	날짜 범위 선택 UI가 표시되면
Then	시작일/종료일을 직접 선택할 수 있다

---

태스크 분해

Task 1: 기간 드롭다운 컴포넌트 AC-01

• [ ] 1.1: 드롭다운 UI 컴포넌트 구현 (7일/14일/30일/커스텀)
• [ ] 1.2: 현재 선택된 기간 표시 (ex: "최근 7일")
• [ ] 1.3: 드롭다운 열림/닫힘 애니메이션

Task 2: 프리셋 기간 선택 AC-02

• [ ] 2.1: 프리셋 선택 시 API 재호출 (debounce 적용)
• [ ] 2.2: 로딩 상태 표시 (스켈레톤 UI)
• [ ] 2.3: 선택 결과 URL 파라미터 동기화 (?period=14d)

Task 3: 커스텀 날짜 선택 AC-03

• [ ] 3.1: Date Range Picker 모달 UI
• [ ] 3.2: 시작일/종료일 선택 로직
• [ ] 3.3: 최대 90일 제한 + 경고 메시지
• [ ] 3.4: 오늘 이후 날짜 선택 불가 처리

Task 4: 기간 필터 상태 관리

• [ ] 4.1: 페이지 새로고침 시 기간 유지 (URL 파라미터)
• [ ] 4.2: Deep Layer 진입 시 기간 초기값 설정 (기본 7일)
• [ ] 4.3: GA4 이벤트 전송 (change_period_filter)

---

이벤트 로깅

이벤트명	트리거	파라미터
change_period_filter	기간 변경	{period: '7'/'14'/'30'/'custom'}

---

Dev Notes

기간 옵션

• 7d: 최근 7일 (기본값)
• 14d: 최근 14일
• 30d: 최근 30일
• custom: 사용자 지정 (최대 90일)

의존성

• 기존 Deep Layer API (/campaigns 등)에 period 파라미터 추가 필요

---

변경 이력

날짜	변경 내용
2026-01-20	스토리 생성
2026-01-26	태스크 세분화 (2개→4개), URL 파라미터 동기화 추가

---

생성일: 2026-01-20
최종 수정: 2026-01-26