Skip to content

README.md

Latest commit

 

History

History
322 lines (222 loc) · 13.9 KB

README.md

File metadata and controls

322 lines (222 loc) · 13.9 KB
Raw

pj-develop

Motimates 팀프로젝트 디벨롭


Motimates 란 ?

"Motivation + Mates" 서로 동기부여를 주는 메이트들 그룹 멤버들과 함께 목표를 달성하는 커뮤니티 사이트


🌐 웹 사이트 주소

Motimates


프로젝트 소개

발표자료 Notion


⏰ 제작 기간

December 08, 2023 ~ January 04, 2023


🧑‍🤝‍🧑 Team Crew

프론트 개발 백 개발
김세화 최태영

담당 역할

김세화

  • 기능

    • 실시간 그룹별 채팅
      • socket 연결 요청 및 종료
      • 미확인 메세지 개수 데이터 관리
      • 채팅방 목록 정렬하는 토글 기능 구현
    • 실시간 알람
      • sse 연결 요청 및 종료
      • 미확인 알람 개수 데이터 관리
      • 읽음 처리
    • 모임 CRUD
      • 모임 생성, 수정, 삭제
      • 모임 상세화면 조회
      • 유저가 가입한 모임 조회, 생성한 모임 조회
      • 모임 검색(검색어, 카테고리별)
      • 모임별 미션 수정
      • 현재 모임에 참석한 멤버리스트 조회
    • 모임 가입하기, 탈퇴하기, 모임장 위임하기
      • 참석인원에 따른 가입제한
    • 모임장, 멤버, 가입되지 않은 유저별 구분된 모임 사이드바
    • 게시판(공지, 자유, 미션별) CRUD
      • 모임 공지사항, 자유, 미션별 게시글 전체 및 상세 조회
      • 모임 공지사항, 자유, 미션별 게시글 생성, 수정, 삭제
    • 댓글 CRUD
      • 모임 공지사항, 자유, 미션별 게시글에 대한 댓글 조회
      • 댓글 생성 수정, 삭제
    • 유저 및 모임별 미션 조회
    • 유효성 검사 (모임 및 게시판 생성 및 수정 시)
  • UI
    • 페이지 : 헤더, 인트로, 메인, 마이 페이지, 모임 관련 페이지(생성 및 수정, 홈, 검색), 게시판 관련 페이지(공지, 자유, 미션, 완료, 댓글)
    • 공통 컴포넌트 : 모달창(성공, 경고, 선택), 멤버 리스트, 디데이, 크기별 버튼

최태영

  • 아키텍쳐 설계
    • DBMS 추가, socket.io 통신 추가, route53, redisLabs 사용
  • 서버 배포 및 DB 관리
  • 채팅 기능
    • 소켓 통신시 JWT 토큰으로 회원 인증
    • 로그인시 모임별 채팅방 입장
      • 현재 로그인되어 있는 유저 보여주기
      • 로그인 이후 모든 메세지 Load
    • 모임 가입시 채팅방 입장 및 채팅 리스트 추가
  • 실시간 알림 기능
    • 게시판 댓글 작성, 모임추방시 실시간 알림 생성
    • 읽음처리시 삭제기능
  • 랭킹 관련 기능
    • scheduling (mission, d-day, score)
      • 모임 디데이 만료시, 누적 점수 업데이트, 디데이 초기화, 미션 초기화, 현재 점수 초기화 기능
    • 미션 인증시 점수 및 랭킹 업데이트
      • 게시판 미션 인증시 현재 점수 업데이트 및 랭킹 업데이트 기능
  • 관리자 페이지 관련 api
    • 신고 기능
    • 모임 추방 or 회원 추방 기능
    • 유저 관리, 모임 관리 기능

시작 가이드

$ git clone https://github.com/SesacProjectTeamA-2/pj-develop
$ npm i
$ npm start

⚙️ 개발 환경

Front

Back

API 명세서

