모든 페이지에서는 토큰이 없다면
/login으로 라우팅 해야한다.
서버에서 토큰을 받을 때, 유저 정보가 비어있다면
/signup (회원가입 페이지)로 보내준다
서버에서 토큰을 받을 때, 유저 정보가 있다면
/로 보내준다
/login
처음 페이지에 들어온다면
인덱스 페이지를 띄워준다.
로그인하기 버튼을 클릭한다면
카카오 api 시나리오를 따른다.(인가 코드 받기)
카카오 로그인에서 인가코드를 받으면
서버에 인가코드를 전달한다
/signup
서버에서 토큰을 받을 때, 유저 정보가 비어있다면
회원가입 페이지로 넘어온다.
유저가 닉네임을 입력하지 않거나, 2글자 미만이면
회원가입 버튼을 클릭할 수 없게 한다
유저가 프로필 사진을 추가하지 않으면
상관없다 (카카오 프사를 백엔드에서 받기로)
유저의 닉네임이 중복이면
유저에게 닉네임 중복 안내를 띄워준다
포커스 아웃했을 때 api 사용
회원가입 버튼을 클릭한다면
사용자에게 닉네임, 프로필 사진을 받아서 서버에 전송한다.
회원가입을 완료 했다면
/ 페이지로 라우팅 한다.
/
처음 페이지로 들어온다면
오늘 열 수 있는 필름들이 있는지 확인한다.
오늘 열 수 있는 필름이 있다면
[오늘 열 수 있는 필름 바로가기] 모달을 띄워준다
[보러갈래요]를 선택한다면
/{postId} 엿보기 페이지로 이동시킨다.
[나중에 볼래요]를 선택한다면
로컬스토리지에 하루동안 해당 모달을 띄우지 않도록 저장해둔다
오늘 열 수 있는 필름이 없다면
- 내 위치 중심으로 지도의 위치를 변경시킨다.
- 열람 권한이 있는 필름들의 마커를 지도에 표시한다.
- 열린 필름의 마커와 닫힌 필름의 마커를 다르게 표시한다.
마커를 클릭한다면
url을 /?id=postId 로 바꿔주고,
팝업을 띄워준다
로그아웃을 클릭 한다면
바로 로그아웃한 다음 로그인 페이지로 이동시킨다
필름 만들기 클릭 시
포스트 생성 페이지로 라우팅 시킨다
/?id=postId
맵 페이지에서 마커를 누른다면
url을 /?id=postId 로 바꿔주고,
팝업을 띄워준다
사진 나오는 날 이전이라면
팝업에 들어갈 내용은
- 필름 타이틀
- 엿보기 문구
- 사진 나오는날 (문구)
- 2012.12.31 (나오는날 숫자로)
- 버튼 ( 필름 삭제하기 ) -작성자인 경우에만
을 랜더링 한다.
유저가 엿보기한 필름의 작성자인 경우에만
삭제하기 버튼을 보여준다
사진 나오는 날 이후라면
팝업에 들어갈 내용은
- 필름 타이틀
- 엿보기 문구
- 사진 나온 날 (문구)
- 2012.12.31 (나오는날 숫자로)
- 버튼 ( 사진을 보러가기 )
을 렌더링 한다
필름 삭제하기를 클릭한다면
모달 창을 띄워서
유저에게 삭제 여부를 한번 더 물어본다.
필름 삭제 완료 시
지도 화면을 미리보기 되고있던 지도위치 그대로 보일 수 있게
홈으로( / ) 보낸다.
[사진을 보러가기]를 클릭하면
/post/:postId 페이지로 라우팅한다.
X버튼을 눌러서 모달창을 닫으면
루트경로( / )로 페이지를 라우팅하고 지도화면을 미리보기 하던 위치 그대로 보일 수 있게 홈으로( / ) 보낸다.
/post/:postId
유저가 열람 권한이 없다면
/으로 랜딩하고 열람권한이 없습니다 토스트를 띄워준다
유저가 열람 권한은 있지만, 해당 위치에서 개봉을 시도한게 아니라면
[거리가 멀어서 사진을 찾을 수 없습니다] 모달?토스트?를 띄워준다 → 엿보기 화면으로 이동
유저가 처음 포스트 페이지에 들어간다면(최초 개봉자)
축하를 해줘야한다(로띠 폭죽?)
유저가 포스트 페이지에 들어간다면
- 작성자, 작성일
- 열람 권한
- 사진 나온 날
- 최초 개봉자, 개봉일
- 필름 이름
- 필름엿보기 문구
- 필름 위치 지도(보여주기용)
- 이미지
- 필름 내용
을 보여줘야 한다
유저가 포스트 페이지에 들어간다면
열리는 날(지정한 날)을 기준으로 몇일째 함께하는 중인지 알 수 있어야한다
유저가 작성자이면
포스트를 삭제할 수 있어야한다
유저가 포스트 삭제를 클릭하면
삭제 안내 모달을 띄워줘야한다
유저가 삭제 모달에서 삭제를 클릭하면
해당 포스트를 삭제하고 /으로 보내줘야한다(지도를 이전위치 기준으로 띄워준다)
- 포스트가 삭제되었습니다 토스트 띄우기
유저가 삭제 모달에서 취소를 클릭하면
모달을 닫는다
/post/create?step=0
첫 진입 한다면
유저의 현재 위치가 마커의 위치가 된다.
유저가 위치를 변경 하고싶다면
지도를 클릭 해서 마커의 위치를 변경시킬 수 있다
사용자가 입력하던 정보는
다음 단계로 넘어가는 순간에 저장한다.
유저가 위치를 변경 하고싶다면
마커를 드래그앤 드랍으로 이동하도록 한다.
여기에 보낼게요 버튼을 클릭한다면
step이 1이 된다.
/post/create?step=1
step이 1이라면
- 필름의 이름 필수
- 엿보기 문구 필수
- 사진1장 업로드
- 내용
을 작성할 수 있다.
step이 1 일 때 필수 값이 비어있으면
[다음] 버튼 클릭 시 or 인풋 포커스 아웃 시
필수 값을 입력해 달라는 안내를 한다
step이 1 이고
사진이나 내용 둘 다 없다면
둘 중 하나는 필수라는 모달을 띄운다
step이 1 이고
다음 버튼을 누른다면
step을 2로 변경시킨다.
/post/create?step=2
step이 2 라면
- 타임캡슐이 열리는 날짜를 설정할 수 있다.
- 디폴트로 내일 날짜를 넣어둔다.
- 오늘 기준으로 지난 날짜는 설정할 수 없다
타임캡슐 보내기 버튼을 클릭한다면
타임캡슐은 수정할 수 없다는 경고 모달을 보여준다.
타임캡슐 보내기 버튼을 클릭 한 상태에서
아니요 잠시만요 버튼을 누른다면
- 모달을 닫는다
타임캡슐 보내기 버튼을 클릭한 상태에서
네 좋아요 버튼 을 클릭하고, 전송에 성공한다면
/의 작성했던 포스트에 대한 엿보기로 보낸다
갖고있던 포스트에 대한 정보를 삭제한다.
(에러코드가 없는 경우)전송에 실패한다면,
'잠시후 다시 시도해보세요' 토스트를 띄워주고, 해당페이지에 머문다
뒤로가기 버튼을 누른다면
step을 1 감소시킨다.
step이 0때
뒤로가기 버튼을 누른다면
/ 로 이동시킨다.
이때 이전의 지도 위치로 이동시킨다.