🎓 온라인 강좌 수강생 수료증 자동 발급 시스템

mkdir course-completion-certificate-automation && cd course-completion-certificate-automation

이 폴더에서 Laravel + Inertia.js + React 프로젝트를 시작합니다.

다음 명령어로 Laravel Breeze (React + Inertia) starter kit을 설치하세요:

```bash
composer create-project laravel/laravel .
composer require laravel/breeze --dev
php artisan breeze:install react
php artisan migrate
npm install
npm run dev
```

설치 후 다음 작업을 수행하세요:

1. `.env` 파일에서 데이터베이스를 SQLite로 설정:
   ```
   DB_CONNECTION=sqlite
   # DB_HOST, DB_PORT, DB_DATABASE 주석 처리
   ```

2. `database/database.sqlite` 파일 생성:
   ```bash
   touch database/database.sqlite
   ```

3. 마이그레이션 파일 4개 생성:
   - `create_courses_table`: id, title, description, instructor, thumbnail, duration(분), timestamps
   - `create_lessons_table`: id, course_id, title, video_url, order, timestamps
   - `create_enrollments_table`: id, user_id, course_id, timestamps
   - `create_lesson_completions_table`: id, enrollment_id, lesson_id, completed_at, timestamps
   - `create_certificates_table`: id, enrollment_id, issued_at, certificate_code(유니크), timestamps

4. 각 테이블의 외래 키 제약 조건 추가:
   - lessons.course_id → courses.id (onDelete cascade)
   - enrollments.user_id → users.id (onDelete cascade)
   - enrollments.course_id → courses.id (onDelete cascade)
   - lesson_completions.enrollment_id → enrollments.id (onDelete cascade)
   - lesson_completions.lesson_id → lessons.id (onDelete cascade)
   - certificates.enrollment_id → enrollments.id (onDelete cascade)

5. `php artisan migrate` 실행하여 테이블 생성 확인

완료되면 "Laravel Breeze + Inertia + React 설치 완료, 데이터베이스 마이그레이션 성공"이라고 알려주세요.

이제 Eloquent 모델과 관계를 설정합니다.

1. 다음 모델 파일 생성:
   ```bash
   php artisan make:model Course
   php artisan make:model Lesson
   php artisan make:model Enrollment
   php artisan make:model LessonCompletion
   php artisan make:model Certificate
   ```

2. `app/Models/Course.php`에 관계 정의:
   ```php
   public function lessons()
   {
       return $this->hasMany(Lesson::class)->orderBy('order');
   }

   public function enrollments()
   {
       return $this->hasMany(Enrollment::class);
   }
   ```

3. `app/Models/Lesson.php`에 관계 정의:
   ```php
   public function course()
   {
       return $this->belongsTo(Course::class);
   }
   ```

4. `app/Models/Enrollment.php`에 관계 정의:
   ```php
   public function user()
   {
       return $this->belongsTo(User::class);
   }

   public function course()
   {
       return $this->belongsTo(Course::class);
   }

   public function lessonCompletions()
   {
       return $this->hasMany(LessonCompletion::class);
   }

   public function certificate()
   {
       return $this->hasOne(Certificate::class);
   }

   // 진행률 계산 메서드
   public function getProgressPercentageAttribute()
   {
       $totalLessons = $this->course->lessons()->count();
       if ($totalLessons === 0) return 0;
       $completedLessons = $this->lessonCompletions()->count();
       return round(($completedLessons / $totalLessons) * 100);
   }

   public function isCompleted()
   {
       return $this->progress_percentage === 100;
   }
   ```

5. `app/Models/LessonCompletion.php`에 관계 정의:
   ```php
   protected $fillable = ['enrollment_id', 'lesson_id', 'completed_at'];

   public function enrollment()
   {
       return $this->belongsTo(Enrollment::class);
   }

   public function lesson()
   {
       return $this->belongsTo(Lesson::class);
   }
   ```

6. `app/Models/Certificate.php`에 관계 정의:
   ```php
   protected $fillable = ['enrollment_id', 'issued_at', 'certificate_code'];

   public function enrollment()
   {
       return $this->belongsTo(Enrollment::class);
   }
   ```