Swagger 를 통해 개인별 Token 할당 후, api 전송 정보 및 결과값을 참조해 개발 및 소통

Swagger

User Group Board Comment Mission
image image image image image

협업 / 소통

노션 내 회의 / 칸반보드 / 트러블 슈팅 등 문서화

회의 칸반보드 트러블 슈팅
image image image

Functions

✅ 메인페이지

✅ 소셜 로그인

✅ 마이페이지

✅ 모임 검색

✅ 모임 CRUD

✅ 모임 가입 & 탈퇴

✅ 모임장 권한 넘기기

✅ 모임 게시판 CRUD

✅ 댓글 CRUD

✅ 404 페이지

주요 기능

✅ 헤더 image

  • 로고
  • 초대 링크 input
  • 메인, 그룹, 마이 페이지 연결
  • 로그인 여부 및 업로드 여부에 따른 헤더 프로필사진 변경
  • 모바일 헤더 추가에 따른 반응형 적용

✅ 실시간 그룹 채팅

  • Socket.io-client를 통한 실시간 그룹 채팅방 구현
  • local storage에 그룹 시퀀스별로 미확인 메세지 개수 저장
  • 최신순 및 리더순으로 채팅방 정렬하는 토글 기능 구현
  • 채팅방 참여 시 메세지 읽음 처리, 현재 접속한 유저 확인 가능, 메세지 내역 load
  • 메세지 전송 시, 클라이언트 측에서 이벤트를 emit하여 서버 측으로 데이터 전송
  • 로그아웃 시, 소켓 연결 종료

✅ 실시간 알람

  • SSE(Server-Sent Event)를 통한 실시간 알람 구현
  • 최초 로그인 시, 토큰 값을 전송하여 SSE 연결 요청
  • local storage에 미확인 메세지 개수 저장
  • 미확인 알람 전체 리스트를 state로 관리
  • 실시간으로 알람 수신 시, useState 함수를 활용하여 업데이트
  • 읽음 버튼 클릭 시, Axios를 통한 REST API의 DELETE 요청으로 해당 알람 삭제 처리

✅ 관리자 페이지

  • Chart.js 라이브러리를 활용하여 데이터 시각화
  • 관리자 권한으로 특정 유저 및 그룹 삭제 가능

✅ 인트로 페이지

  • 동기 부여를 위한 영상/이미지 소스/글귀 첨부

✅ 메인페이지

메인 메인
  • 사용자/모임별 미션 조회
  • 마이페이지 정보 반영
  • 명언 랜덤 API 사용

✅ 소셜 로그인 & 회원가입

로그인
  • Naver 로그인
  • 쿠키를 통한 로그인 여부 구분

✅ 마이페이지

  • 프로필 사진 설정
  • 닉네임 & 자기소개 설정
  • 관심분야 설정
  • 캐릭터 설정
  • 명언 모드 선택(랜덤/직접 작성)
  • 회원 탈퇴

✅ 모임 검색

  • 카테고리 필터링
  • 전체 검색

✅ 모임 CRUD

  • 모임 생성
  • 모임 정보 수정
  • 모임 삭제
  • 전체 멤버 리스트 조회
  • 가입/생성 모임 조회

✅ 모임 가입 & 탈퇴

  • 링크 초대 가입 기능 추가

✅ 모임 게시판 CRUD

  • 미션 게시판
  • 인증 시 랭킹 반
  • 자유 게시판
  • 공지사항 게시판
    • 관리자만 작성 가능

✅ 댓글 CRUD

  • 댓글 추가
  • 댓글 수정
  • 댓글 삭제
  • 사용자별 프로필 사진 & 닉네임 로드

✅ 404 페이지

  • 에러 상태 공지
  • 돌아가기 버튼 추가

🚢 화면 설계서

image

🎨 와이어 프레임

Figma

image

🗄️ ERD

  • 신고기능을 위한 complain table 추가

ERD image