🎯 온라인 이력서 빌더 - 템플릿 선택 & PDF 다운로드

mkdir resume-builder-pdf-export && cd resume-builder-pdf-export

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

## 1단계: Laravel 13.x API 백엔드 프로젝트 생성

Laravel 13.x 프로젝트를 생성하고 기본 설정을 완료하세요.

### 요구사항

1. Laravel 13.x 설치 (Composer 사용)
2. SQLite 데이터베이스 설정
   - `.env` 파일에서 `DB_CONNECTION=sqlite` 설정
   - `database/database.sqlite` 파일 생성
3. CORS 설정 (프론트엔드 React와 통신을 위해)
   - `config/cors.php`에서 `allowed_origins`에 `http://localhost:5173` 추가
4. 이력서 데이터를 저장할 `resumes` 테이블 마이그레이션 생성
   - 컬럼: `id`, `full_name`, `email`, `phone`, `education` (JSON), `experience` (JSON), `skills` (JSON), `template` (string), `created_at`, `updated_at`
5. Resume 모델 생성 (`app/Models/Resume.php`)
   - `$fillable` 속성에 모든 컬럼 추가
   - `$casts` 속성에 `education`, `experience`, `skills`를 `array`로 캐스팅
6. API 라우트 설정 (`routes/api.php`)
   - `POST /api/resumes` - 이력서 생성
   - `GET /api/resumes/{id}` - 이력서 조회
   - `PUT /api/resumes/{id}` - 이력서 수정
7. ResumeController 생성 (`app/Http/Controllers/ResumeController.php`)
   - `store()` 메서드: 새 이력서 생성 및 JSON 응답
   - `show()` 메서드: 이력서 조회 및 JSON 응답
   - `update()` 메서드: 이력서 수정 및 JSON 응답

### 체크포인트

- `php artisan serve`로 Laravel 서버가 `http://localhost:8000`에서 실행되는지 확인
- Postman 또는 curl로 `POST /api/resumes` 테스트
- 예시 요청 body:
  ```json
  {
    "full_name": "홍길동",
    "email": "hong@example.com",
    "phone": "010-1234-5678",
    "education": [{"school": "서울대학교", "major": "컴퓨터공학", "period": "2018-2022"}],
    "experience": [{"company": "네이버", "position": "프론트엔드 개발자", "period": "2022-현재"}],
    "skills": ["JavaScript", "React", "Node.js"],
    "template": "simple"
  }
  ```
- 응답으로 생성된 이력서 데이터와 `id`가 반환되는지 확인

## 2단계: React 19 프론트엔드 프로젝트 생성 및 기본 UI 구성

React 19 프로젝트를 Vite로 생성하고, 이력서 작성 폼의 기본 구조를 만드세요.

### 요구사항

