🌊 Re: WAVE

최신 버전 : v1.4.17 (2026-08-08)

전체 업데이트 내역 보기

프로젝트 소개

BAGEL 팀이 개발한 인터랙티브 비주얼 노벨 게임 **"Re: WAVE"**입니다.

React 기반으로 개발된 웹 게임으로, 플레이어의 선택에 따라 다양한 스토리 분기와 엔딩을 경험할 수 있습니다.

🎮 주요 기능

게임 시스템

• 다중 엔딩 시스템: 플레이어 선택에 따른 다양한 스토리 전개
• 인터랙티브 스토리텔링: 몰입감 있는 대화형 내러티브
• 세이브/로드 기능: 게임 진행 상황 저장 및 불러오기
• 게임 결과 관리: 플레이 기록 및 달성 엔딩 확인

커뮤니티 기능

• 랭킹 시스템: 플레이어 간 순위 경쟁
• 프로필 관리: 개인 정보 및 게임 통계 관리
• 리더보드: 전체 플레이어 랭킹 조회

🛠 기술 스택

Frontend

• React 18.3: UI 컴포넌트 기반 개발
• React Router v6: SPA 라우팅 관리
• Styled Components: CSS-in-JS 스타일링
• Recoil: 전역 상태 관리
• Axios: HTTP 클라이언트
• Framer Motion: 애니메이션 효과

배포 & CI/CD

• Docker: 컨테이너화된 배포
• GitHub Actions: 자동화된 빌드 및 배포
• Nginx: 정적 파일 서빙

🔒 인증 시스템

• JWT 기반 사용자 인증
• Protected Route를 통한 접근 권한 관리
• 자동 로그인 유지 기능

📊 API 연동

모든 API 요청은 중앙화된 axios 인스턴스를 통해 관리됩니다:

• 자동 토큰 관리
• 에러 핸들링
• 요청/응답 인터셉터

🎨 UI/UX 특징

• 반응형 디자인으로 다양한 디바이스 지원
• 부드러운 화면 전환 애니메이션
• 직관적인 게임 인터페이스
• 커스텀 폰트 (Jua) 적용

🧪 품질 관리

코드 품질 기준을 문서가 아닌 도구로 강제합니다. 아래 네 가지를 모두 통과해야 머지됩니다.

npm run format:check   # 포맷
npm run lint           # 린트 (위반 0건 유지)
npm run test:ci        # 테스트 + 커버리지
npm run build          # 빌드

• ESLint가 console 사용, localStorage 직접 접근, axios 직접 import를 차단합니다
• src/utils/, src/hooks/, src/game/에 커버리지 80% 임계치가 걸려 있습니다
• CI가 실제 차단 게이트로 동작합니다

자세한 내용은 docs/를 참조하세요.

📝 향후 계획

전면 표준화 리팩토링이 진행 중입니다. 설계와 진행 상황은 docs/superpowers/specs/에 있습니다.

• 디자인 토큰 체계 재설계
• 스토리 분기 엔진 데이터화
• 추가 엔딩 및 스토리 콘텐츠 확장

📄 라이선스

This project is private and proprietary.

---

Note: 게임의 스토리와 엔딩에 대한 자세한 내용은 직접 플레이를 통해 경험해보세요!