50개의 단어 속에 정답을 찾아라 🔎 (구 AI 워드 배틀)

실시간 멀티플레이 단어 퀴즈 게임입니다. 화면에 흩어진 50개의 단어 중에서, 문제에 맞는 답을 가장 먼저 찾아 클릭하세요. 제한 시간 안에 더 많이 맞힌 사람이 승리합니다!

문제 세트 (6종)

선생님이 게임 시작 전에 고를 수 있습니다. 각 세트 = 문제 50개.

• 🤖 AI 용어 · 🌍 세계 수도 · 📜 속담 완성 · ✍️ 사자성어 · 🔬 과학 상식 · 🌱 SDGs 생활 상식
• 세트 추가/수정: src/questionSets.js (같은 형식으로 {q, a} 50개를 넣으면 됨. 정답은 세트 안에서 중복 금지)

점수 규칙

• 가장 먼저 정답을 클릭한 1명만 점수를 얻습니다.
• 100점에서 시작해 1초에 1점씩 줄어듭니다 (최소 40점).
• 오답을 누르면 그 문제는 더 못 누릅니다. 20초 안에 아무도 못 맞히면 정답이 3초간 공개되고 다음 문제로 넘어갑니다.
• 규칙은 로그인 화면·대기실에 항상 표시되고, 문제 진행 중에는 "지금 맞히면 +N점"이 실시간으로 보입니다.

효과음 · 참가자 표시

• 입장 / 문제 시작 / 정답 / 오답 / 시간 초과 / 마지막 10초 째깍 / 게임 종료 효과음 (파일 없이 브라우저에서 합성). 상단 🔊 버튼으로 끌 수 있습니다.
• 상단 👥 N명 버튼: 접속 중인 학생 수. 누르면 전체 참가자 목록(순위·점수·접속 여부)이 열립니다.
• 대기실에 입장한 사람 전원이 표시되며, 10초마다 보내는 생존 신호가 30초 넘게 없으면 회색 "나감?"으로 바뀝니다. 선생님은 "나간 사람 정리" 버튼으로 한 번에 지울 수 있습니다.

🎮 바로 해보기

https://ai-word-battle.vercel.app

게임 방법

• 학생: 닉네임을 입력하고 입장 → 문제를 읽고 화면에서 정답 단어를 클릭
• 선생님: 문제 수를 정하고 게임 시작 → 실시간으로 학생들의 점수·순위 확인
• 제한 시간(라운드당 20초) 동안 가장 많이 맞힌 사람이 승리!

선생님 모드 들어가는 법

• 주소 뒤에 ?mode=admin 을 붙이세요 (예: 사이트주소/?mode=admin)
• 예전 방식인 #leethemom 도 그대로 동작합니다
• 선생님 비밀번호를 입력하면 관리 화면이 나옵니다
• ⚠️ 포크해서 쓰실 분은 src/App.jsx의 T_PASSES 배열을 본인 비밀번호로 바꾸세요 (여러 개 등록 가능)

기술 스택

• React + Vite
• Firebase Realtime Database (실시간 동기화)

실행 방법

npm install
npm run dev

배포용 빌드는 npm run build → dist/ 폴더를 올리면 됩니다.

포크해서 직접 쓰려면 (중요)

이 게임은 Firebase 데이터베이스를 사용합니다. 본인 Firebase 프로젝트를 만들어 연결하지 않으면 원본과 데이터가 섞입니다.

1. 이 저장소를 Fork
2. Firebase 콘솔에서 프로젝트 생성 → Realtime Database 만들기
3. src/App.jsx 맨 위의 FIREBASE_CONFIG 를 본인 프로젝트 설정으로 교체
4. Authentication → 익명(Anonymous) 로그인 사용 설정
5. Realtime Database 규칙을 아래 보안 규칙으로 설정
6. Vercel 등에 배포

보안 규칙:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

라이선스

자유롭게 수업에 활용하세요. 개선 제안(Pull Request) 환영합니다! 🙌