7. Seeder 생성하여 샘플 데이터 추가:
   ```bash
   php artisan make:seeder CourseSeeder
   ```

   `database/seeders/CourseSeeder.php`에 다음 내용 작성:
   ```php
   use App\Models\Course;
   use App\Models\Lesson;

   public function run()
   {
       $course1 = Course::create([
           'title' => 'Laravel 마스터 클래스',
           'description' => 'Laravel 13.x로 풀스택 웹 개발 완전 정복',
           'instructor' => '김개발',
           'thumbnail' => 'https://via.placeholder.com/400x250?text=Laravel+Course',
           'duration' => 180,
       ]);

       Lesson::create(['course_id' => $course1->id, 'title' => '1강: Laravel 소개', 'video_url' => 'https://example.com/video1', 'order' => 1]);
       Lesson::create(['course_id' => $course1->id, 'title' => '2강: 라우팅 기초', 'video_url' => 'https://example.com/video2', 'order' => 2]);
       Lesson::create(['course_id' => $course1->id, 'title' => '3강: Eloquent ORM', 'video_url' => 'https://example.com/video3', 'order' => 3]);
       Lesson::create(['course_id' => $course1->id, 'title' => '4강: Inertia.js 통합', 'video_url' => 'https://example.com/video4', 'order' => 4]);

       $course2 = Course::create([
           'title' => 'React 19 완벽 가이드',
           'description' => '최신 React 기능과 Hooks 마스터하기',
           'instructor' => '박리액트',
           'thumbnail' => 'https://via.placeholder.com/400x250?text=React+Course',
           'duration' => 150,
       ]);

       Lesson::create(['course_id' => $course2->id, 'title' => '1강: React 기초', 'video_url' => 'https://example.com/video5', 'order' => 1]);
       Lesson::create(['course_id' => $course2->id, 'title' => '2강: useState Hook', 'video_url' => 'https://example.com/video6', 'order' => 2]);
       Lesson::create(['course_id' => $course2->id, 'title' => '3강: useEffect Hook', 'video_url' => 'https://example.com/video7', 'order' => 3]);
   }
   ```

8. DatabaseSeeder에서 CourseSeeder 호출:
   ```php
   public function run()
   {
       $this->call(CourseSeeder::class);
   }
   ```

9. 시더 실행:
   ```bash
   php artisan db:seed
   ```

완료되면 "모델 관계 설정 완료, 샘플 데이터 추가됨"이라고 알려주세요.

이제 강좌 목록 페이지와 상세 페이지를 만듭니다.

1. CourseController 생성:
   ```bash
   php artisan make:controller CourseController
   ```

2. `app/Http/Controllers/CourseController.php`에 다음 메서드 작성:
   ```php
   use App\Models\Course;
   use App\Models\Enrollment;
   use Inertia\Inertia;

   public function index()
   {
       $courses = Course::withCount('lessons')->get();
       $enrolledCourseIds = auth()->user()->enrollments()->pluck('course_id')->toArray();

       return Inertia::render('Courses/Index', [
           'courses' => $courses,
           'enrolledCourseIds' => $enrolledCourseIds,
       ]);
   }

   public function show(Course $course)
   {
       $course->load('lessons');
       $enrollment = auth()->user()->enrollments()->where('course_id', $course->id)->first();

       $completedLessonIds = [];
       $progress = 0;

       if ($enrollment) {
           $completedLessonIds = $enrollment->lessonCompletions()->pluck('lesson_id')->toArray();
           $progress = $enrollment->progress_percentage;
       }

       return Inertia::render('Courses/Show', [
           'course' => $course,
           'enrollment' => $enrollment,
           'completedLessonIds' => $completedLessonIds,
           'progress' => $progress,
       ]);
   }

   public function enroll(Course $course)
   {
       $enrollment = auth()->user()->enrollments()->firstOrCreate([
           'course_id' => $course->id,
       ]);

       return redirect()->route('courses.show', $course);
   }
   ```

3. `routes/web.php`에 라우트 추가:
   ```php
   use App\Http\Controllers\CourseController;

   Route::middleware('auth')->group(function () {
       Route::get('/courses', [CourseController::class, 'index'])->name('courses.index');
       Route::get('/courses/{course}', [CourseController::class, 'show'])->name('courses.show');
       Route::post('/courses/{course}/enroll', [CourseController::class, 'enroll'])->name('courses.enroll');
   });
   ```

