페이지 기능 상세 설명 - nurimeansworld/strawberry_market GitHub Wiki

1) 홈

🍓 splash

  • 🔗 https://nurimeansworld.github.io/strawberry_market/pages
  • 서비스 접속 초기화면입니다.
  • splash 화면이 잠시 나온 뒤 다음 페이지가 나타납니다.
    • 로그인을 하지 않은 경우 : 로그인 화면
    • 로그인이 되어 있는 경우 : 감귤마켓 피드

🍓 로그인 페이지

  • 🔗 https://nurimeansworld.github.io/strawberry_market/pages/login.html
  • 로그인은 로그인 메인 화면과 이메일 로그인 화면으로 나눠져 있습니다.
  • 로그인 메인 화면에서 이메일로 로그인 을 클릭하면 이메일로 로그인할 수 있는 화면으로 이동합니다.
  • 이메일과 비밀번호를 모두 입력하면 다음 버튼이 활성화 됩니다. 입력되지 않은 입력창이 있다면 버튼은 활성되지 않습니다.
  • 로그인 버튼을 클릭하면 이메일 주소와 로그인에 대한 유효성 검사를 진행하며, 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타납니다.
  • SNS(카카오톡, 구글, 페이스북) 로그인은 구현되어있지 않습니다.

🍓 회원가입 페이지

  • 🔗 https://nurimeansworld.github.io/strawberry_market/pages/join.html
  • 로그인 메인 화면에서 회원가입 을 누르거나 이메일 로그인 화면에서 이메일로 회원가입 을 누르면 회원가입 화면이 나타납니다.
  • 이메일 주소 또는 비밀번호를 입력하고 입력창에서 포커스를 잃으면 바로 유효성 검사가 진행되고 통과하지 못한 경우 경고 문구가 각 입력창 하단에 표시됩니다.
  • 이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우, 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
  • 작성이 완료된 후, 유효성 검사를 통과할 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 폼이 나타납니다.
  • 프로필 설정에 필요한 프로필 사진, 사용자 이름(2~10자 이내), 계정 ID, 소개를 입력받습니다.
    • 프로필 사진은 등록하지 않을 경우 기본 이미지가 등록됩니다.
    • 사용자 이름과 소개는 다른 사용자와 중복 가능하지만 계정 ID는 중복 불가능합니다.
    • 프로필 설정에서도 같은 방식으로 유효성 검사가 진행합니다.(계정 ID에 대한 중복 유무와 형식을 검사)

🍓 홈 페이지

  • 🔗 https://nurimeansworld.github.io/strawberry_market/pages/followfeed.html
  • 감귤마켓 피드는 사용자들이 올린 게시글들이 표시되는 페이지입니다.
  • 감귤마켓 피드에는 자신이 팔로우한 사용자의 게시글만 확인할 수 있습니다.
  • 팔로우한 사용자가 없을 경우와 내가 팔로우한 사용자가 올린 게시글이 없는 경우 "유저를 검색해 팔로우 해보세요!" 문구와 함께 검색하기 버튼이 표시됩니다.

🍓 검색 페이지

🍓 채팅 페이지

2) 게시글

🍓 게시글 작성 페이지

  • 🔗 https://nurimeansworld.github.io/strawberry_market/pages/post.html
  • 게시글을 작성할 수 있는 페이지입니다. 하단 메뉴바에서 게시글 작성 을 클릭하면 이동합니다.
  • 글이 입력되거나 사진이 업로드 되면 업로드 버튼이 활성화되고, 버튼을 누르면 게시글이 업로드됩니다.
  • 사진은 우측 하단 버튼을 클릭하면 업로드할 수 있으며, 최대 3장까지 업로드 가능합니다.

🍓 게시물 상세 페이지

  • 🔗 https://nurimeansworld.github.io/strawberry_market/pages/postdetail.html
  • 게시글 하단에 말풍선 아이콘을 클릭하면 댓글을 확인하고 입력할 수 있는 게시물 상세 페이지로 이동합니다.
  • 댓글 입력창에 텍스트를 입력하면 게시 버튼이 활성화되고, 게시 버튼을 클릭하면 댓글이 추가됩니다.

🍓 게시글 수정 or 신고 페이지, 댓글 삭제 or 신고 페이지

  • 🔗 https://nurimeansworld.github.io/strawberry_market/pages/postdetail.html
  • 게시글, 댓글 각각 우측 상단에 위치한 버튼을 클릭했을 경우 모달 메뉴가 표시됩니다.
    • 내가 작성한 게시글일 경우 : 삭제, 수정 버튼이 나타납니다.
    • 다른 사용자가 작성한 게시글일 경우 : 신고하기 버튼이 나타납니다.
    • 내가 작성한 댓글일 경우 : 삭제 버튼이 나타납니다.
    • 다른 사용자가 작성한 댓글일 경우 : 신고하기 버튼이 나타납니다.

