toss-journey

name	toss_journey
description	TaillogToss 사용자 여정 — 6개 여정 플로우, 신규 6개+보강 4개 화면 와이어프레임, 상태 전환, 인게이지먼트 훅.

TaillogToss 사용자 여정 와이어프레임

화면 간 전환 흐름(사용자 여정)과 신규 6개 화면 와이어프레임을 정의한다. 개별 화면의 기본 와이어프레임은 /toss_wireframes, TDS 컴포넌트 상세는 /toss_apps 참조.

11. 사용자 여정 와이어프레임 (User Journey Wireframes)

Section 9의 개별 화면 와이어프레임을 보완하여, **화면 간 전환 흐름(사용자 여정)**과 누락 화면 6개를 정의한다.

---

11.0 설계 원칙

1. Hook Model: Trigger → Action → Variable Reward → Investment (매 화면 전환에 적용)
2. Aha Moment < 3분: 설문 완료 → AI 분석 결과까지 138초 (Cold Start 여정 A 기준)
3. Sticky Loop: Quick Log 30초 → 트렌드 뱃지 갱신 (Daily Loop 여정 B 기준)
4. Progressive Disclosure: 무료 티저(Skeleton 블러) → 보상형 광고 1회 잠금 해제 → PRO 전환
5. Toss Native: TDS 전용 컴포넌트, 바텀시트 중심 UX, 키보드 입력 최소화

---

11.1 전체 화면 인벤토리 (19개)

기존 Section 9의 10개 + 신규 6개 화면 + 재사용 컴포넌트 2개 + PRO 업셀 바텀시트 1개.

#	화면	파일 경로	레이아웃 패턴	신규/기존
1	login	src/pages/login.tsx	Standalone	기존 9-1
2	welcome	src/pages/onboarding/welcome.tsx	B (상세형)	NEW
3	survey	src/pages/onboarding/survey.tsx	C (입력폼형)	기존 9-2
4	survey-result	src/pages/onboarding/survey-result.tsx	B (상세형)	NEW
5	dashboard	src/pages/dashboard/index.tsx	D+A (탭+목록)	기존 9-3 보강
6	quick-log	src/pages/dashboard/quick-log.tsx	E (모달형)	기존 9-4 보강
7	analysis	src/pages/dashboard/analysis.tsx	D (탭형)	기존 9-5
8	coaching-result	src/pages/coaching/result.tsx	B (상세형)	기존 9-6 보강
9	training-academy	src/pages/training/academy.tsx	A 변형 (GridList)	기존 9-7
10	training-detail	src/pages/training/detail.tsx	B (상세형)	NEW
11	dog-profile	src/pages/dog/profile.tsx	C (입력폼형)	기존 9-8
12	dog-switcher	src/pages/dog/switcher.tsx	E (모달형)	NEW
13	dog-add	src/pages/dog/add.tsx	C (입력폼형)	NEW
14	settings	src/pages/settings/index.tsx	A (목록형)	기존 9-9
15	subscription	src/pages/settings/subscription.tsx	B (상세형)	NEW
16	notification	src/pages/onboarding/notification.tsx	B (상세형)	NEW
17	ops-today	src/pages/ops/today.tsx	D+A (탭+목록)	기존 9-10
18	EmptyState	components/EmptyState.tsx	Result 기반	NEW
19	ErrorState	components/ErrorState.tsx	ErrorPage 기반	NEW

---

11.2 여정 플로우 다이어그램 (6개 여정)

여정 요약

여정	대상	핵심 경로	목표 소요시간
A: Cold Start	첫 방문자	login → welcome → survey(7) → survey-result → notification → dashboard	< 3분
B: Daily Loop	기존 사용자	dashboard → quick-log → dashboard(갱신)	< 35초
C: Upgrade	무료 사용자	(트리거) → PRO 업셀 시트 → subscription → Toss IAP → dashboard(PRO)	< 2분
D: Deep-Dive	기록 10건+	dashboard → analysis → coaching-result → training-academy → training-detail	5-10분
E: B2B Ops	트레이너/관리자	subscription(B2B) → role 전환 → dashboard(운영탭) → ops-today → 기록 → 리포트	10-30분
F: Multi-Dog	다견 보호자	dashboard → dog-switcher → 선택/추가 → dashboard(전환)	< 10초

---

Journey A: Cold Start (첫 방문 < 3분)

[Toss 앱]
    │
    ▼
┌─────────┐     ┌──────────┐     ┌──────────────┐     ┌───────────────┐
│  login   │────▶│ welcome  │────▶│ survey (7단계)│────▶│ survey-result │
│ (9-1)    │     │ (11.3-1) │     │ (9-2)        │     │ (11.3-2)      │
│          │     │          │     │              │     │               │
│토스 OAuth │     │단일 카드  │     │이름→품종→나이 │     │AI 요약 + 티저 │
│브릿지     │     │Lottie    │     │→체중→중성화   │     │Skeleton 블러  │
│          │     │"90초 시작"│     │→문제행동→목표 │     │광고/기록 CTA  │
└─────────┘     └──────────┘     └──────────────┘     └───────┬───────┘
                                                              │
                                                              ▼
                                                    ┌───────────────┐
                                                    │ notification  │
                                                    │ (11.3-3)      │
                                                    │               │
                                                    │벨 Lottie      │
                                                    │체크박스 ×3     │
                                                    │"허용"/"나중에" │
                                                    └───────┬───────┘
                                                            │
                                                            ▼
                                                    ┌───────────────┐
                                                    │  dashboard    │
                                                    │  (9-3 보강)    │
                                                    │               │
                                                    │EmptyState     │
                                                    │"첫 기록 남기기"│
                                                    └───────────────┘

핵심 지표: 설문 시작→대시보드 도착 138초 이내 (Aha Moment) 이탈 방지: welcome에서 "90초면 충분해요" 카피, survey에서 ProgressBar로 진행감

---

Journey B: Daily Loop (일상 기록 < 35초)

┌───────────────┐     ┌───────────────────────┐     ┌───────────────┐
│  dashboard    │────▶│      quick-log         │────▶│  dashboard    │
│               │     │   (9-4 보강)            │     │  (갱신)       │
│               │     │                         │     │               │
│"+ 빠른 기록"  │     │ [빠른] [상세] ← 탭      │     │ Toast 확인    │
│BottomCTA 탭   │     │                         │     │ 목록 갱신     │
│               │     │ 빠른: 12칩 원탭 저장     │     │ 스트릭 갱신   │
│               │     │ 상세: ABC 접이식         │     │               │
└───────────────┘     └───────────────────────┘     └───────────────┘
      2초                    최대 30초                     3초

핵심 지표: 빠른 탭 원탭 = 2초, 상세 ABC = 30초 이내 Sticky: 저장 후 "🔥 N일 연속 기록 중!" 스트릭 뱃지 즉시 갱신

---

Journey C: Upgrade (PRO 전환 < 2분)

