🎨 DIY 굿즈 제작 주문 플랫폼 - 커스텀 디자인 업로드 & 견적 자동 산출

mkdir custom-merch-order-platform && cd custom-merch-order-platform

이 폴더에서 Laravel 13.x + Inertia.js + React 19 프로젝트를 생성합니다.

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

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

그리고 다음 마이그레이션 파일들을 생성하세요:

1. **products 테이블** (굿즈 상품 카탈로그):
   - id (primary key)
   - name (string, 상품명: 티셔츠, 후드, 스티커 등)
   - category (string, 카테고리: 의류/문구/기타)
   - base_price (decimal, 기본 단가)
   - description (text, nullable, 상품 설명)
   - image_url (string, nullable, 상품 이미지 URL)
   - timestamps

2. **orders 테이블** (주문 정보):
   - id (primary key)
   - product_id (foreign key to products)
   - customer_name (string, 주문자 이름)
   - customer_email (string, 이메일)
   - customer_phone (string, 연락처)
   - quantity (integer, 주문 수량)
   - design_file_path (string, 업로드된 디자인 파일 경로)
   - total_price (decimal, 총 견적 금액)
   - notes (text, nullable, 주문 메모/요청사항)
   - status (enum: pending, reviewing, producing, completed, 기본값 pending)
   - timestamps

마이그레이션을 실행하고, Product 모델과 Order 모델을 생성하세요. Product 모델에는 `orders()` hasMany 관계를, Order 모델에는 `product()` belongsTo 관계를 정의하세요.

시더를 만들어 샘플 상품 데이터를 5개 정도 추가하세요 (티셔츠, 후드, 에코백, 스티커, 머그컵 등).

`.env` 파일에서 DB_CONNECTION=sqlite로 설정하고 `database/database.sqlite` 파일을 생성한 후 마이그레이션을 실행하세요.

마지막으로 Laravel Storage의 public 디스크를 심볼릭 링크로 연결하세요:
```bash
php artisan storage:link
```

완료되면 `php artisan serve`로 서버를 실행하고 http://localhost:8000 에서 Laravel Breeze 기본 화면이 뜨는지 확인하세요.

상품 목록 페이지를 만듭니다.

**백엔드 (Laravel)**:
- `app/Http/Controllers/ProductController.php`를 생성하고 `index()` 메서드를 작성하세요.
- `Product::all()`로 모든 상품을 조회하고 `Inertia::render('Products/Index', ['products' => $products])`로 React 컴포넌트에 전달하세요.
- `routes/web.php`에 `Route::get('/products', [ProductController::class, 'index'])->name('products.index');` 라우트를 추가하세요.

**프론트엔드 (React + Inertia)**:
- `resources/js/Pages/Products/Index.jsx` 파일을 생성하세요.
- Inertia의 `usePage()` 훅으로 `products` props를 받아오세요.
- 상품 목록을 그리드 레이아웃(Tailwind grid)으로 표시하세요. 각 상품 카드에는 다음 정보를 포함:
  - 상품 이미지 (image_url이 있으면 표시, 없으면 placeholder)
  - 상품명 (name)
  - 카테고리 (category) 배지
  - 기본 단가 (base_price) - "₩10,000부터" 형식으로 표시
  - "주문하기" 버튼 (클릭 시 `/orders/create?product_id={id}` 페이지로 이동)
- 반응형 디자인 (모바일: 1열, 태블릿: 2열, 데스크톱: 3열)
- Tailwind CSS로 깔끔한 카드 디자인 (hover 효과, shadow 등)

상단 네비게이션에 "상품 목록" 링크를 추가하고, 페이지 제목을 "DIY 굿즈 제작 주문"으로 표시하세요.

완료 후 http://localhost:8000/products 에서 상품 목록이 잘 표시되는지 확인하세요.

주문서 작성 페이지를 만듭니다.

**백엔드 (Laravel)**:
- `app/Http/Controllers/OrderController.php`를 생성하고 `create()` 메서드를 작성하세요.
- URL 쿼리 파라미터로 `product_id`를 받아 해당 상품을 조회하세요: `$product = Product::findOrFail(request('product_id'));`
- `Inertia::render('Orders/Create', ['product' => $product])`로 React 컴포넌트에 전달하세요.
- `routes/web.php`에 `Route::get('/orders/create', [OrderController::class, 'create'])->name('orders.create');` 라우트를 추가하세요.

