Home

MafiaCamp 🕵🏻‍♂️

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

목차

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

🤔 기존 마피아 게임의 문제

🤩 MafiaCamp로 해결하자!

💾 주요 기능

소셜 로그인

• 사용자는 서비스를 이용하기 위해 로그인을 할 수 있습니다.

관리자 회원가입 및 로그인

• 관리자 회원가입 및 로그인을 할 수 있습니다.
• 로그인 페이지에서 ctrl + .을 같이 누르면 로그인페이지에서 관리자 페이지로 갈 수 있습니다.

온라인 상태 표시

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

게임방 개설 및 참가

• 사용자는 게임 방을 개설할 수 있습니다.
• 로비에서는 실시간으로 개설된 방 목록을 조회할 수 있고 참가하기 버튼을 눌러서 방에 입장할 수 있습니다.

직업 별 임무 수행

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

채팅 기능

• 사용자들은 게임이 시작하기 전과 게임이 진행되는 동안 방에 있는 사람들과 채팅으로 대화를 나눌 수 있습니다.

마피아 전용 채팅

• 마피아 멤버들에게는 마피아끼리만 대화할 수 있는 비밀 채팅방이 부여됩니다.
• 마피아 팀원 간 전략을 논의하고 시민을 속이는 계획을 세울 수 있습니다.
• 비밀스러운 소통을 통해 게임의 긴장감을 더합니다.

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