기능별 연결을 위한 테스트 스토리 작성
검색 및 보여주기 기능
- 메인 페이지에서 검색창 노출
- 특정 채널 선택 없이 메인 창에서 검색하는 경우 ‘전체 글’ 채널로 이동하여 검색한 결과 노출
- 특정 채널 선택시, 해당 채널의 포스트리스트 불러와 렌더링
- 검색 기능
- 제목, 제목+내용, 작성자를 기준으로 상세 검색
- 검색어를 기준으로 포스트 리스트 정렬
- 하단에 페이지네이션 노출
- 특정 포스트 클릭시 해당 포스트의 상세보기 페이지로 이동
- 특정 채널 선택 중에 다른 채널로 이동시, 모든 검색 옵션 초기화
- (추후) 모든 연결 완료 후 특정 포스트 클릭시 로그인 유/무에 따라 로그인 페이지 또는 채널 상세 보기 페이지로 이동
포스트
- 선택된 post의 제목, 내용, 댓글, 좋아요을 보여준다.
- 글 작성자가 글을 눌렀을 때 글 수정 버튼이 활성화 된다.
- 글 수정 버튼을 누르면 변경 가능한 textarea가 나오는 화면으로 전환되어 글의 제목과 내용을 수정할 수 있고 이미지도 첨부할 수 있다.
- 글 수정 화면에서 글 삭제를 선택하면 작성한 글을 삭제할 수 있다.
- 글 수정을 마친뒤 수정완료를 선택하면 변경된 내용이 반영되어있는 1번 의 화면으로 되돌아간다.
- (추후) 글 작성시 에디터를 사용할 수 있다. & html 마크업을 적용할 수 있다.
회원가입, 로그인, 로그아웃
- 회원가입 버튼을 누르면 회원가입 페이지로 이동한다.
- 회원가입 시에 이미 가입된 email이나 fullName이 있다면 error를 render 하는지 확인한다.
- 입력 조건(email, fullName, password, password 일치여부)을 만족하지 않은 상태에서 회원가입 버튼을 누르면 error가 발생하는지 확인한다.
- 회원가입이 정상적으로 완료되면 로그인 페이지로 이동한다.
- 로그인 페이지 이동 버튼을 클릭하거나 회원가입 시에 로그인 페이지로 이동한다.
- 로그인 하려는 유저가 이미 online 상태인 유저라면 이미 로그인 상태인 유저라고 render 되는지 확인한다.
- 입력 조건(email, password, email이나 password가 일치)을 만족하지 않은 상태에서 회원가입 버튼을 누르면 error가 발생하는지 확인한다.
- 로그인이 정상적으로 수행되면 localStorage에 token 값이 정상적으로 들어가는지 확인 및 token context가 정상적으로 사용할 수 있는지 확인한다.
- 로그아웃 버튼을 누르면 localStorage에 token이 값이 정상적으로 제거되는지 확인하고 token context에 ‘’ 값이 들어오는지 확인
알람
- 처음
메인 페이지
에 들어왔을 때알람 버튼
및알람 표시
(초록색 동그라미) render
- 알람 목록 중
1개의 알람이라도 읽지 않았다면
알람 버튼위에 초록색 동그라미 render
- 메인 페이지에 있을 때 알람 받았을 경우 알람 페이지로 가면 초록색 동그라미 뜨도록
알람 버튼
누르면notificaiton 페이지로 이동
및알람 목록
과모든 알람 확인
버튼 render(data fetch가 되도록)
모든 알람 확인
버튼을 누르면 알람 목록의 모든 알람을 읽음 처리
실시간 알람 check
버튼 누르면 내가 알람 페이지에 머무를 때 들어온 알람을 조회 가능
-
알람 관련 내용 render
및좋아요, 댓글 알람
구분
- 특정 알람 클릭하면 해당 포스트로
이동
- 좋아요 및 댓글 연동 할 예정
유저 정보 페이지
- 헤더의 유저 버튼을 누르면
내 정보
를 볼 수 있는 페이지로 이동한다.
- 커버 이미지, 프로필 이미지, 유저이름, 유저가 받은 공감 총합, 팔로워 수, 팔로잉 수, 내가 쓴 글 목록에 대해 확인할 수 있다.
내 정보
인 경우내 정보 수정
버튼이, 다른 유저인 경우 팔로우 여부에 따라팔로잉
버튼 또는팔로우
버튼이 보인다. -내 정보 수정 버튼을 누르면내 정보 수정 페이지
로 이동한다. - 내가 팔로우한 유저의 경우,팔로잉
버튼. 누르면 언팔이 된다. - 내가 팔로우하지 않은 유저의 경우,팔로우
버튼. 누르면 팔로우가 된다
- 내가 쓴 글 목록은 페이지네이션으로 이동할 수 있다.
- 내가 쓴 글 목록에서 글을 클릭할 경우
해당 글의 상세 페이지
로 이동한다.
- 팔로잉 수 또는 팔로워 수를 클릭 시
해당 목록 페이지
로 이동한다.
내 정보 수정 페이지
- 커버 이미지를 누르면 파일을 선택해서 커버 이미지를 수정할 수 있다.
- 프로필 이미지를 누르면 파일을 선택해서 프로필 이미지를 수정할 수 있다.
- 유저네임 수정 폼에는 현재 이름이 들어가 있으며 수정이 가능하다.
- 비밀번호는 7글자 미만으로 입력 시 경고 메세지가 출력된다.
- 정보 수정 후 저장 버튼을 누르지 않고 뒤로가면 입력한 정보가 저장되지 않는다.
- 정보 수정 후 저장 버튼을 누르면
내 정보 페이지
로 이동하고 다시 뒤로가기를 해도 정보 수정 페이지로 이동하지 않는다.
팔로잉, 팔로워 페이지
- 팔로잉, 팔로워 목록에서 유저 프로필 이미지, 유저 이름을 확인할 수 있다.
- 팔로잉, 팔로워 목록에서 해당 유저에 대해 내가 팔로우하고 있는 경우
팔로잉
버튼이, 팔로우하지 않은 경우팔로우
버튼이 보인다.(예정)
팔로잉
버튼을 누르는 경우 언팔로우,팔로우
버튼을 누르는 경우 팔로우가 된다. (예정)
- 유저 목록에서 유저 클릭 시 해당 유저의 정보 페이지로 이동한다.
전역 관리
- 로그인 시 token context에 값 추가, 로그아웃 시 token context 값을 ‘’로 변경
- 사용자가 임의의로 localStorage에 key와 value를 추가 한 다음 새로고침을 하면 로그인이 되는 문제가 있었다. ⇒ 로그인 시에만 token 값을 사용할 수 있도록 하고 그 외 사항(처음 페이지 들어왔을 때, 사용자가 임의로 local에 값을 바꿀 때)에는 token을 사용할 수 없도록 구현
- 알람 확인 여부(초록색 동그라미)를 모든 페이지에서 확인 가능해야 하기 때문에 notificationStatus context로 관리
그 외 회의 사항
공통 컴포넌트 생각해보기
- 버튼 컴포넌트
- 페이지네이션
- 아바타
- input, textarea
- skeleton(로딩 시에 보여지는 컴포넌트, 시간이 된다면)
- 게시글 틀?? 가능하다면..?
해결해야 할 사항
- 좋아요가 중복으로 선택되는 것
- useMutation 수정 (수정완료)
- tokenProvider 수정(수정완료)
- 컴포넌트 마다 토큰 값 불러오는 로직 로컬스토리지가 아니라 context로 불러올 수 있도록 수정하기