Skip to content

[FEAT] 온보딩 퍼널 구현 #134

Description

@ehye1

🛠️ 만들고자 한 기능 설명

/[locale]/onboarding은 현재 빈 페이지입니다. 이전 #108, #118에서 구현된 온보딩 UI 컴포넌트(OnboardingSelectCard, OnboardingButton, OnboardingGoogleButton, OnboardingStepButton, OnboardingTimeDropdown)를 @use-funnel/browser로 4단계 퍼널(언어 선택 → 작업 시간 예측 → 생활 패턴 → 구글 캘린더 연동)로 조립해 실제 온보딩 화면과 흐름을 완성합니다. 백엔드 API 연결은 이번 범위에서 제외하고, 확정된 요청 스펙에 맞춘 payload 조립까지만 구현합니다.

✅ TODO LIST

  • @use-funnel/browser 설치 및 퍼널 타입 정의 (_types/onboarding-funnel.ts)
  • OnboardingFunnelContainer 구현 (useFunnel로 4단계 상태·히스토리 관리)
  • 언어 선택 스텝 연결 (OnboardingSelectCard size=sm 재사용)
  • 작업 시간 예측 스텝 연결 (OnboardingSelectCard size=lg 4지선다 재사용)
  • 생활 패턴 스텝 연결 (OnboardingTimeDropdown 기상/취침 2개 재사용)
  • 캘린더 연동 스텝 연결 (OnboardingGoogleButtonContainer + 건너뛰기 처리)
  • 제출 API 연동 (_queries/postOnboarding.ts)
  • 제출 완료 후 선택 언어 locale로 리다이렉트
  • i18n 문구 추가 (ko/en)

⏰ 예상 작업 기간

📝 참고 링크(선택)

🗣️ ETC(선택)

📸 피그마 스크린샷

Metadata

Metadata

Assignees

Labels

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions