페이지 기능 설명

각 페이지에 구현되어있는 기능을 설명하였습니다.

Splash

• 접속하면 보여지는 첫 페이지입니다.
• 로그인이 되어있는 상태면 바로 피드 페이지로 이동합니다.
• 로그인이 되어있지 않은 상태면 웰컴 페이지로 이동합니다.

로그인

• 사용자가 입력한 아이디와 비밀번호를 받습니다.
• 사용자가 입력한 아이디에 대한 유효성 검사를 진행하여 통과하지 못하면 로그인 버튼 클릭 시 경고 문구를 보여줍니다.
• 사용자가 입력한 아이디와 비밀번호가 일치하지 않는다면 로그인 버튼 클릭 시 경고 문구를 보여줍니다.
• 유효성 검사를 통과하고 로그인에 성공하면 피드 페이지로 이동합니다.

회원가입

• 사용자가 입력한 아이디와 비밀번호를 받습니다.
• 사용자가 입력한 아이디에 대한 유효성 검사를 진행하여 통과하지 못하면 focus를 잃을 때 경고 문구를 보여줍니다.
• 사용자가 입력한 아이디가 이미 가입된 아이디라면 시작하기 버튼 클릭 시 경고 문구를 보여줍니다.
• 사용자가 입력한 비밀번호가 6자리 미만이면 focus를 잃을 때 경고 문구를 보여줍니다.
• 유효성 검사를 통과하면 다음 버튼 클릭 시 프로필 설정 페이지로 이동합니다.

프로필 설정

• 이미지 업로드 버튼 클릭을 해서 사진 파일을 선택하면 설정한 사진을 미리 볼 수 있습니다.
• 사용자 이름이 2~10자 사이를 벗어나면 경고 문구를 보여줍니다.
• 계정 ID에 영문, (.), (_) 이외의 문자를 입력하면 경고 문구를 보여줍니다.
• 유효성 검사를 통과하고 모든 값이 입력되면 버튼이 활성화됩니다.
• 회원가입에 성공하면 로그인 페이지로 이동합니다.

프로필 수정

• 프로필 수정은 회원가입 때 진행하는 프로필 설정과 같습니다.
• 프로필 페이지에서 프로필 수정 버튼을 클릭하면 유저의 현재 정보가 나옵니다.
• 프로필 설정과 마찬가지로 정보를 입력하고 저장 버튼을 클릭하면 유저 프로필 정보가 변경됩니다.

피드페이지

• 유효성 검사가 완료된 사용자의 username와 password로 로그인이 되면 해당 피드페이지로 넘어오게 됩니다.
• 데이터를 받아온 것중 postlist의 숫자가 0이 맞는지 아닌지에 따라 빈 피드페이지를 보여주거나 팔로한 사용자의 게시물을 불러옵니다.
• 사용자 아이콘과 닉네임, 아이디를 클릭했을 경우 해당 사용자의 프로필 페이지로 넘어갑니다.
• 사용자가 올린 이미지가 1개~3개일때 자동적으로 부모의 최대 width값에 맞추어 각각 1/n 크기에 맞춘 정사각형 이미지로 보여집니다.

검색페이지

• 피드 페이지의 돋보기 모양을 누르면 검색 페이지로 넘어갑니다.
• 최초 회원가입시나 팔로워가 없을 경우, 화면에 보이는 검색하기 버튼을 누를 경우에도 검색 페이지로 넘어갑니다

하단 탭 메뉴 컴포넌트

• 메인 Global Navigation Bar 컴포넌트로서 각각 홈, 채팅, 게시물작성, 프로필의 4가지의 메인 페이지로 넘어갈 수 있도록 Router를 설정했습니다.
• 마우스 hover시 샤인마스켓 테마에 맞춘 이미지가 자연스럽게 출력되도록 작업했습니다.

모달 컴포넌트

• MoreButton 으로 동작하는 컴포넌트로서 총 3가지의 모달 컴포넌트가 준비되어 있습니다.
  1. 메인 피드페이지의 팔로워 게시물 더보기: 신고하기
  2. 프로필 페이지의 내 게시물 더보기: 수정, 삭제
  3. 상단 컴포넌트에서의 더보기: 설정 및 개인정보, 로그아웃
• 각각 해당 컴포넌트를 클릭할 경우 해당 동작에 맞춰진 동작이 실행됩니다.

게시글 작성 페이지