┌─ 트리거 ──────────────────────────────────────────┐
│                                                    │
│  R1: survey-result → "광고 보고 전체 분석 보기"     │
│  R2: dashboard 코칭 → "광고 보고 코칭 열기"         │
│  R3: coaching-result → "광고 보고 열기"             │
│  C1~C5: 자연 전환 포인트 (Skeleton 블러 노출)      │
│                                                    │
└────────────────┬───────────────────────────────────┘
                 │
                 ▼
        ┌─ useBottomSheet ─┐     ┌───────────────┐
        │  PRO 업셀 시트    │────▶│ subscription  │
        │                   │     │ (11.3-4)      │
        │ "PRO로 업그레이드" │     │               │
        │ 핵심 혜택 3줄     │     │무료 vs PRO 비교│
        │ [자세히 보기]     │     │월간/토큰팩     │
        └───────────────────┘     │Toss IAP 결제  │
                                  └───────┬───────┘
                                          │ 결제 성공
                                          ▼
                                  ┌───────────────┐
                                  │  dashboard    │
                                  │  (PRO 활성화)  │
                                  │               │
                                  │ Skeleton 해제  │
                                  │ PRO Badge 표시 │
                                  │ 전체 기능 활성 │
                                  └───────────────┘

보상형 광고 퍼널: Skeleton 블러 → TextButton("광고 보고 열기") → 토스 Ads SDK 2.0 Rewarded (토스 SDK 공식 지원 폴백만 허용) → 1회 해제 → "매번 광고 귀찮다 → PRO 구독" 자연 전환 터치포인트: survey-result(R1), dashboard(R2), coaching-result(R3)

---

Journey D: Deep-Dive (심층 분석 5-10분)

┌───────────────┐     ┌───────────────┐     ┌────────────────┐
│  dashboard    │────▶│  analysis     │────▶│coaching-result │
│               │     │  (9-5)        │     │ (9-6 보강)      │
│ [분석] 탭 탭  │     │               │     │                │
│               │     │주간/월간 차트  │     │진단: insight    │
│               │     │행동별 빈도     │     │프로토콜 3단계   │
│               │     │"AI 코칭 보기" │     │dog_voice 말풍선 │
└───────────────┘     └───────────────┘     │7일 훈련 계획    │
                                            │위험 신호/상담   │
                                            └───────┬────────┘
                                                    │
                                                    ▼
                                          ┌──────────────────┐
                                          │training-academy  │
                                          │ (9-7)            │
                                          │                  │
                                          │GridList 커리큘럼  │
                                          │진행률 ProgressBar │
                                          └───────┬──────────┘
                                                  │ 미션 선택
                                                  ▼
                                          ┌──────────────────┐
                                          │training-detail   │
                                          │ (11.3-6)         │
                                          │                  │
                                          │가이드 Asset      │
                                          │체크리스트         │
                                          │메모 + "미션 완료" │
                                          └──────────────────┘

핵심 지표: 분석→코칭→훈련 전환율, 훈련 완료율 PRO 잠금: coaching-result 심층 분석 영역 Skeleton 블러 (무료 유저)

---

Journey E: B2B Ops (트레이너/관리자 10-30분)

┌───────────────┐     ┌─────────────────┐     ┌───────────────┐
│ subscription  │────▶│   role 자동전환   │────▶│  dashboard    │
│ (11.3-4)      │     │                 │     │ (운영 탭 활성) │
│               │     │IAP 결제 완료     │     │               │
│B2B 플랜 선택  │     │verify-iap-order │     │[기록][분석]    │
│트레이너/센터   │     │→ role='trainer' │     │[훈련][운영] ←  │
│               │     │  or 'org_owner' │     │ 4탭 활성화     │
└───────────────┘     └─────────────────┘     └───────┬───────┘
                                                      │ [운영] 탭
                                                      ▼
                                              ┌───────────────┐
                                              │  ops-today    │
                                              │ (9-10 보강)    │
                                              │               │
                                              │[대기][진행][완료]
                                              │반려견 목록     │
                                              │개별/벌크 기록  │
                                              └───────┬───────┘
                                                      │
                                            ┌─────────┴─────────┐
                                            ▼                   ▼
                                   ┌──────────────┐   ┌──────────────┐
                                   │ 개별 기록 모달 │   │ 벌크 모드     │
                                   │              │   │              │
                                   │[프리셋][ABC] │   │다견 선택      │
                                   │프리셋: 원탭   │   │카테고리 일괄  │
                                   │ABC: 다중태그  │   │[일괄 저장]    │
                                   └──────────────┘   └──────────────┘

역할 전환: IAP 결제 → Edge Function verify-iap-order → users.role 자동 변경 센터 플로우: 센터 플랜 결제 → organizations 생성 → 직원 초대(코드/링크) → org_members 등록 구독 만료: role 유지, 기록/리포트 생성 차단, 기존 데이터 열람 30일 유예

---

Journey F: Multi-Dog (다견 전환 < 10초)

