본문으로 건너뛰기

초기 진입 화면 Requirements

소스 기준: apps/dha-sleep-web/app/page.tsx. 아래 요구사항은 화면이 충족해야 하는 사용자 경험·기능 조건을 정의해 모바일 개발자와 QA가 동일한 기준으로 검증할 수 있도록 한다.

1. 목적 및 범위​

  • SleepZ 웹 온보딩 플로우의 루트 화면으로, 최초 진입 시 언어 선택·Agent 상담 진입·사용자 유형 분기를 제공한다.
  • 범위: 언어 컨텍스트 로딩, Agent 버튼을 통한 상담 진입, 신규/기존 사용자 CTA로의 라우팅.
  • 제외: /onboarding/agreements, /login 내부 로직, 상담 오버레이 세부 UI.

2. 화면 진입 조건​

  1. 루트 경로(/)에서 항상 동일한 구성을 유지하며, 온보딩 흐름의 첫 화면으로 사용된다.
  2. 진입 시점에 현재 언어 설정을 불러오고, 이전 방문 중 켜져 있던 툴팁·상담 창 상태는 모두 초기화한다.
  3. 화면을 떠나거나 언어를 바꿀 때 진행 중이던 안내 메시지 스트리밍 작업이 남지 않도록 즉시 종료한다.

3. 필수 노출 정보​

  1. 언어 전환 영역: 상단 네비게이션 좌측에 위치하며, 선택된 언어에 따라 아래 CTA와 안내 문구가 즉시 동일 언어로 갱신된다.
  2. Agent 버튼: 상단 네비게이션 우측에 표시되며, 버튼을 누르면 Agent 안내 툴팁이 열린다. 안내 문구는 언어 리소스(dictionary.home.agent.tooltip)를 그대로 사용한다.
  3. 사용자 유형 CTA: 두 개의 주요 버튼을 세로로 배치한다.
    • 신규 사용자 → /onboarding/agreements
    • 기존 사용자 → /login 각 버튼의 라벨은 언어 리소스(dictionary.home.newUser.label, dictionary.home.existingUser.label)를 사용해 현지화한다.
  4. Agent 상담 패널: 화면 하단 레이어로 항상 준비되어 있어야 하며, 열릴 때 공통 상담 문자열(dictionary.common.agentChat, dictionary.common.topNavigation.agent)을 받아 출력한다.

4. 상호작용 시나리오​

4.1 Agent 버튼​

  1. 상담 창이 이미 열려 있으면 추가 동작을 수행하지 않는다.
  2. 상담 창이 닫혀 있고 툴팁만 열린 상태라면 툴팁을 닫는다.
  3. 위 두 조건이 아니면 툴팁을 열고, 안내 문구를 3글자 단위·24ms 간격으로 순차 출력한다.
  4. 사용자가 툴팁 내 “자세히 보기(learn more)”를 누르면 해당 시점까지 출력된 문구를 상담 창의 첫 메시지로 넘기고, Agent 상담을 시작한다.

4.2 언어 변경​

  • 언어 전환기 값이 바뀌면 i18n 리소스를 다시 로드하고, 기존 툴팁과 상담 창을 모두 닫은 뒤 새 텍스트로 초기화한다.

4.3 사용자 유형 CTA​

  • /onboarding/agreements와 /login은 클라이언트 내비게이션을 시도하되, 실패 시 브라우저 기본 이동 방식으로 폴백해 접근성을 유지한다.

4.4 툴팁 오버레이​

  • tooltipVisible이 true일 때 배경 오버레이를 활성화하고, 오버레이 클릭 시 closeTooltip()을 호출한다.

5. QA 체크리스트​

  • 언어 변경 직후 CTA·툴팁·채팅 라벨이 동일 언어로 즉시 갱신되는가?
  • Agent 버튼을 반복 클릭했을 때 툴팁 ↔ 상담 창 전환이 의도대로 동작하는가?
  • 신규/기존 사용자 CTA가 각 경로로 정확히 이동하고 뒤로 가기 시 이전 상태를 복원하는가?
  • 툴팁이 열린 동안 화면 외부를 탭하면 스트리밍이 즉시 중단되고 상태가 초기화되는가?