🎨 온라인 작품 의뢰 접수 폼 - 커스텀 일러스트 주문 플랫폼

mkdir custom-artwork-order-form && cd custom-artwork-order-form

이 폴더에서 Laravel 13.x 프로젝트를 생성합니다.

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

1. Laravel 13.x 프로젝트 생성
   ```bash
   composer create-project laravel/laravel .
   ```

2. Tailwind CSS 4.x 설치 및 설정
   - `npm install -D tailwindcss@latest postcss autoprefixer`
   - `npx tailwindcss init -p`
   - `tailwind.config.js`에서 content 경로 설정:
     ```js
     content: [
       "./resources/**/*.blade.php",
       "./resources/**/*.js",
     ]
     ```
   - `resources/css/app.css`에 Tailwind 지시문 추가:
     ```css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     ```

3. `.env` 파일 수정하여 SQLite 사용 설정
   ```
   DB_CONNECTION=sqlite
   # DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, DB_PASSWORD 주석 처리
   ```
   - `database/database.sqlite` 파일 생성:
     ```bash
     touch database/database.sqlite
     ```

4. 개발 서버 실행 준비
   ```bash
   npm install
   npm run dev
   ```
   (별도 터미널에서)
   ```bash
   php artisan serve
   ```

5. 브라우저에서 `http://localhost:8000` 접속하여 Laravel 기본 화면 확인

모든 설정이 완료되면 "Laravel 프로젝트 생성 및 Tailwind CSS 설정 완료"라고 알려주세요.

이제 작품 의뢰 데이터를 저장할 데이터베이스 테이블과 모델을 생성합니다.

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

1. `Order` 모델과 마이그레이션 파일 생성
   ```bash
   php artisan make:model Order -m
   ```

2. `database/migrations/xxxx_create_orders_table.php` 파일을 열고 스키마 정의:
   ```php
   public function up()
   {
       Schema::create('orders', function (Blueprint $table) {
           $table->id();
           $table->string('customer_name');
           $table->string('customer_email');
           $table->string('customer_phone');
           $table->enum('artwork_type', ['illustration', 'logo', 'character', 'other']);
           $table->enum('artwork_size', ['A4', 'A3', 'square', 'custom']);
           $table->enum('purpose', ['personal', 'commercial', 'sns', 'print']);
           $table->enum('budget', ['under_50k', '50k_100k', '100k_200k', 'over_200k']);
           $table->text('details')->nullable();
           $table->string('reference_url')->nullable();
           $table->timestamps();
       });
   }
   ```

3. 마이그레이션 실행
   ```bash
   php artisan migrate
   ```

4. `app/Models/Order.php` 파일을 열고 fillable 속성 추가:
   ```php
   protected $fillable = [
       'customer_name',
       'customer_email',
       'customer_phone',
       'artwork_type',
       'artwork_size',
       'purpose',
       'budget',
       'details',
       'reference_url',
   ];
   ```

마이그레이션이 성공적으로 실행되면 "Order 모델 및 테이블 생성 완료"라고 알려주세요.

작품 의뢰 폼 페이지를 만듭니다. 이 페이지는 고객이 의뢰 정보를 입력하고 제출하는 공개 페이지입니다.

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

1. 라우트 정의 (`routes/web.php`)
   ```php
   use App\Http\Controllers\OrderController;

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

2. 컨트롤러 생성
   ```bash
   php artisan make:controller OrderController
   ```

3. `app/Http/Controllers/OrderController.php`에 create와 store 메서드 작성:
   ```php
   public function create()
   {
       return view('orders.create');
   }

   public function store(Request $request)
   {
       $validated = $request->validate([
           'customer_name' => 'required|string|max:255',
           'customer_email' => 'required|email',
           'customer_phone' => 'required|string|max:20',
           'artwork_type' => 'required|in:illustration,logo,character,other',
           'artwork_size' => 'required|in:A4,A3,square,custom',
           'purpose' => 'required|in:personal,commercial,sns,print',
           'budget' => 'required|in:under_50k,50k_100k,100k_200k,over_200k',
           'details' => 'nullable|string',
           'reference_url' => 'nullable|url',
       ]);

       Order::create($validated);

       return redirect()->route('orders.create')->with('success', '의뢰가 성공적으로 접수되었습니다!');
   }
   ```

4. Blade 뷰 파일 생성 (`resources/views/orders/create.blade.php`)
   - Tailwind CSS로 스타일링된 폼 레이아웃
   - 각 필드를 select, input, textarea로 구현
   - 제출 버튼 추가
   - 성공 메시지 표시 영역 (session 'success' 사용)
   - 유효성 검사 에러 메시지 표시 (@error 지시문 사용)

폼 디자인 요구사항:
- 중앙 정렬, 최대 너비 600px 카드 레이아웃
- 헤더: "작품 의뢰 신청" 제목 + 간단한 설명 문구
- 모든 필수 필드에 * 표시
- 제출 버튼은 파란색 배경, 흰색 텍스트, hover 효과
- 모바일 반응형 (패딩, 폰트 크기 조정)

브라우저에서 `http://localhost:8000`에 접속하여 폼이 정상 표시되고, 데이터 제출 시 성공 메시지가 나타나는지 확인하세요.

이제 작가가 접수된 의뢰 목록을 확인할 수 있는 관리 페이지를 만듭니다.

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

1. 라우트 추가 (`routes/web.php`)
   ```php
   Route::get('/admin/orders', [OrderController::class, 'index'])->name('orders.index');
   Route::delete('/admin/orders/{order}', [OrderController::class, 'destroy'])->name('orders.destroy');
   ```

2. `OrderController`에 index와 destroy 메서드 추가:
   ```php
   public function index()
   {
       $orders = Order::latest()->get();
       return view('orders.index', compact('orders'));
   }

   public function destroy(Order $order)
   {
       $order->delete();
       return redirect()->route('orders.index')->with('success', '의뢰가 삭제되었습니다.');
   }
   ```

3. Blade 뷰 파일 생성 (`resources/views/orders/index.blade.php`)
   - 의뢰 목록을 테이블 형태로 표시
   - 테이블 컬럼: 고객명, 작품 종류, 사이즈, 용도, 예산, 접수일시, 상세보기/삭제 버튼
   - 각 행에 "상세보기" 버튼 (모달 팝업 트리거)
   - 각 행에 "삭제" 버튼 (확인 후 DELETE 요청)
   - 상세보기 모달: 의뢰 전체 내용 표시 (고객 연락처, 상세 요청사항, 참고 URL 포함)

4. 모달 구현 (Alpine.js 또는 Tailwind CSS + Blade로 간단히)
   - 모달 열기/닫기 토글
   - 모달 내부에 의뢰 상세 정보 표시
   - 모달 배경 클릭 시 닫기

5. 삭제 버튼 확인 메시지 (JavaScript confirm 또는 Alpine.js)
   ```html
   <form method="POST" action="{{ route('orders.destroy', $order) }}" onsubmit="return confirm('정말 삭제하시겠습니까?');">
       @csrf
       @method('DELETE')
       <button type="submit" class="text-red-600 hover:text-red-800">삭제</button>
   </form>
   ```

디자인 요구사항:
- 테이블은 전체 너비, 헤더는 회색 배경
- 모바일에서는 테이블 대신 카드 레이아웃으로 변경 (반응형)
- 모달은 화면 중앙에 표시, 반투명 배경
- 성공 메시지 표시 영역 추가

브라우저에서 `http://localhost:8000/admin/orders`에 접속하여 의뢰 목록이 표시되고, 상세보기 모달과 삭제 기능이 정상 작동하는지 확인하세요.