본문으로 건너뛰기

SleepZ 웹 프런트엔드 요구사항

이 디렉터리는 SleepZ 사용자에게 직접 제공되는 웹 애플리케이션 요구사항을 관리합니다. 모바일 앱과 동일한 경험을 웹에서도 제공하여, 수면 리포트 조회·맞춤 코칭 확인·온보딩을 웹 브라우저로 이용할 수 있도록 하는 것이 목표입니다.

문서 구성 제안​

  • ux-flows/: 기능 검증을 위한 기본 화면 흐름, 관리자/케어팀 시나리오.
  • component-specs/: 폼, 테이블, 데이터 시각화 등 기능 중심 UI 컴포넌트 명세.
  • integration-guides/: 백엔드 API 명세, 모킹 전략, 에러 처리 프로토콜.
  • testing-strategy.md: 수동/자동 회귀 테스트, TimeMachine 의존성 검증 시나리오.

Integration Guides 링크​

SleepZ 웹은 단일 세션 정책을 따른다. 새로운 로그인은 기존 세션을 즉시 종료하며, 별도의 다중 세션 UI를 제공하지 않는다.

Testing 링크​

Components 문서​

Guest Experience 문서​

게스트 계정은 identityLevel=GUEST 상태에서 제한 기능만 접근할 수 있다. 프런트엔드는 사용자 프로필(GET /users/me) 응답의 accountType을 매 뷰 렌더링 진입 시 확인해, Step-up 배너 및 제한 기능 가드를 조건부 렌더링해야 한다.

작성 시 유의 사항​

  1. 사용자 경험(UX)과 모바일·웹 간 일관성을 우선시합니다.
  2. API 계약(docs/domains) 또는 DTO 변경 시 해당 문서를 갱신합니다.
  3. 접근성·반응형 규칙을 명시하고 QA 시나리오에 반영합니다.
  4. 테스트 케이스와 연동해, yarn test:features 기준으로 검증 가능한 시나리오를 우선 정리합니다.

기술 스택 기준​

  • 프레임워크: Next.js 15
  • UI 라이브러리: React, Tailwind CSS, shadcn/ui
  • 상태 및 데이터 계층은 Next.js App Router 권장 패턴을 따르며, 위 스택 조합을 벗어난 구현은 별도 승인을 받아야 합니다.