장사왕 스프린트 대시보드

테마

Story: E-12-S-02 키워드 테이블 UI 구현 ​

메타 ​

항목값
Story IDE-12-S-02
EpicE-12 Keyword Analysis
상태backlog
우선순위P0
규모M (2pt)
담당FE (수민)
의존성E-12-S-01 (API)

사용자 스토리 ​

As a 숫자 보는 게 익숙한 셀러, I want 키워드별 성과를 테이블 형태로 확인, So that 어떤 키워드가 검토가 필요한지 한눈에 파악할 수 있다.

수락 기준 (Acceptance Criteria) ​

AC-01: 키워드 탭 진입 및 테이블 표시 ​

항목내용
Given셀러가 캠페인 상세 페이지에 있음
When"키워드" 탭 클릭
Then키워드 목록 테이블이 표시됨 (기본 정렬: 순이익 낮은순)

AC-02: 로컬 탭 구조 ​

항목내용
Given키워드 탭에 진입
When화면 로드
Then[전체 키워드] / [제외 키워드] 로컬 탭 표시, 기본값: 전체 키워드

AC-03: 핵심 컬럼 표시 ​

항목내용
Given키워드 테이블이 로드됨
When테이블 렌더링
Then다음 컬럼 표시: 체크박스, 키워드, 상태(제외 뱃지), 광고비, 광고비%, 순이익, 순이익%, ROAS, CPC, 전환율, 주문, 노출수, 클릭수, 판매량

AC-04: 제외 뱃지 표시 ​

항목내용
Given키워드가 제외키워드로 등록되어 있음 (isExcluded = true)
When전체 키워드 탭에서 테이블 렌더링
Then해당 키워드 행에 "제외" 뱃지 표시

AC-05: 순이익 색상 강조 ​

항목내용
Given키워드별 순이익 데이터가 있음
When테이블 렌더링
Then순이익 양수 = 파랑(#0055d4), 음수 = 빨강(#fc4747)

AC-06: 원가 미입력 시 표시 ​

항목내용
Given셀러가 원가를 입력하지 않음 (purchaseYn = 'N')
When테이블 렌더링
Then순이익 컬럼에 "-" 표시 + 원가 입력 유도 안내

AC-07: 데이터 없음 처리 ​

항목내용
Given비검색 광고만 운영 (키워드 없음) 또는 기간 내 데이터 없음
When키워드 탭 진입
Then"등록된 키워드가 없습니다" 또는 "선택한 기간에 키워드 데이터가 없습니다" 안내

AC-08: 숫자 포맷팅 ​

항목내용
Given키워드 데이터가 로드됨
When테이블 렌더링
Then금액: 천 단위 콤마 (1,234원), 비율: 소수점 2자리 (12.34%), CPC/ROAS: 정수

태스크 분해 ​

Task 1: Keywords 컴포넌트 구조 생성 AC-01, AC-02 ​

  • [ ] 1.1: AdsCampaign/Keywords/index.tsx 생성
  • [ ] 1.2: AdsCampaign/Keywords/KeywordsTable.tsx 생성
  • [ ] 1.3: 로컬 탭 구조 구현 (전체 키워드 / 제외 키워드)
  • [ ] 1.4: 탭 연결 (기존 stub 대체)

Task 2: API 연동 AC-01 ​

  • [ ] 2.1: useKeywordList 훅 생성
  • [ ] 2.2: API 호출 및 데이터 매핑
  • [ ] 2.3: 로딩 상태 처리

Task 3: 테이블 UI 구현 AC-03, AC-04, AC-05, AC-08 ​

  • [ ] 3.1: AG-Grid 테이블 컬럼 정의 (14개 컬럼: 체크박스+상태 추가)
  • [ ] 3.2: 체크박스 컬럼 (멀티셀렉트용)
  • [ ] 3.3: 제외 뱃지 셀 렌더러 (isExcluded = true 시 표시)
  • [ ] 3.4: 순이익 셀 렌더러 (색상 조건부 스타일링)
  • [ ] 3.5: 숫자 포맷터 (금액, 비율)
  • [ ] 3.6: 컬럼 너비 및 정렬 설정

Task 4: 예외 처리 UI AC-06, AC-07 ​

  • [ ] 4.1: 원가 미입력 시 안내 UI (순이익 "-" + 툴팁)
  • [ ] 4.2: 데이터 없음 시 Empty State 컴포넌트

Task 5: 마무리 ​

  • [ ] 5.1: 코드 정리
  • [ ] 5.2: PR 생성

Dev Notes ​

영향 받는 소스 트리 ​

frontend/src/pages/AdsCampaign/
├── index.tsx                    # 탭 연결 수정
├── Keywords/                    # 🆕 신규 생성
│   ├── index.tsx               # 컨테이너
│   ├── KeywordsTable.tsx       # 테이블 UI
│   ├── useKeywordList.ts       # API 훅
│   └── types.ts                # 타입 정의

참고 구현 ​

항목경로설명
캠페인 테이블AdsAnalysis/components/CampaignTable.tsxAG-Grid 사용 패턴
순이익 색상AdsAnalysis/components/SummaryCards.tsx조건부 색상 스타일
숫자 포맷터AdsAnalysis/utils/currencyFormatters.ts천 단위 콤마

컬럼 정의 ​

컬럼필드너비정렬특이사항
☑(체크박스)40pxcenter멀티셀렉트용
키워드keyword150pxleft굵게
상태isExcluded60pxcenter"제외" 뱃지 (true일 때만)
광고비adCost100pxright원 단위
광고비%adCostRatio80pxright%
순이익netProfit120pxright색상 강조
순이익%netProfitRatio80pxright%
ROASroas80pxright%
CPCcpc80pxright원
전환율cvr80pxright%
주문orders70pxright-
노출수impressions90pxright-
클릭수clicks80pxright-
판매량quantity80pxright-

색상 시스템 ​

조건배경색텍스트색
순이익 > 0#eefbff#0055d4 (파랑)
순이익 < 0#fff4f1#fc4747 (빨강)
순이익 = null-#999 (회색) + "-"

충돌 감지 ​

항목상태설명
기존 코드 충돌✅ 없음Keywords 폴더는 stub만 있음
탭 연결⚠️ 주의index.tsx의 Tab 컴포넌트 수정 필요

References ​

출처경로/링크참조 섹션
Epic Specepic-specs/E-12-keyword-analysis.mdHOW: 플로우 & 화면
디자인~/Downloads/deep-layer-keyword-tab.png전체
광고분석 화면 구조.context/global/ads-analysis-screen.md컴포넌트 구조

핸드오프 전 체크리스트 ​

문맥 & 요구사항 ​

  • [x] 사용자 스토리가 명확한가?
  • [x] 수락 기준이 Given-When-Then 형식인가?
  • [x] 모든 엣지 케이스가 정의되었는가?

재해 예방 ​

  • [x] 기존 코드에 유사 기능 확인했는가?
  • [x] 충돌 감지 항목 확인 (⚠️ 탭 연결 주의)

AI Agent 최적화 ​

  • [x] Dev Notes가 충분히 상세한가?
  • [x] References가 정확한가?
  • [x] 태스크 분해가 구체적인가?

최종 점검 ​

  • [x] 의존성 명시되었는가? (E-12-S-01)

검증 결과: ✅ PASS 검증일: 2026-01-28

생성일: 2026-01-28생성자: 📋 Penny

장사왕 Product Team

© 2026 장사왕