0. 초기화면
•
서비스 접속 초기화면으로 splash 화면이 잠시 나온 뒤 다음 페이지가 나타납니다.
◦
로그인이 되어 있지 않은 경우 : SNS 로그인 페이지
◦
로그인이 되어 있는 경우 : README 홈 화면
•
SNS(카카오톡, 구글, 페이스북) 로그인 기능은 구현되어 있지 않습니다.
1. 회원가입
•
이메일 주소와 비밀번호를 입력하면 입력창에서 바로 유효성 검사가 진행되고 통과하지 못한 경우 각 경고 문구가 입력창 하단에 표시됩니다.
•
이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
•
작성이 완료된 후, 유효성 검사가 통과된 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 화면이 나타납니다.
2. 프로필 설정
•
회원가입 페이지의 유효성 검사를 통과해야 진입할 수 있습니다.
•
프로필 설정에 필요한 프로필 사진, 사용자 이름, 계정 ID, 소개를 입력받습니다.
•
사용자 이름과 계정 ID는 필수 입력사항입니다.
•
계정 ID에는 형식 및 중복 검사가 진행됩니다.
•
프로필 사진은 등록하지 않을 경우 기본 이미지가 등록됩니다.
3. 로그인
•
이메일 주소와 비밀번호를 입력하면 입력창에서 바로 유효성 검사가 진행되고 통과하지 못한 경우 각 경고 문구가 입력창 하단에 표시됩니다.
•
이메일 주소의 형식이 유효하지 않거나 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
•
작성이 완료된 후, 유효성 검사가 통과된 경우 로그인 버튼이 활성화됩니다.
•
로그인 버튼 클릭시 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타나며, 로그인에 성공하면 홈 피드 화면으로 이동합니다.
4. 로그아웃
•
상단 탭의 kebab menu를 클릭 후 나타나는 모달창의 로그아웃 버튼을 클릭하면 확인창이 뜹니다.
•
로그아웃 시 로컬 저장소의 토큰 값과 사용자 정보를 삭제하고 초기화면으로 이동합니다.
5. 탭 메뉴
•
상단 탭 : 각 페이지별로 다른 종류의 버튼을 가지고 있습니다.
◦
뒤로가기 : 브라우저 상에 기록된 이전 페이지로 돌아갑니다.
◦
검색 : 사용자 검색 페이지로 이동합니다.
◦
사용자 이름 : 채팅룸 페이지의 경우 상대방의 사용자 이름을 보여줍니다.
◦
kebab menu : 각 페이지 또는 컴포넌트에 따른 하단 모달창을 생성합니다.
▪
상품, 댓글, 게시글 컴포넌트 - 삭제, 수정, 신고하기
▪
사용자 프로필 페이지 - 설정 및 사용자 정보, 로그아웃
•
하단 탭 : 홈, 채팅, 게시물 작성, 프로필 아이콘을 클릭하면 각각 홈 피드, 채팅 목록, 게시글 작성 페이지, 내 프로필 페이지로 이동합니다.
6. 홈 피드
•
자신이 팔로우 한 유저의 게시글이 최신순으로 보여집니다.
•
팔로우 한 유저가 없거나, 팔로워의 게시글이 없을 경우 검색 버튼이 표시됩니다.
•
게시글의 상단 유저배너 클릭 시 게시글을 작성한 유저의 프로필 페이지로, 본문 클릭 시 게시글 상세 페이지로 이동합니다.
1. 팔로우하는 유저가 없을 때
2. 팔로우하는 유저가 있을 때
7. 검색
•
사용자 이름 혹은 계정 ID로 유저를 검색할 수 있습니다.
•
검색어와 일치하는 단어는 파란색 글씨로 표시됩니다.
•
클릭 시 해당 유저의 프로필 페이지로 진입합니다.
8. 프로필
1. 내 프로필
•
상단 프로필란에 프로필 수정과 상품 등록 버튼이 나타납니다.
•
판매중인 상품란에는 사용자가 판매하는 상품이 등록되며, 판매중인 상품이 없을 경우에는 영역 자체가 나타나지 않습니다.
•
게시글란은 상단의 리스트형, 앨범형 두 개의 버튼을 통해서 나누어 볼 수 있습니다.
◦
리스트형의 경우, 사용자가 작성한 글 내용과 이미지, 좋아요와 댓글의 수를 보여줍니다.
◦
앨범형의 경우, 사용자 게시글 중 이미지가 있는 글만 필터링해 바둑판 배열로 보여줍니다.
•
게시글을 클릭하면 각 게시글의 상세페이지로 이동합니다.
리스트형 & 앨범형 게시글
팔로잉 & 팔로워 리스트
2. 타 유저의 프로필
•
버튼을 클릭해 해당 사용자를 팔로우 또는 언팔로우할지 결정할 수 있으며 팔로워 수의 변화가 페이지에 즉시 반영됩니다.
3. 프로필 수정
•
사용자 프로필 이미지, 이름, 아이디, 소개 중 한 가지를 수정하면 저장 버튼이 활성화됩니다.
•
계정 ID의 유효한 형식 및 중복 검사를 통과하지 못하면 하단에 경고 문구가 나타나며 저장 버튼이 비활성화됩니다.
•
사용자 이름과 소개는 공백으로 시작할 수 없습니다.
•
프로필 수정이 완료되면 내 프로필 페이지로 이동합니다.
9. 게시글
1. 게시글 작성
•
글이 입력되거나 사진이 첨부되면 업로드 버튼이 활성화됩니다.
•
최대 세 장까지 이미지 첨부가 가능하며 첨부한 파일을 취소할 수 있습니다.
•
게시글 하단에 업로드 날짜가 표시됩니다.
2. 게시글 수정 및 삭제
•
자신의 게시글일 경우 모달 버튼을 통해 수정, 삭제가 가능합니다.
•
게시글 삭제 버튼 클릭 시, 게시글을 삭제하고 페이지를 리렌더링하여 삭제된 내용을 페이지에 반영합니다.
•
타 유저의 게시글일 경우 모달 버튼을 통해 신고할 수 있습니다.
3. 좋아요와 댓글
•
댓글이 몇 분 전에 작성되었는지 표시됩니다.
•
좋아요와 댓글 수는 실시간으로 상세 페이지에 반영됩니다.
•
자신의 댓글일 경우 모달 버튼을 통해 삭제가 가능합니다.
•
타 유저의 댓글일 경우 모달 버튼을 통해 신고할 수 있습니다.
10. 상품
1. 상품 등록
•
상품 이미지, 상품명, 가격, 판매 링크를 필수로 입력해야 저장 버튼이 활성화됩니다.
•
상품 가격은 숫자만 입력할 수 있으며, 숫자를 입력하면 자동으로 원 단위로 변환됩니다.
•
상품 가격이 0원일 경우 버튼이 비활성화되며 하단에 경고 문구가 나타납니다.
•
상품명과 판매 링크는 공백으로 시작할 수 없습니다.
•
상품 등록이 완료되면 내 프로필 페이지로 이동합니다.
.gif&blockId=44b424e2-b6d5-46ce-b34f-0349d3dc5fab)
2. 상품 수정 및 삭제
•
상품 이미지, 상품명, 가격, 판매 링크 중 한 가지를 수정하면 저장 버튼이 활성화됩니다.
•
상품 수정이 완료되면 내 프로필 페이지로 이동합니다.
•
상품 삭제 버튼 클릭 시, 상품을 삭제하고 페이지를 리렌더링하여 삭제된 내용을 페이지에 반영합니다.
11. 채팅
•
채팅 목록에서 아직 읽지 않은 채팅에는 좌측 상단의 파란색 알림을 띄워줍니다.
•
채팅방에서 메시지를 입력하거나 파일을 업로드하면 전송 버튼이 활성화됩니다.
•
채팅방에서 우측 상단의 채팅방 나가기 모달 버튼을 통해 채팅 목록 페이지로 이동할 수 있습니다.
•
채팅 메시지 전송 및 수신 기능은 개발 예정입니다.
