1
메인페이지에 들어가서
로그인 폼을 볼 수 있다.
2
로그인 버튼을 클릭해서
로그인 된 메인 화면페이지로 이동할 수 있다.
3
회원가입 버튼을 클릭해서
회원가입 페이지 이동할 수 있어야 한다.
4
폼을 작성해서 버튼을 클릭하면
회원가입이 완료되었다는 메시지를 받아야 한다.
5
입력을 하지 않고 버튼을 클릭하면
입력에 대한 에러 메시지가 나와야 한다
6
비밀번호와 비밀번호 확인이 다른 input을 작성한다면
비밀번호 입력에 대한 에러 메시지가 나와야 한다
7
input의 형식(이메일형식, 사용자 이름)이 기존과 맞지 않다면
형식을 제대로 맞춰서 쓰라는 에러 메시지가 나와야 한다.
9
로그인에 기입한 id와 password가 DB에 있는 것과 다르다면
제대로 입력하라는 메시지가 나와야 한다.
로그인을 했다면
실제 메인에 들어가 있는 사용자들의 리스트를 볼 수 있어야 한다.
11
로그인을 하고 타이머 버튼을 클릭하면
타이머가 활성화되어야 한다.
12
인증시간이 되면
인증 확인 메시지를 볼 수 있다.
13
인증 확인 메시지를 클릭하면
인증 확인에 대한 모달 창이 활성화되어야 한다.
14
타이머가 5분 이내이면
인증 알람을 받지 않는다
15
인증 모달창에서 이미지를 드래그하면
이미지 파일이 담겨 실제 브라우저 상에서 출력되어야 한다.
16
제거(X) 버튼을 누르면
업로드된 이미지가 사라진다
17
이미지 업로드가 아직 되지 않았을 때
업로드 버튼이 비활성화된다(disabled)
18
이미지 용량이 10MB를 초과하면
이미지 용량이 초과되었다는 메시지를 보여준다
19
이미지가 업로드된 상태에서 업로드 버튼을 클릭하면
업로드 성공에 대한 메시지를 보여준다
20
이미지 업로드가 성공하면
좌측탭의 유저 목록에서 자신의 인증 여부가 체크된다 && 인증 공유 화면으로 이동한다 (댓글 API에서 해당 ID가 있는지 체크)
21
인증공유 페이지를 들어가면
"최신 보기"가 선택된 상태에서 인증 사진 그리드를 볼 수 있다
22
"최신 보기(마지막 인증)"와 "모두 다 보기(전체 인증)"를 각각 클릭하면
조건에 맞는 인증 모음을 볼 수 있다
23
인증을 안 한 접속자의 그리드 셀을 보면
킹받는 사진을 볼 수 있다 (임의의 placeholder을 만들어서 테스트)
24
인증 사진에 마우스오버를 하면
하트 버튼 && 하트 카운트를 볼 수 있다
25
인증 사진에 빈 하트 버튼을 클릭하면
하트 버튼의 색상이 채워진다 && 하트 카운트가 1만큼 증가한다
26
인증 사진에 색상이 채워진 하트 버튼을 클릭하면
하트 버튼이 비워진다
28
이미지를 클릭하면
이미지 보기 모달 창이 뜬다
29
더보기 버튼을 누르면
자리비움과 로그아웃 버튼이 뜬다
30
자리비움 버튼을 누르면
"—하는 중"이 "자리비움"으로 바뀐다
31
로그아웃 버튼을 누르면
모달 창을 띄워서 기록된 타이머 수치를 보여주고 "그래도 종료하시겠습니까"라는 텍스트와 "확인", "취소" 버튼을 보여준다
32
로그아웃 모달창에서 종료 "확인" 버튼을 클릭하면
로그아웃되고 처음 화면으로 돌아간다
33
할일 수정을 누르면
드롭다운으로 input 박스가 떠서 할 일을 수정할 수 있다(노션 참고)
35
할 일 수정 모달에서 할 일을 hover하면
할 일을 제거하는 x버튼이 보인다.
36
할 일에 있는 x버튼을 클릭하면
할 일이 제거된다.
37
할 일을 입력할 때마다(onInput)
해당하는 할 일들이 필터링된다
39
로그인 후 새로고침을 하면
계속해서 로그인이 되도록 한다.
40
로그아웃 이후에 새로고침을 클릭하면
여전히 로그인 페이지에 머물도록 한다. (즉 로그아웃이 됨)
41
로그아웃 모달이 나오면
현재까지의 타이머 시간을 볼 수 있다.
42
모각코 버튼이나 인증 공유 버튼을 클릭하면
각각 타이머 UI나 인증 공유 사진 모음을 볼 수 있다
43
사용자가 알 수 없는 주소로 이동하면
알 수 없는 주소로 왔다는 것을 알려준다.
44
사용자가 '홈으로' 버튼을 클릭하면
다시 메인 페이지로 이동할 수 있도록 해준다.
44
사용자가 자신의 이미지를 클릭하면
이미지 업로드 모달이 나온다.
45
사용자가 이미지 업로드 모달에서 프로필 사진을 클릭하면
이미지 파일을 업로드할 수 있다.
46
사용자가 이미지 파일 변경 버튼을 클릭하면
이미지 파일을 다시 업로드할 수 있다.
47
사용자가 이미지 파일 제거 버튼을 클릭하면
맨 처음 프로필 사진이 나온다.
48
사용자가 확인 버튼을 클릭하면
이미지 업로드 API를 요청하고, 성공 시 프로필 사진이 바뀐다.
49
확장자가 다르거나 이미지 용량이 10MB 이상이면
이에 대한 알림 메시지를 띄운다.
50
사용자가 아직 프로필 사진을 변경하지 않았다면
이에 따른 컴포넌트의 disable 처리를 해준다.
51
사용자가 자신 또는 다른 사람의 더보기 버튼을 클릭하면
유저 정보를 볼 수 있는 메뉴가 나온다.
52
사용자가 유저 정보 보기 버튼을 클릭하면
유저 정보 페이지(혹은 모달)로 이동한다.
53
사용자는 유저 정보 페이지를 보았을 때
유저에 대한 상세 정보를 볼 수 있다.
54
사용자는 유저 정보 페이지를 보았을 때
마스킹 처리된 이메일을 볼 수 있다.
55
사용자는 유저 정보 페이지에서 로그아웃 했을 때
쿠키가 사라져, 로그인 페이지로 이동하게 된다.