풀스택 미니 퀴즈 앱 - 객관식 문제 풀이

mkdir quiz-app-fullstack && cd quiz-app-fullstack

이 폴더에서 풀스택 퀴즈 앱 프로젝트를 시작합니다.

## Laravel 13.x API 백엔드 설정

1. `backend` 폴더에 Laravel 13.x 프로젝트를 생성하세요.
   - `composer create-project laravel/laravel backend`
   - Laravel 13.x 최신 버전 사용 확인

2. 데이터베이스를 SQLite로 설정하세요.
   - `.env` 파일에서 `DB_CONNECTION=sqlite` 설정
   - `database/database.sqlite` 파일 생성

3. `quizzes` 테이블 마이그레이션 생성:
   - `php artisan make:migration create_quizzes_table`
   - 컬럼: `id`, `question` (text), `option_a` (string), `option_b` (string), `option_c` (string), `option_d` (string), `correct_answer` (string, 'A'/'B'/'C'/'D'), `timestamps`
   - 마이그레이션 실행: `php artisan migrate`

4. 시더로 샘플 퀴즈 데이터 5개 추가:
   - `php artisan make:seeder QuizSeeder`
   - 다양한 일반상식 문제 5개 생성 (예: "대한민국의 수도는?", "태양계에서 가장 큰 행성은?" 등)
   - 시더 실행: `php artisan db:seed --class=QuizSeeder`

5. CORS 미들웨어 설정:
   - `config/cors.php`에서 `'allowed_origins' => ['http://localhost:5173']` 설정 (React Vite 기본 포트)
   - `bootstrap/app.php` 또는 `app/Http/Kernel.php`에서 CORS 미들웨어 활성화

6. API 라우트 생성 (`routes/api.php`):
   - `GET /api/quizzes` - 모든 퀴즈 목록 반환
   - QuizController 생성: `php artisan make:controller QuizController`
   - `index()` 메서드에서 `Quiz::all()` JSON 반환

7. Laravel 개발 서버 실행:
   - `php artisan serve` (기본 포트 8000)

완료 후 `http://localhost:8000/api/quizzes`에서 JSON 응답 확인 가능해야 합니다.

## React 19 프론트엔드 설정

1. 프로젝트 루트에서 `frontend` 폴더에 React 19 + Vite 프로젝트 생성:
   - `npm create vite@latest frontend -- --template react`
   - `cd frontend && npm install`

2. Tailwind CSS 설치 및 설정:
   - `npm install -D tailwindcss postcss autoprefixer`
   - `npx tailwindcss init -p`
   - `tailwind.config.js`에서 `content: ['./index.html', './src/**/*.{js,jsx}']` 설정
   - `src/index.css`에 Tailwind 지시어 추가:
     ```css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     ```

3. `src/App.jsx` 수정:
   - 기존 코드 삭제하고 기본 레이아웃 생성
   - 제목: "퀴즈 앱" (중앙 정렬, 큰 폰트)
   - "퀴즈 시작하기" 버튼 (Tailwind로 스타일링)
   - 버튼 클릭 시 콘솔에 "퀴즈 시작!" 출력 (나중에 퀴즈 로드 기능으로 대체)

4. React 개발 서버 실행:
   - `npm run dev` (기본 포트 5173)

완료 후 `http://localhost:5173`에서 "퀴즈 앱" 제목과 버튼이 표시되어야 합니다.

## Laravel API에서 퀴즈 데이터 가져오기

`src/App.jsx`를 수정하여 Laravel API에서 퀴즈 목록을 가져오고 화면에 표시하세요.

1. `useState`로 상태 관리:
   - `quizzes`: 퀴즈 목록 배열
   - `currentIndex`: 현재 문제 인덱스 (0부터 시작)
   - `selectedAnswer`: 사용자가 선택한 답
   - `showResult`: 결과 화면 표시 여부
   - `score`: 맞은 문제 개수

2. `useEffect`로 컴포넌트 마운트 시 API 호출:
   - `fetch('http://localhost:8000/api/quizzes')`로 데이터 가져오기
   - 응답을 JSON으로 파싱 후 `quizzes` 상태에 저장
   - 에러 처리 추가 (console.error)

3. 퀴즈 문제 표시:
   - `quizzes[currentIndex]`로 현재 문제 가져오기
   - 문제 질문 표시 (큰 폰트, 볼드)
   - 선택지 4개 (A, B, C, D) 버튼으로 표시
   - 각 버튼은 `option_a`, `option_b`, `option_c`, `option_d` 값 표시
   - 버튼 클릭 시 `selectedAnswer` 상태 업데이트

4. UI 조건부 렌더링:
   - 퀴즈 로딩 중: "퀴즈를 불러오는 중..." 메시지
   - 퀴즈 로드 완료: 현재 문제와 선택지 표시

완료 후 화면에 첫 번째 퀴즈 문제와 선택지가 표시되어야 합니다.

## 정답 확인 및 다음 문제 이동 기능 구현

`src/App.jsx`를 수정하여 정답 확인 및 다음 문제로 이동하는 기능을 추가하세요.

1. "정답 확인" 버튼 추가:
   - 선택지 아래에 "정답 확인" 버튼 표시
   - `selectedAnswer`가 없으면 버튼 비활성화 (disabled)

2. 정답 확인 로직:
   - 버튼 클릭 시 `selectedAnswer`와 `quizzes[currentIndex].correct_answer` 비교
   - 정답이면 `score` 1 증가
   - 정답 여부를 alert 또는 화면에 피드백 표시 (예: "정답입니다!" 또는 "오답입니다. 정답은 B입니다.")

3. 다음 문제로 이동:
   - 정답 확인 후 1초 뒤 자동으로 다음 문제로 이동
   - `currentIndex` 1 증가
   - `selectedAnswer` 초기화 (null)
   - 마지막 문제인 경우 `showResult`를 true로 설정 (결과 화면 표시)

4. 결과 화면 표시:
   - `showResult`가 true일 때 결과 화면 렌더링
   - 전체 문제 수와 맞은 문제 수 표시 (예: "5문제 중 3문제 정답!")
   - 점수 퍼센트 계산 및 표시 (예: "점수: 60%")
   - "다시 시작" 버튼 추가 (클릭 시 상태 초기화)

완료 후 퀴즈를 풀고 정답 확인, 다음 문제 이동, 최종 결과 표시가 동작해야 합니다.