🎨 온라인 커스텀 굿즈 디자인 스튜디오 - 실시간 프리뷰 & 주문 플랫폼

mkdir custom-merch-design-studio && cd custom-merch-design-studio

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

다음 작업을 수행해주세요:

1. Laravel Breeze (React + Inertia) starter kit으로 프로젝트 초기화:
   ```bash
   composer create-project laravel/laravel . "^13.0"
   composer require laravel/breeze --dev
   php artisan breeze:install react
   npm install
   npm run dev
   ```

2. 데이터베이스를 SQLite로 설정:
   - `.env` 파일에서 DB_CONNECTION=sqlite로 변경
   - `database/database.sqlite` 파일 생성
   - `php artisan migrate` 실행하여 기본 테이블 생성

3. 프로젝트 구조 확인:
   - `app/Http/Controllers`: Laravel 컨트롤러
   - `resources/js/Pages`: React 페이지 컴포넌트 (Inertia.js)
   - `resources/js/Components`: 재사용 가능한 React 컴포넌트
   - `routes/web.php`: Inertia 라우트 정의

4. Tailwind CSS 4.x 설정 확인 (`tailwind.config.js`에서 content 경로 포함)

5. 개발 서버 실행:
   ```bash
   php artisan serve  # 백엔드 서버 (http://localhost:8000)
   npm run dev        # Vite 프론트엔드 빌드 (별도 터미널)
   ```

프로젝트가 정상적으로 실행되고 Laravel Breeze 기본 페이지가 표시되면 성공입니다.

데이터베이스 스키마를 설계하고 마이그레이션을 생성합니다.

다음 테이블을 생성해주세요:

1. **products 테이블** (굿즈 상품 정보):
   ```bash
   php artisan make:migration create_products_table
   ```
   - id (primary key)
   - name (string): 상품명 (예: "클래식 티셔츠", "세라믹 머그컵")
   - type (string): 상품 타입 (tshirt, mug, sticker)
   - base_price (decimal): 기본 가격
   - image_url (string): 상품 이미지 경로 (public/images/products/)
   - description (text): 상품 설명
   - timestamps

2. **orders 테이블** (고객 주문 정보):
   ```bash
   php artisan make:migration create_orders_table
   ```
   - id (primary key)
   - product_id (foreign key → products.id)
   - customer_name (string): 고객 이름
   - customer_email (string): 고객 이메일
   - shipping_address (text): 배송 주소
   - quantity (integer): 주문 수량
   - design_data (json): 디자인 설정 (텍스트, 색상, 폰트 등 JSON 저장)
   - total_price (decimal): 총 가격
   - status (string, default: 'pending'): 주문 상태 (pending, processing, completed)
   - order_number (string, unique): 주문번호 (ORD-XXXXXX 형식)
   - timestamps

3. 마이그레이션 파일 작성 후 실행:
   ```bash
   php artisan migrate
   ```

4. Product 모델 생성 및 관계 설정:
   ```bash
   php artisan make:model Product
   ```
   - `app/Models/Product.php`에서 `orders()` 관계 정의 (hasMany)
   - fillable 속성에 ['name', 'type', 'base_price', 'image_url', 'description'] 추가

5. Order 모델 생성 및 관계 설정:
   ```bash
   php artisan make:model Order
   ```
   - `app/Models/Order.php`에서 `product()` 관계 정의 (belongsTo)
   - fillable 속성에 ['product_id', 'customer_name', 'customer_email', 'shipping_address', 'quantity', 'design_data', 'total_price', 'status', 'order_number'] 추가
   - design_data 필드를 JSON으로 자동 캐스팅 (protected $casts = ['design_data' => 'array'];)

마이그레이션이 성공적으로 실행되고 모델 관계가 설정되면 완료입니다.

시드 데이터를 생성하여 샘플 굿즈 상품을 DB에 추가합니다.

다음 작업을 수행해주세요:

1. Seeder 파일 생성:
   ```bash
   php artisan make:seeder ProductSeeder
   ```

2. `database/seeders/ProductSeeder.php`에 샘플 상품 데이터 삽입:
   ```php
   use App\Models\Product;

   Product::create([
       'name' => '클래식 화이트 티셔츠',
       'type' => 'tshirt',
       'base_price' => 25000,
       'image_url' => '/images/products/tshirt-white.png',
       'description' => '100% 코튼 소재의 편안한 티셔츠입니다. 원하는 텍스트를 추가하세요!'
   ]);

   Product::create([
       'name' => '세라믹 머그컵',
       'type' => 'mug',
       'base_price' => 15000,
       'image_url' => '/images/products/mug-white.png',
       'description' => '아침 커피를 더 특별하게! 나만의 문구를 새겨보세요.'
   ]);

   Product::create([
       'name' => '비닐 스티커 (10x10cm)',
       'type' => 'sticker',
       'base_price' => 5000,
       'image_url' => '/images/products/sticker-square.png',
       'description' => '방수 비닐 스티커로 노트북, 텀블러 어디든 붙여보세요.'
   ]);
   ```

