🎓 온라인 자격증 발급 플랫폼 - 수강생 인증서 자동 생성 & PDF 다운로드

mkdir certification-generator-platform && cd certification-generator-platform

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

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

Laravel 13.x로 API 백엔드를 구축합니다.

## 요구사항
1. `backend` 폴더에 Laravel 13.x 프로젝트 생성
2. SQLite 데이터베이스 설정 (.env 파일에서 DB_CONNECTION=sqlite)
3. `certifications` 테이블 생성 (마이그레이션 파일):
   - id (primary key)
   - student_name (string)
   - student_email (string)
   - course_name (string)
   - completion_date (date)
   - certificate_number (string, unique)
   - timestamps
4. Certification 모델 생성 (app/Models/Certification.php)
5. API 라우트 설정 (routes/api.php):
   - GET /api/certifications - 모든 인증서 목록
   - POST /api/certifications - 새 인증서 생성
   - GET /api/certifications/{id} - 특정 인증서 조회
   - DELETE /api/certifications/{id} - 인증서 삭제
6. CertificationController 생성 및 CRUD 로직 구현
7. CORS 설정 (config/cors.php에서 프론트엔드 포트 허용)
8. 인증서 번호는 자동 생성 (예: CERT-2024-00001 형식)

## 추가 지시사항
- Eloquent ORM 사용
- API 응답은 JSON 형식
- 유효성 검사 (FormRequest 또는 컨트롤러에서 validate 사용)
- php artisan serve로 로컬 서버 실행 (포트 8000)

# Step 2: React 프론트엔드 프로젝트 생성

React 19 + Vite로 프론트엔드를 구축합니다.

## 요구사항
1. `frontend` 폴더에 React 19 + Vite 프로젝트 생성 (npm create vite@latest frontend -- --template react)
2. Tailwind CSS 설치 및 설정
3. 프로젝트 구조:
   ```
   src/
   ├── components/
   │   ├── CertificateForm.jsx       # 인증서 정보 입력 폼
   │   ├── CertificatePreview.jsx    # 인증서 미리보기 (디자인 템플릿)
   │   ├── CertificateList.jsx       # 발급된 인증서 목록
   │   └── SearchBar.jsx             # 검색 바
   ├── services/
   │   └── api.js                    # API 호출 함수 모음
   ├── App.jsx
   └── main.jsx
   ```
4. api.js에 Laravel API 호출 함수 작성:
   - fetchCertifications() - GET /api/certifications
   - createCertification(data) - POST /api/certifications
   - deleteCertification(id) - DELETE /api/certifications/{id}
   - API 베이스 URL은 http://localhost:8000
5. App.jsx에서 전체 레이아웃 구성:
   - 상단: 제목 및 설명
   - 좌측: CertificateForm (입력 폼)
   - 우측: CertificatePreview (미리보기)
   - 하단: CertificateList (발급 내역)
6. useState로 폼 데이터 및 인증서 목록 상태 관리
7. npm run dev로 개발 서버 실행 (포트 5173)

## 추가 지시사항
- 모던하고 깔끔한 UI (Tailwind CSS 활용)
- 반응형 디자인 (모바일에서도 사용 가능)
- 로딩 상태 표시 (API 호출 중)
- 에러 메시지 표시 (API 실패 시)

# Step 3: 인증서 입력 폼 & 실시간 미리보기 구현

사용자가 폼에 정보를 입력하면 실시간으로 인증서 디자인에 반영되도록 구현합니다.

## 요구사항
1. CertificateForm.jsx:
   - 입력 필드: 학생 이름, 이메일, 과정명, 수료일
   - 각 필드는 onChange 이벤트로 상태 업데이트
   - "인증서 발급" 버튼 클릭 시 API 호출 (createCertification)
   - 발급 성공 시 폼 초기화 및 목록 새로고침
2. CertificatePreview.jsx:
   - 입력된 데이터를 받아서 인증서 디자인에 표시
   - 디자인 예시:
     - 중앙에 큰 "Certificate of Completion" 제목
     - "This certifies that [학생 이름]" 문구
     - "has successfully completed the course: [과정명]" 문구
     - "Date of Completion: [수료일]" 문구
     - 하단에 인증서 번호 (CERT-2024-XXXXX)
   - 테두리, 배경색, 폰트 스타일 등 꾸미기
   - 데이터가 없을 때는 플레이스홀더 텍스트 표시
3. App.jsx에서 폼 데이터 상태를 CertificateForm과 CertificatePreview에 props로 전달
4. 폼 유효성 검사 (모든 필드 필수)

## 추가 지시사항
- 인증서 디자인은 CSS로 꾸미기 (Tailwind 유틸리티 클래스 활용)
- 입력값이 변경될 때마다 미리보기가 즉시 업데이트
- 발급 버튼 클릭 시 로딩 인디케이터 표시

# Step 4: PDF 다운로드 기능 구현

완성된 인증서를 PDF 파일로 다운로드할 수 있도록 구현합니다.

## 요구사항
1. jsPDF 라이브러리 설치 (npm install jspdf html2canvas)
2. CertificatePreview.jsx에 "PDF 다운로드" 버튼 추가
3. 버튼 클릭 시:
   - html2canvas로 인증서 디자인 영역을 이미지로 캡처
   - jsPDF로 PDF 문서 생성
   - 캡처한 이미지를 PDF에 삽입
   - 파일명: {학생이름}_인증서_{날짜}.pdf
   - 브라우저에서 자동 다운로드
4. 다운로드 중 로딩 상태 표시
5. 다운로드 완료 시 성공 메시지 표시

## 추가 지시사항
- PDF 생성 함수는 별도 유틸리티 함수로 분리 (src/utils/pdfGenerator.js)
- 인증서 디자인 영역에 ref 사용하여 DOM 요소 참조
- PDF 크기는 A4 (210mm x 297mm) 가로 방향
- 이미지 품질 높게 설정 (html2canvas scale 옵션)

# Step 5: 발급 내역 목록 & 검색 기능 구현

지금까지 발급한 인증서 목록을 확인하고, 검색/삭제 기능을 추가합니다.

## 요구사항
1. CertificateList.jsx:
   - API에서 인증서 목록 불러오기 (fetchCertifications)
   - 테이블 형태로 표시:
     - 인증서 번호, 학생 이름, 과정명, 수료일, 발급일시
   - 각 행에 "삭제" 버튼 추가 (deleteCertification 호출)
   - 삭제 시 확인 다이얼로그 표시
   - 삭제 후 목록 새로고침
2. SearchBar.jsx:
   - 검색어 입력 필드
   - 검색 버튼 (또는 실시간 검색)
   - 학생 이름 또는 과정명으로 필터링
   - 검색 결과가 없을 때 "결과 없음" 메시지 표시
3. App.jsx에서 검색 상태 관리:
   - 검색어 상태 (useState)
   - 필터링된 목록을 CertificateList에 전달
4. 목록 정렬 기능 (최신순/오래된순)

## 추가 지시사항
- 목록이 비어있을 때 "아직 발급된 인증서가 없습니다" 메시지 표시
- 삭제 버튼은 빨간색으로 강조
- 테이블은 반응형 (모바일에서는 카드 형태로 전환)
- 로딩 중일 때 스켈레톤 UI 또는 스피너 표시