• 게시글을 작성할 수 있는 페이지입니다. 하단 탭 메뉴에서 게시글 작성 메뉴를 클릭하면 /upload 페이지로 이동합니다.
• 텍스트나 사진 중 하나라도 존재할 경우 업로드 버튼이 활성화되며 클릭 시 게시글이 업로드됩니다.
• 하단 우측의 이미지 첨부 아이콘을 클릭하면 이미지를 첨부할 수 있으며 최대 3장까지 첨부 가능합니다. 만약 3장 이상의 이미지를 첨부할 경우 상단에서 경고 메시지를 띄웁니다.
  • 이미지만 첨부할 수 있도록 첨부 가능 포맷을 따로 설정하였습니다.

게시글 상세 페이지

• 게시글 작성 페이지에서 업로드를 완료하거나 게시글 하단의 말풍선 아이콘을 클릭하면 게시글의 내용과 등록된 댓글을 확인할 수 있는 페이지입니다.
• 다중 이미지가 첨부된 경우 좌우로 스크롤하여 확인할 수 있습니다.
• 댓글 입력창에 글자를 입력하면 게시 버튼이 활성화됩니다.
• 댓글은 작성된 시간을 기준으로 경과된 시간이 표시됩니다.

게시글 수정 및 삭제

• 등록된 게시글과 댓글 우측의 더 보기 아이콘을 클릭할 경우 모달이 표시되며, 상황에 맞는 목록을 클릭해 동작을 실행시킬 수 있습니다.
  • 본인이 작성한 게시글일 경우
    • 수정 및 삭제 목록이 표시되며 각 목록을 클릭 시 표시된 동작이 실행됩니다.
    • 수정: 게시글을 수정할 수 있습니다. 수정 페이지로 이동하며 기존에 작성했던 글과 이미지를 화면에 불러옵니다. 수정 후 업로드 시 변경된 내용을 게시글 상세 페이지에서 확인할 수 있습니다.
    • 삭제: 게시글을 삭제할 수 있습니다. 삭제를 완료한 후에는 나의 프로필 페이지로 이동합니다.
  • 본인이 작성한 댓글일 경우
    • 삭제 목록이 표시됩니다.
  • 본인이 작성한 게시글과 댓글이 아닐 경우
    • 신고하기 목록만 표시됩니다.

채팅 목록 및 채팅방

• 하단 탭 메뉴의 채팅 메뉴를 클릭하면 /chat-list 페이지로 이동합니다. 사용자가 참여하고 있는 채팅의 목록을 확인할 수 있는 페이지입니다.
• 채팅 목록을 클릭하면 해당 채팅방으로 이동합니다. 채팅 입력창에서 텍스트를 입력하면 전송 버튼이 활성화됩니다.
• 채팅방의 우측 상단 더 보기 아이콘을 클릭하면 채팅방을 나갈 수 있습니다.

사용자 프로필 페이지

• 로그인한 사용자의 프로필일 경우

  • 메인 페이지(피드)에서 하단 탭 메뉴의 프로필 버튼을 클릭하여 로그인한 사용자의 프로필 페이지로 이동합니다.

  • 사용자 프로필 페이지에서는 사용자의 이름, ID, 소개글, 팔로워 및 팔로잉 수, 판매중인 상품, 사용자의 게시글을 볼 수 있습니다.

  • 프로필 수정 버튼과 상품 등록 버튼이 나타납니다.

  • 사용자가 상품 또는 게시글을 등록하지 않았을 경우에는 빈 화면이 표시됩니다.

• 다른 사용자의 프로필일 경우
  • 피드에서 팔로우 중인 사용자의 프로필 사진을 클릭하면, 그 사용자의 프로필 페이지로 들어갑니다.
  • 채팅 버튼, 팔로우 및 언팔로우 버튼, 공유 버튼이 표시됩니다.
  • 팔로우 및 언팔로우 버튼을 클릭하여 상태를 바꿀 수 있습니다.

팔로워 및 팔로잉 목록

• 팔로워 및 팔로잉을 클릭하면 사용자의 팔로워, 팔로잉 목록이 표시됩니다.
• 팔로워 목록에서는 팔로우 버튼이 활성화되어 있고 팔로잉 목록에서는 취소 버튼이 나타납니다.
• 클릭하여 팔로우 및 취소가 가능합니다.

상품 등록

• 상품 등록 페이지에서는 판매할 상품을 등록할 수 있습니다.

• 이미지 업로드를 포함하여 모든 정보를 입력해야 합니다. 조건이 하나라도 만족되지 않는다면 저장 버튼이 활성화되지 않습니다.

  • 상품명은 2~15자 내에서 입력
  • 가격란에는 숫자만 입력 가능하며, 10억원을 초과할 수 없음

• 등록된 상품의 가격은 '판매중인 상품'에서 원 단위로 자동 변환되어 표시됩니다.