4. React 컴포넌트 생성: `resources/js/Pages/Courses/Index.jsx`
   ```jsx
   import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
   import { Head, Link } from '@inertiajs/react';

   export default function Index({ auth, courses, enrolledCourseIds }) {
       return (
           <AuthenticatedLayout user={auth.user}>
               <Head title="강좌 목록" />

               <div className="py-12">
                   <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                       <h1 className="text-3xl font-bold text-gray-900 mb-8">수강 가능한 강좌</h1>

                       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                           {courses.map((course) => (
                               <Link
                                   key={course.id}
                                   href={route('courses.show', course.id)}
                                   className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 transform hover:scale-105"
                               >
                                   <img
                                       src={course.thumbnail}
                                       alt={course.title}
                                       className="w-full h-48 object-cover"
                                   />
                                   <div className="p-6">
                                       <h2 className="text-xl font-semibold text-gray-900 mb-2">
                                           {course.title}
                                       </h2>
                                       <p className="text-gray-600 text-sm mb-4">
                                           강사: {course.instructor}
                                       </p>
                                       <div className="flex justify-between items-center">
                                           <span className="text-gray-500 text-sm">
                                               {course.lessons_count}개 강의
                                           </span>
                                           <span className="text-gray-500 text-sm">
                                               {course.duration}분
                                           </span>
                                       </div>
                                       {enrolledCourseIds.includes(course.id) && (
                                           <div className="mt-4">
                                               <span className="inline-block bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">
                                                   수강 중
                                               </span>
                                           </div>
                                       )}
                                   </div>
                               </Link>
                           ))}
                       </div>
                   </div>
               </div>
           </AuthenticatedLayout>
       );
   }
   ```

5. React 컴포넌트 생성: `resources/js/Pages/Courses/Show.jsx`
   ```jsx
   import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
   import { Head, router } from '@inertiajs/react';

   export default function Show({ auth, course, enrollment, completedLessonIds, progress }) {
       const handleEnroll = () => {
           router.post(route('courses.enroll', course.id));
       };

       return (
           <AuthenticatedLayout user={auth.user}>
               <Head title={course.title} />

               <div className="py-12">
                   <div className="max-w-4xl mx-auto sm:px-6 lg:px-8">
                       <div className="bg-white rounded-lg shadow-md overflow-hidden">
                           <img
                               src={course.thumbnail}
                               alt={course.title}
                               className="w-full h-64 object-cover"
                           />
                           <div className="p-8">
                               <h1 className="text-3xl font-bold text-gray-900 mb-4">
                                   {course.title}
                               </h1>
                               <p className="text-gray-700 mb-6">{course.description}</p>
                               <div className="flex items-center justify-between mb-8">
                                   <div>
                                       <p className="text-gray-600">강사: {course.instructor}</p>
                                       <p className="text-gray-600">
                                           총 {course.lessons.length}개 강의 • {course.duration}분
                                       </p>
                                   </div>
                                   {!enrollment && (
                                       <button
                                           onClick={handleEnroll}
                                           className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
                                       >
                                           수강 시작하기
                                       </button>
                                   )}
                               </div>

                               {enrollment && (
                                   <div className="mb-8">
                                       <div className="flex justify-between items-center mb-2">
                                           <span className="text-gray-700 font-medium">학습 진행률</span>
                                           <span className="text-blue-600 font-bold">{progress}%</span>
                                       </div>
                                       <div className="w-full bg-gray-200 rounded-full h-4">
                                           <div
                                               className="bg-blue-600 h-4 rounded-full transition-all duration-500"
                                               style={{ width: `${progress}%` }}
                                           ></div>
                                       </div>
                                   </div>
                               )}

                               <h2 className="text-2xl font-semibold text-gray-900 mb-4">커리큘럼</h2>
                               <div className="space-y-3">
                                   {course.lessons.map((lesson, index) => (
                                       <div
                                           key={lesson.id}
                                           className={`p-4 rounded-lg border ${
                                               completedLessonIds.includes(lesson.id)
                                                   ? 'bg-green-50 border-green-300'
                                                   : 'bg-gray-50 border-gray-200'
                                           }`}
                                       >
                                           <div className="flex items-center justify-between">
                                               <div className="flex items-center space-x-3">
                                                   {completedLessonIds.includes(lesson.id) ? (
                                                       <svg className="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                                           <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                                                       </svg>
                                                   ) : (
                                                       <div className="w-6 h-6 rounded-full border-2 border-gray-400"></div>
                                                   )}
                                                   <span className="font-medium text-gray-900">{lesson.title}</span>
                                               </div>
                                           </div>
                                       </div>
                                   ))}
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </AuthenticatedLayout>
       );
   }
   ```

