회원 가입 페이지
개인정보 약관 동의
사용자는 필수 조건들에 반드시 동의해야 한다.
전체 동의 칸 체크 시 모든 조건에 동의할 수 있다.
아이디 입력
이메일 형식의 아이디를 입력해야 한다.
비밀번호 입력
비밀번호는 다음 조건을 만족해야 한다.
- 8자 이상
- 영어 소문자, 숫자, 특수문자를 각각 1개 이상 포함해야 한다.
- 원주 ) 비밀번호는 프론트에서 크립토화 하여 보낸다.
디비는 해싱된 비밀번호만을 가진다.
프론트와 서버는 해싱된 값만을 비교한다.
유저의 플레인 비밀번호는 해싱값의 키로만 사용
되는 형식
비밀번호 확인
상단에서 입력한 비밀번호와 일치해야 한다.
사용자 이름
사용자의 닉네임을 입력받는다. 닉네임은 2글자 이상이여야 한다.
회원 가입 완료
회원 가입 완료
사용자에게 회원 가입 완료 메세지를 띄워주고 메인 화면으로 이동한다.
메인 화면 전환
사용자에게 로그인 성공을 알려주고 메인 화면을 보여주도록 한다.
메인 화면
채널 목록 확인
사용자는 자신이 속해 있는 채널의 목록을 확인할 수 있다.
최근 접속 채널
사용자는 자신이 가장 마지막에 접속했던 채널의 최신 포스팅을 기본 값으로 확인할 수 있다.
포스트 확인
사용자는 화면 중앙에 현재 속한 채널의 포스트들을 최신순으로 확인할 수 있다.
포스트 스크롤
사용자는 포스트 목록을 스크롤하여 누적된 포스트를 확인할 수 있다.
포스트 디테일 - 모달
포스트를 클릭하면 사용자는 포스트를 모달 화면을 통해 좋아요 수와 댓글 내용을 자세히 확인할 수 있다.
포스트 디테일 - 모달 - 좋아요 버튼
사용자는 포스트 모달에서 좋아요 버튼 눌러서 좋아요를 남길 수 있다.
포스트 디테일 - 모달 - 댓글
사용자는 포스트 모달 하단부분에서 해당 포스트에 댓글을 입력할 수 있다.
현재 상태 확인
사용자는 상단 Nav Bar를 통해 현재 상태(현재 페이지, 대화 중인 상대 등)를 확인할 수 있다.
검색창
포스트 또는 사용자를 검색할 수 있는 화면으로 전환한다.
뒤로가기 버튼
사용자는 뒤로가기 버튼을 통해 이전 페이지로 이동한다.
메시지 버튼
사용자는 메세지 버튼을 통해 주고받은 메세지 목록이 있는 화면으로 이동한다.
알림 버튼
사용자는 알림 버튼을 통해 받은 알림을 확인할 수 있다.
홈 버튼
사용자는 홈 버튼을 통해 홈 페이지로 이동한다.
검색 버튼
사용자는 검색 버튼을 통해 검색 페이지로 이동한다.
채널 버튼
사용자는 채널 버튼을 통해 채널 리스트 페이지로 이동한다.
프로필 버튼
사용자는 프로필 버튼을 통해 프로필 페이지로 이동한다.
사용자는 화면에서 본인의 가입 정보를 확인할 수 있다.
마이페이지/타 사용자 페이지 구분
로그인한 사용자 정보에 따라
마이페이지/타사용자를 구분해야 합니다.
비밀번호 변경 버튼
사용자는 비밀번호 변경 버튼을 통해서 비밀번호를 변경할 수 있다. 변경할 비밀번호는 다음 조건을 만족해야 한다.
- 8자 이상
- 영어 소문자, 숫자, 특수문자를 각각 1개 이상 포함해야 한다.
프로필 이미지 변경
사용자는 프로필 변경 버튼을 눌러서 프로필 사진을 변경할 수 있다.
사용자는 스크롤을 통해 주고받은 메세지 목록을 확인할 수 있다.
상대 프로필 이미지
메세지를 주고 받은 상대와의 채팅 목록을 클릭하면 해당 상대방과의 1대1 채팅을 진행할 수 있다.
사용자는 제목과 본문을 수정하고 게시하기 버튼을 통해서 현재 채널에 포스팅을 게시할 수 있다.
사용자는 알림 페이지에서 알림을 읽지 않은 순, 이후 최신순으로 확인할 수 있다.
사용자 리스트
결과를 눌렀을 때 리다이렉트
사용자는 해당 사용자의 프로필 화면으로 이동하여 프로필을 확인할 수 있다.
포스트 리스트
결과를 눌렀을 때 리다이렉트
사용자는 해당 포스트 디테일 화면으로 이동하여 포스트를 확인할 수 있다.
전역 데이터 상태
전역적으로 관리해야 하는 데이터
전역 UI 상태
전역적으로 사용되는 UI 상태 관리
전역 UI 매니지먼트
UI 상태에 따라 UI 의 동작을 주관하는 컴포넌트
공용 컴포넌트 - 텍스트
textarea 형태 / input 형태
공용 컴포넌트 - 이미지
기본기능 구현 완료 / 점진적으로 개선 예정
공용 컴포넌트 - 아이콘
구글 머티리얼 아이콘을 사용할 수 있다.
공용 컴포넌트 - 포스트 디테일 카드
- 포스트를 클릭하면 사용자는 포스트를 모달 화면을 통해 좋아요 수와 댓글 내용을 자세히 확인할 수 있다.
- 사용자는 포스트 모달에서 좋아요 버튼 눌러서 좋아요를 남길 수 있다.
- 사용자는 포스트 모달 하단부분에서 해당 포스트에 댓글을 입력할 수 있다.
