Cyber Escape (싸탈)[2024]

웹 상에서 재밌게 방탈출 게임을 수행할 수 있는, 방탈출 게임 홈페이지입니다.

총 세 가지의 테마와 테마에 맞는 랜덤 문제, 구성을 통해 실감나는 방탈출 게임을 수행할 수 있습니다.

📜 Index

• DEPLOY URL
• REPOSITORY
• MEMBER
• SPECIFICATION
• PROJECT OUTLINE
• ARCHITECT
• ERD
• SITE INTRODUCTION
• DISTRIBUTED ROLES
• FUNCTION
• TECHNOLOGY

🔗 Deploy URL

https://k10a303.p.ssafy.io

📚 Repository

https://lab.ssafy.com/s10-final/S10P31A303

🤝 Member

배정우	송정훈	배진현	오희주	김병주	류지원

📝 Specification

• API 명세서

🚧 Project Outline

프로젝트 이름: Cyber Escape (싸탈)

프로젝트 기간: 2024.04 - 2024.05 (6주)

• 개발 언어 및 라이브러리

  • Backend

    • 
    • 
    • 
    • 
    • 
    • 

  • Infra

    • 
    • 
    • 
    • 
    • 
    • 
    • 

  • Frontend

    • 
    • 
    • 
    • 
    • 

• Team

  • 자율 너머 백수 (배정우, 오희주, 송정훈, 김병주, 배진현, 류지원)

🌐 System Architecture

💾 ERD

📢 Site Introduction

방탈출 게임

• 다양한 테마의 방탈출 게임을 수행할 수 있다.
• 싱글 모드와 멀티 모드 두 가지를 제공하여, 친구와 함께 게임을 수행할 수 있다.
• 방탈출 시간을 토대로 한 랭킹 시스템으로 방탈출 실력을 점검할 수 있다.

Site Layout

• 메인 페이지

  

• 테마 선택 페이지

  

• 멀티 모드 시 게임 참여 선택지

  

• 게임방 생성

  

• 게임방 리스트

  

• 게임 대기방 페이지

  

• 랭킹 페이지

  

• 게임 방법 설명 페이지

  

• 로그인 / 회원가입 페이지

  

🙋‍♂️ Distributed Roles

BACKEND

배정우 (팀장)

• 백엔드 & 인프라 팀원
• 인프라 자동 빌드, 배포 환경 구성
• 닉네임 랜덤 생성 API 연동
• 랭킹 서비스 구현
• openvidu 배포 설정 및 배포

송정훈

• 백엔드 팀원
• Spring Security 적용
• JWT 적용
• 회원 서비스 구현
• 게임 대기방 관리 서비스 구현
• 인게임 p2p 서비스 구현

배진현

• 백엔드 팀장
• 테마별 퀴즈 서비스 구현
• 알림 서비스 구현
• 인게임 내부 음성 채팅 구현
• 친구 서비스 구현
• 홈페이지 리소스 파일 서버(nginx) 구축

FRONTEND

오희주

• 프론트엔드 팀장
• 우주 테마 스토리 구성
• 인게임 공통 컴포넌트 제작
• draw call 등 게임 최적화
• axios instance화 및 refresh token 구현

김병주

• 프론트엔드 팀원
• 게임 멀티모드 웹소켓 기능 구현
• 음성 채팅 구현
• 싸피 테마 스토리 구성
• 멀티모드 페이지, 컴포넌트 생성

류지원

• 프론트엔드 팀원
• 회원 관리 및 공통 컴포넌트 제작
• 메인페이지(마이홈, 랭킹, 게임설명)구현
• 친구 및 알림 기능 ui 구현
• 공포테마 및 싸피테마 구현

⚙️ Function

회원

💡 회원은 Spring Security & JWT를 사용하여 로그인 구현

• 회원가입
• 로그인 (access 토큰 및 refresh 토큰 발급)
• 로그인 연장 (access 토큰 재발급)
• 로그아웃
• 회원 탈퇴
• 닉네임 중복 검사
• 아이디 중복 검사
• 닉네임 랜덤 생성

테마

💡 공포, 싸피, 우주 총 3개의 테마로 구성

• 테마 목록 조회

퀴즈

💡 테마별 랜덤 퀴즈 출제

• 테마 별 랜덤 퀴즈 문제 출제
• 퀴즈 결과 조회
• 퀴즈 별 힌트 조회
• 퀴즈 정답 제출

친구

💡 같이 게임을 즐길 수 있는 친구 기능

• 유저 검색
• 친구 리스트 조회
• 친구 요청
• 친구 추가
• 친구 삭제

게임 대기방

💡 게임 대기방 상호작용

• 게임방 리스트 조회
• 게임방 생성
• 게임방 삭제
• 게임방 설정 변경
• 멀티 모드 게임방 친구 초대
• 멀티 모드 강제 퇴장
• 게임방 설정 변경

인게임

💡 게임 시 사용자들 상호작용

• 멀티 모드 시 유저별 정보 공유

랭킹

💡 전체 사용자의 랭킹 정보 조회

• 랭킹 리스트 조회
• 실시간 랭킹 정보 조회

사용자 정보

💡 사용자의 정보 조회

• 유저 기본 정보 조회 (닉네임, 프로필 사진)
• 테마별 유저 최고 기록 조회

알림

💡 게임 초대 및 친구 추가 알림 기능

• 안 읽은 요청 조회
• 알림 읽음 처리
• 실시간 알림 전송

Technology

Websocket

nginx

• 홈페이지 전체 리소스 저장

Redis

• 출제한 퀴즈 내역 저장
• refresh Token

Infra

• jenkins & gitlab 사용해서 자동 빌드, 자동 배포 환경 구현
• docker를 사용한 어플리케이션 환경 구성
• nginx를 사용한 경로 요청에 따른 요청 분산 처리