6. 네비게이션에 "강좌 목록" 링크 추가: `resources/js/Layouts/AuthenticatedLayout.jsx`의 NavLink 섹션에 추가:
   ```jsx
   <NavLink href={route('courses.index')} active={route().current('courses.index')}>
       강좌 목록
   </NavLink>
   ```

완료되면 "강좌 목록 및 상세 페이지 완성"이라고 알려주세요.

이제 강의 영상 시청 완료 체크 기능을 구현합니다.

1. LessonController 생성:
   ```bash
   php artisan make:controller LessonController
   ```

2. `app/Http/Controllers/LessonController.php`에 메서드 작성:
   ```php
   use App\Models\Lesson;
   use App\Models\Enrollment;
   use App\Models\LessonCompletion;
   use Illuminate\Http\Request;

   public function toggleCompletion(Request $request, Lesson $lesson)
   {
       $enrollment = auth()->user()->enrollments()
           ->where('course_id', $lesson->course_id)
           ->firstOrFail();

       $completion = LessonCompletion::where('enrollment_id', $enrollment->id)
           ->where('lesson_id', $lesson->id)
           ->first();

       if ($completion) {
           // 이미 완료된 경우 삭제 (체크 해제)
           $completion->delete();
           $message = '완료 표시가 해제되었습니다.';
       } else {
           // 완료 표시
           LessonCompletion::create([
               'enrollment_id' => $enrollment->id,
               'lesson_id' => $lesson->id,
               'completed_at' => now(),
           ]);
           $message = '강의 시청을 완료했습니다!';
       }

       // 진행률 재계산
       $progress = $enrollment->fresh()->progress_percentage;

       return back()->with([
           'message' => $message,
           'progress' => $progress,
       ]);
   }
   ```

3. `routes/web.php`에 라우트 추가:
   ```php
   use App\Http\Controllers\LessonController;

   Route::middleware('auth')->group(function () {
       Route::post('/lessons/{lesson}/toggle-completion', [LessonController::class, 'toggleCompletion'])->name('lessons.toggle-completion');
   });
   ```

