테마
Story: 온보딩 팝업 UI 컴포넌트
메타
| 항목 | 값 |
|---|---|
| Story ID | E-11-S-01 |
| Epic | E-11 온보딩 팝업 |
| 상태 | ready-for-dev |
| 우선순위 | P0 |
| 규모 | S |
| 담당 개발자 | 수민 (FE) |
사용자 스토리
As a 신규 가입 셀러,
I want 가입 직후 연동 안내 팝업을 보고 싶다,
So that 다음에 뭘 해야 하는지 명확히 알 수 있다.
수락 기준 (Acceptance Criteria)
AC-01: 팝업 UI 렌더링
| 항목 | 내용 |
|---|---|
| Given | 온보딩 팝업이 노출되어야 할 때 |
| When | 팝업 컴포넌트가 마운트되면 |
| Then | 디자인 시안대로 팝업이 렌더링된다 |
[필수 UI 요소]
• 헤더 카피: "쇼핑몰을 연동하면 내 순이익을 바로 확인할 수 있어요"
• Primary CTA: "연동하기" 버튼 (브랜드 컬러)
• Secondary: "나중에 할게요" 텍스트 링크
• 배경 딤드 처리
• X 버튼 없음 (필수 선택)AC-02: "연동하기" 버튼 동작
| 항목 | 내용 |
|---|---|
| Given | 팝업이 노출된 상태에서 |
| When | "연동하기" 버튼을 클릭하면 |
| Then | 마켓 연동 플로우(/settings/vendors)로 이동한다 |
AC-03: "나중에" 버튼 동작
| 항목 | 내용 |
|---|---|
| Given | 팝업이 노출된 상태에서 |
| When | "나중에 할게요"를 클릭하면 |
| Then | 팝업이 닫히고 AS-IS 홈화면이 보인다 |
AC-04: 반응형 대응
| 항목 | 내용 |
|---|---|
| Given | 다양한 디바이스에서 |
| When | 팝업이 노출될 때 |
| Then | 모바일/태블릿/데스크톱 모두 정상 렌더링된다 |
태스크 분해
Task 1: 팝업 컴포넌트 개발 AC-01
- [ ] 1.1: OnboardingPopup 컴포넌트 생성
- [ ] 1.2: 디자인 시안 적용 (일러스트, 카피, 버튼)
- [ ] 1.3: 배경 딤드 처리 및 모달 스타일링
Task 2: CTA 버튼 동작 AC-02, AC-03
- [ ] 2.1: "연동하기" 클릭 → /settings/vendors 라우팅
- [ ] 2.2: "나중에" 클릭 → 팝업 close 핸들러
Task 3: 반응형 대응 AC-04
- [ ] 3.1: 모바일 뷰 스타일링
- [ ] 3.2: 태블릿/데스크톱 뷰 스타일링
Dev Notes
의존성
- 디자인 시안 완료 필요 (봉희 담당)
참고 UI
┌─────────────────────────────────────────────────────────────┐
│ ┌─────────────────────────────────────────────────────┐ │
│ │ [일러스트] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 쇼핑몰을 연동하면 │
│ 내 순이익을 바로 확인할 수 있어요 │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 연동하기 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 나중에 할게요 │
│ │
└─────────────────────────────────────────────────────────────┘생성일: 2026-01-23