참고자료
작성 방법
구현해야하는 기능(동작 또는 데이터에 따른 변동)요소에 대해 상세하게 설명해주세요.
- 1) 무엇을 2) 어떻게 작동해야하는지 적어주세요
- 기능이 작동하지 않았을 때 에러처리 어떻게 해야할지(에러 메세지 등) 빨간색으로 적어주세요.
- 페이지 이동은 노란색으로 적어주세요.
헤더
번호 | 기능명세서 |
1 | [로고] 선택
- 메인페이지로 이동 |
2 | [파티 찾기 버튼] 선택
- OTT 선택 모달 표시 |
3 | [파티 만들기 버튼] 선택
- 파티 생성 페이지로 이동 |
4 | [로그인 버튼] 선택
- 비로그인 상태에서만 표시
- 로그인 페이지로 이동 |
5 | [마이페이지 버튼 ]선택
- 로그인 상태에서만 표시
- 개인정보 페이지로 이동 |
6 | [OTT 선택 모달] 선택
- 파티 찾기 버튼 클릭시 표시 |
7 | [OTT 닫기 버튼] 선택
- OTT 선택 모달 종료 |
8 | [OTT 목록 버튼] 선택
- 해당 OTT 파티 목록 페이지 |
메인 페이지(도르)
번호 | 기능명세서 |
0 | 현재 화면 접근방법
- URL을 통한 접근 |
1 | [파티 현황판 캐러셀] 클릭
- 이전 또는 다음 파티 현황판으로 전환
|
2 | [파티 목록 자세히보기] 선택
- OTT별 파티목록 페이지 이동 |
3 | [서비스 목록] 특정 서비스 선택
- OTT별 파티목록 페이지 이동 |
// GET: Service Service[] { }
로그인 페이지(소셜 로그인 조사후 작성할까요?)
번호 | 기능 명세서 |
0 | 현재 화면 접근방법
- 로그인 버튼 클릭
- 로그인이 필요한 서비스 접근
|
1 | [네이버로 시작하기 버튼] 클릭
- 최초 로그인시 회원가입
- 랜덤 닉네임 지정 (통보!)
|
회원가입 페이지(소셜 로그인 조사후 작성할까요?)
OTT별 파티 목록 페이지(도르)
번호 | 기능 명세서 |
1 | [파티만들기] 선택
- 파티 생성 페이지 이동
(해당 OTT 선택 활성) |
2 | [파티 개요] 선택
- dropdown으로 파티 상세 정보 표시
- 토글 기능
1) OTT 요금제
2) 파티 정원과 현재 파티원 수
3) 파티 시작까지 남은 일자
4) 파티원 미달시 진행 여부 문구
[파티 목록] 필터링
이미 정렬이 된 상태로 보여줌
- 정렬 기준 : 시작일 임박순 && 참여한 파티원 수 && 오래된 파티 순
- 파티 유지 기간 필터링?
- 같은 수준에 있는 파티에 대한 정렬은 등록일 순 |
3 | [파티 더보기] 선택
5 개의 파티를 추가로 화면에 출력
- 프론트끼리 얘기 좀 더 해보기 |
4 | [파티상세 정보]
- 파티개요(2번) 선택시 화면에 표시
- 파티 가입 버튼 선택시 파티 가입 진행
- 서비스 등급은 최고 등급을 가정 |
파티 생성 페이지
Step1
번호 | 기능 명세서 |
0 | 현재 화면 접근방법
- 서비스 파티 목록 페이지 [파티만들기] 버튼 클릭
- 마이페이지 [파티만들기] 버튼 클릭 |
1 | OTT 서비스 목록
- OTT 서비스 목록에서 서비스 1개 선택
- 서비스 파티목록 페이지에서 접근시 해당 서비스가 선택된 상태로 접근
1) 라디오버튼처럼 하나의 서비스만 선택가능
2) 선택한 서비스 활성화 (효과 예: opacity or border 등등 디자인으로 풀수있음)
3) 목록 : 넷플릭스, 웨이브, 왓챠, 티빙, 디즈니+, 라프텔, 쿠팡플레이, 아마존프라임 (8개)
|
2 | [다음] 클릭
- step2 파티기간설정 페이지로 이동 |
Step2
번호 | 기능 명세서 |
0 | 현재 화면 접근방법
- Step1 서비스 선택에서 다음 버튼 클릭
|
1 | 파티생성 단계 stepper |
2 | [날짜입력 input]
- 파티 시작일 설정 input (MUI)
1) input focus시 달력 모달 오픈
2) 모달에서 날짜 선택
3) 선택된 날짜 input에 출력 |
3 | 기간설정 Slider
- 파티 유지 기간 설정 slider (MUI)
1) 1 ~ 12개월 중 선택 가능 |
4 | 기간설정
- 설정한 기간 숫자로 출력 |
5 | [이전] 클릭
- step1 OTT서비스 선택페이지로 이동 |
6 | [다음] 클릭
- step3 파티 규칙설정 페이지로 이동 |
Step3
번호 | 기능 명세서 |
0 | 현재 화면 접근방법
- Step2 기간설정에서 다음 버튼 클릭
|
1 | 파티생성 단계 stepper |
2 | 규칙 태그 목록
- 1인 1회선
- 1인 1기기
- 닉네임과 동일하게 프로필 네임 설정
- 개인사정 환불 불가
- 계정양도 불가
- 설정 임의 변경 불가
- 19세 이상
- 규칙 태그 토글 버튼
1) 규칙태그들 다중 선택 가능
2) 버튼 클릭시 토글
- 태그의 의미 → 검색? 쉬운 진입? |
3 | [이전] 클릭
- step2 기간설정 페이지로 이동 |
4 | [다음] 클릭
- step4 인원설정 페이지로 이동 |
Step4
번호 | 기능 명세서 |
0 | 현재 화면 접근방법
- Step3 규칙 설정에서 다음 버튼 클릭
|
1 | 파티생성 단계 stepper |
2 | [인원 카운트 - 버튼] 클릭
- 클릭시 모집인원 -
- 최소인원 1명
- 최소 인원일 경우 버튼 disabed |
3 | [인원 카운트 + 버튼] 클릭
- 클릭시 모집인원 +
- 최대 모집인원은 서비스 동시접속 인원 수 - 1(파티장 제외)
- 최대 모집인원 달성시 버튼 disabled |
4 | [인원 미달 파티시작 동의]
- 필수 답변요소로 미리 미리 설정해 두지 않고 사용자에게 답변 요구
- 동의할 경우 나머지 금액은 파티장 부담 (계정주인이라 자유도가 높음)
- 동의 하지 않은 경우 모집인원 미달이면 파티 삭제
|
5 | [이전] 클릭
- step3 규칙설정 페이지로 이동 |
6 | [다음] 클릭
- 인원 미달 파티시작 동의여부 답변이 없으면 버튼 disabled
- step5 공유계정 설정 페이지로 이동 |
Step5
번호 | 기능 명세서 |
0 | 현재 화면 접근방법
- Step4 인원설정에서 다음 버튼 클릭
|
1 | 파티생성 단계 stepper |
2 | [공유 아이디 인풋] |
3 | [공유 비밀번호 인풋] |
4 | [공유 비밀번호 확인 인풋]
- 비밀번호 유효성 검사 비밀번호 인풋과 일치하는지 확인
- 비밀번호가 일치하지 않습니다. |
5 | [이전] 클릭
- step4 인원설정 페이지로 이동 |
6 | [다음] 클릭
- 뒤 스텝이 보류된 상황이라 완료버튼으로 바뀌어야 할듯
- form 유효성 검사
1) input이 하나라도 비어있다면 버튼 비활성
2) 비밀번호가 일치하지 않는다면 버튼 비활성
- 마이 페이지로 이동 |
내가 가입한 파티 페이지(낸시)
번호 | 기능 명세서 |
1 | [파티 정보]
1) OTT 이미지
2) OTT 요금제
3) 파티장 / 파티원
4) 요금
5) 파티 유지 기간 |
2 | [공유 계정 정보] 선택
아이디, 비밀번호
카드 뒤집기
- 아이디, 비밀번호 정보를 보여줌 |
3 | [수정] 선택
파티장만 수정 버튼 이 보임
- 모달 창 제공
- 수정 후 알림 보내기 ( 백둥이 분들과 추가적인 논의 필요 ) |
4 | [비밀번호] 유효성 검사
|
5 | [비밀번호 확인] 유효성 검사
- 첫번째로 입력한 비밀번호와 일치하는지 확인
Tooltip
- 비밀번호가 일치하지 않습니다. |
6 | [변경] 선택
- 유효성 검사에 성공하면 모달창이 사라지면서 메세지 상자를 띄운다.
Message Box
- 성공적으로 비밀번호가 변경되었습니다. |
개인정보 페이지 (낸시)
번호 | 기능 명세서 |
1 | [로그아웃] 선택
- 로그아웃 진행 후 메인페이지로 이동 |
2 | [충전] 선택
- 페이지 이동
- 사용자 입력 방식 |
2 | 구독중인 [파티 이름] 선택
- 더보기 버튼
파티 상세 페이지로 이동 |
3 | 종료된 [파티 이름] 선택 불가
disabled 처리 |