Story: 모바일 반응형 UI

메타

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

---

사용자 스토리

As a 모바일로 접속하는 셀러,
I want 모바일에서도 Deep Layer를 편하게 보고 싶다,
So that 이동 중에도 광고 성과를 확인할 수 있다.

---

수락 기준 (Acceptance Criteria)

AC-01: 캠페인 목록 반응형

항목	내용
Given	모바일 화면(≤768px)에서
When	캠페인 목록을 볼 때
Then	테이블 대신 카드 리스트 형태로 표시된다

AC-02: 캠페인 상세 반응형

항목	내용
Given	모바일 화면에서
When	캠페인 상세를 볼 때
Then	검색/비검색 비교 테이블이 세로 스크롤 가능한 형태로 변환된다

AC-03: 필터/정렬 UI 반응형

항목	내용
Given	모바일 화면에서
When	기간 필터나 정렬 옵션을 사용할 때
Then	터치 친화적인 UI로 표시된다

---

태스크 분해

Task 1: 캠페인 목록 반응형 AC-01

• [ ] 1.1: 모바일용 캠페인 카드 컴포넌트
• [ ] 1.2: 테이블 → 카드 전환 로직 (768px 기준)
• [ ] 1.3: 카드에 핵심 지표 표시 (ROAS, 광고비, 순이익)

Task 2: 캠페인 상세 반응형 AC-02

• [ ] 2.1: 검색/비검색 탭 → 아코디언 또는 스와이프
• [ ] 2.2: 비교 테이블 가로 스크롤 처리
• [ ] 2.3: 주요 지표 상단 고정

Task 3: 필터/정렬 UI AC-03

• [ ] 3.1: 기간 필터 바텀시트 또는 풀스크린 모달
• [ ] 3.2: 정렬 옵션 바텀시트
• [ ] 3.3: 터치 영역 최소 44px 보장

Task 4: 테스트

• [ ] 4.1: iOS Safari 테스트
• [ ] 4.2: Android Chrome 테스트
• [ ] 4.3: 태블릿 대응

---

브레이크포인트

디바이스	너비	레이아웃
모바일	≤768px	카드 리스트, 세로 스크롤
태블릿	769-1024px	축소된 테이블, 일부 컬럼 숨김
데스크톱	≥1025px	전체 테이블

---

모바일 UI 명세

캠페인 카드 (모바일)

┌─────────────────────────────────────┐
│ 봄 신상품 캠페인                      │
│                                      │
│ ROAS          광고비        순이익    │
│ 520%         ₩234,567    +₩85,000   │
│                                      │
│                    [상세 보기 →]      │
└─────────────────────────────────────┘

검색/비검색 비교 (모바일)

┌─────────────────────────────────────┐
│ [🔍 검색] [📺 비검색]                 │ ← 탭 전환
├─────────────────────────────────────┤
│ 🔍 검색 광고                          │
│                                      │
│ ROAS: 520%     CTR: 0.8%            │
│ 광고비: ₩150,000                      │
│ 순이익: +₩45,000                      │
│                                      │
│ ────────────────────────────────    │
│ [📈 추이 보기]                        │
└─────────────────────────────────────┘

---

이벤트 로깅

이벤트명	트리거	파라미터
view_ad_dashboard	진입 시	{device: 'mobile'/'tablet'/'desktop'}

---

Dev Notes

기술 스택

• CSS Grid / Flexbox 기반 반응형
• CSS Media Queries
• 모바일 퍼스트 접근

의존성

• E-02-S-01: GNB 메뉴 구조 변경
• E-02-S-03: 캠페인 상세 검색/비검색 탭 UI

---

변경 이력

날짜	변경 내용
2026-01-26	스토리 생성

---

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