🎯 퀴즈 배틀 아레나 - 친구와 실시간 대결하는 퀴즈 게임

mkdir quiz-battle-arena-fullstack && cd quiz-battle-arena-fullstack

이 폴더에서 프로젝트를 시작합니다.

## 1단계: Laravel 백엔드 API 프로젝트 생성

Laravel 13.x 최신 버전으로 API 백엔드 프로젝트를 생성하고 기본 설정을 완료합니다.

### 요구사항:

1. `backend` 폴더에 Laravel 13.x 프로젝트 생성
2. SQLite 데이터베이스 설정 (.env 파일 수정)
3. CORS 설정 (React 프론트엔드에서 API 호출 가능하도록)
4. 다음 마이그레이션 파일 생성:
   - `quizzes` 테이블: id, title, category, difficulty, question_count, timestamps
   - `questions` 테이블: id, quiz_id (foreign key), question_text, option_a, option_b, option_c, option_d, correct_answer, timestamps
   - `quiz_results` 테이블: id, quiz_id (foreign key), player_name, score, correct_count, total_time, timestamps
5. 각 테이블에 대응하는 Eloquent 모델 생성 (Quiz, Question, QuizResult)
6. 관계 설정:
   - Quiz hasMany Questions
   - Quiz hasMany QuizResults
7. API 라우트 설계 (routes/api.php):
   - GET /api/quizzes (퀴즈 목록 조회)
   - POST /api/quizzes (퀴즈 생성)
   - GET /api/quizzes/{id} (퀴즈 상세 조회 - 문제 포함)
   - POST /api/quiz-results (퀴즈 결과 제출)
   - GET /api/quiz-results/{quizId} (특정 퀴즈의 결과 목록)
8. 컨트롤러 생성 (QuizController, QuizResultController)
9. Seeder 작성 (샘플 퀴즈 데이터 5개, 각 퀴즈당 5개 문제)

### 명령어 예시:
```bash
composer create-project laravel/laravel:^13.0 backend
cd backend
php artisan migrate
php artisan db:seed
php artisan serve --port=8000
```

### 카테고리 예시:
- 영화
- 음악
- 스포츠
- 과학
- 역사

### 난이도:
- easy (쉬움)
- medium (보통)
- hard (어려움)

모든 설정이 완료되면 `php artisan serve`로 서버를 실행하고, Postman이나 curl로 API가 정상 작동하는지 테스트해주세요.

## 2단계: React 프론트엔드 프로젝트 생성 및 기본 UI 구성

Vite 기반 React 19 프로젝트를 생성하고, Tailwind CSS를 설정한 후 기본 레이아웃과 퀴즈 목록 페이지를 구현합니다.

### 요구사항:

1. `frontend` 폴더에 Vite + React 19 프로젝트 생성
2. Tailwind CSS 설치 및 설정
3. React Router DOM v6 설치 (페이지 라우팅)
4. 다음 페이지 컴포넌트 생성:
   - `HomePage.jsx` (퀴즈 목록 페이지)
   - `CreateQuizPage.jsx` (퀴즈 생성 페이지)
   - `QuizPlayPage.jsx` (퀴즈 플레이 페이지)
   - `ResultPage.jsx` (결과 페이지)
5. `App.jsx`에서 React Router로 라우팅 설정
6. `HomePage.jsx` 구현:
   - useState로 퀴즈 목록 상태 관리
   - useEffect에서 fetch로 Laravel API (http://localhost:8000/api/quizzes) 호출하여 퀴즈 목록 가져오기
   - 퀴즈 목록을 카드 형태로 표시 (제목, 카테고리, 난이도, 문제 개수)
   - 각 카드 클릭 시 해당 퀴즈 플레이 페이지로 이동 (Link 사용)
   - "새 퀴즈 만들기" 버튼 (CreateQuizPage로 이동)
7. 헤더 컴포넌트 생성 (`Header.jsx`):
   - 로고/타이틀 "퀴즈 배틀 아레나 🎯"
   - 홈/퀴즈 생성 네비게이션 링크
8. Tailwind CSS로 게임다운 디자인:
   - 그라데이션 배경
   - 카드 호버 효과 (scale, shadow)
   - 버튼 애니메이션
   - 반응형 그리드 레이아웃 (모바일: 1열, 태블릿: 2열, 데스크톱: 3열)

### 명령어 예시:
```bash
cd ..
npm create vite@latest frontend -- --template react
cd frontend
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install react-router-dom
npm run dev
```

### 디자인 컨셉:
- 배경: 보라-파랑 그라데이션
- 카드: 흰색 배경, 둥근 모서리, 그림자
- 버튼: 주황색 또는 파란색, 호버 시 살짝 커짐
- 폰트: 굵은 제목, 깔끔한 본문

프론트엔드 서버가 http://localhost:5173 에서 실행되고, 홈페이지에서 Laravel API로부터 퀴즈 목록을 불러와 카드로 표시되는지 확인하세요.

## 3단계: 퀴즈 플레이 페이지 및 결과 제출 기능 구현

사용자가 퀴즈를 플레이하고, 정답을 선택하며, 결과를 제출하는 전체 플로우를 구현합니다.

### 요구사항:

1. `QuizPlayPage.jsx` 구현:
   - URL 파라미터로 quizId 받기 (useParams)
   - useEffect에서 GET /api/quizzes/{quizId} 호출하여 퀴즈 데이터(문제 포함) 가져오기
   - useState로 다음 상태 관리:
     - currentQuestionIndex (현재 문제 인덱스, 초기값 0)
     - selectedAnswer (선택한 답)
     - score (점수)
     - correctCount (맞힌 개수)
     - isAnswered (현재 문제에 답했는지 여부)
     - startTime (퀴즈 시작 시간)
   - 현재 문제 표시:
     - 문제 텍스트
     - 4개의 선택지 버튼 (option_a, option_b, option_c, option_d)
     - 선택지 클릭 시 selectedAnswer 업데이트 및 isAnswered를 true로 설정
   - 정답 확인 로직:
     - 선택한 답과 correct_answer 비교
     - 정답이면 score +10, correctCount +1
     - 정답/오답 피드백 표시 (초록색/빨간색 배경, 메시지)
   - "다음 문제" 버튼:
     - 클릭 시 currentQuestionIndex +1
     - 마지막 문제라면 결과 제출 및 ResultPage로 이동
   - 타이머 (선택 기능, 보너스):
     - 30초 카운트다운
     - 시간 초과 시 자동으로 다음 문제로 넘어감
     - 진행바로 시각화 (시간이 줄어들수록 빨간색으로 변화)
2. 결과 제출:
   - 모든 문제를 풀면 POST /api/quiz-results로 결과 제출
   - 요청 본문: { quiz_id, player_name, score, correct_count, total_time }
   - player_name은 간단한 입력 폼으로 받거나 "익명" 기본값 사용
   - 제출 후 ResultPage로 이동 (navigate 사용)
3. `ResultPage.jsx` 구현:
   - URL state로 전달받은 결과 데이터 표시
   - 최종 점수, 맞힌 개수 / 전체 문제 수, 정답률 (%)
   - "다시 도전하기" 버튼 (같은 퀴즈 다시 플레이)
   - "홈으로 돌아가기" 버튼
   - (보너스) GET /api/quiz-results/{quizId} 호출하여 다른 플레이어들의 점수 리더보드 표시
4. 애니메이션 효과:
   - 문제 전환 시 카드 플립 또는 페이드 인/아웃
   - 정답 시 축하 효과 (confetti 라이브러리 사용 가능, 선택)
   - 버튼 호버 시 scale 애니메이션

### 플레이어 이름 입력:
- 퀴즈 시작 전 간단한 모달 또는 입력 필드로 이름 입력받기
- localStorage에 저장하여 다음에도 사용 가능

### 디자인:
- 문제 카드: 큰 폰트, 중앙 정렬
- 선택지 버튼: 4개가 2x2 그리드 또는 세로로 나열
- 정답 피드백: 화면 상단에 토스트 메시지 또는 모달
- 결과 페이지: 큰 점수 숫자, 축하 메시지, 이모지

모든 기능이 완료되면 퀴즈를 처음부터 끝까지 플레이하고, 결과가 DB에 저장되는지 확인하세요.