🎯 온라인 퀴즈 생성 & 공유 플랫폼 - 친구들과 함께하는 지식 배틀

mkdir quiz-maker-sharing-platform && cd quiz-maker-sharing-platform

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

Laravel 13.x + Inertia.js + React 19 프로젝트를 생성하세요.

1. Laravel Breeze(React + Inertia) starter kit으로 프로젝트 초기화:
   - `composer create-project laravel/laravel .`
   - `composer require laravel/breeze --dev`
   - `php artisan breeze:install react`
   - `npm install && npm run dev`

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

3. 기본 마이그레이션 실행:
   - `php artisan migrate`

4. Tailwind CSS 설정 확인 (Breeze가 자동 설정)

5. 개발 서버 실행:
   - `php artisan serve` (백엔드)
   - `npm run dev` (프론트엔드 Vite)

6. 브라우저에서 `http://localhost:8000` 접속하여 Laravel Breeze 기본 페이지 확인

완료 후 프로젝트 구조와 Breeze 기본 인증 페이지(로그인/회원가입)가 작동하는지 확인하세요.

퀴즈 플랫폼의 데이터베이스 구조를 설계하고 마이그레이션을 생성하세요.

1. Quizzes 테이블 마이그레이션 생성:
   - `php artisan make:migration create_quizzes_table`
   - 컬럼: id, user_id(외래키), title(string), description(text), category(string), difficulty(enum: easy/medium/hard), created_at, updated_at

2. Questions 테이블 마이그레이션 생성:
   - `php artisan make:migration create_questions_table`
   - 컬럼: id, quiz_id(외래키), question_text(text), option_a(string), option_b(string), option_c(string), option_d(string), correct_answer(enum: a/b/c/d), image_url(string, nullable), order(integer), created_at, updated_at

3. Attempts 테이블 마이그레이션 생성:
   - `php artisan make:migration create_attempts_table`
   - 컬럼: id, user_id(외래키), quiz_id(외래키), score(integer), total_questions(integer), completed_at(timestamp), created_at, updated_at

4. Answers 테이블 마이그레이션 생성:
   - `php artisan make:migration create_answers_table`
   - 컬럼: id, attempt_id(외래키), question_id(외래키), selected_answer(enum: a/b/c/d), is_correct(boolean), created_at, updated_at

5. 마이그레이션 실행:
   - `php artisan migrate`

6. 모델 생성:
   - `php artisan make:model Quiz`
   - `php artisan make:model Question`
   - `php artisan make:model Attempt`
   - `php artisan make:model Answer`

7. 모델에 관계 정의:
   - Quiz: hasMany(Questions), hasMany(Attempts), belongsTo(User)
   - Question: belongsTo(Quiz)
   - Attempt: belongsTo(User), belongsTo(Quiz), hasMany(Answers)
   - Answer: belongsTo(Attempt), belongsTo(Question)

완료 후 `php artisan tinker`로 모델 관계가 제대로 작동하는지 테스트하세요.

퀴즈 생성 기능을 구현하세요.

1. QuizController 생성:
   - `php artisan make:controller QuizController`

2. 라우트 정의 (`routes/web.php`):
   - `Route::middleware('auth')->group(function() { ... });` 안에 추가
   - GET `/quizzes/create` → QuizController@create (퀴즈 생성 폼)
   - POST `/quizzes` → QuizController@store (퀴즈 저장)
   - GET `/quizzes/{quiz}/questions/create` → QuizController@createQuestion (문제 추가 폼)
   - POST `/quizzes/{quiz}/questions` → QuizController@storeQuestion (문제 저장)

3. QuizController 메서드 구현:
   - `create()`: `Inertia::render('Quiz/Create')` 반환
   - `store(Request $request)`: 폼 데이터 검증 후 Quiz 모델 생성, `/quizzes/{quiz}/questions/create`로 리다이렉트
   - `createQuestion(Quiz $quiz)`: 퀴즈 정보와 함께 `Inertia::render('Quiz/AddQuestion', ['quiz' => $quiz])` 반환
   - `storeQuestion(Request $request, Quiz $quiz)`: 문제 데이터 검증 후 Question 모델 생성, 같은 페이지로 리다이렉트 (계속 문제 추가 가능)