**프론트엔드 (React + Inertia)**:
- `resources/js/Pages/Orders/Create.jsx` 파일을 생성하세요.
- 주문서 폼을 만드세요. 다음 필드를 포함:
  - 선택된 상품 정보 표시 (읽기 전용, 상품명/이미지/기본 단가)
  - 주문자 이름 (input text, required)
  - 이메일 (input email, required)
  - 연락처 (input tel, required)
  - 주문 수량 (input number, min=1, max=1000, 기본값 10)
  - 디자인 파일 업로드 (input file, accept="image/png,image/jpeg,application/pdf", required)
  - 주문 메모/요청사항 (textarea, optional)
  - **실시간 견적 계산 표시**: 수량이 변경될 때마다 `총 견적 = base_price * quantity * (수량 할인율)` 계산
    - 예: 10개 미만 100%, 10~49개 95%, 50~99개 90%, 100개 이상 85% 단가 적용
    - 계산된 총액을 큰 글씨로 표시 ("예상 견적: ₩50,000")
- useState로 폼 상태 관리 (name, email, phone, quantity, file, notes)
- 수량 변경 시 실시간으로 견적 재계산 (useEffect 또는 onChange 핸들러)
- "주문 신청하기" 버튼 (아직 제출 기능은 없음, 다음 단계에서 구현)
- Tailwind CSS로 깔끔한 폼 레이아웃 (label, input 스타일링)

완료 후 http://localhost:8000/orders/create?product_id=1 에서 주문 폼이 잘 표시되고, 수량 변경 시 견적이 실시간으로 업데이트되는지 확인하세요.

주문 제출 기능을 구현합니다.

**백엔드 (Laravel)**:
- `OrderController`에 `store()` 메서드를 추가하세요.
- 폼 데이터 검증 (Validation):
  ```php
  $validated = $request->validate([
      'product_id' => 'required|exists:products,id',
      'customer_name' => 'required|string|max:100',
      'customer_email' => 'required|email',
      'customer_phone' => 'required|string|max:20',
      'quantity' => 'required|integer|min:1|max:1000',
      'design_file' => 'required|file|mimes:jpg,jpeg,png,pdf|max:5120',
      'notes' => 'nullable|string|max:1000',
  ]);
  ```
- 디자인 파일 업로드 처리:
  - `$request->file('design_file')->store('designs', 'public')`로 파일을 `storage/app/public/designs` 폴더에 저장
  - 저장된 경로를 `$filePath` 변수에 저장
- 총 견적 금액 계산 (백엔드에서도 동일한 로직 적용):
  ```php
  $product = Product::findOrFail($validated['product_id']);
  $quantity = $validated['quantity'];
  $discount = 1.0;
  if ($quantity >= 100) $discount = 0.85;
  elseif ($quantity >= 50) $discount = 0.90;
  elseif ($quantity >= 10) $discount = 0.95;
  $totalPrice = $product->base_price * $quantity * $discount;
  ```
- Order 레코드 생성:
  ```php
  Order::create([
      'product_id' => $validated['product_id'],
      'customer_name' => $validated['customer_name'],
      'customer_email' => $validated['customer_email'],
      'customer_phone' => $validated['customer_phone'],
      'quantity' => $quantity,
      'design_file_path' => $filePath,
      'total_price' => $totalPrice,
      'notes' => $validated['notes'],
      'status' => 'pending',
  ]);
  ```
- 성공 시 주문 목록 페이지로 리다이렉트: `return redirect()->route('orders.index')->with('success', '주문이 접수되었습니다!');`
- `routes/web.php`에 `Route::post('/orders', [OrderController::class, 'store'])->name('orders.store');` 라우트 추가

**프론트엔드 (React + Inertia)**:
- `Orders/Create.jsx`에서 Inertia의 `useForm()` 훅을 사용하여 폼 제출 처리:
  ```jsx
  import { useForm } from '@inertiajs/react';
  const { data, setData, post, processing, errors } = useForm({
      product_id: product.id,
      customer_name: '',
      customer_email: '',
      customer_phone: '',
      quantity: 10,
      design_file: null,
      notes: '',
  });
  ```