4. `resources/js/Pages/Courses/Show.jsx` 수정 (강의 항목에 체크박스 추가):
   ```jsx
   import { Head, router, usePage } from '@inertiajs/react';
   import { useEffect } from 'react';

   export default function Show({ auth, course, enrollment, completedLessonIds, progress }) {
       const { flash } = usePage().props;

       useEffect(() => {
           if (flash.message) {
               alert(flash.message);
           }
       }, [flash]);

       const handleEnroll = () => {
           router.post(route('courses.enroll', course.id));
       };

       const handleToggleCompletion = (lessonId) => {
           router.post(route('lessons.toggle-completion', lessonId));
       };

       return (
           <AuthenticatedLayout user={auth.user}>
               <Head title={course.title} />

               <div className="py-12">
                   <div className="max-w-4xl mx-auto sm:px-6 lg:px-8">
                       <div className="bg-white rounded-lg shadow-md overflow-hidden">
                           <img
                               src={course.thumbnail}
                               alt={course.title}
                               className="w-full h-64 object-cover"
                           />
                           <div className="p-8">
                               <h1 className="text-3xl font-bold text-gray-900 mb-4">
                                   {course.title}
                               </h1>
                               <p className="text-gray-700 mb-6">{course.description}</p>
                               <div className="flex items-center justify-between mb-8">
                                   <div>
                                       <p className="text-gray-600">강사: {course.instructor}</p>
                                       <p className="text-gray-600">
                                           총 {course.lessons.length}개 강의 • {course.duration}분
                                       </p>
                                   </div>
                                   {!enrollment && (
                                       <button
                                           onClick={handleEnroll}
                                           className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
                                       >
                                           수강 시작하기
                                       </button>
                                   )}
                               </div>

                               {enrollment && (
                                   <div className="mb-8">
                                       <div className="flex justify-between items-center mb-2">
                                           <span className="text-gray-700 font-medium">학습 진행률</span>
                                           <span className="text-blue-600 font-bold">{progress}%</span>
                                       </div>
                                       <div className="w-full bg-gray-200 rounded-full h-4">
                                           <div
                                               className="bg-blue-600 h-4 rounded-full transition-all duration-500"
                                               style={{ width: `${progress}%` }}
                                           ></div>
                                       </div>
                                   </div>
                               )}

                               <h2 className="text-2xl font-semibold text-gray-900 mb-4">커리큘럼</h2>
                               <div className="space-y-3">
                                   {course.lessons.map((lesson, index) => (
                                       <div
                                           key={lesson.id}
                                           className={`p-4 rounded-lg border ${
                                               completedLessonIds.includes(lesson.id)
                                                   ? 'bg-green-50 border-green-300'
                                                   : 'bg-gray-50 border-gray-200'
                                           }`}
                                       >
                                           <div className="flex items-center justify-between">
                                               <div className="flex items-center space-x-3">
                                                   <button
                                                       onClick={() => handleToggleCompletion(lesson.id)}
                                                       disabled={!enrollment}
                                                       className="focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                                                   >
                                                       {completedLessonIds.includes(lesson.id) ? (
                                                           <svg className="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                                               <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                                                           </svg>
                                                       ) : (
                                                           <div className="w-6 h-6 rounded-full border-2 border-gray-400 hover:border-blue-500 transition-colors"></div>
                                                       )}
                                                   </button>
                                                   <span className="font-medium text-gray-900">{lesson.title}</span>
                                               </div>
                                               {enrollment && (
                                                   <a
                                                       href={lesson.video_url}
                                                       target="_blank"
                                                       rel="noopener noreferrer"
                                                       className="text-blue-600 hover:text-blue-800 text-sm font-medium"
                                                   >
                                                       영상 보기 →
                                                   </a>
                                               )}
                                           </div>
                                       </div>
                                   ))}
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </AuthenticatedLayout>
       );
   }
   ```

완료되면 "강의 시청 완료 체크 기능 구현 완료"라고 알려주세요.

이제 수료증 자동 생성 및 PDF 다운로드 기능을 구현합니다.

1. DomPDF 패키지 설치:
   ```bash
   composer require barryvdh/laravel-dompdf
   ```

2. CertificateController 생성:
   ```bash
   php artisan make:controller CertificateController
   ```

3. `app/Http/Controllers/CertificateController.php`에 메서드 작성:
   ```php
   use App\Models\Enrollment;
   use App\Models\Certificate;
   use Barryvdh\DomPDF\Facade\Pdf;
   use Illuminate\Support\Str;

   public function generate(Enrollment $enrollment)
   {
       // 권한 확인
       if ($enrollment->user_id !== auth()->id()) {
           abort(403, '권한이 없습니다.');
       }

       // 100% 완료 확인
       if (!$enrollment->isCompleted()) {
           return back()->with('error', '모든 강의를 완료해야 수료증을 발급받을 수 있습니다.');
       }

       // 이미 발급된 수료증이 있는지 확인
       $certificate = $enrollment->certificate;

       if (!$certificate) {
           // 수료증 생성
           $certificate = Certificate::create([
               'enrollment_id' => $enrollment->id,
               'issued_at' => now(),
               'certificate_code' => strtoupper(Str::random(12)),
           ]);
       }

       return redirect()->route('certificates.show', $certificate);
   }

   public function show(Certificate $certificate)
   {
       // 권한 확인
       if ($certificate->enrollment->user_id !== auth()->id()) {
           abort(403, '권한이 없습니다.');
       }

       $certificate->load('enrollment.user', 'enrollment.course');

       return Inertia::render('Certificates/Show', [
           'certificate' => $certificate,
       ]);
   }

   public function download(Certificate $certificate)
   {
       // 권한 확인
       if ($certificate->enrollment->user_id !== auth()->id()) {
           abort(403, '권한이 없습니다.');
       }

       $certificate->load('enrollment.user', 'enrollment.course');

       $pdf = Pdf::loadView('certificates.pdf', [
           'certificate' => $certificate,
           'userName' => $certificate->enrollment->user->name,
           'courseName' => $certificate->enrollment->course->title,
           'issuedDate' => $certificate->issued_at->format('Y년 m월 d일'),
           'certificateCode' => $certificate->certificate_code,
       ]);

       return $pdf->download('수료증_' . $certificate->enrollment->course->title . '.pdf');
   }
   ```

