🎯 온라인 퀴즈 제작 & 공유 플랫폼 - 친구들과 함께하는 퀴즈 타임

mkdir quiz-creator-sharing-platform && cd quiz-creator-sharing-platform

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

다음 명령어로 Laravel 13 프로젝트를 생성하세요:
```bash
composer create-project laravel/laravel . "^13.0"
```

프로젝트 생성 후:
1. `.env` 파일에서 DB_CONNECTION을 sqlite로 변경
2. `database/database.sqlite` 파일 생성 (빈 파일)
3. Tailwind CSS 설치 및 설정:
   - `npm install -D tailwindcss postcss autoprefixer`
   - `npx tailwindcss init -p`
   - `tailwind.config.js`에서 content 경로 설정: `['./resources/**/*.blade.php', './resources/**/*.js']`
   - `resources/css/app.css`에 Tailwind 디렉티브 추가:
     ```css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     ```
   - `resources/views/layouts/app.blade.php` 레이아웃 파일 생성 (Vite로 CSS/JS 로드)
4. `npm install && npm run dev` 실행하여 Vite 개발 서버 시작
5. `php artisan serve` 실행하여 Laravel 서버 시작

레이아웃 파일에는 다음 요소 포함:
- 상단 네비게이션 바 (로고, "퀴즈 만들기", "퀴즈 목록" 링크)
- @yield('content') 섹션
- Tailwind CSS 기본 스타일 (배경색, 폰트 등)

완료 후 브라우저에서 http://localhost:8000 접속하여 레이아웃이 정상적으로 보이는지 확인하세요.

퀴즈 데이터베이스 구조를 설계하고 마이그레이션 파일을 생성합니다.

다음 4개 테이블을 만드세요:

1. **quizzes 테이블** (퀴즈 정보):
   - id (primary key)
   - title (string, 퀴즈 제목)
   - description (text, 퀴즈 설명)
   - difficulty (enum: 'easy', 'medium', 'hard', 기본값 'medium')
   - category (string, nullable, 카테고리)
   - total_attempts (integer, 기본값 0, 풀이 시도 횟수)
   - timestamps

2. **questions 테이블** (문제):
   - id (primary key)
   - quiz_id (foreign key -> quizzes.id, onDelete cascade)
   - question_text (text, 문제 내용)
   - order (integer, 문제 순서)
   - timestamps

3. **options 테이블** (보기):
   - id (primary key)
   - question_id (foreign key -> questions.id, onDelete cascade)
   - option_text (string, 보기 내용)
   - is_correct (boolean, 정답 여부)
   - timestamps

4. **results 테이블** (퀴즈 풀이 결과):
   - id (primary key)
   - quiz_id (foreign key -> quizzes.id)
   - score (integer, 맞춘 문제 수)
   - total_questions (integer, 전체 문제 수)
   - timestamps

다음 명령어로 마이그레이션 파일들을 생성하세요:
```bash
php artisan make:migration create_quizzes_table
php artisan make:migration create_questions_table
php artisan make:migration create_options_table
php artisan make:migration create_results_table
```

각 마이그레이션 파일에 위 스키마를 구현한 후 실행하세요:
```bash
php artisan migrate
```

마이그레이션 완료 후 `database/database.sqlite` 파일에 테이블들이 생성되었는지 확인하세요.

퀴즈 제작 폼 페이지를 만듭니다.

1. **라우트 추가** (`routes/web.php`):
   - `GET /quizzes/create` → 퀴즈 제작 폼 표시
   - `POST /quizzes` → 퀴즈 저장

2. **컨트롤러 생성**:
   ```bash
   php artisan make:controller QuizController
   ```
   - `create()` 메서드: 퀴즈 제작 폼 뷰 반환
   - `store(Request $request)` 메서드:
     - 폼 데이터 유효성 검사 (제목 필수, 문제 3~10개, 각 문제당 4개 보기, 정답 1개 선택)
     - Quiz 모델 생성 후 저장
     - 각 문제(Question)와 보기(Option) 반복문으로 저장
     - 성공 시 퀴즈 목록 페이지로 리다이렉트 (성공 메시지 포함)

