테마
Story: E-12-S-03 정렬/페이지네이션 기능
메타
| 항목 | 값 |
|---|---|
| Story ID | E-12-S-03 |
| Epic | E-12 Keyword Analysis |
| 상태 | backlog |
| 우선순위 | P0 |
| 규모 | S (1pt) |
| 담당 | FE (수민) |
| 의존성 | E-12-S-02 (테이블 UI) |
사용자 스토리
As a 키워드 분석을 하는 셀러, I want 키워드 목록을 순이익/광고비/ROAS 등으로 정렬하고 페이지를 넘기며 확인, So that 검토가 필요한 키워드를 빠르게 찾을 수 있다.
수락 기준 (Acceptance Criteria)
AC-01: 기본 정렬 (순이익 낮은순)
| 항목 | 내용 |
|---|---|
| Given | 키워드 탭에 처음 진입 |
| When | 테이블 로드 |
| Then | 순이익 낮은순으로 정렬되어 표시 (검토 필요한 키워드부터) |
AC-02: 정렬 옵션 변경
| 항목 | 내용 |
|---|---|
| Given | 키워드 테이블이 표시된 상태 |
| When | 정렬 드롭다운에서 옵션 선택 (순이익/광고비/ROAS/노출수/클릭수) |
| Then | 선택한 기준으로 테이블 재정렬 + 현재 정렬 기준 표시 |
AC-03: 오름차순/내림차순 토글
| 항목 | 내용 |
|---|---|
| Given | 특정 정렬 기준이 선택된 상태 |
| When | 같은 컬럼 헤더 클릭 또는 토글 버튼 클릭 |
| Then | 오름차순 ↔ 내림차순 전환 |
AC-04: 페이지네이션
| 항목 | 내용 |
|---|---|
| Given | 키워드 수가 페이지 크기보다 많음 (예: 50개 키워드, 페이지 크기 10) |
| When | 페이지 버튼 클릭 (1, 2, 3... 또는 ◀ ▶) |
| Then | 해당 페이지 데이터 로드 + 현재 페이지 표시 |
AC-05: 페이지 크기 변경
| 항목 | 내용 |
|---|---|
| Given | 페이지네이션 영역 |
| When | 페이지 크기 선택 (10/20/50/100) |
| Then | 선택한 크기로 테이블 갱신 + 1페이지로 이동 |
AC-06: 정렬 상태 유지
| 항목 | 내용 |
|---|---|
| Given | 특정 정렬 기준이 적용된 상태 |
| When | 기간 필터 변경 또는 새로고침 |
| Then | 정렬 기준 유지 (URL 파라미터 또는 상태 관리) |
태스크 분해
Task 1: 정렬 드롭다운 UI AC-01, AC-02
- [ ] 1.1: 정렬 드롭다운 컴포넌트 추가
- [ ] 1.2: 정렬 옵션 목록 (순이익, 광고비, ROAS, 노출수, 클릭수)
- [ ] 1.3: 기본값: 순이익 낮은순
Task 2: 정렬 로직 연동 AC-02, AC-03
- [ ] 2.1: 정렬 변경 시 API 재호출 (sortBy, sortOrder 파라미터)
- [ ] 2.2: 컬럼 헤더 클릭 시 토글 (AG-Grid 내장 기능 활용)
- [ ] 2.3: 현재 정렬 기준 시각적 표시 (▲▼ 아이콘)
Task 3: 페이지네이션 UI AC-04, AC-05
- [ ] 3.1: 페이지네이션 컴포넌트 (기존 컴포넌트 재사용)
- [ ] 3.2: 페이지 크기 선택 (10/20/50/100)
- [ ] 3.3: 총 키워드 수 표시 ("총 123개")
Task 4: 상태 관리 AC-06
- [ ] 4.1: URL 파라미터로 정렬/페이지 상태 저장 (선택적)
- [ ] 4.2: 기간 필터 변경 시 정렬 유지, 페이지는 1로 초기화
Dev Notes
정렬 옵션
| 옵션 | sortBy | 기본 방향 | 설명 |
|---|---|---|---|
| 순이익 낮은순 | netProfit | asc | 기본값 - 검토 필요한 키워드부터 |
| 광고비 높은순 | adCost | desc | 비용 기여 큰 키워드부터 |
| ROAS 낮은순 | roas | asc | 효율 낮은 키워드부터 |
| 노출수 높은순 | impressions | desc | 노출 많은 키워드부터 |
| 클릭수 높은순 | clicks | desc | 클릭 많은 키워드부터 |
참고 구현
| 항목 | 경로 |
|---|---|
| 기존 정렬 UI | AdsAnalysis/components/SearchArea.tsx |
| 페이지네이션 | AdsAnalysis/components/CampaignTable.tsx |
충돌 감지
| 항목 | 상태 | 설명 |
|---|---|---|
| 기존 코드 충돌 | ✅ 없음 | 새 컴포넌트 확장 |
References
| 출처 | 경로/링크 | 참조 섹션 |
|---|---|---|
| Epic Spec | epic-specs/E-12-keyword-analysis.md | 로직 3: 정렬 옵션 |
핸드오프 전 체크리스트
- [x] 사용자 스토리가 명확한가?
- [x] 수락 기준이 Given-When-Then 형식인가?
- [x] 의존성 명시되었는가? (E-12-S-02)
검증 결과: ✅ PASS 검증일: 2026-01-28
생성일: 2026-01-28생성자: 📋 Penny