Story: 셀러 연동 가이드 UI

메타

항목	값
Story ID	E-05-S-07
Epic	E-05 연동 자동화
상태	ready-for-dev
우선순위	P0
규모	L
담당 개발자	수민 (FE)

---

사용자 스토리

As a 셀러,
I want 단계별 가이드를 따라 혼자서 연동을 완료하고 싶다,
So that 전화 없이 편리하게 연동할 수 있다.

---

수락 기준 (Acceptance Criteria)

AC-01: 정보 입력 화면

항목	내용
Given	연동 페이지에 진입했을 때
When	첫 화면이 표시되면
Then	쿠팡에 입력할 정보(아이디, 전화번호, 이메일)가 복사 가능하게 표시된다

AC-02: SMS 인증 준비 화면

항목	내용
Given	정보 입력 단계 완료 후
When	"다음" 버튼을 클릭하면
Then	"인증번호 받을 준비 완료" 버튼이 표시된다

AC-03: Lock 대기 화면

항목	내용
Given	"준비 완료" 버튼 클릭 후 다른 셀러가 Lock 중일 때
When	대기 상태가 되면
Then	예상 대기 시간과 프로그레스 바가 표시된다

AC-04: SMS 인증번호 표시 화면

항목	내용
Given	Lock을 획득하고 SMS가 수신되었을 때
When	인증번호가 도착하면
Then	큰 폰트로 인증번호와 복사 버튼이 표시된다

AC-05: 연동 완료 화면

항목	내용
Given	모든 인증이 완료되었을 때
When	연동 완료 상태가 되면
Then	성공 메시지와 대시보드 이동 버튼이 표시된다

AC-06: 스텝 인디케이터

항목	내용
Given	연동 페이지에 있을 때
When	모든 화면에서
Then	현재 진행 단계가 시각적으로 표시된다

---

태스크 분해

Task 1: 페이지 구조 AC-06

• [ ] 1.1: /integration/coupang 라우트 생성
• [ ] 1.2: 스텝 인디케이터 컴포넌트
• [ ] 1.3: WebSocket 연결 훅 연동

Task 2: 정보 입력 화면 AC-01

• [ ] 2.1: 장사왕 정보 표시 (아이디, 전화번호, 이메일)
• [ ] 2.2: 복사 버튼 기능
• [ ] 2.3: "다음" 버튼

Task 3: SMS 인증 화면 AC-02, AC-03, AC-04

• [ ] 3.1: "준비 완료" 버튼 + Lock 요청
• [ ] 3.2: Lock 대기 UI (프로그레스 바, 예상 시간)
• [ ] 3.3: SMS 대기 UI (타이머, 스피너)
• [ ] 3.4: 인증번호 표시 UI (큰 폰트, 복사)

Task 4: 이메일 인증 화면

• [ ] 4.1: 이메일 대기 UI
• [ ] 4.2: 인증번호 표시 UI

Task 5: 완료 화면 AC-05

• [ ] 5.1: 성공 메시지 + 애니메이션
• [ ] 5.2: 대시보드 이동 버튼

Task 6: GA4 이벤트

• [ ] 6.1: 각 단계 진입/완료 이벤트

---

화면 플로우

1. 정보 입력 → 2. SMS 준비 → 3. SMS 대기/수신
                                    ↓
4. 이메일 대기/수신 → 5. 인증 진행 → 6. 완료

---

이벤트 로깅

이벤트명	트리거	파라미터
integration_page_view	페이지 진입	{step}
integration_info_copied	정보 복사	{field: 'phone'/'email'}
integration_lock_requested	준비 완료 클릭	{session_id}

---

Dev Notes

의존성

• E-05-S-04: 세션 상태 머신
• E-05-S-05: WebSocket 클라이언트

디자인 참고

• 카카오뱅크 계좌 개설 플로우
• 토스 본인인증 플로우

---

생성일: 2026-01-20