4. React 컴포넌트 생성:
   - `resources/js/Pages/Quiz/Create.jsx`: 퀴즈 메타데이터 입력 폼 (제목, 설명, 카테고리 선택, 난이도 라디오 버튼)
   - `resources/js/Pages/Quiz/AddQuestion.jsx`: 문제 입력 폼 (질문, 4개 선택지, 정답 라디오 버튼, 이미지 URL 옵션)
   - Inertia form helper 사용: `import { useForm } from '@inertiajs/react';`
   - `form.post('/quizzes')` 또는 `form.post('/quizzes/{quiz.id}/questions')` 형태로 제출

5. Tailwind CSS로 폼 스타일링:
   - 입력 필드, 버튼, 라디오 버튼 디자인
   - 에러 메시지 표시 (Inertia errors prop 활용)

완료 후 로그인한 상태에서 `/quizzes/create`로 이동하여 퀴즈를 생성하고 문제를 추가할 수 있는지 테스트하세요.

퀴즈 목록 페이지와 상세 페이지를 구현하세요.

1. QuizController에 메서드 추가:
   - `index(Request $request)`: 퀴즈 목록 조회 (카테고리/난이도 필터링, 검색 기능)
     - 쿼리 파라미터로 `category`, `difficulty`, `search` 받기
     - `Quiz::with('user')->when(...)->paginate(12)` 형태로 필터링 구현
     - `Inertia::render('Quiz/Index', ['quizzes' => $quizzes, 'filters' => $request->only(['category', 'difficulty', 'search'])])` 반환
   - `show(Quiz $quiz)`: 퀴즈 상세 정보 (문제 개수, 작성자, 설명 등)
     - `$quiz->load('questions', 'user');`
     - `Inertia::render('Quiz/Show', ['quiz' => $quiz])` 반환

2. 라우트 추가:
   - GET `/quizzes` → QuizController@index
   - GET `/quizzes/{quiz}` → QuizController@show

3. React 컴포넌트 생성:
   - `resources/js/Pages/Quiz/Index.jsx`: 퀴즈 카드 그리드 레이아웃
     - 필터링 UI (카테고리 드롭다운, 난이도 체크박스, 검색 입력)
     - Inertia Link로 퀴즈 상세 페이지 이동: `<Link href={`/quizzes/${quiz.id}`}>`
     - 페이지네이션 컴포넌트 (Inertia에서 제공하는 links prop 활용)
   - `resources/js/Pages/Quiz/Show.jsx`: 퀴즈 상세 정보 표시
     - 제목, 설명, 카테고리, 난이도, 문제 개수, 작성자 표시
     - "퀴즈 시작하기" 버튼 → `/quizzes/{quiz.id}/play`로 이동

4. Tailwind CSS로 스타일링:
   - 퀴즈 카드: 그림자, 호버 효과, 배지(카테고리/난이도)
   - 필터링 UI: 드롭다운, 체크박스 스타일
   - 상세 페이지: 큰 제목, 설명 텍스트, CTA 버튼

완료 후 `/quizzes`에서 퀴즈 목록이 표시되고, 필터링/검색이 작동하며, 상세 페이지로 이동할 수 있는지 테스트하세요.

퀴즈 풀이 기능을 구현하세요.

1. QuizController에 메서드 추가:
   - `play(Quiz $quiz)`: 퀴즈 풀이 시작
     - `$quiz->load('questions');`
     - 새로운 Attempt 레코드 생성 (user_id, quiz_id, score=0, total_questions)
     - `Inertia::render('Quiz/Play', ['quiz' => $quiz, 'attempt' => $attempt])` 반환
   - `submitAnswer(Request $request, Quiz $quiz, Attempt $attempt)`: 답변 제출
     - 요청 데이터: `question_id`, `selected_answer`
     - Answer 레코드 생성 (attempt_id, question_id, selected_answer, is_correct)
     - 정답 여부 확인 후 Attempt의 score 업데이트
     - JSON 응답: `{ correct: true/false, correct_answer: 'a' }`
   - `result(Quiz $quiz, Attempt $attempt)`: 결과 페이지
     - `$attempt->load('answers.question');`
     - Attempt의 completed_at 타임스탬프 업데이트
     - `Inertia::render('Quiz/Result', ['quiz' => $quiz, 'attempt' => $attempt])` 반환

2. 라우트 추가:
   - GET `/quizzes/{quiz}/play` → QuizController@play (middleware: auth)
   - POST `/quizzes/{quiz}/attempts/{attempt}/answer` → QuizController@submitAnswer
   - GET `/quizzes/{quiz}/attempts/{attempt}/result` → QuizController@result