3. **뷰 파일 생성** (`resources/views/quizzes/create.blade.php`):
   - 레이아웃 상속 (`@extends('layouts.app')`)
   - 폼 필드:
     - 퀴즈 제목 (input text)
     - 퀴즈 설명 (textarea)
     - 난이도 선택 (select: 쉬움/보통/어려움)
     - 카테고리 (input text, optional)
     - 문제 추가 버튼 (JavaScript로 동적으로 문제 입력란 추가, 최대 10개)
     - 각 문제마다:
       - 문제 내용 (textarea)
       - 4개 보기 (input text)
       - 정답 선택 (radio button)
   - 제출 버튼
   - Tailwind CSS로 스타일링 (카드형 레이아웃, 그라데이션 배경)

4. **JavaScript 추가** (Blade 파일 내 `<script>` 태그):
   - "문제 추가" 버튼 클릭 시 문제 입력란 동적 생성
   - 최소 3개, 최대 10개 문제 제한
   - 문제 삭제 버튼도 추가

5. **모델 생성**:
   ```bash
   php artisan make:model Quiz
   php artisan make:model Question
   php artisan make:model Option
   ```
   - Quiz 모델: `hasMany` 관계로 questions 연결
   - Question 모델: `belongsTo` quiz, `hasMany` options
   - Option 모델: `belongsTo` question

완료 후 브라우저에서 `/quizzes/create` 접속하여 폼이 정상적으로 보이는지 확인하세요.

퀴즈 목록 페이지를 만듭니다.

1. **라우트 추가** (`routes/web.php`):
   - `GET /` → 퀴즈 목록 페이지 (홈)
   - `GET /quizzes` → 퀴즈 목록 페이지

2. **컨트롤러 메서드 추가** (`QuizController`):
   - `index()` 메서드:
     - 모든 퀴즈를 최신순으로 가져오기 (with 'questions' eager loading)
     - 각 퀴즈의 문제 수 계산
     - 뷰로 데이터 전달

3. **뷰 파일 생성** (`resources/views/quizzes/index.blade.php`):
   - 레이아웃 상속
   - 페이지 제목: "📚 퀴즈 목록 - 도전해보세요!"
   - 퀴즈 카드 그리드 레이아웃 (grid-cols-1 md:grid-cols-2 lg:grid-cols-3)
   - 각 퀴즈 카드에 표시:
     - 퀴즈 제목 (큰 글씨, 볼드)
     - 퀴즈 설명 (2줄 말줄임)
     - 난이도 배지 (쉬움=초록, 보통=노랑, 어려움=빨강)
     - 문제 수 ("📝 10문제")
     - 카테고리 (있으면 표시)
     - 풀이 시도 횟수 ("👥 23명 도전")
     - "퀴즈 풀기" 버튼 (링크: `/quizzes/{id}/play`)
   - Tailwind CSS로 카드 디자인 (그림자, 호버 효과, 그라데이션 배경)
   - 퀴즈가 없으면 "아직 퀴즈가 없어요. 첫 퀴즈를 만들어보세요!" 메시지 + 퀴즈 만들기 버튼

4. **네비게이션 바 업데이트** (`layouts/app.blade.php`):
   - "퀴즈 목록" 링크를 홈(`/`)으로 연결

완료 후 브라우저에서 `/` 접속하여 퀴즈 목록이 카드 형태로 보이는지 확인하세요. 아직 퀴즈가 없다면 `/quizzes/create`에서 테스트용 퀴즈를 만들어보세요.

퀴즈 풀기 페이지를 만듭니다.

1. **라우트 추가** (`routes/web.php`):
   - `GET /quizzes/{id}/play` → 퀴즈 풀기 페이지
   - `POST /quizzes/{id}/submit` → 퀴즈 제출 및 채점