- 각 input의 onChange에서 `setData()` 호출
- 파일 input의 onChange에서 `setData('design_file', e.target.files[0])`
- "주문 신청하기" 버튼 클릭 시 `post(route('orders.store'))` 호출
- 에러 메시지 표시 (errors 객체 활용)
- 제출 중일 때 버튼 비활성화 (processing 상태 활용)

완료 후 주문을 제출하면 DB에 저장되고 주문 목록 페이지로 이동하는지 확인하세요. `storage/app/public/designs` 폴더에 파일이 업로드되었는지도 확인하세요.

주문 목록 페이지를 만듭니다.

**백엔드 (Laravel)**:
- `OrderController`에 `index()` 메서드를 추가하세요.
- 모든 주문을 최신순으로 조회하고 상품 정보도 함께 로드:
  ```php
  $orders = Order::with('product')
      ->orderBy('created_at', 'desc')
      ->paginate(10);
  ```
- `Inertia::render('Orders/Index', ['orders' => $orders])`로 전달
- `routes/web.php`에 `Route::get('/orders', [OrderController::class, 'index'])->name('orders.index');` 라우트 추가

**프론트엔드 (React + Inertia)**:
- `resources/js/Pages/Orders/Index.jsx` 파일을 생성하세요.
- 주문 목록을 테이블 또는 카드 형태로 표시하세요. 각 주문에 다음 정보 포함:
  - 주문 번호 (id)
  - 상품명 (product.name)
  - 주문자 이름 (customer_name)
  - 수량 (quantity)
  - 총 견적 금액 (total_price) - "₩50,000" 형식
  - 주문 상태 (status) - 배지로 표시 (pending: 노란색, reviewing: 파란색, producing: 주황색, completed: 초록색)
  - 주문 날짜 (created_at) - "2025-01-15" 형식
  - "상세보기" 버튼 (클릭 시 `/orders/{id}` 페이지로 이동)
- Inertia의 페이지네이션 컴포넌트 활용:
  ```jsx
  import { Link } from '@inertiajs/react';
  // 페이지네이션 링크 렌더링
  orders.links.map(link => <Link href={link.url}>...</Link>)
  ```
- 주문이 없을 때 "아직 주문이 없습니다" 메시지 표시
- "새 주문 신청" 버튼 추가 (상품 목록 페이지로 이동)
- Tailwind CSS로 깔끔한 테이블/카드 디자인

네비게이션에 "주문 목록" 링크를 추가하세요.

완료 후 http://localhost:8000/orders 에서 주문 목록이 표시되고, 페이지네이션이 동작하는지 확인하세요.

주문 상세 페이지를 만듭니다.

**백엔드 (Laravel)**:
- `OrderController`에 `show($id)` 메서드를 추가하세요.
- 특정 주문을 상품 정보와 함께 조회:
  ```php
  $order = Order::with('product')->findOrFail($id);
  ```
- `Inertia::render('Orders/Show', ['order' => $order])`로 전달
- `routes/web.php`에 `Route::get('/orders/{id}', [OrderController::class, 'show'])->name('orders.show');` 라우트 추가

**프론트엔드 (React + Inertia)**:
- `resources/js/Pages/Orders/Show.jsx` 파일을 생성하세요.
- 주문 상세 정보를 2단 레이아웃으로 표시:
  - **왼쪽**: 주문 정보
    - 주문 번호
    - 주문 날짜
    - 주문 상태 (큰 배지로 표시)
    - 주문자 정보 (이름, 이메일, 연락처)
    - 주문 메모/요청사항 (있을 경우)
  - **오른쪽**: 상품 및 견적 정보
    - 상품 이미지 (product.image_url)
    - 상품명 (product.name)
    - 카테고리 (product.category)
    - 기본 단가 (product.base_price)
    - 주문 수량 (order.quantity)
    - 총 견적 금액 (order.total_price) - 큰 글씨로 강조
- **디자인 파일 다운로드** 섹션:
  - 업로드된 디자인 파일 썸네일 표시 (이미지인 경우)
  - "디자인 파일 다운로드" 링크 (href="/storage/{order.design_file_path}" download)
- "목록으로 돌아가기" 버튼 (주문 목록 페이지로 이동)
- Tailwind CSS로 깔끔한 2단 레이아웃 (grid 또는 flex)

완료 후 주문 목록에서 "상세보기"를 클릭하면 주문 상세 페이지가 잘 표시되는지 확인하세요. 디자인 파일 다운로드 링크가 동작하는지도 확인하세요.