3. `database/seeders/DatabaseSeeder.php`에서 ProductSeeder 호출:
   ```php
   public function run()
   {
       $this->call(ProductSeeder::class);
   }
   ```

4. Seeder 실행:
   ```bash
   php artisan db:seed
   ```

5. 상품 이미지 준비 (선택사항):
   - `public/images/products/` 폴더 생성
   - 샘플 이미지 파일 추가 (tshirt-white.png, mug-white.png, sticker-square.png)
   - 또는 AI에게 "placeholder 이미지 URL 사용" 요청

시드 데이터가 성공적으로 삽입되면 완료입니다. `php artisan tinker`에서 `Product::all()`로 확인 가능합니다.

굿즈 카탈로그 페이지를 만들고 상품 목록을 표시합니다.

다음 작업을 수행해주세요:

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

2. `app/Http/Controllers/ProductController.php`에 index 메서드 작성:
   ```php
   use App\Models\Product;
   use Inertia\Inertia;

   public function index()
   {
       $products = Product::all();
       return Inertia::render('Products/Index', [
           'products' => $products
       ]);
   }
   ```

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

   Route::get('/', [ProductController::class, 'index'])->name('products.index');
   ```

4. React 페이지 컴포넌트 생성:
   - `resources/js/Pages/Products/Index.jsx` 파일 생성
   - Inertia usePage 훅으로 products 데이터 받기
   - Tailwind CSS로 그리드 레이아웃 구성 (3열 또는 반응형 2/3열)
   - 각 상품 카드에 이미지, 이름, 가격, 설명 표시
   - "디자인 시작하기" 버튼 추가 (아직 동작 안 함, 다음 단계에서 연결)

5. 컴포넌트 예시 구조:
   ```jsx
   import { Head, Link } from '@inertiajs/react';

   export default function Index({ products }) {
       return (
           <>
               <Head title="굿즈 카탈로그" />
               <div className="min-h-screen bg-gray-50 py-12">
                   <div className="max-w-7xl mx-auto px-4">
                       <h1 className="text-4xl font-bold text-center mb-12">나만의 굿즈 만들기</h1>
                       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                           {products.map(product => (
                               <div key={product.id} className="bg-white rounded-lg shadow-lg overflow-hidden">
                                   <img src={product.image_url} alt={product.name} className="w-full h-64 object-cover" />
                                   <div className="p-6">
                                       <h2 className="text-2xl font-semibold mb-2">{product.name}</h2>
                                       <p className="text-gray-600 mb-4">{product.description}</p>
                                       <p className="text-xl font-bold text-blue-600 mb-4">{product.base_price.toLocaleString()}원</p>
                                       <Link href={`/products/${product.id}/design`} className="block w-full bg-blue-600 text-white text-center py-3 rounded-lg hover:bg-blue-700 transition">
                                           디자인 시작하기
                                       </Link>
                                   </div>
                               </div>
                           ))}
                       </div>
                   </div>
               </div>
           </>
       );
   }
   ```

브라우저에서 http://localhost:8000 접속 시 3개의 굿즈 상품 카드가 그리드로 표시되면 성공입니다.

실시간 디자인 프리뷰 페이지를 만들고 텍스트/색상 커스터마이징 기능을 구현합니다.

다음 작업을 수행해주세요:

1. ProductController에 show 메서드 추가:
   ```php
   public function show($id)
   {
       $product = Product::findOrFail($id);
       return Inertia::render('Products/Design', [
           'product' => $product
       ]);
   }
   ```

2. `routes/web.php`에 라우트 추가:
   ```php
   Route::get('/products/{id}/design', [ProductController::class, 'show'])->name('products.design');
   ```

3. React 페이지 컴포넌트 생성:
   - `resources/js/Pages/Products/Design.jsx` 파일 생성
   - useState로 디자인 상태 관리:
     ```jsx
     const [designText, setDesignText] = useState('');
     const [textColor, setTextColor] = useState('#000000');
     const [fontSize, setFontSize] = useState(24);
     const [fontFamily, setFontFamily] = useState('Arial');
     ```

4. 좌측 영역: 실시간 프리뷰 캔버스
   - 상품 이미지를 배경으로 표시
   - 입력한 텍스트를 이미지 위에 오버레이 (CSS position:absolute)
   - 텍스트 스타일(색상, 크기, 폰트)이 실시간 반영
   - 예시 구조:
     ```jsx
     <div className="relative w-full h-96 bg-gray-100 rounded-lg overflow-hidden">
         <img src={product.image_url} alt={product.name} className="w-full h-full object-contain" />
         <div className="absolute inset-0 flex items-center justify-center">
             <p style={{ color: textColor, fontSize: `${fontSize}px`, fontFamily: fontFamily }} className="font-bold">
                 {designText || '여기에 텍스트를 입력하세요'}
             </p>
         </div>
     </div>
     ```

5. 우측 영역: 커스터마이징 컨트롤 패널
   - 텍스트 입력 필드 (input type="text")
   - 색상 선택 (input type="color")
   - 폰트 크기 슬라이더 (input type="range", min=12, max=72)
   - 폰트 선택 드롭다운 (select: Arial, Georgia, 'Courier New', 'Comic Sans MS')
   - "주문하기" 버튼 (다음 단계에서 연결)

6. 반응형 레이아웃:
   - 데스크톱: 좌우 2열 (프리뷰 | 컨트롤)
   - 모바일: 세로 1열 (프리뷰 위, 컨트롤 아래)

7. Inertia Link로 뒤로가기 버튼 추가:
   ```jsx
   <Link href="/" className="text-blue-600 hover:underline">← 카탈로그로 돌아가기</Link>
   ```

브라우저에서 "디자인 시작하기" 클릭 시 실시간 프리뷰 페이지가 표시되고, 텍스트/색상/크기 변경이 즉시 반영되면 성공입니다.

주문 폼을 만들고 주문 데이터를 DB에 저장하는 기능을 구현합니다.

다음 작업을 수행해주세요:

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

2. `app/Http/Controllers/OrderController.php`에 store 메서드 작성:
   ```php
   use App\Models\Order;
   use Illuminate\Http\Request;
   use Illuminate\Support\Str;

   public function store(Request $request)
   {
       $validated = $request->validate([
           'product_id' => 'required|exists:products,id',
           'customer_name' => 'required|string|max:255',
           'customer_email' => 'required|email',
           'shipping_address' => 'required|string',
           'quantity' => 'required|integer|min:1',
           'design_data' => 'required|array',
           'total_price' => 'required|numeric'
       ]);

       $order = Order::create([
           ...$validated,
           'order_number' => 'ORD-' . strtoupper(Str::random(8)),
           'status' => 'pending'
       ]);

       return redirect()->route('orders.show', $order->id)->with('success', '주문이 완료되었습니다!');
   }

   public function show($id)
   {
       $order = Order::with('product')->findOrFail($id);
       return Inertia::render('Orders/Show', [
           'order' => $order
       ]);
   }
   ```

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

   Route::post('/orders', [OrderController::class, 'store'])->name('orders.store');
   Route::get('/orders/{id}', [OrderController::class, 'show'])->name('orders.show');
   ```

