초기화면 (로그인, 회원가입)

메인 화면 (로그인 후)

• 타임캡슐이 없을 때

  → 타임캡슐이 아직 없어요. 만들러 가볼까요? 안내 표시

  → 타임캡슐 제작 페이지로 전환

• 타임캡슐이 있을 때

  → 내 앞바다 (랜덤으로 다른 사람 캡슐 보여주기)

  디데이 인 경우 ⇒ 안내 메시지와 함께 내 거 보여주기

  → 전체 지도 (내 캡슐이 있는 위치 보기)

캡슐 생성 (로그인 후)

• 진입점

  : 캡슐이 없을 때 지도화면으로 전환하는 버튼에 아이콘을 표시해두고 유도

  → 지도화면에서 alert나 모달로 캡슐 생성 안내하기

  → 캡슐 생성하기 확인 누르면 캡슐 생성 창 전환

  → 나중에 할게요 누르면 앞바다 화면으로 전환 (전환 안내화면 노출)

• 캡슐 생성하기 버튼 클릭

  → 새 페이지 로딩

  → 캡슐 디자인 선택 (1페이지)

  : 종이 색상, 종이 줄선 모양, 병 모양, 병 색상, 병 뚜껑

  → 캡슐 이름, Todo 목록, 미래의 나에게 한마디 입력 ( 2페이지 )

  → 완료 버튼 클릭

  → 생성 성공시 : 작성 완료됏다는 문구 노출, 앞바다 화면으로 전환

  → 지도화면에서 확인 가능하다는 안내 해주기

  → 생성 실패시 : 에러 메시지와 함께 화면 유지

  ⇒ 중간에 페이지 벗어나면 저장되지 않는 다는 confirm 창 보여주기

로그인

• 로그인 버튼 누르면 화면 전환

  → 닉네임, 비밀번호 입력 후 엔터나 로그인 버튼 클릭

  → 로그인 성공하면 바로 메인 화면

  → 로그인 실패하면 에러 메세지 노출

회원가입

• 회원가입 버튼 누르면 화면 전환

  → 닉네임, 비밀번호, 비밀번호 확인 입력 후 엔터나 회원가입 버튼 클릭

  → 닉네임 중복체크, 비밀번호 = 비밀번호 확인 입력 값만 체크 (길이, 특수문자 조건 없음)

  → 조건 충족 안되면 회원가입 버튼 비활성화

  → 조건 충족 시 회원가입 버튼 활성화

  → 회원가입 성공하면 로그인 화면 이동

  → 회원가입 실패하면 에러 메세지 노출

비밀번호 수정

• 내 앞바다 화면에 설정 아이콘 클릭

• 비밀번호 수정 버튼 클릭

  → 비밀번호 수정 화면 전환

  → 현재 비밀번호 확인

  → 현재 비밀번호 일치 시 다음 단계 진행

  → 현재 비밀번호 불일치 시 에러 메세지 노출

  → 새로운 비밀번호, 새로운 비밀번호 확인 입력

  → 비밀번호 두 개 일치시 버튼 활성화

  → 비밀번호 수정하기 버튼 클릭

  → 성공시에는 내 앞바다 화면

  → 실패시에는 에러 메세지 노출