4. `routes/web.php`에 라우트 추가:
   ```php
   use App\Http\Controllers\CertificateController;

   Route::middleware('auth')->group(function () {
       Route::post('/enrollments/{enrollment}/generate-certificate', [CertificateController::class, 'generate'])->name('certificates.generate');
       Route::get('/certificates/{certificate}', [CertificateController::class, 'show'])->name('certificates.show');
       Route::get('/certificates/{certificate}/download', [CertificateController::class, 'download'])->name('certificates.download');
   });
   ```

5. PDF 템플릿 생성: `resources/views/certificates/pdf.blade.php`
   ```blade
   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8">
       <title>수료증</title>
       <style>
           @page {
               margin: 0;
           }
           body {
               margin: 0;
               padding: 60px;
               font-family: 'DejaVu Sans', sans-serif;
               background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
               color: #333;
           }
           .certificate {
               background: white;
               padding: 80px 60px;
               border-radius: 20px;
               box-shadow: 0 20px 60px rgba(0,0,0,0.3);
               text-align: center;
           }
           .title {
               font-size: 48px;
               font-weight: bold;
               color: #667eea;
               margin-bottom: 40px;
               letter-spacing: 2px;
           }
           .subtitle {
               font-size: 24px;
               color: #666;
               margin-bottom: 60px;
           }
           .recipient {
               font-size: 36px;
               font-weight: bold;
               color: #333;
               margin-bottom: 20px;
               border-bottom: 3px solid #667eea;
               display: inline-block;
               padding-bottom: 10px;
           }
           .course-name {
               font-size: 28px;
               color: #764ba2;
               margin: 40px 0;
               font-weight: bold;
           }
           .completion-text {
               font-size: 18px;
               color: #666;
               margin-bottom: 60px;
               line-height: 1.8;
           }
           .footer {
               margin-top: 80px;
               padding-top: 40px;
               border-top: 2px solid #eee;
           }
           .date {
               font-size: 16px;
               color: #999;
               margin-bottom: 20px;
           }
           .code {
               font-size: 14px;
               color: #aaa;
               font-family: monospace;
           }
       </style>
   </head>
   <body>
       <div class="certificate">
           <div class="title">수료증</div>
           <div class="subtitle">Certificate of Completion</div>
           
           <div class="recipient">{{ $userName }}</div>
           
           <div class="completion-text">
               위 사람은 다음 강좌를 성실히 수강하고<br>
               모든 과정을 이수하였음을 증명합니다.
           </div>
           
           <div class="course-name">{{ $courseName }}</div>
           
           <div class="footer">
               <div class="date">발급일: {{ $issuedDate }}</div>
               <div class="code">인증번호: {{ $certificateCode }}</div>
           </div>
       </div>
   </body>
   </html>
   ```

6. `resources/js/Pages/Courses/Show.jsx` 수정 (수료증 발급 버튼 추가):
   - 진행률 100% 도달 시 축하 메시지와 수료증 발급 버튼 표시:
   ```jsx
   {enrollment && progress === 100 && (
       <div className="mb-8 bg-gradient-to-r from-green-50 to-blue-50 border-2 border-green-300 rounded-lg p-6">
           <div className="flex items-center justify-between">
               <div>
                   <h3 className="text-2xl font-bold text-green-700 mb-2">🎉 축하합니다!</h3>
                   <p className="text-gray-700">모든 강의를 완료하셨습니다. 수료증을 발급받으세요.</p>
               </div>
               <button
                   onClick={() => router.post(route('certificates.generate', enrollment.id))}
                   className="bg-gradient-to-r from-green-500 to-blue-500 text-white px-6 py-3 rounded-lg hover:from-green-600 hover:to-blue-600 transition-all transform hover:scale-105 shadow-lg"
               >
                   수료증 발급
               </button>
           </div>
       </div>
   )}
   ```

