web08-booquiz - v1.0.0
BooQuiz - 실시간 대규모 퀴즈 플랫폼
팀 노션 | 백로그 | 그라운드 룰 | 기획서 | figma | 개발위키
📝 프로젝트 소개
다수의 사용자가 로그인 없이 함께 참여할 수 있는 실시간 퀴즈 플랫폼 BooQuiz 입니다.
🚀 프로젝트 목표
초기 소규모 서비스에서 시작해 점진적 확장과 기술적 완성도를 함께 추구함
- 점진적 개발: 1명 → 10명 → 300명 사용자로 확장하며 매주 완성된 서비스를 배포.
- 변화 대응: 주기적인 리팩토링, 아키텍처 조정을 통해 유연성 유지.
- 협업 강화: 페어 프로그래밍을 통한 적극적인 협업.
- 피드백 기반: 사용자 피드백을 주기적으로 반영.
핵심 기능
🎯 입장 코드를 통한 간편한 퀴즈 참여
⚡ 300명 이상 동시 접속 지원
📊 실시간 퀴즈 진행 및 채팅 기능
📈 퀴즈존 별 최종 결과 확인
🎮 원하는 퀴즈를 직접 만들기
🛠 기술 스택
| 영역 | 기술 스택 |
|---|---|
| 공통 |    |
| Frontend |        |
| Backend |        |
| 인프라 |         |
| 협업 도구 |        |
🏗 시스템 아키텍처
📅 개발 타임라인
timeline
title 전체 타임라인
section 0주차
프로젝트 기획 단계: 🎯 팀 빌딩 및 아이디어 도출 : 🔄 서비스 기능 구체화 : 🛠 기술 스택 및 개발 프로세스 확정
section 1주차
프로젝트 기반 구축: 🏗 모노레포 환경 구성 : 📝 기술 문서화 : 🔧 개발 컨벤션 정립
section 2주차
기반 기능 구현: 🎨 UI/컴포넌트 라이브러리 구축 : 💻 퀴즈존 모듈 설계 : 🔌 WebSocket 기본 연결 구현
section 3주차
단일 사용자 기능: 🏗 퀴즈 진행 상태관리 구현(FE) : ⚡ 퀴즈 진행/채점 로직 : 🚀 CI/CD 및 Docker 구성
section 4주차
다중 사용자 지원: 📦 퀴즈 진행 상태관리 리팩토링 : 🔌 WS 메시지 큐 구현 : 👥 동시접속 및 권한 관리
section 5주차
시스템 고도화: ⚡ WebSocket 최적화 : 💾 DB 연동 : 📊 실시간 순위 시스템 : 🎨 UI/UX 개선
0-1주차: 프로젝트 기획 및 팀 빌딩 (10/22 ~ 10/27)
timeline
title 0-1주차 (10/21 - 11/02)
section 0주차 - 팀 빌딩 (10/22 ~ 10/27)
10/22(일) : 팀원 자기소개 및 역량 공유
: 프로젝트 아이디어 브레인스토밍
: BooQuiz(도전골든벨) 초기 아이디어 도출
section 아이디어 구체화 (10/24)
10/24(화) : BooQuiz 서비스 세부 기능 논의
: 실시간 참여형 퀴즈 플랫폼 컨셉 확정
: 트래픽 테스트를 위한 방 인원 조절 기능 구상
: 부스트캠프 테마 퀴즈 콘텐츠 기획
section 기술 스택 및 규칙 확정 (10/27)
10/27(금) : 🔄 기술 스택 최종 확정
: FE - React / BE - NestJS
: 🔧 개발 프로세스 설정
: Git 브랜치 전략 수립 (main-dev-feat)
: PR 리뷰 프로세스 확립, 테스트 코드 작성 원칙
: 🔄 프로젝트 그라운드 룰 설정
section 프로젝트 기반 구축 (10/28 ~ 10/30)
10/28: 프로젝트 초기화
: 모노레포 설정
10/30: 저녁 팀 멘토링
section 문서화 및 규칙 (10/31)
10/31: README 작성
: 기술 스택 선정 문서화
section 개발 환경 설정 (11/01 ~ 11/02)
11/01: 1주차 데모데이
11/02: 이슈/PR 템플릿 추가
: 개발 컨벤션 정립
짧은 개발 기간 동안, 실시간 통신 더불어 팀원의 개인 목표에 도전해볼 수 있는 프로젝트 기획 팀의 주차별 목표 설정을 통해 안정적인 진행과 팀원 동기 부여에 기여.
- 팀원들과 첫 만남에서 각자의 역량과 관심사를 공유하며 프로젝트 방향성 논의.
- 브레인스토밍을 통해 실시간 참여형 퀴즈 플랫폼 아이디어 최종 선정.
- 주차별 현실적인 목표를 설정하여 단계적으로 기능을 확장.
- 매주 데모데이를 통해 실제 배포를 진행하며 프로젝트 발전.
주차 별 배포 목표 설정
개발 환경 구축
- 모노레포 구조 도입
- pnpm workspace 적용
- 코드 품질 관리
- ESLint, Prettier, Git hook
- 협업 프로세스 확립
- 브랜치 보호 규칙 설정, PR 템플릿 도입
- 프로젝트 개발 환경 구축
2주차: 기반 기능 개발 (11/03 - 11/09)
timeline
title 2주차 (11/03 - 11/09)
section 기반 기능 구현
11/03(일) : 🎨 Frontend/기반 : shadcn UI & Tailwind 설정
: 🔧 DevOps/기반 : Husky & Commitlint 설정, Prettier 설정
: 💻 Backend/기반 : 퀴즈존 모듈/리포지토리 인터페이스 설계
section 컴포넌트 개발
11/04(월) : 🎨 Frontend/기반
: Button, Typography, CommonInput 컴포넌트
: ContentBox, Layout 컴포넌트 구현
: 💻 Backend/기반
: 퀴즈존 메모리 저장소 구현
: 세션/쿠키 설정
: 저녁 현우님 개인 멘토링
11/05(화) : 🎨 Frontend/기반
: Storybook 설정 및 컴포넌트 스토리 작성
: 💻 Backend/기반
: 컨트롤러/서비스 레이어 테스트 코드
: 👥 저녁 준현, 현민, 선빈 개인 멘토링
section WebSocket 구현
11/06(수) - 11/07(목) : 💻 Backend/기능
: WebSocket 게이트웨이 구현
: 기본 연결 및 이벤트 핸들링 구현
: SuperWSTest 기반 WS 테스트
: 🎨 Frontend/기능: Alert Dialog, TextCopy 컴포넌트 추가
: 🔄 2주차 통합
: 공통 컴포넌트 라이브러리 완성
: WebSocket 기본 연결 테스트
11/08(금) : 📊 2주차 데모데이
11/09(토) : 🧘 2주차 모각글
- 개발 환경과 프로세스 안정화, 핵심 기능 구현 기반 마련.
- 페어 프로그래밍 도입으로 지식 공유와 기술적 성장 촉진 향상 촉진.
핵심 구현 내용
- 프론트엔드
- 공통 컴포넌트 라이브러리 구축을 통한 재사용 가능한 UI 패턴 정립
- Storybook을 통한 컴포넌트 문서화
- 백엔드
- TDD 기반 퀴즈존 모듈 개발
- WebSocket 게이트웨이 구현
- 단위 테스트 작성 및 검증
고민 사항
3주차: 단일 사용자 기능 구현 (11/10 - 11/16)
timeline
title 3주차 (11/10 - 11/16)
section 퀴즈존 기본 구현
11/10-11/11: 🎨 QuizZoneManager 초기 상태관리 구현
: 퀴즈존 생성 페이지 퍼널 구조 구현
: 💻 실시간 퀴즈 진행 이벤트 처리
section UI/UX 구현
11/11-11/12: 🎨 Timer 컴포넌트 개선
: Progress Bar 애니메이션 구현
: 💻 답안 제출 및 채점 로직
: 🔧 Winston 로거 및 CI/CD 구축
section 기능 개선
11/13-11/14: 🎨 실시간 점수/랭킹 표시
: 퀴즈 결과 화면 개선
: 💻 API 문서화 (Swagger/TSDoc)
: 🔧 staging 환경 구축
section 통합 및 테스트
11/14: 💻 Docker 컨테이너 설정
: 환경변수 분리
: 🔄 3주차 통합
: 실시간 퀴즈 진행 테스트
: 단일 사용자 퀴즈 풀이 검증
section 데모 및 회고
11/15: 📊 3주차 데모데이
11/16: 🧘 3주차 모각글
- 퍼널 패턴을 통한 퀴즈 진행 단계별 상태 관리 시스템 구축
- CI/CD 파이프라인 구성을 통한 지속적인 배포 환경 마련
핵심 구현 내용
- 프론트엔드
- 퍼널 패턴 도입
- 실시간 타이머 구현
- 테스트 코드 환경 구축
- 백엔드
- 상태와 이벤트를 기반으로 한 퀴즈 진행 처리 구현
- DevOps
- Docker, GItHub Actions를 통한 CI/CD 환경 구축
고민 사항
- 토스의 퍼널 패턴을 퀴즈 상태관리에 적용할 수 있을까?
- 퍼널 패턴으로 퀴즈존 상태관리 하기
- 📚 테스트 코드는 왜 작성해야 할까요? 특히 프론트엔드에서?
- SSL 인증서 발급 및 HTTPS 적용하기
- Github Action으로 Nginx에 정적 파일 배포하기
- github page를 이용하여 정적 페이지 배포
- Github Action으로 도커 이미지 Web Server 배포하기
- 웹소켓 + 리버스 프록시(엔진엑스)
4주차: 다중 사용자 지원 (11/17 - 11/23)
timeline
title 4주차 (11/17 - 11/23)
section 초기 구현
11/17-11/20: 🎨 useTimer, useQuizZone 훅 분리
: useWebSocket 커스텀 훅 구현
: 💻 10인 동시접속 처리 로직
: 참여자 상태 관리 개선
: 👤 저녁 동현님 개인 멘토링
section 상태 관리
11/17-11/21: 🎨 퀴즈존 타입 시스템 정의
: 상태 머신 기반 이벤트 처리
: 💻 퀴즈존 리포지토리 리팩토링
: 방장 기반 권한 시스템
: 방장-참여자 권한 테스트
section 테스트 및 개선
11/20-11/21: 🎨 useTimer/useQuizZone 테스트
: 커넥션 비정상 종료 처리
: 💻 퀴즈 정답 제출 로깅
: 다중 사용자 연결 관리 개선
: 👥 저녁 현민님, 선빈님 멘토링(11/20)
: 👥 저녁 현우님, 준현님 멘토링(11/21)
section 시스템 안정화
11/20-11/21: 🎨 WebSocket 메시지 큐 구현
: base64 인코딩/디코딩 처리
: 💻 동시성 처리 검증
: 🔧 Docker 배포 환경 구축
: 🔄 4주차 통합 및 테스트
: 다중 사용자 퀴즈 진행 테스트
section 데모 및 회고
11/22: 📊 4주차 데모데이
11/23: 🧘 4주차 모각글
- 단일 사용자 기능을 다중 사용자 환경으로 확장.
- 백엔드 리펙토링을 통한 실시간 상태 동기화와 메시지 처리 안정성 확보
- 커스텀 훅 재설계로 코드 재사용성 향상.
핵심 구현 내용
- 프론트엔드
- 퀴즈존 상태 관리 커스텀 훅 리팩토링
- 웹소켓 연결 실시간 동기화 개선
- 방장/ 참여자 권한 시스템 구현
- 백엔드
- 다중 사용자 퀴즈 진행 처리를 위한 기능 및 구조 확장
- 사용자 재연결 처리 로직 구현
- DevOps
- 배포 안전성 확보를 위한 Staging 환경 구축
고민 사항
- 테스트를 위한 스테이징 환경 구축
- useReudcer를 통한 퀴즈 상태관리 커스텀 훅 리팩토링
- 다중 사용자 기능 확장 설계
- 퀴즈존 상태관리 커스텀 훅을 리팩토링 과정을 돌아보며
- Claude 씨와 리펙토링에 대해서 정량적 평가 해보기
- 모놀리식에 Redis가 필요할까?
- API 서버와 socket 서버의 아키텍처적 분리
- 웹소켓 서버 스케일아웃
- Nest Logger
5주차: 시스템 안정화와 서비스 사용성 개선(11/24 ~ 11/27)
timeline
title 5주차 (11/24 ~ 11/28)
section 웹소켓 최적화
11/24-11/25: 💻 WebSocket 커스터마이징
: play gateway 리팩토링
: 엔티티 분리 및 연결 로직 개선
section 채팅 기능 구현
11/25-11/26: 💻 채팅 모듈 추가
: 채팅 서비스 통합
: 퀴즈 제출/진행 처리 개선
section UI/UX 개선
11/26-11/27: 🎨 퀴즈존 입장 처리 에러 핸들링
: 유효성 검사 문구 및 글자 수 제한 추가
: 결과 페이지 레이아웃 개선
: 👥 팀 멘토링
section DB 연동 및 통합
11/27-11/28: 💾 채팅 서비스 종료 처리 구현
: 💻 퀴즈존 컨트롤러 채팅 서비스 통합
: 🔄 충돌 UI 수정 및 테스트
section 데모 및 회고
11/28: 📊 5주차 데모데이
11/28: 🧘 5주차 모각글
- 성능 확인을 위한 부하테스트
- 실시간 채팅과 순위 시스템 추가로 서비스 완성도 향상.
핵심 구현 내용
- 프론트엔드
- 퀴즈존 입장 및 진행 과정에서의 에러 핸들링
- 채팅 UI 구현 및 전체 레이아웃 개선
- 퀴즈 제출 페이지별 순위 UI 구현
- 백엔드
- WsAdapter 커스터마이징
- 퀴즈 진행 중 사용자 상호 작용을 위한 기능 추가
- 문제별 선착순 제출 순위 산정 구현
- 퀴즈 목록 관리를 위한 RDB 적용
- 채팅 이벤트 처리 기능 구현
- 인프라
- Production, Staging MySQL 환경 구축
- 실시간 모니터링을 위한 WebHook 연동
고민 사항
- ErrorBoundary와 Suspense를 통해 에러 처리하기
- 리액트 Memoization을 통한 최적화를 하려면?
- 부하 테스트 시도
- NCP 서버 모니터링 with Slack
- WsAdapter에 세션 적용하기
- 서버 클라이언트 시간 동기화
6주차 최종 데모 준비
timeline
title 6주차 (11/29 ~ 12/03)
section 마무리 작업
11/29-11/30: 🔄 리드미 및 문서 업데이트
: 아키텍처, 기능 설명 추가
: 로고 및 UI 개선
section 사용자 피드백 반영
12/01-12/02: 🎨 채팅 결과 페이지 개선
: 퀴즈존 생성 페이지 유효성 검증 강화
: 인터페이스 디자인 개선
: WebSocket 재연결 로직 강화
section 최종 코드 리팩토링
12/02-12/03: 🔧 채팅 서비스 및 메모리 레포지토리 개선
: 퀴즈존 입장 처리 에러 핸들링 수정
: UI 충돌 이슈 해결
section 최종 안정화
12/03: 💻 웹소켓 재연결 처리 보완
: 메시지 큐 시스템 안정화
: UI 버그 수정
: 📊 최종 데모 준비
핵심 개선 내용
- 프론트엔드
- 재연결 처리 로직 개선
- 웹소켓 종료 시나리오 처리 보완
- 퀴즈존 생성 시 유효성 검증 강화
- UI/UX 개선 및 채팅,결과 페이지 레이아웃 최적화
- 에러 메시지 및 안내 문구 개선
- 백엔드
- 채팅 서비스 아키텍처 개선
- 메모리 레포지토리 CRUD 로직 최적화
- 퀴즈존 컨트롤러 에러 핸들링 강화
- 선착순 제출을 고려한 최종 순위 산정
🚀 프로젝트 시작하기
- 레포지토리 클론
git clone https://github.com/boostcampwm-2024/web08-BooQuiz.git
- 패키지 매니저 설치 (pnpm 사용) 및 패키지 다운로드
npm install -g pnpm
pnpm install
- Frontend 환경 변수 추가
echo -e "VITE_API_URL=http://localhost:3000\nVITE_WS_URL=ws://localhost:3000" > /apps/frontend/.env.development
- 프로젝트 실행하기(개발 환경)
pnpm run start
📚 프로젝트 구조
/
├── frontend/ # 프론트엔드 애플리케이션
│ ├── src/
│ │ ├── blocks/ # 페이지별 주요 컴포넌트
│ │ ├── components/ # 재사용 가능한 컴포넌트
│ │ ├── hook/ # 커스텀 훅
│ │ └── pages/ # 페이지 컴포넌트
│ └── ...
│
├── backend/ # 백엔드 애플리케이션
│ ├── src/
│ │ ├── common/ # 공통 유틸리티
│ │ ├── core/ # 핵심 기능
│ │ ├── quiz-zone/ # 퀴즈존 상태 정보 관리
│ │ ├── quiz/ # 퀴즈 CRUD
│ │ └── play/ # 실시간 퀴즈 관리
│ └── ...
└── ...
팀 소개
| J004 강준현 | J074 김현우 | J086 도선빈 | J175 이동현 | J217 전현민 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
Git Branch 전략
- GitLab flow를 차용하여 브랜치를 관리하였습니다.
gitGraph
commit
branch develop
checkout develop
commit
branch "feature/#issue"
checkout "feature/#issue"
commit
commit
checkout develop
merge "feature/#issue"
checkout main
merge develop
🤝 기여하기
- 이슈 생성 또는 기존 이슈 확인
- feature/[기능명] 브랜치 생성
- 개발 및 테스트 완료
- PR 생성 및 리뷰 요청