4. Design.jsx 페이지에 주문 폼 추가:
   - "주문하기" 버튼 클릭 시 모달 또는 하단 섹션 표시
   - 주문 폼 필드:
     - 고객 이름 (input type="text")
     - 이메일 (input type="email")
     - 배송 주소 (textarea)
     - 수량 (input type="number", min=1, default=1)
   - Inertia useForm 훅으로 폼 상태 관리:
     ```jsx
     import { useForm } from '@inertiajs/react';

     const { data, setData, post, processing, errors } = useForm({
         product_id: product.id,
         customer_name: '',
         customer_email: '',
         shipping_address: '',
         quantity: 1,
         design_data: { text: designText, color: textColor, fontSize, fontFamily },
         total_price: product.base_price * 1
     });

     const handleSubmit = (e) => {
         e.preventDefault();
         post('/orders');
     };
     ```

5. 주문 완료 페이지 생성:
   - `resources/js/Pages/Orders/Show.jsx` 파일 생성
   - 주문번호, 상품명, 디자인 프리뷰, 고객 정보, 배송지, 총 금액 표시
   - "홈으로 돌아가기" 버튼 추가

6. 에러 처리:
   - Design.jsx에서 `errors` 객체로 유효성 검사 에러 표시
   - 예: `{errors.customer_email && <p className="text-red-500 text-sm">{errors.customer_email}</p>}`

브라우저에서 디자인 완료 후 주문 폼 작성 및 제출 시 주문 완료 페이지로 이동하고, DB에 주문 데이터가 저장되면 성공입니다.

주문 조회 기능을 추가하여 고객이 주문번호로 주문 상태를 확인할 수 있도록 합니다.

다음 작업을 수행해주세요:

1. OrderController에 search 메서드 추가:
   ```php
   public function search(Request $request)
   {
       $orderNumber = $request->input('order_number');
       $order = Order::where('order_number', $orderNumber)->with('product')->first();

       if (!$order) {
           return back()->withErrors(['order_number' => '주문번호를 찾을 수 없습니다.']);
       }

       return redirect()->route('orders.show', $order->id);
   }
   ```

2. `routes/web.php`에 라우트 추가:
   ```php
   Route::post('/orders/search', [OrderController::class, 'search'])->name('orders.search');
   ```

3. 홈 페이지(Products/Index.jsx)에 주문 조회 섹션 추가:
   - 페이지 상단 또는 하단에 "주문 조회" 섹션 배치
   - 주문번호 입력 필드 (input type="text", placeholder="ORD-XXXXXXXX")
   - "조회하기" 버튼
   - Inertia useForm 훅으로 폼 제출:
     ```jsx
     const { data, setData, post, processing, errors } = useForm({
         order_number: ''
     });

     const handleSearch = (e) => {
         e.preventDefault();
         post('/orders/search');
     };
     ```

4. 에러 메시지 표시:
   - `{errors.order_number && <p className="text-red-500 text-sm mt-2">{errors.order_number}</p>}`

5. 주문 완료 페이지(Orders/Show.jsx) 개선:
   - 주문 상태(pending, processing, completed)를 배지로 표시
   - 디자인 프리뷰를 다시 렌더링 (design_data JSON 파싱)
   - 예시:
     ```jsx
     <div className="relative w-64 h-64 bg-gray-100 rounded-lg overflow-hidden mx-auto">
         <img src={order.product.image_url} alt={order.product.name} className="w-full h-full object-contain" />
         <div className="absolute inset-0 flex items-center justify-center">
             <p style={{ 
                 color: order.design_data.color, 
                 fontSize: `${order.design_data.fontSize}px`, 
                 fontFamily: order.design_data.fontFamily 
             }} className="font-bold">
                 {order.design_data.text}
             </p>
         </div>
     </div>
     ```

6. UI/UX 개선:
   - 주문 조회 섹션을 카드 형태로 스타일링
   - "최근 주문" 링크 추가 (선택사항, localStorage 활용)

브라우저에서 주문번호 입력 후 조회 시 해당 주문 상세 페이지로 이동하면 성공입니다. 잘못된 주문번호 입력 시 에러 메시지가 표시됩니다.

최종 UI/UX 개선 및 반응형 디자인을 완성합니다.

다음 작업을 수행해주세요:

1. 전역 레이아웃 개선:
   - `resources/js/Layouts/GuestLayout.jsx` 또는 새로운 레이아웃 컴포넌트 생성
   - 상단 네비게이션 바 추가 (로고, "홈", "주문 조회" 링크)
   - 푸터 추가 (저작권 정보, 소셜 미디어 링크)
   - 모든 페이지에 레이아웃 적용

2. 애니메이션 효과 추가:
   - 상품 카드 hover 시 scale 효과 (Tailwind: `hover:scale-105 transition-transform`)
   - 주문 완료 페이지에 성공 메시지 페이드인 애니메이션
   - 버튼 클릭 시 로딩 스피너 표시 (Inertia `processing` 상태 활용)

3. 반응형 디자인 최적화:
   - 모바일에서 디자인 프리뷰와 컨트롤이 세로로 배치되도록 Tailwind 브레이크포인트 조정
   - 주문 폼 필드가 모바일에서 전체 너비 사용
   - 네비게이션 바가 모바일에서 햄버거 메뉴로 전환 (선택사항)

4. 접근성 개선:
   - 모든 input 필드에 label 태그 추가
   - 이미지에 alt 속성 확인
   - 버튼에 aria-label 추가 (필요시)

5. 에러 페이지 추가:
   - 404 페이지 (상품을 찾을 수 없을 때)
   - `resources/js/Pages/Errors/404.jsx` 생성

6. 성능 최적화:
   - 이미지 lazy loading 추가 (`<img loading="lazy" />`)
   - 불필요한 리렌더링 방지 (React.memo 사용 고려)

7. 최종 테스트:
   - 전체 플로우 테스트 (카탈로그 → 디자인 → 주문 → 조회)
   - 다양한 화면 크기에서 레이아웃 확인
   - 브라우저 콘솔에서 에러 없는지 확인

8. README.md 작성:
   - 프로젝트 설명, 설치 방법, 실행 방법 문서화
   - 스크린샷 추가 (선택사항)

모든 개선 사항이 적용되고, 다양한 디바이스에서 정상 작동하면 프로젝트 완성입니다!