/member-match

멤버매치: 토이 프로젝트 멤버 모집 웹서비스

Primary LanguageJavaScript

멤버매치

개요

  • 토이 프로젝트 멤버 모집을 위한 웹사이트를 개발하였습니다.
  • 사용자는 프로젝트를 등록/수정/삭제하고, 멤버 모집 공고를 등록할 수 있습니다.
  • 다른 사용자들을 평가하고, 서로의 평점을 확인할 수 있습니다.
  • 프로젝트 멤버 간의 채팅이 가능합니다.
  • 다른 사용자가 프로젝트 일정을 등록/수정/삭제할 시 알림을 받아볼 수 있습니다.

기술 스택

  • Front-end: React
  • Back-end: Spring Framework
  • Database: H2 Database

시나리오

1. 회원가입

[화면 흐름]

  1. 사용자가 회원가입 화면으로 이동한다.
  2. 사용자는 필수사항을 입력한다.
  3. 사용자가 입력한 정보를 확인하고 회원가입을 요청한다.
  4. 시스템은 회원가입 정보를 검증하고, 유효한 경우 사용자를 가입시킨다.
  5. 사용자는 회원가입 완료 후 메인 화면으로 이동한다.

[필수사항]

  • 사용자 아이디 및 비밀번호 입력
  • 기본 회원 정보(이름, 이메일 등) 입력
  • 회원 정보의 유효성 검사

[제약사항]

  • 중복된 아이디로 가입할 수 없음
  • 비밀번호는 안전한 형식을 가져야 함
  • 이메일 주소의 형식이 유효해야 함

2. 로그인

[화면 흐름]

  1. 사용자가 로그인 화면으로 이동한다.
  2. 사용자는 아이디와 비밀번호를 입력한다.
  3. 시스템은 입력된 정보를 검증하고, 유효한 경우 로그인을 승인한다.
  4. 사용자는 로그인 성공 후 메인 화면으로 이동한다.

[필수사항]

  • 사용자 아이디 및 비밀번호 입력
  • 로그인 정보의 유효성 검사

[제약사항]

  • 아이디와 비밀번호가 일치해야 함
  • 로그인 시도가 일정 횟수 이상 실패하면 일정 시간 동안 잠금될 수 있음

3. 로그아웃

[화면 흐름]

  1. 사용자는 로그아웃 버튼을 클릭하여 로그아웃을 요청한다.
  2. 시스템은 사용자를 로그아웃 처리하고 로그인 화면으로 이동한다.

[필수사항]

  • 로그아웃 버튼 클릭

[제약사항]

  • 로그아웃 후에는 로그인 상태가 해제되어야 함

4. 회원정보수정

[화면 흐름]

  1. 사용자가 회원 정보 수정 화면으로 이동한다.
  2. 사용자는 수정할 정보를 입력하고 저장 버튼을 클릭한다.
  3. 시스템은 입력된 정보를 저장하고 사용자에게 수정 완료 메시지를 표시한다.

[필수사항]

  • 수정할 회원 정보 입력
  • 저장 버튼 클릭

[제약사항]

  • 유효한 정보만 수정 가능해야 함
  • 정보 수정 시 입력값의 유효성 검사를 수행해야 함

회원탈퇴

[화면 흐름]

  1. 사용자가 마이페이지 화면으로 이동한다.
  2. 사용자는 회원탈퇴를 요청하기 위한 확인 단계를 거친다.
  3. 시스템은 회원탈퇴 요청을 검토하고, 유효한 경우 사용자 계정을 삭제한다.
  4. 사용자는 회원탈퇴 완료 후 로그아웃되고 메인 화면으로 이동한다.

[필수사항]

  • 회원탈퇴를 위한 확인 단계

[제약사항]

  • 회원탈퇴 확인 절차를 거쳐야 함
  • 회원탈퇴 시 정보는 영구적으로 삭제됨

프로젝트 정보 게시

[화면 흐름]

  1. 사용자가 프로젝트 정보 게시 화면으로 이동한다.
  2. 사용자는 프로젝트 정보를 입력하고 게시 요청한다.
  3. 시스템은 프로젝트 정보를 검토하고, 유효한 경우 정보를 게시한다.

[필수사항]

  • 프로젝트 정보 입력
  • 프로젝트 정보 게시 요청