1. React 19 + Vite 프로젝트 생성
   - `frontend` 폴더에 생성 (`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 디렉티브 추가
3. 프로젝트 구조 설정
   - `src/components/` 폴더 생성
   - `src/pages/` 폴더 생성
   - `src/services/api.js` 파일 생성 (Laravel API 통신 함수)
4. `src/services/api.js` 구현
   - `axios` 설치 (`npm install axios`)
   - `baseURL: 'http://localhost:8000/api'`로 설정
   - `createResume(data)`, `getResume(id)`, `updateResume(id, data)` 함수 작성
5. `src/pages/ResumeBuilder.jsx` 생성
   - 다단계 폼 UI 구조 (4단계: 개인정보 → 학력 → 경력 → 기술)
   - 현재 단계를 표시하는 진행 바(progress bar)
   - "다음", "이전", "저장" 버튼
6. `src/App.jsx`에서 `ResumeBuilder` 컴포넌트 렌더링
7. 개발 서버 실행 확인
   - `npm run dev`로 `http://localhost:5173` 접속
   - 기본 UI가 표시되는지 확인

### 디자인 가이드

- Tailwind CSS로 깔끔한 카드 레이아웃
- 진행 바는 상단에 고정, 현재 단계 강조 (파란색)
- 폼 입력 필드는 넉넉한 padding, border-radius 적용
- 버튼은 primary(파란색), secondary(회색) 스타일 구분

### 체크포인트

- React 개발 서버가 정상 실행되고 빈 폼 UI가 보이는지 확인
- Tailwind CSS 스타일이 적용되는지 확인

## 3단계: 다단계 폼 구현 및 실시간 미리보기

이력서 작성 폼의 각 단계를 구현하고, 입력 데이터를 실시간으로 미리보기에 반영하세요.

### 요구사항

1. `src/components/PersonalInfoForm.jsx` 생성
   - 입력 필드: 이름(full_name), 이메일(email), 전화번호(phone)
   - React state로 입력값 관리 (`useState`)
   - 부모 컴포넌트로 데이터 전달 (props callback)
2. `src/components/EducationForm.jsx` 생성
   - 입력 필드: 학교명, 전공, 기간
   - "+ 학력 추가" 버튼으로 여러 학력 입력 가능 (배열 state)
   - 각 항목 삭제 버튼
3. `src/components/ExperienceForm.jsx` 생성
   - 입력 필드: 회사명, 직책, 기간
   - "+ 경력 추가" 버튼으로 여러 경력 입력 가능
   - 각 항목 삭제 버튼
4. `src/components/SkillsForm.jsx` 생성
   - 입력 필드: 기술명 (태그 형식으로 입력)
   - "+ 기술 추가" 버튼
   - 각 기술 삭제 버튼 (X 아이콘)
5. `src/components/ResumePreview.jsx` 생성
   - 입력된 데이터를 실시간으로 이력서 형식으로 렌더링
   - 2가지 템플릿 디자인 (simple, modern)
   - 템플릿 전환 버튼
6. `src/pages/ResumeBuilder.jsx` 업데이트
   - 전체 폼 데이터를 하나의 state로 관리
   - 현재 단계에 따라 적절한 폼 컴포넌트 렌더링
   - "다음" 버튼 클릭 시 다음 단계로 이동
   - "이전" 버튼 클릭 시 이전 단계로 이동
   - 마지막 단계에서 "저장" 버튼으로 Laravel API 호출
7. 레이아웃 구성
   - 왼쪽 50%: 폼 입력 영역
   - 오른쪽 50%: 실시간 미리보기 (고정)

### 디자인 가이드

- **Simple 템플릿**: 흰색 배경, 검은색 텍스트, 섹션 구분선
- **Modern 템플릿**: 좌측 사이드바(파란색 배경)에 개인정보, 우측에 학력/경력/기술
- 미리보기는 A4 용지 비율(210mm x 297mm, 비율 1:1.414) 유지
- 반응형: 모바일에서는 폼과 미리보기를 세로로 배치

### 체크포인트

- 각 단계에서 입력한 내용이 미리보기에 즉시 반영되는지 확인
- "다음"/"이전" 버튼으로 단계 이동이 정상 작동하는지 확인
- 학력/경력/기술 추가/삭제가 정상 작동하는지 확인
- 템플릿 전환 시 디자인이 변경되는지 확인

## 4단계: Laravel API 연동 및 PDF 다운로드 기능 구현

작성한 이력서를 Laravel API에 저장하고, PDF로 다운로드하는 기능을 완성하세요.

### 요구사항

1. "저장" 버튼 클릭 시 Laravel API 호출
   - `src/services/api.js`의 `createResume()` 함수 사용
   - 성공 시 이력서 ID를 받아서 state에 저장
   - 성공 메시지 표시 (토스트 알림 또는 alert)
2. 저장된 이력서 불러오기 기능
   - URL 파라미터로 이력서 ID 받기 (`?id=123`)
   - `useEffect`로 페이지 로드 시 API 호출하여 데이터 불러오기
   - 불러온 데이터를 폼에 채우기
3. PDF 다운로드 기능 구현
   - `jspdf`와 `html2canvas` 설치 (`npm install jspdf html2canvas`)
   - "PDF 다운로드" 버튼 추가 (미리보기 하단)
   - 버튼 클릭 시 `ResumePreview` 컴포넌트를 캡처하여 PDF 생성
   - 파일명: `이력서_이름_날짜.pdf` (예: `이력서_홍길동_20250101.pdf`)
4. 로딩 상태 및 에러 처리
   - API 호출 중 로딩 스피너 표시
   - API 에러 발생 시 에러 메시지 표시
   - PDF 생성 중 로딩 표시
5. 최종 UX 개선
   - 폼 입력 필드 유효성 검사 (이메일 형식, 필수 입력 등)
   - "다음" 버튼 비활성화 (필수 필드 미입력 시)
   - 저장 성공 후 "새 이력서 작성" 버튼 추가

### PDF 생성 가이드

```javascript
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

const handleDownloadPDF = async () => {
  const element = document.getElementById('resume-preview');
  const canvas = await html2canvas(element, { scale: 2 });
  const imgData = canvas.toDataURL('image/png');
  
  const pdf = new jsPDF('p', 'mm', 'a4');
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
  
  pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
  pdf.save(`이력서_${formData.full_name}_${new Date().toISOString().slice(0, 10)}.pdf`);
};
```

### 체크포인트

- "저장" 버튼 클릭 시 Laravel API에 데이터가 저장되는지 확인 (SQLite DB 확인)
- 저장된 이력서 ID로 페이지 새로고침 시 데이터가 불러와지는지 확인
- PDF 다운로드 버튼 클릭 시 이력서가 PDF 파일로 다운로드되는지 확인
- PDF 파일을 열어서 내용이 정상적으로 보이는지 확인
- 유효성 검사가 작동하는지 확인 (이메일 형식 오류 시 에러 메시지)
- 로딩 상태가 적절히 표시되는지 확인