7. React 컴포넌트 생성: `resources/js/Pages/Certificates/Show.jsx`
   ```jsx
   import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
   import { Head, Link } from '@inertiajs/react';

   export default function Show({ auth, certificate }) {
       return (
           <AuthenticatedLayout user={auth.user}>
               <Head title="수료증" />

               <div className="py-12">
                   <div className="max-w-4xl mx-auto sm:px-6 lg:px-8">
                       <div className="bg-gradient-to-br from-purple-600 to-blue-600 rounded-lg shadow-2xl overflow-hidden">
                           <div className="bg-white m-8 p-12 rounded-lg">
                               <div className="text-center">
                                   <h1 className="text-5xl font-bold text-purple-600 mb-8">수료증</h1>
                                   <p className="text-xl text-gray-600 mb-12">Certificate of Completion</p>
                                   
                                   <div className="text-4xl font-bold text-gray-900 mb-4 border-b-4 border-purple-600 inline-block pb-2">
                                       {certificate.enrollment.user.name}
                                   </div>
                                   
                                   <p className="text-lg text-gray-700 my-12 leading-relaxed">
                                       위 사람은 다음 강좌를 성실히 수강하고<br />
                                       모든 과정을 이수하였음을 증명합니다.
                                   </p>
                                   
                                   <div className="text-3xl font-bold text-blue-700 my-12">
                                       {certificate.enrollment.course.title}
                                   </div>
                                   
                                   <div className="mt-16 pt-8 border-t-2 border-gray-200">
                                       <p className="text-gray-600 mb-4">
                                           발급일: {new Date(certificate.issued_at).toLocaleDateString('ko-KR')}
                                       </p>
                                       <p className="text-gray-500 text-sm font-mono">
                                           인증번호: {certificate.certificate_code}
                                       </p>
                                   </div>
                               </div>
                           </div>
                       </div>

                       <div className="mt-8 flex justify-center space-x-4">
                           <a
                               href={route('certificates.download', certificate.id)}
                               className="bg-green-600 text-white px-8 py-4 rounded-lg hover:bg-green-700 transition-colors shadow-lg text-lg font-semibold"
                           >
                               📥 PDF 다운로드
                           </a>
                           <Link
                               href={route('courses.index')}
                               className="bg-gray-600 text-white px-8 py-4 rounded-lg hover:bg-gray-700 transition-colors shadow-lg text-lg font-semibold"
                           >
                               강좌 목록으로
                           </Link>
                       </div>
                   </div>
               </div>
           </AuthenticatedLayout>
       );
   }
   ```

완료되면 "수료증 자동 생성 및 PDF 다운로드 기능 완성"이라고 알려주세요.

마지막으로 수료 이력 페이지를 만들어서 사용자가 자신이 수료한 강좌 목록과 수료증을 한눈에 볼 수 있도록 합니다.

1. `app/Http/Controllers/CertificateController.php`에 index 메서드 추가:
   ```php
   public function index()
   {
       $certificates = auth()->user()->enrollments()
           ->whereHas('certificate')
           ->with(['course', 'certificate'])
           ->get()
           ->map(function ($enrollment) {
               return [
                   'id' => $enrollment->certificate->id,
                   'course_title' => $enrollment->course->title,
                   'course_thumbnail' => $enrollment->course->thumbnail,
                   'instructor' => $enrollment->course->instructor,
                   'issued_at' => $enrollment->certificate->issued_at->format('Y년 m월 d일'),
                   'certificate_code' => $enrollment->certificate->certificate_code,
               ];
           });

       return Inertia::render('Certificates/Index', [
           'certificates' => $certificates,
       ]);
   }
   ```

2. `routes/web.php`에 라우트 추가:
   ```php
   Route::middleware('auth')->group(function () {
       Route::get('/my-certificates', [CertificateController::class, 'index'])->name('certificates.index');
   });
   ```