3) 프로필

🍓 마이 프로필 페이지

  • 🔗 https://nurimeansworld.github.io/strawberry_market/pages/myprofile.html
  • 마이 프로필 페이지에서는 사용자 이름, 계정 ID, 소개, 팔로워 및 팔로잉 수, 판매 상품, 그리고 사용자가 업로드한 게시글을 확인할 수 있습니다.
  • 프로필 정보 하단에는 프로필 수정 버튼과 상품 등록버튼이 있습니다.
    • 프로필 수정 버튼을 클릭하면 프로필을 수정할 수 있는 페이지가 나타납니다. 입력창에 대한 명세는 회원가입에서의 프로필 설정과 동일합니다.
    • 상품 등록 버튼을 클릭하면 상품을 등록할 수 있는 페이지가 나타납니다.
  • 팔로워 및 팔로잉 수를 클릭하면 팔로워, 팔로잉 사용자 목록이 표시됩니다.
  • 판매 중인 상품 섹션은 등록한 상품이 없을 경우에는 표시되지 않습니다.
  • 판매 중인 상품을 클릭하면 하단에 상품 삭제, 수정, 웹사이트에서 상품 보기 버튼이 포함된 메뉴가 나타납니다.
  • 게시글 섹션에서는 목록형과 앨범형으로 게시글들을 확인할 수 있습니다. 기본형은 목록형이며, 이미지가 없는 게시글을 경우에는 앨범형에서는 표시되지 않습니다.
  • 또한 사용자가 올린 게시글이 없을 경우에는 게시글이 나타나지 않습니다.

🍓 유저 프로필 페이지

  • 🔗 https://nurimeansworld.github.io/strawberry_market/pages/profile.html
  • 사용자 프로필 페이지에서는 사용자 이름, 계정 ID, 소개, 팔로워 및 팔로잉 수, 판매 상품, 그리고 사용자가 업로드한 게시글을 확인할 수 있습니다.
  • 사용자 정보 하단에 있는 팔로우 버튼은 버튼의 변화만 구현되어 있습니다.
  • 팔로워 및 팔로잉 수를 클릭하면 팔로워, 팔로잉 사용자 목록이 표시됩니다.
  • 판매 중인 상품 섹션은 등록한 상품이 없을 경우에는 표시되지 않습니다.
  • 판매 중인 상품을 클릭하면 바로 상품 판매 사이트로 이동합니다.
  • 게시글 섹션에서는 목록형과 앨범형으로 게시글들을 확인할 수 있습니다. 기본형은 목록형이며, 이미지가 없는 게시글을 경우에는 앨범형에서는 표시되지 않습니다.
  • 또한 사용자가 올린 게시글이 없을 경우에는 게시글이 나타나지 않습니다.

🍓 팔로워 페이지, 팔로잉 페이지

🍓 로그아웃 페이지

🍓 프로필 수정 페이지

  • 🔗 https://nurimeansworld.github.io/strawberry_market/pages/accountedit.html
  • 마이 프로필 페이지에서 프로필 수정 버튼을 클릭하면 프로필을 수정할 수 있는 페이지가 나타납니다.
  • 입력창에 대한 명세는 회원가입에서의 프로필 설정과 동일합니다. 유효성 검사가 통과되지 않을 경우 저장 버튼이 활성화되지 않습니다.

4) 판매 상품

🍓 상품 등록 페이지

  • 🔗 https://nurimeansworld.github.io/strawberry_market/pages/product.html
  • 나의 프로필 페이지에서 상품 등록 버튼을 클릭하면 상품 등록 페이지로 이동합니다.
  • 상품 이미지, 상품명, 가격, 판매링크를 입력받을 수 있으며, 모든 입력이 완료되면 저장 버튼이 활성화됩니다.
  • 상품명은 2~15자 이내로 입력 가능하며, 가격은 숫자를 입력하면 자동으로 원단위로 변환시킵니다.

🍓 상품 수정 페이지

🍓 상품 삭제, 이동 페이지

  • 🔗 https://nurimeansworld.github.io/strawberry_market/pages/myprofile.html
  • 내가 등록한 상품 클릭시 모달 메뉴가 표시됩니다. 모달 메뉴의 삭제를 클릭하면 상품 삭제 여부에 대한 창이 뜨며 삭제 클릭시 상품이 삭제됩니다.
  • 내가 등록한 상품 클릭시 모달 메뉴가 표시됩니다. 모달 메뉴의 웹사이트에서 상품 보기를 클릭하면 상품 등록시 입력된 링크로 이동합니다.