Skip to content

boostcampwm-2024/web12-MafiaCamp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MafiaCamp 🕵🏻‍♂️

배포 링크
https://mafiacamp.p-e.kr/



Hits


목차



🤔 기존 마피아 게임의 문제

image



🤩 MafiaCamp로 해결하자!

image



💾 주요 기능

온라인 상태 표시

  • 사용자들은 실시간으로 현재 온라인 상태인 유저의 수와 명단을 확인할 수 있습니다.
  • 현재 게임에 참여 중인 사용자와 그렇지 않은 사용자를 구분해 표시합니다.

직업 별 임무 수행

직업 정보

  • 게임 참여자에게는 시민, 경찰, 의사, 마피아로 구성된 네 가지 직업 중 하나가 부여됩니다.
  • 게임 참여자는 자신에게 부여된 직업에 따라 승리를 위해 정해진 임무를 수행합니다.
    • 🙍🏻시민: 명 추리로 마피아를 가려내야 합니다.
    • 👮🏻경찰: 플레이어의 정체를 조사할 수 있습니다.
    • 🧑🏻‍⚕️의사: 특정 시민을 보호할 수 있습니다.
    • 🕵🏻‍♂️마피아: 제거할 대상을 선택합니다.

채팅 기능

마피아_채팅

  • 게임이 시작하기 전과 후 방에 있는 플레이어들과 채팅으로 대화를 나눌 수 있습니다.
  • 또한 마피아끼리만 대화할 수 있는 비밀 채팅 방이 부여됩니다.

실시간 투표 기능

1차 투표

  • 투표는 실시간으로 진행이 되며, 모든 플레이어가 투표 현황을 확인할 수 있습니다.
  • 한 턴에 투표는 총 2단계로 이루어집니다.
  • 1차 투표
    • 토론 이후, 마피아로 의심되는 사람에게 투표합니다.
    • 동률일 경우 최종 변론 단계로 넘어갑니다.
  • 최종 투표
    • 최종 변론 이후, 플레이어들은 최종적으로 마피아를 추리하여 투표합니다.
    • 투표 결과에 따라 게임의 승리 팀이 결정됩니다.

마피아 임무 수행

마피아

  • 마피아 팀은 밤 시간 동안 시민들 중 제거할 한 명을 선정합니다.
  • 마피아 간의 협력이 게임 승패를 좌우하는 중요한 요소입니다.
  • 마피아에게 선택된 시민의사에게 보호 받지 못할 시, 아침 시간에 게임에서 탈락하게 됩니다.

최종 결과

최종결과

  • 게임의 승리 조건에 따라 시민 팀 또는 마피아 팀의 승리 여부를 발표합니다.
  • 게임 결과는 모든 플레이어에게 실시간으로 공유됩니다.


🏆 문제 해결 경험 및 기술적 도전

FE

제목 핵심 키워드
🐳 Next.js와 Docker를 사용한 빌드 최적화하기 Front-end Next.js Docker 최적화 빌드
↪ Enter키 이벤트 중복 호출 문제 Front-end
🗳️ 투표 대상자 지정 오류 JavaScript
💵 캐시로 인한 미들웨어 미호출 및 페이지 전환 오류 Front-end Next.js Cache Middleware Authentication Authorization
⚫ 다크 모드에서 텍스트가 보이지 않는 문제 DarkMode
⚠️게임 방에서 새로고침 또는 브라우저 탭을 닫을 때의 예외 처리 Exception beforeunload

BE

제목 핵심 키워드
⭐ 웹소켓 방 관리 구조 개선 WebSocket Socket.IO
🚪 Pub-Sub 패턴을 통한 실시간 방 목록 조회 기능 개발 Pub/Sub Socket.IO
🔁 유한 상태 기계를 이용한 게임 진행 모델링 오토마타 이론
🔐 동시성 이슈를 해결하기 위한 LockManager 만들기 async-mutex
⏰ RxJS로 실시간 타이머 구축하기 RxJS
🐳 Next.js와 Docker를 사용한 빌드 최적화하기 Front-end Next.js Docker 최적화 빌드
🟢 Redis를 통한 유저 온라인 상태 관리 시스템 구현하기 Redis Pub/Sub
🐳 openvidu 에러 디버깅을 위한 Docker 개발환경 설정 Docker OpenVidu WebRTC
📑 NestJS, mkcert CA 인증서 문제해결 방법 NestJS SSL 인증서
🧊 openvidu ICE 후보 관련 오류 OpenVidu WebRTC ICE
🔒 mutex lock 문제 Mutex
⚠️ openvidu 세션 종료 메서드 오류 OpenVidu Session


🏛️️ 아키텍처

아키텍처



📚 기술스택

분류 기술 스택
공통
FE Zustand
BE
Database
Infrastructure
Collaboration Tools


🌱 MafiaCamper 소개

J051_김영현 J085_노현진 J149_심재성 J251_최경수
@0Chord @HyunJinNo @simjaesung @Gyeongsu1997
Back-end Front-end Back-end Back-end