2. **컨트롤러 메서드 추가** (`QuizController`):
   - `play($id)` 메서드:
     - 퀴즈 ID로 퀴즈 찾기 (with 'questions.options' eager loading)
     - 문제를 순서대로 정렬
     - 뷰로 데이터 전달
   - `submit(Request $request, $id)` 메서드:
     - 사용자가 선택한 답안 배열 받기 (question_id => option_id)
     - 각 문제의 정답과 비교하여 점수 계산
     - Result 모델에 결과 저장
     - Quiz의 total_attempts 증가
     - 결과 페이지로 리다이렉트 (점수, 전체 문제 수 전달)

3. **뷰 파일 생성** (`resources/views/quizzes/play.blade.php`):
   - 레이아웃 상속
   - 퀴즈 제목 및 설명 표시
   - 폼 시작 (POST /quizzes/{id}/submit)
   - 각 문제를 카드로 표시:
     - 문제 번호 및 내용
     - 4개 보기를 라디오 버튼으로 표시
     - 각 보기에 호버 효과 (배경색 변경)
   - "제출하기" 버튼 (모든 문제에 답했는지 JavaScript로 확인)
   - Tailwind CSS로 스타일링 (문제 카드, 보기 버튼 디자인)

4. **JavaScript 추가**:
   - 제출 버튼 클릭 시 모든 문제에 답했는지 확인
   - 답하지 않은 문제가 있으면 경고 메시지 표시

완료 후 퀴즈 목록에서 "퀴즈 풀기" 버튼을 클릭하여 문제가 정상적으로 표시되는지 확인하세요.

퀴즈 결과 페이지를 만들고 마무리합니다.

1. **라우트 추가** (`routes/web.php`):
   - `GET /quizzes/{id}/result` → 퀴즈 결과 페이지 (세션에서 점수 읽기)

2. **컨트롤러 메서드 수정** (`QuizController`):
   - `submit()` 메서드에서 결과를 세션에 저장하고 `/quizzes/{id}/result`로 리다이렉트
   - `result($id)` 메서드 추가:
     - 세션에서 점수, 전체 문제 수 가져오기
     - 정답률 계산 (score / total * 100)
     - 퀴즈 정보 가져오기
     - 뷰로 데이터 전달

3. **뷰 파일 생성** (`resources/views/quizzes/result.blade.php`):
   - 레이아웃 상속
   - 큰 점수 표시 ("10 / 10" 형태, 큰 폰트 사이즈)
   - 정답률 표시 ("정답률: 100%")
   - 성취 메시지:
     - 100%: "🎉 완벽해요! 천재시네요!"
     - 80~99%: "👏 훌륭해요! 거의 다 맞췄어요!"
     - 60~79%: "😊 잘했어요! 조금만 더 공부하면 완벽!"
     - 60% 미만: "💪 아쉬워요! 다시 도전해보세요!"
   - 버튼들:
     - "다시 풀기" (같은 퀴즈 다시 풀기)
     - "다른 퀴즈 풀기" (퀴즈 목록으로)
     - "내 퀴즈 만들기" (퀴즈 제작 페이지로)
   - Tailwind CSS로 화려한 결과 페이지 디자인 (그라데이션, 애니메이션)

4. **추가 개선사항**:
   - 퀴즈 목록 페이지에 검색 기능 추가 (제목으로 검색)
   - 난이도별 필터 버튼 추가
   - 퀴즈 카드에 좋아요 버튼 추가 (선택사항)

5. **최종 테스트**:
   - 퀴즈 만들기 → 목록에서 확인 → 퀴즈 풀기 → 결과 확인 전체 플로우 테스트
   - 반응형 디자인 확인 (모바일/태블릿/데스크톱)
   - 에러 처리 확인 (잘못된 퀴즈 ID 접근 시)

완료 후 전체 기능을 테스트하고, README.md 파일을 작성하여 프로젝트 설명, 설치 방법, 실행 방법을 정리하세요.