┌───────────────┐     ┌─ useBottomSheet ──┐     ┌───────────────┐
│  dashboard    │────▶│  dog-switcher     │────▶│  dashboard    │
│               │     │  (11.3-5)         │     │  (전환 완료)   │
│반려견 카드 탭  │     │                   │     │               │
│또는 헤더 탭   │     │ListRow(반려견 ×N) │     │선택된 반려견   │
│               │     │Badge("선택")      │     │데이터 갱신     │
│               │     │"+ 반려견 추가"    │     │               │
└───────────────┘     └────────┬──────────┘     └───────────────┘
                               │ "+ 반려견 추가" 탭
                               ▼
                      ┌───────────────┐
                      │   dog-add     │
                      │  (11.1 #13)   │
                      │               │
                      │survey 축소판  │
                      │이름+품종+나이  │
                      │→ 저장 → 전환  │
                      └───────────────┘

핵심 UX: 바텀시트로 즉시 전환, 추가 시 survey 축소판(3필드) 데이터: 전환 시 active_dog_id 업데이트 → 대시보드 전체 갱신

---

11.3 신규 화면 와이어프레임 (6개 + 기존 3개 보강)

---

11.3-1. welcome.tsx — 첫 방문 가치 제안 (온보딩 후크)

┌─────────────────────────┐
│                         │  ← Navbar 없음 (단일 카드)
├─────────────────────────┤
│                         │
│  ┌───────────────────┐  │
│  │ [Asset: Lottie]   │  │  ← Asset(type="lottie")
│  │  강아지 애니메이션  │  │     단일 가치 제안 카드
│  └───────────────────┘  │
│                         │
│  "반려견 행동,           │  ← Text(heading)
│   90초면 기록 끝"        │
│                         │
│  "AI가 분석하고,         │  ← Text(subtitle, muted)
│   맞춤 훈련까지"         │
│                         │
├─────────────────────────┤
│  ┌───────────────────┐  │
│  │   시작하기 (90초)  │  │  ← BottomCTA > Button(primary)
│  └───────────────────┘  │
└─────────────────────────┘

사용 컴포넌트: Asset(Lottie), BottomCTA, Button, Text 전환: "시작하기" → survey(Step 1) 카피 원칙: 숫자 강조("90초"), 결과 중심, 부담 최소화 참고: 최초 1회만 표시 (AsyncStorage 플래그), Navbar.CloseButton 삭제, "이미 계정이 있어요" 삭제

---

11.3-2. survey-result.tsx — AI 분석 티저 + PRO 전환 후크

┌─────────────────────────┐
│    분석 결과              │  ← Navbar(.Title)
├─────────────────────────┤
│  ScrollView              │
│                         │
│  ┌───────────────────┐  │
│  │ [Asset: AI 아이콘] │  │  ← Asset
│  │                   │  │
│  │ "뽀삐의 행동 분석  │  │  ← Text(heading)
│  │  결과입니다"       │  │
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │
│  │ 행동 유형          │  │  ← ListHeader
│  │ Badge: "불안형"    │  │  ← Badge(variant="warning")
│  │                   │  │
│  │ 위험도: ■■■□□ 중간 │  │  ← ProgressBar(value=0.6)
│  │                   │  │
│  │ "설문 기반 초기    │  │  ← Text(paragraph)
│  │  분석입니다.       │  │
│  │  기록이 쌓이면 더  │  │
│  │  정확한 분석이     │  │
│  │  가능해요."        │  │
│  └───────────────────┘  │
│                         │
│  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │  ← Border
│                         │
│  ┌───────────────────┐  │
│  │ 📋 상세 리포트     │  │  ← ListHeader
│  │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄  │  │  ← Skeleton(블러 처리)
│  │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄  │  │     잠금된 상세 분석 영역
│  │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄  │  │
│  │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄  │  │
│  │                   │  │
│  │ TextButton:       │  │  ← TextButton("광고 보고 전체 분석 보기")
│  │ "광고 보고 전체    │  │     → Rewarded Ad → 1회 잠금 해제
│  │  분석 보기"        │  │
│  └───────────────────┘  │
│                         │
├─────────────────────────┤
│  ┌───────────────────┐  │
│  │   기록 시작하기     │  │  ← BottomCTA > Button(primary)
│  └───────────────────┘  │     → dashboard
└─────────────────────────┘

사용 컴포넌트: Navbar(.Title), Asset, Badge, ProgressBar, Border, ListHeader, Skeleton(블러), TextButton, BottomCTA, Button 보상형 광고(R1): "광고 보고 전체 분석 보기" → Rewarded Ad 시청 → Skeleton 해제 → 1회 열기 이탈 안전망: "기록 시작하기" → dashboard (무료 진입 보장) 행동 유형 Badge 규칙: 프론트엔드 규칙 엔진 (Step 6 응답 기반)

• 짖음+공포 → 불안형, 공격성+마운팅 → 지배형, 과잉흥분+파괴 → 에너지형
• 분리불안 포함 → 분리불안형, 배변만 → 환경적응형, 3개+ → 복합형

---

11.3-3. notification.tsx — Smart Message 알림 동의

┌─────────────────────────┐
│                    [✕]  │  ← Navbar.CloseButton ("나중에")
├─────────────────────────┤
│                         │
│      ┌─────────┐       │
│      │ 🔔      │       │  ← Asset(type="lottie", 벨 애니메이션)
│      │ (Lottie)│       │
│      └─────────┘       │
│                         │
│  "반려견의 변화를        │  ← Text(heading)
│   놓치지 마세요"         │
│                         │
│  "중요한 알림만 보내     │  ← Text(subtitle, muted)
│   드릴게요"             │
│                         │
│  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │  ← Border
│                         │
│  ┌───────────────────┐  │
│  │ ☑ 훈련 리마인더    │  │  ← Checkbox(checked=true)
│  │   매일 설정한 시간  │  │     "매일 훈련 시간 알림"
│  │   [오전 9시 ▾]     │  │  ← Dropdown(options=시간, default="오전 9시")
│  ├───────────────────┤  │
│  │ ☑ 행동 급증 알림   │  │  ← Checkbox(checked=true)
│  │   평소보다 문제행동  │  │     "문제행동 급증 시 알림"
│  │   이 많을 때        │  │
│  ├───────────────────┤  │
│  │ ☐ 프로모션/팁      │  │  ← Checkbox(checked=false)
│  │   할인·이벤트 소식  │  │     "프로모션 알림 (선택)"
│  └───────────────────┘  │
│                         │
├─────────────────────────┤
│  ┌───────────────────┐  │
│  │     허용하기       │  │  ← BottomCTA > Button(primary)
│  └───────────────────┘  │
│  TextButton("나중에")   │  ← TextButton → dashboard (건너뛰기)
└─────────────────────────┘

사용 컴포넌트: Navbar(.CloseButton), Asset(Lottie), Checkbox × 3, Dropdown, Border, BottomCTA, Button, TextButton 로직: "허용" → OS 푸시 권한 요청 + Smart Message 등록 API → dashboard 기본값: 리마인더/급증 ON, 프로모션 OFF (옵트인 원칙) Smart Message: Title 13자, Body 20자 제한 (Toss S2S API 규격)

---

11.3-4. subscription.tsx — PRO 구독 / Toss IAP 결제

┌─────────────────────────┐
│ ← TailLog PRO           │  ← Navbar(.BackButton, .Title)
├─────────────────────────┤
│  ScrollView              │
│                         │
│  ┌───────────────────┐  │
│  │ Top                │  │  ← Top(title, subtitle)
│  │ "더 정확한 AI 코칭, │  │
│  │  더 빠른 변화"      │  │
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │
│  │ 무료 vs PRO 비교   │  │  ← ListHeader
│  ├───────────────────┤  │
│  │ AI 코칭    3회/월  │  │  ← TableRow(label, value)
│  │           무제한 ✓ │  │     PRO 쪽 Badge("무제한")
│  ├───────────────────┤  │
│  │ 행동 분석  기본    │  │  ← TableRow
│  │           심층 ✓   │  │
│  ├───────────────────┤  │
│  │ 훈련 커리큘럼 기본  │  │  ← TableRow
│  │           전체 ✓   │  │
│  ├───────────────────┤  │
│  │ PDF 리포트  ✕     │  │  ← TableRow
│  │           ✓       │  │
│  ├───────────────────┤  │
│  │ 광고 없음   ✕     │  │  ← TableRow
│  │           ✓       │  │
│  └───────────────────┘  │
│                         │
│  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │  ← Border
│                         │
│  ┌───────────────────┐  │
│  │ [월간] [토큰팩]    │  │  ← SegmentedControl(2 segments)
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │
│  │ 개인 PRO 월간      │  │  ← BoardRow + Badge("인기")
│  │ ₩4,900/월          │  │
│  │ Badge: "인기"      │  │
│  ├───────────────────┤  │
│  │ 토큰팩 30회        │  │  ← BoardRow
│  │ ₩4,900 (1회=₩163) │  │
│  └───────────────────┘  │
│  │  (B2B 플랜: v1 숨김, Wave 3 게이트 이후) │
│                         │
│  ListFooter:            │  ← ListFooter
│  "구독은 언제든 해지 가  │
│   능합니다. 토스 앱 내   │
│   결제로 안전합니다."    │
│                         │
│  TextButton("이전 구매 복원") │  ← 복원구매
│                               │
│  [기존 구독자 시]              │
│  현재 플랜 Badge + "해지"     │  ← Badge + TextButton
│                         │
├─────────────────────────┤
│  ┌───────────────────┐  │
│  │   구독하기          │  │  ← BottomCTA > Button(primary)
│  └───────────────────┘  │     → Toss IAP 결제 플로우
└─────────────────────────┘

사용 컴포넌트: Navbar(.BackButton, .Title), Top, ListHeader, TableRow × 5, Border, SegmentedControl, BoardRow × 2, Badge("인기"), ListFooter, TextButton(복원구매, 해지), BottomCTA, Button IAP 로직: "구독하기" → Toss IAP SDK → 결제 성공 → Edge Function verify-iap-order → 권한 갱신 복원구매: "이전 구매 복원" → Toss IAP restorePurchases() → 기존 구독 복원 기존 구독자: 현재 플랜 Badge 표시 + "해지" TextButton (→ Toss IAP 해지 플로우) B2B 자동 전환: v1 기본 숨김. Wave 3(B2B Expansion) 게이트 통과 후 B2B 플랜(훈련사 PRO ₩19,900/월, 센터 PRO ₩49,900/월) 별도 릴리즈 구독 만료: role 유지, 기록/리포트 생성 차단, 기존 데이터 열람 30일 유예

---

11.3-5. dog-switcher.tsx — 멀티독 선택 바텀시트

┌─ useBottomSheet ────────┐
│                         │
│  ┌───────────────────┐  │
│  │ 반려견 선택        │  │  ← ListHeader
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │
│  │ 🐕 뽀삐           │  │  ← ListRow(.Icon, .Texts)
│  │   비숑 · 3살      │  │     Badge("선택", variant="success")
│  │   Badge: "선택" ✓ │  │
│  ├───────────────────┤  │
│  │ 🐕 초코           │  │  ← ListRow(.Icon, .Texts)
│  │   푸들 · 5살      │  │
│  ├───────────────────┤  │
│  │ 🐕 루비           │  │  ← ListRow(.Icon, .Texts)
│  │   골든 · 2살      │  │
│  └───────────────────┘  │
│                         │
│  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │  ← Border
│                         │
│  ┌───────────────────┐  │
│  │ + 반려견 추가      │  │  ← ListRow → dog-add 화면
│  └───────────────────┘  │
│                         │
└─────────────────────────┘

사용 컴포넌트: useBottomSheet, ListHeader, ListRow(.Icon, .Texts) × N, Badge(variant="success"), Border, ListRow(추가 버튼) 로직: 반려견 선택 → active_dog_id 업데이트 → 바텀시트 닫기 → 대시보드 갱신 추가: "+ 반려견 추가" → dog-add 화면 (survey 축소판: 이름+품종+나이) 최대: 무료 1마리, PRO 최대 5마리 삭제: dog-profile 내 "반려견 삭제" 버튼으로 처리 (switcher에서는 삭제 없음)

---

11.3-6. training/detail.tsx — 훈련 미션 상세 (체크리스트+메모)

┌─────────────────────────┐
│ ← 산책 훈련 Day 3        │  ← Navbar(.BackButton, .Title)
├─────────────────────────┤
│  ■■■■■■□□□□  60%        │  ← ProgressBar(value=0.6)
├─────────────────────────┤
│  ScrollView              │
│                         │
│  ┌───────────────────┐  │
│  │ [Asset: 가이드]    │  │  ← Asset(type="image" 또는 "video")
│  │                   │  │     훈련 가이드 영상/이미지
│  │  ▶ 영상 보기      │  │
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │
│  │ 📋 오늘의 미션     │  │  ← ListHeader
│  ├───────────────────┤  │
│  │ ☑ 리드 길이 조절   │  │  ← Checkbox(checked=true)
│  │   산책 시작 시     │  │
│  ├───────────────────┤  │
│  │ ☑ 앉아 5초 유지    │  │  ← Checkbox(checked=true)
│  │   교차로에서       │  │
│  ├───────────────────┤  │
│  │ ☐ 다른 강아지 반응  │  │  ← Checkbox(checked=false)
│  │   관찰 기록        │  │
│  ├───────────────────┤  │
│  │ ☐ 보상 타이밍 연습  │  │  ← Checkbox(checked=false)
│  │   1초 이내 간식    │  │
│  └───────────────────┘  │
│                         │
│  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │  ← Border
│                         │
│  TextButton:            │  ← "이 훈련이 어려워요"
│  "이 훈련이 어려워요"   │     → 바텀시트(Plan B/C 교체)
│                         │
│  ┌─ Plan B/C 바텀시트 ─┐│  ← useBottomSheet
│  │ "대체 미션 제안"     ││     Plan B: 정적 데이터
│  │                     ││     Plan C: AI 동적 생성(PRO)
│  │ ○ Plan A (현재)     ││
│  │ ● Plan B (쉬운 버전) ││  ← Radio selection
│  │ ○ Plan C (AI 맞춤)  ││     PRO Badge
│  │                     ││
│  │ [적용하기]          ││  ← Button
│  └─────────────────────┘│
│                         │
│  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │  ← Border
│                         │
│  ┌───────────────────┐  │
│  │ 📝 메모            │  │  ← ListHeader
│  │ ┌─────────────────┐│  │
│  │ │오늘 산책 중에... ││  │  ← TextField(multiline, placeholder=
│  │ │                 ││  │     "오늘 훈련 소감을 남겨주세요")
│  │ │                 ││  │
│  │ └─────────────────┘│  │
│  └───────────────────┘  │
│                         │
├─────────────────────────┤
│  ┌───────────────────┐  │
│  │   미션 완료 ✓      │  │  ← BottomCTA > Button(primary)
│  └───────────────────┘  │     → training_progress 업데이트
└─────────────────────────┘

사용 컴포넌트: Navbar(.BackButton, .Title), ProgressBar, Asset(image/video), ListHeader × 2, Checkbox × N, Border, TextButton, useBottomSheet, Radio, TextField(multiline), BottomCTA, Button 로직: 체크리스트 체크 → 로컬 상태 관리, "미션 완료" → training_progress 업데이트 + 다음 Day 잠금 해제 알림장 사진: Asset 자리 확보 (서버 아키텍처 결정 후 이미지 업로드 추가)

---

11.3-7. dashboard/index.tsx 보강 — 4대 콘텐츠 블록 명세

기존 9-3 와이어프레임에 아래 콘텐츠 블록 명세를 추가한다.

┌─────────────────────────┐
│ 테일로그  [🐕▾] [🔔][⚙️] │  ← Navbar + 반려견 선택(→dog-switcher)
├─────────────────────────┤
│ [기록] [분석] [훈련●]    │  ← Tab(3탭, B2B는 +[운영])
├─────────────────────────┤
│                         │
│ ┌───────────────────┐   │  ← ① 오늘의 AI 코칭
│ │ 🤖 오늘의 코칭     │   │     ListHeader + Asset
│ │                   │   │
│ │ [무료] ┄┄┄┄┄┄┄┄┄ │   │     무료: Skeleton 블러
│ │ TextButton:       │   │     + TextButton("광고 보고 코칭 열기")
│ │ "광고 보고 코칭    │   │       → 토스 Rewarded 시청 → 1회 해제
│ │  열기"            │   │
│ │ ─── 또는 ───     │   │
│ │ [PRO] "오늘은 산책 │   │     PRO: 전체 텍스트 표시
│ │ 시 리드 길이를..." │   │
│ └───────────────────┘   │
│                         │
│ ┌───────────────────┐   │  ← ② 연속 기록 스트릭
│ │ 🔥 7일 연속 기록!  │   │     Badge(variant="success")
│ │ Badge: "7일 연속"  │   │
│ └───────────────────┘   │
│                         │
│ ┌───────────────────┐   │  ← ③ 최근 ABC 기록
│ │ 📋 최근 기록       │   │     ListHeader
│ ├───────────────────┤   │
│ │ 짖음 · 산책 중     │   │     ListRow × 5 (최대)
│ │ 14:30  Badge:높음  │   │     Badge(variant="danger"/"info"/"warning")
│ ├───────────────────┤   │
│ │ 점프 · 손님 방문   │   │
│ │ 10:15  Badge:보통  │   │
│ ├───────────────────┤   │
│ │ ... (최대 5건)     │   │
│ └───────────────────┘   │
│                         │
│ [0건 시: EmptyState]    │  ← EmptyState("첫 기록을 남겨보세요")
│                         │
├─────────────────────────┤
│  ┌───────────────────┐  │  ← ④ 빠른 기록 CTA
│  │   + 빠른 기록      │  │     BottomCTA > Button(primary)
│  └───────────────────┘  │     → quick-log 바텀시트
└─────────────────────────┘

상태 분기:

상태	조건	UI
로딩	데이터 패칭 중	Skeleton(pattern="topList") 전체
0건	기록 없음	EmptyState("첫 기록을 남겨보세요", icon="pencil")
1-2건	기록 부족	기록 목록 + "3건 이상 기록하면 AI 분석 시작!" 안내
3건+	AI 활성	전체 4블록 표시
에러	API 실패	ErrorState(retryButton)

멀티독: 헤더 반려견 이름 탭 → dog-switcher 바텀시트 → 선택 → 대시보드 전체 갱신 [훈련] 탭 Badge: dot ● = 미완료 미션 표시 (오늘의 미션 남아있을 때 활성)

---

11.3-8. quick-log.tsx 보강 — 빠른+상세 2탭 통합 바텀시트

기존 9-4 와이어프레임을 2탭 통합 구조로 보강한다.

┌─ useBottomSheet ────────────────────┐
│                                     │
│  ┌─────────────────────────────┐   │
│  │  빠른 기록                   │   │  ← ListHeader
│  └─────────────────────────────┘   │
│                                     │
│  ┌──────────┬──────────┐           │
│  │  [빠른]  │  [상세]   │           │  ← SegmentedControl(2 segments)
│  └──────────┴──────────┘           │
│                                     │
│  ═══ 빠른 탭 (기본) ═══            │
│                                     │
│  ┌─────────────────────────────┐   │
│  │ 🚨 행동 문제                 │   │  ← ListHeader
│  │                             │   │
│  │ [짖음/울음] [공격성]         │   │  ← Chip × 8 (원탭 = 즉시 저장)
│  │ [분리불안] [파괴행동]         │   │     intensity=3 고정
│  │ [마운팅] [과잉흥분]           │   │     서베이 카테고리 동일
│  │ [배변문제] [공포/회피]        │   │
│  │ [+ 기타]                     │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │ 📋 일상 활동                 │   │  ← ListHeader
│  │                             │   │
│  │ [산책] [놀이] [식사]         │   │  ← Chip × 6 (탭 시 서브옵션 확장)
│  │ [컨디션] [이상징후] [사회성] │   │
│  │                             │   │
│  │  ┌ 산책 서브옵션 (확장) ──┐ │   │  ← 인라인 서브칩 (선택 시 표시)
│  │  │ [10분] [20분] [30분]  │ │   │     서브칩 선택 = 저장
│  │  │ [60분+]              │ │   │
│  │  └──────────────────────┘ │   │
│  └─────────────────────────────┘   │
│                                     │
│  ═══ 상세 탭 ═══                   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │ 행동(B) *필수                │   │  ← TextField(label="행동", required)
│  │ ┌─────────────────────┐    │   │     항상 표시 (접이식 아님)
│  │ │ 어떤 행동을 했나요?   │    │   │
│  │ └─────────────────────┘    │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │ ▶ 선행(A)          [펼치기] │   │  ← 접이식(Accordion)
│  │  ┌─────────────────────┐   │   │     칩 프리셋(설문 기반 동적 로드)
│  │  │ [산책중] [손님방문]  │   │   │     + 기타 TextField
│  │  │ [혼자있을때] [기타]  │   │   │
│  │  └─────────────────────┘   │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │ ▶ 결과(C)          [펼치기] │   │  ← 접이식(Accordion)
│  │  ┌─────────────────────┐   │   │     칩 프리셋 + 기타 TextField
│  │  │ [진정됨] [계속함]    │   │   │
│  │  │ [악화] [기타]       │   │   │
│  │  └─────────────────────┘   │   │
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │ ▶ 강도/시간         [펼치기] │   │  ← 접이식(Accordion)
│  │  강도: ────●──── 7/10       │   │     Slider(min=1, max=10)
│  │  날짜: 오늘 · 시간: 지금    │   │  ← 자동 기본값
│  │  TextButton("변경")         │   │  ← 확장 시:
│  │    [오늘/어제/날짜선택]      │   │    SegmentedControl
│  │    시간 [오전/오후] + 시     │   │    Dropdown + NumericSpinner
│  └─────────────────────────────┘   │
│                                     │
│  ┌─────────────────────────────┐   │
│  │          저장                │   │  ← Button(primary)
│  └─────────────────────────────┘   │
│                                     │
└─────────────────────────────────────┘

사용 컴포넌트: useBottomSheet, ListHeader, SegmentedControl, Badge(Chip 역할), TextField, Slider, Button 빠른 탭 UX:

• 행동 문제 8칩 (서베이 카테고리 동일: 짖음/울음, 공격성, 분리불안, 파괴행동, 마운팅, 과잉흥분, 배변문제, 공포/회피 + 기타): 원탭 = 즉시 저장 (2초), intensity=3 고정
• 일상 활동 6칩: 탭 시 인라인 서브옵션 확장 (산책→[10분/20분/30분], 식사→[완식/반식/거부] 등) → 서브칩 선택 = 저장 상세 탭 UX:
• 행동(B) 항상 표시, 선행(A)/결과(C)/강도·시간은 접이식
• 칩 프리셋은 설문 데이터 기반 동적 로드 (예: 설문에서 "짖음" 선택 → 선행 프리셋에 "초인종", "산책 중" 자동 추가) 스키마: 변경 불필요. behavior="산책 20분" 자유 텍스트. type_id(미사용)를 카테고리 구분자로 활용 가능

---

11.3-9. coaching/result.tsx 보강 — 진단 중심 구조

기존 9-6 와이어프레임을 **진단 중심(A 타입)**으로 재정의한다.

┌─────────────────────────┐
│ ← AI 행동 진단           │  ← Navbar(.BackButton, .Title)
├─────────────────────────┤
│  ScrollView              │
│                         │
│  ┌───────────────────┐  │  ← [상단] 패턴 요약 (insight)
│  │ [Asset: AI 아이콘] │  │     Asset + Text
│  │                   │  │
│  │ "뽀삐의 짖음은     │  │
│  │  분리불안 패턴과    │  │
│  │  일치합니다.       │  │
│  │  혼자 있을 때      │  │
│  │  불안이 높아지는   │  │
│  │  전형적 양상입니다."│  │
│  └───────────────────┘  │
│                         │
│  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │  ← Border
│                         │
│  ┌───────────────────┐  │  ← [중단] 교정 프로토콜 (action_plan)
│  │ 📋 3단계 교정      │  │     ListHeader
│  │    프로토콜        │  │
│  ├───────────────────┤  │
│  │ Step 1            │  │     ListRow + Badge("1단계")
│  │ 탈감작 훈련       │  │     "매일 5분 혼자 있기 연습"
│  │ Badge: "1단계"    │  │
│  ├───────────────────┤  │
│  │ Step 2            │  │     ListRow + Badge("2단계")
│  │ 안전 공간 만들기   │  │
│  │ Badge: "2단계"    │  │
│  ├───────────────────┤  │
│  │ Step 3            │  │     ListRow + Badge("3단계")
│  │ 보상 체계 확립     │  │
│  │ Badge: "3단계"    │  │
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │  ← [중단] 반려견 시점 (dog_voice)
│  │ 🐕 뽀삐의 마음     │  │     ListHeader + 말풍선 스타일
│  │                   │  │
│  │ ┌─ 말풍선 ──────┐ │  │     Shadow + Border(radius)
│  │ │"혼자 있으면    │ │  │
│  │ │ 불안해요.     │ │  │
│  │ │ 보호자가 돌아  │ │  │
│  │ │ 올 거라는 걸   │ │  │
│  │ │ 알려주세요."   │ │  │
│  │ └───────────────┘ │  │
│  └───────────────────┘  │
│                         │
│  ═══ 잠금 영역 (PRO/광고) ═══ │
│                         │
│  ┌───────────────────┐  │  ← ④ [중단] 7일 훈련 계획 (next_7_days_plan)
│  │ 📅 7일 훈련 계획   │  │     ListHeader
│  ├───────────────────┤  │
│  │ Day 1: 5분 혼자   │  │     ListRow × 7
│  │ Day 2: 10분 혼자  │  │
│  │ Day 3: 산책 훈련  │  │
│  │ ...               │  │
│  │ Day 7: 종합 테스트 │  │
│  │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄  │  │  ← Skeleton 블러 (무료 유저)
│  └───────────────────┘  │
│                         │
│  │ TextButton:       │  │  ← "다른 접근 방식 보기"
│  │ "다른 접근 방식    │  │     → Plan B/C 바텀시트
│  │  보기"            │  │     (현재/대안1/대안2)
│                         │
│  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │  ← Border
│                         │
│  ┌───────────────────┐  │  ← ⑤ [하단] 위험 신호 (risk_signals)
│  │ ⚠️ 위험 신호       │  │     ListHeader
│  │                   │  │
│  │ Badge:"자해 행동"  │  │     Badge(variant="danger") × N
│  │ Badge:"공격성 증가"│  │
│  │                   │  │
│  │ "아래 신호가 보이면 │  │     Text(muted)
│  │  즉시 전문가 상담을 │  │
│  │  권합니다."        │  │
│  │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄  │  │  ← Skeleton 블러 (무료 유저)
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │  ← ⑥ [하단] 전문가 상담 질문 (consultation_questions)
│  │ 💬 전문가에게      │  │     ListHeader
│  │    물어보세요      │  │
│  ├───────────────────┤  │
│  │ "분리불안 탈감작   │  │     ListRow × 3
│  │  속도를 어떻게     │  │
│  │  조절하나요?"     │  │
│  ├───────────────────┤  │
│  │ "약물 치료 병행이  │  │
│  │  필요한 수준      │  │
│  │  인가요?"         │  │
│  │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄  │  │  ← Skeleton 블러 (무료 유저)
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │  ← [무료 유저 전용] 잠금 해제 CTA
│  │ TextButton:       │  │     TextButton("광고 보고 오늘의 코칭 열기")
│  │ "광고 보고 오늘의  │  │     → Rewarded Ad → 1회 잠금 해제
│  │  코칭 열기"        │  │
│  └───────────────────┘  │
│                         │
├─────────────────────────┤
│  ┌───────────────────┐  │
│  │  훈련 시작하기     │  │  ← BottomCTA > Button(primary)
│  └───────────────────┘  │     → training-academy
│  TextButton("PDF 리포트 │  ← TextButton → PRO 전용 (무료: subscription)
│   다운로드(PRO)")       │
└─────────────────────────┘

사용 컴포넌트: Navbar(.BackButton, .Title), ScrollView, Asset, ListHeader × 6, ListRow × N, Badge(1단계/2단계/3단계/danger), Shadow, Border, Skeleton(블러), TextButton, BottomCTA, Button 데이터 구조 (Edge Function generate-coaching 응답):

• insight: 패턴 요약 텍스트
• action_plan: 3단계 교정 프로토콜 배열
• dog_voice: 반려견 시점 메시지
• next_7_days_plan: 7일 훈련 계획 배열
• risk_signals: 위험 신호 태그 배열
• consultation_questions: 전문가 상담 질문 배열

잠금 영역: ①insight, ②action_plan, ③dog_voice = 무료 공개 / ④next_7_days_plan, ⑤risk_signals, ⑥consultation_questions = 잠금(Skeleton 블러). 광고 1회 또는 PRO로 해제 Plan B/C: "다른 접근 방식 보기" → 바텀시트(현재 Plan A / 대안1 Plan B / 대안2 Plan C). Plan C = PRO 전용 AI 동적 생성 보상형 광고(R3): "광고 보고 오늘의 코칭 열기" → Rewarded Ad → Skeleton 해제 → 1회 열기 PDF 리포트: PRO 전용. 무료 유저는 TextButton 탭 시 subscription 화면으로 이동

---

11.3-10. ops/today.tsx 보강 — B2B 빠른 기록 UX

기존 9-10 와이어프레임에 B2B 기록 UX 상세를 추가한다.

┌─────────────────────────┐
│ Ops 대시보드  [👤 역할]   │  ← Navbar(.Title) + Badge(role)
├─────────────────────────┤
│ [미기록] [주의필요]        │  ← Tab(4개 탭, B2B PRD)
│ [리포트미발송] [내담당]   │
├─────────────────────────┤
│ ┌───────────────────┐   │
│ │ 🐕 뽀삐 / 김지영  │   │  ← ListRow(.Icon, .Texts)
│ │ "짖음 문제"       │   │     Badge("긴급", variant="danger")
│ │ 14:30 접수        │   │     탭 → 개별 기록 모달
│ └───────────────────┘   │
│ ┌───────────────────┐   │
│ │ 🐕 초코 / 박민수  │   │
│ │ ...               │   │
│ └───────────────────┘   │
│                         │
│ FlatList (무한 스크롤)   │  ← Loader
│                         │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─   │  ← Border
│                         │
│  [일괄 기록 모드]        │  ← TextButton → 벌크 모드 활성화
│                         │
│ 총 12건 / 오늘 완료 5건 │  ← BottomInfo
└─────────────────────────┘

═══ 개별 기록 모달 (useBottomSheet) ═══

┌─ useBottomSheet ────────────────────┐
│                                     │
│  🐕 뽀삐 · 김지영                    │  ← ListRow
│                                     │
│  ┌──────────┬──────────┐           │
│  │ [프리셋] │ [ABC기록] │           │  ← SegmentedControl
│  └──────────┴──────────┘           │
│                                     │
│  ═══ 프리셋 탭 ═══                  │
│                                     │
│  [산책] [놀이] [컨디션]             │  ← Chip × 5 (원탭 = 즉시 저장)
│  [식사] [투약]                      │     키보드 불필요, 3초 완료
│                                     │
│  ═══ ABC 기록 탭 ═══               │
│                                     │
│  선행(A): ┌───────────────┐        │  ← TextField
│           │               │        │
│           └───────────────┘        │
│  행동(B): ┌───────────────┐        │  ← TextField
│           │               │        │
│           └───────────────┘        │
│  결과(C): ┌───────────────┐        │  ← TextField
│           │               │        │
│           └───────────────┘        │
│                                     │
│  강도: [낮음] [보통] [높음]         │  ← SegmentedControl
│                                     │
│  행동 이슈 태그 (복수 선택):        │  ← Checkbox × N
│  ☑ 짖음  ☐ 점프  ☑ 파괴            │     문제행동 다중 태깅
│  ☐ 물기  ☐ 배변  ☐ 기타            │
│                                     │
│  ┌─────────────────────────────┐   │
│  │          저장                │   │  ← Button(primary)
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

═══ 벌크 모드 ═══

┌─ useBottomSheet ────────────────────┐
│                                     │
│  일괄 기록                          │  ← ListHeader
│                                     │
│  반려견 선택:                       │
│  ☑ 뽀삐  ☑ 초코  ☐ 루비            │  ← Checkbox × N (다견 선택)
│  ☑ 몽이  ☐ 하니                    │
│                                     │
│  카테고리:                          │
│  [산책] [식사] [컨디션]             │  ← Chip (일괄 적용)
│                                     │
│  ┌─────────────────────────────┐   │
│  │       일괄 저장              │   │  ← Button(primary)
│  └─────────────────────────────┘   │
│                                     │
│  선택 3마리 × 산책 일괄 저장       │  ← BottomInfo
└─────────────────────────────────────┘

사용 컴포넌트: Navbar(.Title), Badge(role), Tab, ListRow, FlatList, Loader, Border, TextButton, BottomInfo, useBottomSheet, SegmentedControl, Badge(Chip), TextField, Checkbox, Button 기록 UX 목표:

• 프리셋 원탭: 3초 (산책/놀이/컨디션/식사/투약 칩 → 탭 = 즉시 저장, 키보드 불필요)
• ABC 기록: 30초 이내 (TextField + 행동 이슈 다중 태그)
• 벌크 모드: 다견 선택 → 카테고리 칩 일괄 적용 → [일괄 저장] B2B 역할: role IN ('trainer', 'org_owner', 'org_staff') RLS 정책 필수

---

11.4 재사용 상태 컴포넌트 (2개)

EmptyState — Result 컴포넌트 기반

┌───────────────────────────┐
│                           │
│         [Asset]           │  ← Asset(icon/lottie)
│                           │
│    "아직 기록이 없어요"    │  ← Result(title)
│                           │
│    "첫 기록을 남기면       │  ← Result(description)
│     AI 분석이 시작돼요"    │
│                           │
│  ┌───────────────────┐   │
│  │   기록 시작하기     │   │  ← Button(primary) — 선택적 CTA
│  └───────────────────┘   │
│                           │
└───────────────────────────┘

4가지 컨텍스트:

컨텍스트	title	description	CTA
기록 없음	"아직 기록이 없어요"	"첫 기록을 남기면 AI 분석이 시작돼요"	"기록 시작하기" → quick-log
분석 부족	"데이터가 부족해요"	"3건 이상 기록하면 분석이 가능해요"	"기록하러 가기" → quick-log
코칭 없음	"아직 AI 코칭이 없어요"	"행동 기록을 쌓으면 맞춤 코칭을 받을 수 있어요"	"기록 남기기" → quick-log
훈련 미시작	"훈련을 시작해보세요"	"AI 코칭 기반 맞춤 훈련 커리큘럼이에요"	"코칭 먼저 받기" → analysis

사용 컴포넌트: Result(icon, title, description), Button(선택적)

---

ErrorState — ErrorPage 컴포넌트 기반

┌───────────────────────────┐
│                           │
│         [Asset]           │  ← Asset(error icon)
│                           │
│    "연결에 실패했어요"     │  ← ErrorPage(title)
│                           │
│    "네트워크 상태를        │  ← ErrorPage(description)
│     확인해주세요"          │
│                           │
│  ┌───────────────────┐   │
│  │     다시 시도       │   │  ← ErrorPage(retryButton)
│  └───────────────────┘   │
│                           │
└───────────────────────────┘

4가지 에러 타입:

에러	title	description	액션
네트워크 오류	"연결에 실패했어요"	"네트워크 상태를 확인해주세요"	retryButton("다시 시도")
인증 만료	"로그인이 필요해요"	"세션이 만료되었습니다"	Button("다시 로그인") → login
API 실패	"일시적인 오류예요"	"잠시 후 다시 시도해주세요"	retryButton("다시 시도")
mTLS 장애	"서비스 점검 중이에요"	"빠르게 복구하겠습니다"	없음 (자동 재시도)

사용 컴포넌트: ErrorPage(title, description, retryButton)

---

11.5 상태 전환 규칙

Navigation Guard 체인

모든 화면 전환은 아래 Guard 체인을 순서대로 통과해야 한다:

authGuard → onboardingGuard → featureGuard → roleGuard

Guard	검사 대상	실패 시 리다이렉트
authGuard	Supabase 세션 존재 여부	→ login
onboardingGuard	설문 완료 여부 (dogs 테이블 존재)	→ welcome → survey
featureGuard	PRO 기능 접근 시 구독 상태	→ subscription (또는 Skeleton 블러)
roleGuard	B2B 화면 접근 시 역할 검사	→ ErrorPage("권한 없음")

딥엔트리 라우팅 (PRD Section 9.5 정합)

Smart Message나 외부 링크로 앱에 진입할 때:

딥엔트리	대상 화면	Guard 체인	설명
quick-log	quick-log 바텀시트	auth → onboarding	빠른 기록 직접 진입
daily-coach	coaching-result	auth → onboarding → feature	오늘의 AI 코칭
training-today	training-detail	auth → onboarding	오늘의 훈련 미션

화면-to-화면 전환 테이블

#	출발	도착	트리거	애니메이션	Guard
1	login	welcome	로그인 성공 (첫 방문)	→ slide right	auth
2	login	dashboard	로그인 성공 (기존)	→ slide right	auth + onboarding
3	welcome	survey	"시작하기" 탭	→ slide right	—
4	survey	survey (next step)	"다음" 탭	→ slide right	—
5	survey	survey (prev step)	BackButton	← slide left	—
6	survey	survey-result	7단계 완료	→ slide right	—
7	survey-result	notification	"기록 시작하기"	→ slide right	—
8	notification	dashboard	"허용" 또는 "나중에"	→ slide right	—
9	dashboard	quick-log	"+ 빠른 기록" CTA	↑ bottom sheet	onboarding
10	quick-log	dashboard	저장 완료	↓ close sheet	—
11	dashboard	analysis	[분석] 탭	→ tab switch	onboarding
12	dashboard	training-academy	[훈련] 탭	→ tab switch	onboarding
13	dashboard	ops-today	[운영] 탭	→ tab switch	role(trainer+)
14	dashboard	dog-switcher	반려견 이름 탭	↑ bottom sheet	—
15	dashboard	settings	⚙️ 아이콘	→ slide right	—
16	dashboard	coaching-result	"오늘의 코칭" 영역 탭	→ slide right	onboarding
17	analysis	coaching-result	"AI 코칭 보기"	→ slide right	feature(3건+)
18	coaching-result	training-academy	"훈련 시작하기"	→ slide right	—
19	coaching-result	subscription	"PDF 리포트(PRO)"	→ slide right	—
20	training-academy	training-detail	미션 카드 탭	→ slide right	—
21	training-detail	training-academy	"미션 완료" 또는 BackButton	← slide left	—
22	training-detail	Plan B/C 바텀시트	"이 훈련이 어려워요"	↑ bottom sheet	—
23	coaching-result	Plan B/C 바텀시트	"다른 접근 방식 보기"	↑ bottom sheet	—
24	dog-switcher	dashboard	반려견 선택	↓ close sheet	—
25	dog-switcher	dog-add	"+ 반려견 추가"	→ slide right	—
26	dog-add	dashboard	저장 완료	← pop to root	—
27	settings	subscription	"구독 관리" 탭	→ slide right	—
28	settings	dog-profile	"프로필 편집" 탭	→ slide right	—
29	settings	login	"로그아웃" 확인	→ replace	—
30	subscription	dashboard	IAP 결제 성공	← pop to root	—
31	ops-today	개별 기록 모달	반려견 행 탭	↑ bottom sheet	role(trainer+)
32	(어디서든)	PRO 업셀 시트	Skeleton/잠금 영역 탭	↑ bottom sheet	—
33	PRO 업셀 시트	subscription	"자세히 보기"	→ slide right	—

---

11.6 인게이지먼트 훅 & 전환 포인트

Hook Model 4단계 구현

단계	구현	화면
Trigger (외부/내부)	Smart Message 푸시, 스트릭 알림, 행동 급증 알림	notification → dashboard
Action (최소 행동)	빠른 탭 원탭 기록 (2초), 서브옵션 포함 5초	quick-log
Variable Reward	AI 코칭 결과 변화, 스트릭 뱃지 갱신, 트렌드 차트 변동	dashboard, coaching-result
Investment (자산 축적)	기록 데이터 축적, 훈련 진행률, 커스텀 프리셋	quick-log, training-detail

보상형 광고 업셀 퍼널 (토스 Ads SDK 2.0 Rewarded)

배너/전면 광고 없음. 보상형 광고만 사용.

ID	터치포인트	화면	CTA 텍스트	보상
R1	설문 결과 상세 리포트	survey-result	"광고 보고 전체 분석 보기"	상세 리포트 1회 잠금 해제
R2	오늘의 AI 코칭	dashboard	"광고 보고 코칭 열기"	오늘의 코칭 1회 열기
R3	심층 행동 분석	coaching-result	"광고 보고 오늘의 코칭 열기"	심층 분석 1회 열기

광고 SDK: 토스 Ads SDK 2.0 Rewarded 우선. AdMob 폴백은 토스 SDK 공식 지원 범위에서만 허용(미지원 시 무광고 폴백). 테스트 ID: ait-ad-test-rewarded-id 전환 심리: "매번 광고 보기 귀찮다 → 구독하자" → 자연스러운 PRO 전환

Conversion Points (7개)

ID	트리거	위치	전환 대상
C1	설문 완료 후 Skeleton 노출	survey-result	PRO 또는 광고(R1)
C2	AI 코칭 잠금	dashboard	PRO 또는 광고(R2)
C3	심층 분석 잠금	coaching-result	PRO 또는 광고(R3)
C4	PDF 리포트 탭	coaching-result	PRO (구독 전용)
C5	훈련 커리큘럼 잠금 미션	training-academy	PRO
C6	토큰 소진	(어디서든)	토큰팩 구매 또는 PRO
C7	광고 3회+ 시청 후	(어디서든)	PRO ("광고 없이 이용하세요")

Retention Mechanics (6개)

메커니즘	설명	화면	타이밍
Streak	"🔥 N일 연속 기록 중!" 뱃지	dashboard	기록 저장 시 즉시 갱신
포인트	Toss Points 연동 (프로모션 API)	dashboard	주간 목표 달성 시
급증 알림	"오늘 짖음이 평소의 2배!"	Smart Message → dashboard	일일 집계 후
훈련 리마인더	"오늘의 훈련: 산책 Day 3"	Smart Message → training-detail	설정 시간
비활성 재참여	"뽀삐가 기다리고 있어요"	Smart Message → dashboard	3일 미접속
진행 축하	"첫 번째 훈련 과정 완료!"	Toast + 뱃지	마일스톤 달성

탭 네비게이션 구조

모드	탭 구성	활성화 조건
B2C (일반 사용자)	[기록] [분석] [훈련]	기본
B2B (트레이너/관리자)	[기록] [분석] [훈련] [운영]	role IN ('trainer', 'org_owner', 'org_staff')

---

11.7 여정별 요약 테이블

여정	화면 수	목표 시간	핵심 지표	성공 기준
A: Cold Start	6	< 3분	설문→대시보드 도달률	> 70%
B: Daily Loop	3	< 35초	일일 기록률, 스트릭 유지	DAU 기록률 > 40%
C: Upgrade	4	< 2분	무료→PRO 전환율	> 5% (30일)
D: Deep-Dive	5	5-10분	분석→코칭→훈련 전환율	> 30%
E: B2B Ops	6+	10-30분	일일 기록 처리량, 리포트 발송	> 10건/일
F: Multi-Dog	3	< 10초	다견 전환 빈도	다견 유저 전환 > 2회/주

---

11.8 구현 우선순위 (Migration Wave 연동)

우선순위	화면	Wave	비고
P0	login, welcome, survey, survey-result, dashboard, quick-log	Wave 0-1	Cold Start + Daily Loop 핵심
P1	analysis, coaching-result, training-academy, training-detail, notification	Wave 1	Deep-Dive + 알림
P2	subscription, dog-profile, dog-switcher, dog-add, settings	Wave 2	수익화 + 프로필 관리
P3	ops-today	Wave 3	B2B 운영
P4	EmptyState, ErrorState, 엣지 케이스	Wave 4	폴리싱 + 안정화

Wave 간 의존성:

• Wave 0-1 (P0): 독립 실행 가능. 최소 MVP.
• Wave 1 (P1): P0 대시보드 데이터(3건+) 필요.
• Wave 2 (P2): P0 인증 + P1 코칭 데이터 필요.
• Wave 3 (P3): P2 구독/역할 시스템 필요.
• Wave 4 (P4): 전체 화면 완성 후 엣지 케이스 처리.