3. React 컴포넌트 생성:
   - `resources/js/Pages/Quiz/Play.jsx`: 퀴즈 풀이 인터페이스
     - useState로 현재 문제 인덱스 관리
     - 문제 표시: 질문, 4개 선택지 버튼
     - 선택지 클릭 시 `/quizzes/{quiz.id}/attempts/{attempt.id}/answer`로 POST 요청 (axios 사용)
     - 응답 받으면 정답/오답 피드백 표시 (버튼 색상 변경: 정답=초록, 오답=빨강)
     - 2초 후 다음 문제로 이동 (인덱스 증가)
     - 마지막 문제 완료 시 `/quizzes/{quiz.id}/attempts/{attempt.id}/result`로 리다이렉트
     - 진행률 프로그레스 바: `(currentIndex + 1) / totalQuestions * 100`
   - `resources/js/Pages/Quiz/Result.jsx`: 결과 페이지
     - 총점, 정답률 표시
     - 오답 문제 리스트 (질문, 내가 선택한 답, 정답)
     - "다시 풀기" 버튼, "퀴즈 목록으로" 버튼

4. Tailwind CSS로 스타일링:
   - 선택지 버튼: 큰 크기, 호버 효과, 정답/오답 색상 애니메이션
   - 프로그레스 바: 상단 고정, 색상 그라데이션
   - 결과 페이지: 점수 카운트업 애니메이션 (CSS transition)

완료 후 퀴즈를 풀고 결과 페이지에서 점수와 오답 리뷰를 확인할 수 있는지 테스트하세요.

순위표와 마이페이지 기능을 구현하세요.

1. QuizController에 메서드 추가:
   - `leaderboard(Quiz $quiz)`: 퀴즈별 순위표
     - `Attempt::where('quiz_id', $quiz->id)->with('user')->orderBy('score', 'desc')->orderBy('completed_at', 'asc')->take(10)->get();`
     - `Inertia::render('Quiz/Leaderboard', ['quiz' => $quiz, 'topAttempts' => $topAttempts])` 반환

2. UserController 생성 및 메서드 추가:
   - `php artisan make:controller UserController`
   - `myQuizzes()`: 내가 만든 퀴즈 목록
     - `Quiz::where('user_id', auth()->id())->with('questions')->get();`
     - `Inertia::render('User/MyQuizzes', ['quizzes' => $quizzes])` 반환
   - `myAttempts()`: 내가 참여한 퀴즈 히스토리
     - `Attempt::where('user_id', auth()->id())->with('quiz')->orderBy('completed_at', 'desc')->get();`
     - `Inertia::render('User/MyAttempts', ['attempts' => $attempts])` 반환

3. 라우트 추가:
   - GET `/quizzes/{quiz}/leaderboard` → QuizController@leaderboard
   - GET `/my-quizzes` → UserController@myQuizzes (middleware: auth)
   - GET `/my-attempts` → UserController@myAttempts (middleware: auth)

4. React 컴포넌트 생성:
   - `resources/js/Pages/Quiz/Leaderboard.jsx`: 순위표 테이블
     - 순위, 사용자 이름, 점수, 완료 시간 표시
     - 상위 3명에게 메달 아이콘 표시 (🥇🥈🥉)
     - 내 순위 하이라이트 (배경 색상 변경)
   - `resources/js/Pages/User/MyQuizzes.jsx`: 내가 만든 퀴즈 카드 그리드
     - 퀴즈 제목, 문제 개수, 생성 날짜
     - "수정" 버튼, "삭제" 버튼
   - `resources/js/Pages/User/MyAttempts.jsx`: 참여 히스토리 리스트
     - 퀴즈 제목, 점수, 정답률, 참여 날짜
     - "다시 풀기" 버튼, "결과 보기" 버튼

5. 네비게이션 메뉴 추가:
   - `resources/js/Layouts/AuthenticatedLayout.jsx` 또는 헤더 컴포넌트에 메뉴 추가
   - "퀴즈 만들기", "내 퀴즈", "참여 히스토리" 링크

6. Tailwind CSS로 스타일링:
   - 순위표: 테이블 스타일, 메달 아이콘, 내 순위 하이라이트
   - 마이페이지: 카드 레이아웃, 버튼 스타일

완료 후 순위표에서 상위 10명이 표시되고, 마이페이지에서 내가 만든 퀴즈와 참여 히스토리를 확인할 수 있는지 테스트하세요.