플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 다수의 현장 방문객이 동시에 QR 접근 시 이벤트 활성 상태를 일관성 있게 제공하는 WebSocket 동시성 처리 구조 설계 필요 - 룰렛·카드·퀴즈 등 게임 유형마다 완전히 다른 설정 스키마를 단일 관리 UI로 통합 처리하는 폼 엔진 설계 필요 - 시간대별 자동 활성화 스케줄러와 수동 관리자 조작이 충돌하지 않도록 상태 전환 우선순위 정책 설계 필요 - 현장 이벤트
프로젝트 성과
게임 유형별 동적 설정 폼 엔진 구현
Discriminated Union 타입으로 룰렛·카드·퀴즈 3종 게임 설정 스키마를 단일 React Hook Form 구조로 처리, Zod 스키마별 유효성 검증 분기 설계
WebSocket 실시간 참여 집계 파이프라인 설계
ws 기반 WebSocket 서버에서 참여 이벤트를 수신·집계하여 Zustand 전역 상태로 브로드캐스트, 대시보드 차트 자동 갱신 구조 구현
이벤트 자동 활성화 스케줄러 구축
node-cron 기반 시간대별 이벤트 활성화·비활성화 작업 등록, WebSocket 브로드캐스트와 연동하여 게임 화면 상태 자동 전환 구조 설계
Canvas 기반 게임 미리보기 엔진 구현
관리자가 설정 변경 시 Canvas API로 실시간 게임 화면 미리보기 렌더링 구현, requestAnimationFrame으로 60fps 애니메이션 루프 설계
TanStack Table 커스텀 훅 추상화 구조 설계
컬럼 정의·정렬·필터·페이지네이션 로직을 useEventTable 커스텀 훅으로 추상화하여 참여자·당첨자·블랙리스트 테이블 3개에 재사용
핵심 기능
이벤트 통합 대시보드
진행 중인 이벤트 현황, 실시간 참여자 수, 게임별 참여 통계를 한눈에 파악하는 대시보드. WebSocket으로 실시간 참여자 집계 수신, Recharts 기반 게임별/시간대별 참여 차트 렌더링
진행 단계
이벤트 데이터 모델 설계 및 API 구조 기획
2026.03.
이벤트·게임 설정·참여자 도메인 MongoDB 스키마 8개 설계, Mongoose 관계 매핑 및 REST API 32개 엔드포인트 명세 정의
프로젝트 상세
1) 포트폴리오 소개 팝업스토어 현장 이벤트용 인터랙티브 웹 게임(룰렛, 카드 뒤집기, 퀴즈 등)을 설정·운영하는 관리자 대시보드와 게임 엔진을 React + Node.js 기반 풀스택으로 설계·구현할 예정. Canvas API 기반 애니메이션 게임 로직과 WebSocket 실시간 참여자 집계, 게임 유형별 설정 관리 기능을 포함한 이벤트 관리 통합 시스템을 구축. 2) 작업 범위 - 이벤트 통합 대