3. React 컴포넌트 생성: `resources/js/Pages/Certificates/Index.jsx`
   ```jsx
   import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
   import { Head, Link } from '@inertiajs/react';

   export default function Index({ auth, certificates }) {
       return (
           <AuthenticatedLayout user={auth.user}>
               <Head title="수료 이력" />

               <div className="py-12">
                   <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                       <div className="mb-8">
                           <h1 className="text-3xl font-bold text-gray-900 mb-2">내 수료증</h1>
                           <p className="text-gray-600">완료한 강좌의 수료증을 확인하고 다운로드할 수 있습니다.</p>
                       </div>

                       {certificates.length === 0 ? (
                           <div className="bg-white rounded-lg shadow-md p-12 text-center">
                               <svg className="mx-auto h-24 w-24 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                               </svg>
                               <h3 className="text-xl font-semibold text-gray-900 mb-2">아직 수료한 강좌가 없습니다</h3>
                               <p className="text-gray-600 mb-6">강좌를 완료하고 수료증을 받아보세요!</p>
                               <Link
                                   href={route('courses.index')}
                                   className="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
                               >
                                   강좌 둘러보기
                               </Link>
                           </div>
                       ) : (
                           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                               {certificates.map((cert) => (
                                   <div
                                       key={cert.id}
                                       className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300"
                                   >
                                       <div className="relative">
                                           <img
                                               src={cert.course_thumbnail}
                                               alt={cert.course_title}
                                               className="w-full h-48 object-cover"
                                           />
                                           <div className="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
                                               ✓ 수료 완료
                                           </div>
                                       </div>
                                       <div className="p-6">
                                           <h2 className="text-xl font-semibold text-gray-900 mb-2">
                                               {cert.course_title}
                                           </h2>
                                           <p className="text-gray-600 text-sm mb-4">
                                               강사: {cert.instructor}
                                           </p>
                                           <div className="border-t border-gray-200 pt-4 mb-4">
                                               <p className="text-gray-600 text-sm mb-1">
                                                   발급일: {cert.issued_at}
                                               </p>
                                               <p className="text-gray-500 text-xs font-mono">
                                                   인증번호: {cert.certificate_code}
                                               </p>
                                           </div>
                                           <div className="flex space-x-2">
                                               <Link
                                                   href={route('certificates.show', cert.id)}
                                                   className="flex-1 bg-blue-600 text-white text-center px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
                                               >
                                                   미리보기
                                               </Link>
                                               <a
                                                   href={route('certificates.download', cert.id)}
                                                   className="flex-1 bg-green-600 text-white text-center px-4 py-2 rounded-lg hover:bg-green-700 transition-colors text-sm font-medium"
                                               >
                                                   PDF 다운
                                               </a>
                                           </div>
                                       </div>
                                   </div>
                               ))}
                           </div>
                       )}
                   </div>
               </div>
           </AuthenticatedLayout>
       );
   }
   ```

4. 네비게이션에 "내 수료증" 링크 추가: `resources/js/Layouts/AuthenticatedLayout.jsx`의 NavLink 섹션에 추가:
   ```jsx
   <NavLink href={route('certificates.index')} active={route().current('certificates.index')}>
       내 수료증
   </NavLink>
   ```

5. 프로젝트 최종 테스트:
   - 회원가입 후 로그인
   - 강좌 목록에서 강좌 클릭
   - "수강 시작하기" 버튼으로 수강 등록
   - 각 강의 옆 체크박스를 클릭하여 완료 표시
   - 진행률이 100%에 도달하면 "수료증 발급" 버튼 클릭
   - 수료증 미리보기 확인
   - PDF 다운로드 버튼으로 수료증 다운로드
   - "내 수료증" 메뉴에서 수료 이력 확인

6. (선택) README.md 작성:
   ```markdown
   # 온라인 강좌 수료증 자동 발급 시스템

   Laravel 13.x + Inertia.js + React 19로 만든 온라인 교육 플랫폼입니다.

   ## 주요 기능
   - 강좌 목록 및 상세 정보 확인
   - 강의 영상 시청 체크리스트
   - 실시간 진행률 추적
   - 100% 완료 시 수료증 자동 발급
   - PDF 수료증 다운로드
   - 수료 이력 관리

   ## 설치 방법
   ```bash
   composer install
   npm install
   cp .env.example .env
   touch database/database.sqlite
   php artisan key:generate
   php artisan migrate
   php artisan db:seed
   npm run dev
   php artisan serve
   ```

   ## 사용 기술
   - Laravel 13.x
   - Inertia.js
   - React 19
   - Tailwind CSS
   - DomPDF
   ```

완료되면 "프로젝트 완성! 수료 이력 페이지까지 모든 기능 구현 완료"라고 알려주세요.