1. 공통 요구사항
필수
- 사용자는 회원가입과 로그인을 할 수 있습니다.
- 가입, 로그인, 인증 검사
- 사용자는 채널에 올라온 글을 볼 수 있습니다.
- 글쓰기, 채널 목록, 채널 내 글 목록
- 인증된 사용자는 채널에 올라온 글을 볼 수 있습니다.
- 인증된 사용자는 채널에 포스트를 남길 수 있습니다.
- 인증된 사용자는 포스트를 즐겨찾기(좋아요)할 수 있습니다.
- 인증된 사용자는 포스트에 댓글을 남길 수 있습니다.
- SPA 형태로 만들어주세요.
- 엉뚱한 페이지에 접속하면 404 페이지를 보여주세요.
- 사용자는 채널을 검색할 수 있습니다.
- 인증된 사용자는 프로필 이미지 변경 및 포스트를 작성할 때 파일 업로드를 이용하여 이미지를 첨부할 수 있습니다.
- 사용자는 가입자의 정보를 볼 수 있습니다.
선택
- 사용자는 현재 접속 중인 사용자를 볼 수 있습니다.
- 사용자는 가입자 목록을 볼 수 있습니다.
- 사용자는 가입자를 이름으로 검색을 할 수 있습니다.
- 사용자는 포스트 혹은 가입자를 검색할 수 있습니다.
- 인증된 사용자는 자신의 정보를 변경할 수 있습니다.
- 인증된 사용자는 자신의 알림 목록을 확인 할 수 있습니다.
- 인증된 사용자는 다른 가입자에게 메시지를 보낼 수 있습니다.
- 인증된 사용자는 자신에게 온 메시지 목록을 확인 할 수 있습니다.
- 인증된 사용자는 특정 사용자와의 메시지 대화 내역을 확인 할 수 있습니다.
- 다크 모드를 적용해보세요.
- WebSocket을 이용하여 다른 사용자의 메시지를 실시간으로 받아보세요.
- WebSocket을 이용하여 알림을 받고 알림을 Context와 localStorage로 관리해보세요.
2. 페이지 별 요구사항
메인페이지, 검색 결과 페이지
- 사용자는 메인페이지에 접근할 수 있습니다.(로고 클릭, URL 입력)
- 인증되지 않은 사용자는 로그인 버튼을 클릭하여 로그인 페이지에 접근할 수 있습니다.
- 인증된 사용자는 프로필 사진을 볼 수 있습니다.
- 프로필 사진을 등록하지 않은 경우 기본 이미지가 보여집니다.
- 프로필 사진을 토글하여 메뉴바를 slide down하여 볼 수 있고, slide up하여 숨길 수 있습니다.
- '사용자 페이지' 클릭 시 자신의 사용자 페이지로 이동합니다.
- '정보수정' 클릭 시 회원 정보 수정 페이지로 이동합니다.
- '로그아웃' 클릭 시 사이트에서 로그아웃된 후 메인페이지로 이동합니다.
- 검색창에서 카테고리(채널) 검색을 통해 해당 카테고리(채널)의 전체 포스트 목록을 조회할 수 있습니다.
- 검색창에서 포스트 제목 또는 가입자의 닉네임 검색을 통해 관련 포스트 목록을 조회할 수 있습니다.
- 전체 카테고리(채널) 목록을 가로방향으로 스크롤하면서 볼 수 있습니다.
- 카테고리(채널) 버튼을 통해 각 채널의 전체 포스트 목록을 조회할 수 있습니다.
- 사용자는 조회된 포스트 목록을 세로방향으로 무한 스크롤하면서 볼 수 있습니다.
- 포스트 이미지에 마우스를 hover하면 이미지가 커지거나 움직이는 효과(gif)를 볼 수 있습니다.
- 포스트 이미지를 클릭하면 포스트 상세 페이지로 이동합니다.
- 각 포스트 하단에서 즐겨찾기(좋아요) 버튼과 즐겨찾기(좋아요) 개수를 볼 수 있습니다.
- 인증된 사용자는 각 포스트 하단에서 즐겨찾기(좋아요) 버튼을 토글할 수 있습니다.
- 해당 포스트를 즐겨찾기(좋아요) 하지 않은 경우 버튼 클릭 시 포스트를 개인 즐겨찾기(좋아요) 목록에 등록합니다.
- 해당 포스트를 즐겨찾기(좋아요)한 경우 클릭 시 포스트를 개인 즐겨찾기(좋아요) 목록에서 제거합니다.
- 인증된 사용자는 포스트 작성 버튼을 볼 수 있습니다.
- 포스트 작성 버튼 클릭 시 작성 페이지로 이동합니다.
사용자 페이지
- 모든 사용자는 사용자 페이지(본인 혹은 다른 사용자)에 접근할 수 있습니다.
- 모든 사용자는 해당 페이지 사용자의 정보를 확인할 수 있습니다.
- 사용자 이름 을 확인 할 수 있습니다.
- 팔로워 수를 확인 할 수 있습니다.
- 팔로잉 수를 확인 할 수 있습니다.
- 인증되지 않은 사용자가 사용자 페이지에 접근한 경우
- 팔로우 버튼을 클릭 시 로그인 알림 창이 등장합니다.
- 인증된 사용자가 사용자 페이지에 접근한 경우
- 팔로우 중 → 언팔로우 버튼이 활성화 됩니다.
- 언팔로우 중 → 팔로우 버튼이 활성화 됩니다.
- 사용자는 탭을 클릭해 해당 사용자가 등록한 포스트를 확인 할 수 있습니다.
- 좋아요 탭에서는 해당 사용자가 즐겨찾기(좋아요)한 짤을 확인할 수 있습니다.
- 업로드 탭에서는 해당 사용자가 업로드한 짤을 확인할 수 있습니다.
- 사용자는 포스트를 클릭해 해당 포스트의 상세페이지로 이동할 수 있습니다.
로그인 페이지
- 사용자는 로고를 확인할 수 있습니다.
- 로고를 클릭해 메인페이지로 이동할 수 있습니다.
- 사용자는 아이디를 입력할 수 있습니다.
- 입력한 아이디가 이메일 형식인지 유효성을 검사합니다.
- 사용자는 비밀번호를 입력할 수 있습니다.
- 사용자는 로그인 버튼을 클릭하여 입력한 아이디와 비밀번호로 로그인을 완료할 수 있습니다.
- 사용자가 로그인을 실패할 경우
- "아이디와 비밀번호를 확인하세요"라는 문구를 확인할 수 있고 로그인페이지에서 다시 아이디, 비밀번호를 입력할 수 있습니다.
- 사용자는 회원가입 버튼을 클릭하여 회원가입 페이지로 이동하여 회원가입을 진행할 수 있습니다.
회원가입 페이지
- 모든 사용자는 회원가입 페이지에 접근할 수 있습니다.
- 모든 사용자는 회원가입에 필요한 정보를 입력할 수 있습니다.
- email을 입력할 수 있습니다.
- password을 입력할 수 있습니다.
- name을 입력할 수 있습니다.
- 필수 정보( email, name, password )를 입력하지 않고 작성완료 버튼을 누를시 알림창을 보여 줍니다.
- A 항목을 입력하지 않을시 "A 항목을 입력해주세요"라는 문구를 보여줍니다. (단, A는 필수 정보 중 하나)
- 작성완료 버튼을 클릭시 중복된 email과 name이 있을때 알림창을 보여줍니다.
- 중복된 email → "이미 있는 email 입니다."
- 중복된 name → "이미 존재하는 name 입니다." → api단에서 중복된 name을 확인하지 않습니다.
- 사용자는 작성완료버튼을 클릭해 회원가입을 요청할 수 있습니다.
- 사용자는 취소 버튼을 클릭해 회원가입을 취소할 수 있 습니다.
- 클릭 시"회원가입을 취소하시겠습니까"라는 문구를 보여줍니다.
- "예"를 클릭 시 로그인 페이지로 이동합니다.
- "아니오"를 클릭 시 페이지는 유지됩니다.
- 회원가입이 완료되면 로그인페이지로 이동합니다. → 자동으로 로그인까지 진행후, 메인페이지로 이동합니다.
포스트 상세 페이지
- 사용자는 자신이 작성한 게시글일 경우 더보기 버튼(...)을 클릭하여 수정, 삭제 버튼을 확인할 수 있습니다.
- 사용자는 수정버튼을 클릭하여 게시글 작성 페이지에서 게시글을 수정할 수 있습니다.
- 사용자는 삭제 버튼을 클릭하여 "정말로 삭제하시겠습니까?"에 대한 질문을 받아 예 혹은 아니오로 해당 게시글을 삭제하거나 취소할 수 있습니다.
- 사용자는 프로필 사진을 토글하여 메뉴바를 slide down하여 볼 수 있고, slide up하여 숨길 수 있습니다.
- '사용자 페이지' 클릭 시 자신의 사용자 페이지로 이동합니다.
- '정보수정' 클릭 시 회원 정보 수정 페이지로 이동합니다.
- '로그아웃' 클릭 시 사이트에서 로그아웃된 후 메인페이지로 이동합니다.
- 사용자는 복사 버튼을 클릭하여 이미지를 복사할 수 있습니다.
- 사용자는 즐겨찾기(좋아요) 버튼을 클릭하여 개인 페이지에 이미지를 등록할 수 있습니다.
- 사용자는 이미지의 제목을 확인할 수 있습니다.
- 사용자는 로그인한 상태라면 자신의 프로필 사진과 이름, 댓글 작성 요소가 있는 블럭내의 댓글 작성 요소에 댓글을 입력할 수 있습니다.
- 사용자는 가장 오래된 댓글을 단 사용자의 프로필 사진, 이름, 댓글을 단 시간(혹은 ~시간전 형태 - 추후 수정), 댓글 내용을 확인할 수 있습니다.
- 사용자는 자신이 단 댓글에서 수정버튼을 클릭하여 댓글 내용을 수정할 수 있습니다.
- 사용자는 자신이 단 댓글에서 삭제버튼을 클릭하여 해당 댓글을 삭제할 수 있습니다.
- 사용자는 하단 화살표 버튼을 클릭하여 10개의 댓글을 더 확인할 수 있습니다.
- 아래로 더 swipe 혹은 휠을 내리면 10개의 댓글을 더 확인할 수 있고 이 과정을 반복할 수 있습니다.
- 뒤로가기 버튼을 클릭하여 결과 페이지 혹은 개인페이지로 이동합니다.
포스트 작성 및 수정 페이지
- 인증된 사용자만 작성 및 수정 페이지에 접근 할 수 있습니다.
- 사용자는 이미지 파일을 포스트에 업로드할 수 있습니다.
- 사용자는 drag & drop으로 파일을 업로드 할 수 있습니다.
- 파일을 2개 이상 선택해 drag & drop시 경고문구를 보여줍니다.
- 사용자는 파일 선택 버튼을 클릭해 파일을 업로드할 수 있습니다.
- 파일을 2개 이상 선택시 경고 문구를 보여줍니다.
- 사용자는 업로드한 이미지 파일을 제거할수 있습니다.
- 사용자는 이미지 파일 업로드 도중에 취소할 수 있습니다.
- 사용자는 포스트의 제목을 입력할 수 있습니다.
- 사용자는 포스트의 제목을 수정할 수 있습니다.
- 사용자는 카테고리를 1개 이상 선택하야만 합니다.
- 사용자는 선택한 카테고리를 한번 더 클릭하여 선택을 해제 할수 있습니다.
- 작성 완료 버튼을 클릭하면 포스트가 선택한 카테고리에 포스팅됩니다.
- 필수 작성요소를 미완료 상태로 작성완료 버튼을 클릭할 시 경고 문구가 등장합니다.
- 카테고리를 선택하지 않을 시 "카테고리를 선택해주세요" 경고 문구가 등장합니다
- 제목을 입력하지 않을 시 "제목을 입력해 주세요" 경고 문구가 등장합니다.
- 이미지를 업로드 하지않을 시 "업로드할 이미지가 없습니다." 경고 문구가 등장합니다.