MafiaCamp 🕵🏻‍♂️

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

목차

• 🤔 기존 마피아 게임의 문제
• 🤩 MafiaCamp로 해결하자!
• 💾 주요 기능
• 🏆 문제 해결 경험 및 기술적 도전
• 🏛️️ 아키텍처
• 📚 기술스택
• 🌱 MafiaCamper 소개

🤔 기존 마피아 게임의 문제

🤩 MafiaCamp로 해결하자!

💾 주요 기능

온라인 상태 표시

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

직업 별 임무 수행

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

채팅 기능

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

실시간 투표 기능

• 투표는 실시간으로 진행이 되며, 모든 플레이어가 투표 현황을 확인할 수 있습니다.
• 한 턴에 투표는 총 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
BE
Database
Infrastructure
Collaboration Tools

🌱 MafiaCamper 소개

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