Quizly-Spring

Quizly: 3D 상호작용 기반의 몰입형 퀴즈 풀이 서비스

크래프톤 정글 5기 '나만의 무기 만들기' 프로젝트
개발기간: 2024.06.21 ~ 2024.07.27

프로젝트 소개 영상

• Quizly 프로젝트 소개 영상
• 발표 영상

프로젝트 설명 포스터!

팀 소개

김현수	신동우	유영우	조재룡	황연경
@hyunS00	@NoNoise2022	@yoo20370	@jjr7181	@yunnn426

프로젝트 소개

Quizly는 3D 환경에서 실시간 상호작용을 통해 즐겁고 효과적인 학습 경험을 제공하는 퀴즈 플랫폼입니다. 사용자들은 몰입감 있는 3D 공간에서 다양한 퀴즈에 참여하고, 실시간으로 다른 참가자들과 경쟁할 수 있습니다.

시작 가이드

설치

$ git clone https://github.com/Quizly-Project/quizly-Spring.git
$ cd quizly-Spring
$ ./gradlew clean build
$ docker compose up --build -d

---

Stacks 🐈

Core

Real-time Communication

HTTP

Development Tools

Environment

---

화면 구성 📺

메인 페이지	퀴즈 로비
3D 퀴즈 환경	결과 페이지

---

주요 기능 📦

⭐️ 3D 환경에서의 실시간 퀴즈 참여

• Three.js를 활용한 몰입감 있는 3D 퀴즈 환경 제공
• 실시간 멀티플레이어 상호작용

⭐️ 다양한 퀴즈 모드

• 객관식, OX, 주관식 등 다양한 퀴즈 형식 지원

⭐️ 실시간 순위 및 점수 시스템

• Socket.io를 활용한 실시간 점수 업데이트 및 순위 표시

---

아키텍처

Quizly는 프론트엔드, 백엔드, 실시간 통신 서버, 그리고 화상 통화 서버로 구성된 복합적인 아키텍처를 가지고 있습니다. 각 컴포넌트는 다음과 같은 역할을 합니다:

• 프론트엔드: React와 Three.js를 사용하여 3D 퀴즈 환경과 사용자 인터페이스를 구현
• 백엔드: Spring Boot를 사용하여 RESTful API 제공 및 데이터 관리
• 실시간 통신 서버: Nest.js와 Socket.io를 사용하여 실시간 퀴즈 상호작용 구현
• 화상 통화 서버: LiveKit을 사용하여 참가자 간 화상 통화 기능 제공

이러한 구조를 통해 Quizly는 몰입감 있는 3D 퀴즈 경험과 실시간 상호작용을 효과적으로 제공합니다.

서버 주요 기능

• 다중 퀴즈 룸 생성 및 관리
• 퀴즈 정답 여부 판정 및 결과 관리
• 실시간 점수 및 순위 업데이트
• 실시간 채팅
• 관리자 대시보드
• 클라이언트간 충돌 처리
• 모든 클라이언트 좌표 종합 및 브로드캐스트
• 좌표 양자화 및 역양자화

디렉토리 구조

quizly-Spring
├─ .gitignore
├─ HELP.md
├─ README.md
├─ gradle
│  └─ wrapper
│     ├─ gradle-wrapper.jar
│     └─ gradle-wrapper.properties
├─ gradlew
├─ gradlew.bat
└─ src
   ├─ main
   │  ├─ generated
   │  ├─ java
   │  │  └─ Team9789
   │  │     └─ quizly_Spring
   │  │        ├─ HomeController.java
   │  │        ├─ QuizlySpringApplication.java
   │  │        ├─ ValidationGroups.java
   │  │        ├─ ValidationSequence.java
   │  │        ├─ config
   │  │        │  ├─ CorsMvcConfig.java
   │  │        │  ├─ EnvConfig.java
   │  │        │  └─ SecurityConfig.java
   │  │        ├─ controller
   │  │        │  ├─ AdminController.java
   │  │        │  ├─ JoinController.java
   │  │        │  ├─ MainController.java
   │  │        │  ├─ QuizController.java
   │  │        │  ├─ QuizGroupController.java
   │  │        │  ├─ QuizResultController.java
   │  │        │  ├─ QuizRoomController.java
   │  │        │  ├─ ReissueController.java
   │  │        │  └─ StudentResultController.java
   │  │        ├─ dto
   │  │        │  ├─ AnswerDto.java
   │  │        │  ├─ CustomUserDetails.java
   │  │        │  ├─ JoinDTO.java
   │  │        │  ├─ LoginDTO.java
   │  │        │  ├─ OptionDto.java
   │  │        │  ├─ QuizDto.java
   │  │        │  ├─ QuizGroupDto.java
   │  │        │  ├─ QuizPostDto.java
   │  │        │  ├─ RoomAnswersDto.java
   │  │        │  └─ StudentResultDto.java
   │  │        ├─ entity
   │  │        │  ├─ Quiz.java
   │  │        │  ├─ QuizGroup.java
   │  │        │  ├─ QuizOption.java
   │  │        │  ├─ QuizResult.java
   │  │        │  ├─ QuizRoom.java
   │  │        │  ├─ RefreshEntity.java
   │  │        │  ├─ RoomAnswers.java
   │  │        │  ├─ StudentResult.java
   │  │        │  └─ UserEntity.java
   │  │        ├─ jwt
   │  │        │  ├─ CustomLogoutFilter.java
   │  │        │  ├─ JWTFilter.java
   │  │        │  ├─ JWTUtil.java
   │  │        │  └─ LoginFilter.java
   │  │        ├─ repository
   │  │        │  ├─ QuizGroupRepository.java
   │  │        │  ├─ QuizOptionRepository.java
   │  │        │  ├─ QuizRepository.java
   │  │        │  ├─ QuizResultRepository.java
   │  │        │  ├─ QuizRoomRepository.java
   │  │        │  ├─ RefreshRepository.java
   │  │        │  ├─ StudentResultRepository.java
   │  │        │  └─ UserRepository.java
   │  │        └─ service
   │  │           ├─ CustomUserDetailsService.java
   │  │           ├─ JoinService.java
   │  │           ├─ QuizGroupService.java
   │  │           ├─ QuizResultService.java
   │  │           ├─ QuizRoomService.java
   │  │           ├─ QuizService.java
   │  │           └─ StudentResultService.java
   │  └─ resources
   │     ├─ application-local.yaml
   │     ├─ application.yaml
   │     ├─ properties
   │     │  └─ env.properties
   │     └─ templates
   │        ├─ index.html
   │        └─ login.html
   └─ test
      └─ java
         └─ Team9789
            └─ quizly_Spring
               ├─ QuizlySpringApplicationTests.java
               ├─ controller
               │  ├─ QuizControllerIntegrationTest.java
               │  └─ QuizResultControllerTest.java
               └─ service
                  └─ QuizServiceTest.java

프로젝트의 전체 구조는 STRUCTURE.md에서 확인할 수 있습니다.