[제약사항]

  • 프로젝트 정보 게시 시 일부 정보는 공개됨
  • 게시된 정보의 수정 및 삭제가 가능해야 함

프로젝트 정보 수정

[화면 흐름]

  1. 사용자가 자신이 게시한 프로젝트의 정보 수정 화면으로 이동한다.
  2. 사용자는 프로젝트 정보를 수정하고 수정 요청한다.
  3. 시스템은 프로젝트 정보 수정 요청을 검토하고, 유효한 경우 정보를 업데이트한다.
  4. 사용자는 수정된 프로젝트 정보를 확인할 수 있다.

[필수사항]

  • 프로젝트 정보 수정
  • 프로젝트 정보 수정 요청

[제약사항]

  • 수정 요청은 자신이 게시한 프로젝트 정보에 대해서만 가능함

프로젝트 삭제

[화면 흐름]

  1. 사용자가 자신이 게시한 프로젝트 정보 화면으로 이동한다.
  2. 사용자는 프로젝트 정보 삭제를 요청한다.
  3. 시스템은 프로젝트 정보 삭제 요청을 검토하고, 유효한 경우 정보를 삭제한다.
  4. 사용자는 삭제된 프로젝트 정보를 확인할 수 없다.

[필수사항]

  • 프로젝트 정보 삭제 요청

[제약사항]

  • 삭제 요청은 자신이 게시한 프로젝트 정보에 대해서만 가능함
  • 프로젝트 정보가 삭제되면 복구할 수 없음

멤버 모집 공고 작성

[화면 흐름]

  1. 사용자가 멤버 모집 공고 작성 화면으로 이동한다.
  2. 사용자는 공고 정보를 입력하고 작성 요청한다.
  3. 시스템은 멤버 모집 공고 정보를 검토하고, 유효한 경우 공고를 게시한다.
  4. 사용자는 게시된 멤버 모집 공고를 확인하거나 수정할 수 있다.

[필수사항]

  • 멤버 모집 공고 정보 입력
  • 멤버 모집 공고 작성 요청

[제약사항]

  • 게시된 공고의 수정 및 삭제가 가능해야 함

멤버 신청

[화면 흐름]

  1. 사용자가 멤버 모집 공고 목록 화면에서 원하는 공고를 선택한다.
  2. 사용자는 해당 공고에 대한 신청 정보를 입력하고 신청 요청한다.
  3. 시스템은 멤버 신청 정보를 검토하고, 유효한 경우 신청을 완료한다.
  4. 사용자는 멤버로 선정되거나 신청 결과를 확인할 수 있다.

[필수사항]

  • 멤버 신청 정보 입력
  • 멤버 신청 요청

[제약사항]

  • 신청은 해당 프로젝트의 멤버로 선정될 경우에만 가능함

멤버 승인

[화면 흐름]

  1. 사용자가 자신이 게시한 프로젝트 정보의 멤버 신청 목록 화면으로 이동한다.
  2. 사용자는 멤버 신청 목록에서 신청자를 선택하고 승인 또는 거절한다.
  3. 시스템은 승인 또는 거절 결과를 처리하고, 사용자에게 알린다.
  4. 지원자는 승인 또는 거절 결과를 확인한다.

[필수사항]

  • 멤버 승인 또는 거절 처리

[제약사항]

  • 승인 또는 거절은 프로젝트 정보를 게시한 사용자만 가능함

멤버 평가

[화면 흐름]

  1. 사용자가 멤버 평가 화면으로 이동한다.
  2. 사용자는 평가 정보를 입력하고 평가 요청한다.
  3. 시스템은 평가 정보를 처리하고, 사용자에게 알린다.
  4. 멤버 평가 대상자는 평가 결과를 확인한다.

[필수사항]

  • 멤버 평가 정보 입력
  • 멤버 평가 요청

[제약사항]

  • 평가 요청은 사용자가 속해있는 프로젝트의 멤버에 대해서만 가능함

페이지

  1. 메인 페이지 image

  2. 멤버 모집 페이지 image

  3. 내 프로젝트 페이지 image

  4. 마이페이지 image

  5. 프로젝트 등록(수정) 페이지 image image

  6. 프로젝트 상세 페이지 image image image image image

  7. 채팅 모달 image

  8. 알림 모달 image

  9. 로그인 페이지 image

  10. 회원가입 페이지 image