🎨 프리랜서 견적서 자동 생성기 - 고객 맞춤 PDF 견적서 발송

mkdir freelancer-quote-pdf-generator && cd freelancer-quote-pdf-generator

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

# Laravel 13.x API 백엔드 생성

1. `backend` 폴더에 Laravel 프로젝트를 생성하세요:
   ```bash
   composer create-project laravel/laravel:^13.0 backend
   cd backend
   ```

2. `.env` 파일을 수정하여 SQLite 데이터베이스를 설정하세요:
   ```
   DB_CONNECTION=sqlite
   # DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, DB_PASSWORD 주석 처리
   ```

3. `database/database.sqlite` 빈 파일을 생성하세요:
   ```bash
   touch database/database.sqlite
   ```

4. 견적서(Quote) 모델과 마이그레이션을 생성하세요:
   ```bash
   php artisan make:model Quote -m
   ```

5. `database/migrations/xxxx_create_quotes_table.php` 마이그레이션 파일을 다음과 같이 작성하세요:
   - 테이블명: `quotes`
   - 컬럼:
     - `id` (bigIncrements)
     - `customer_name` (string) - 고객명
     - `project_name` (string) - 프로젝트명
     - `issue_date` (date) - 발행일자
     - `items` (json) - 견적 항목 배열 (서비스명, 단가, 수량 포함)
     - `total_amount` (decimal, 10, 2) - 총액
     - `timestamps`

6. 마이그레이션을 실행하세요:
   ```bash
   php artisan migrate
   ```

7. `app/Models/Quote.php` 모델에 `$fillable` 속성을 추가하세요:
   ```php
   protected $fillable = ['customer_name', 'project_name', 'issue_date', 'items', 'total_amount'];
   protected $casts = ['items' => 'array', 'issue_date' => 'date'];
   ```

8. API 컨트롤러를 생성하세요:
   ```bash
   php artisan make:controller Api/QuoteController --api
   ```

9. `app/Http/Controllers/Api/QuoteController.php`에 다음 메서드를 구현하세요:
   - `index()`: 모든 견적서 목록 반환 (최신순 정렬)
   - `store(Request $request)`: 새 견적서 생성
     - 유효성 검사: customer_name, project_name, issue_date, items (배열), total_amount 필수
   - `show($id)`: 특정 견적서 상세 조회

10. `routes/api.php`에 API 라우트를 등록하세요:
    ```php
    use App\Http\Controllers\Api\QuoteController;
    Route::apiResource('quotes', QuoteController::class)->only(['index', 'store', 'show']);
    ```

11. CORS 설정을 위해 `config/cors.php`를 수정하세요:
    - `'paths' => ['api/*']`
    - `'allowed_origins' => ['http://localhost:5173']` (React Vite 기본 포트)
    - `'allowed_methods' => ['*']`

12. Laravel 개발 서버를 실행하세요:
    ```bash
    php artisan serve
    ```
    → http://localhost:8000 에서 API 서버 실행 확인

# React 19 프론트엔드 생성

프로젝트 루트(`freelancer-quote-pdf-generator`)로 돌아와서 React 프론트엔드를 설정하세요.

1. `frontend` 폴더에 React + Vite 프로젝트를 생성하세요:
   ```bash
   npm create vite@latest frontend -- --template react
   cd frontend
   npm install
   ```

2. Tailwind CSS를 설치하고 설정하세요:
   ```bash
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   ```

3. `tailwind.config.js`를 다음과 같이 수정하세요:
   ```js
   export default {
     content: ['./index.html', './src/**/*.{js,jsx}'],
     theme: { extend: {} },
     plugins: [],
   }
   ```

4. `src/index.css`에 Tailwind 지시어를 추가하세요:
   ```css
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   ```

5. Axios를 설치하세요:
   ```bash
   npm install axios
   ```

6. `src/App.jsx`를 다음과 같이 작성하세요:
   - 상태 관리:
     - `quotes` (배열): 생성된 견적서 목록
     - `formData` (객체): 새 견적서 입력 폼 데이터 (customer_name, project_name, issue_date)
     - `items` (배열): 견적 항목 목록 (각 항목: {service, price, quantity})
   - 함수:
     - `fetchQuotes()`: GET /api/quotes 호출하여 견적서 목록 가져오기
     - `addItem()`: 새 견적 항목 추가
     - `removeItem(index)`: 특정 항목 삭제
     - `calculateTotal()`: 항목별 소계 및 전체 합계 계산
     - `handleSubmit()`: POST /api/quotes로 견적서 생성 후 목록 새로고침
   - UI 구성:
     - 상단: 제목 "프리랜서 견적서 생성기" (Tailwind로 스타일링)
     - 중앙: 견적서 작성 폼 (고객명, 프로젝트명, 발행일자 입력)
     - 견적 항목 추가 섹션 (서비스명, 단가, 수량 입력 + 추가 버튼)
     - 항목 목록 테이블 (서비스명, 단가, 수량, 소계, 삭제 버튼)
     - 총액 표시 (실시간 계산)
     - "견적서 생성" 버튼
     - 하단: 생성된 견적서 목록 (카드 레이아웃, 고객명/프로젝트명/총액 표시)

7. Axios 기본 URL 설정:
   ```js
   import axios from 'axios';
   axios.defaults.baseURL = 'http://localhost:8000/api';
   ```

8. React 개발 서버를 실행하세요:
   ```bash
   npm run dev
   ```
   → http://localhost:5173 에서 프론트엔드 실행 확인

# PDF 다운로드 기능 추가 및 UI 개선

1. `src/components/QuoteDetail.jsx` 컴포넌트를 생성하세요:
   - Props: `quote` (객체)
   - UI:
     - 견적서 헤더 (고객명, 프로젝트명, 발행일자)
     - 항목 테이블 (서비스명, 단가, 수량, 소계)
     - 총액 (강조 표시)
     - "PDF 다운로드" 버튼 (클릭 시 `window.print()` 호출)
   - 인쇄용 CSS:
     - `@media print` 쿼리로 버튼 숨김 처리
     - 페이지 여백 최적화

2. `src/App.jsx`를 수정하세요:
   - 견적서 목록에서 특정 견적 클릭 시 `QuoteDetail` 컴포넌트를 모달로 표시
   - 모달 배경 클릭 시 닫기
   - 상태 추가: `selectedQuote` (선택된 견적서)

3. UI 개선:
   - 견적서 작성 폼을 카드 형태로 감싸기 (shadow, rounded, padding)
   - 항목 추가 버튼에 아이콘 추가 (+ 기호)
   - 총액을 큰 폰트와 색상으로 강조
   - 견적서 목록을 그리드 레이아웃으로 변경 (3열)
   - 각 견적서 카드에 hover 효과 추가

4. 폼 유효성 검사 추가:
   - 고객명, 프로젝트명, 발행일자 필수 입력
   - 최소 1개 이상의 견적 항목 필요
   - 단가와 수량은 양수만 허용
   - 입력 오류 시 알림 메시지 표시

5. 테스트:
   - 견적서를 생성하고 목록에서 클릭하여 상세 보기
   - PDF 다운로드 버튼 클릭 시 브라우저 인쇄 대화상자 확인
   - 인쇄 미리보기에서 버튼이 숨겨지는지 확인