🎨 일러스트레이터 커미션 주문서 플랫폼 - 의뢰서 작성부터 포트폴리오까지

mkdir illustration-commission-order-platform && cd illustration-commission-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 build
```

프로젝트 초기 설정을 완료한 후, `.env` 파일에서 데이터베이스를 SQLite로 변경하세요:

```
DB_CONNECTION=sqlite
# DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, DB_PASSWORD 주석 처리
```

`database/database.sqlite` 파일을 생성하고 마이그레이션을 실행하세요:

```bash
touch database/database.sqlite
php artisan migrate
```

Tailwind CSS 설정은 이미 포함되어 있으므로 추가 설정 불필요합니다.

개발 서버를 실행하여 기본 화면이 정상적으로 표시되는지 확인하세요:

```bash
php artisan serve
npm run dev
```

브라우저에서 `http://localhost:8000`에 접속하여 Laravel Breeze 기본 페이지가 표시되면 성공입니다.

커미션 의뢰서를 저장할 `commissions` 테이블을 생성합니다.

다음 명령어로 마이그레이션 파일을 생성하세요:

```bash
php artisan make:migration create_commissions_table
```

생성된 마이그레이션 파일(`database/migrations/YYYY_MM_DD_HHMMSS_create_commissions_table.php`)을 열고 다음과 같이 작성하세요:

```php
public function up()
{
    Schema::create('commissions', function (Blueprint $table) {
        $table->id();
        $table->string('client_name'); // 고객 이름
        $table->string('client_email'); // 고객 이메일
        $table->string('purpose'); // 작성 목적 (프로필, SNS, 굿즈 등)
        $table->text('character_description'); // 캐릭터 설명
        $table->text('background_request')->nullable(); // 배경 요청사항
        $table->string('reference_image_url')->nullable(); // 참고 이미지 URL
        $table->string('budget_range'); // 예산 범위 (예: 10-20만원)
        $table->enum('status', ['pending', 'in_progress', 'completed'])->default('pending'); // 상태
        $table->string('completed_image_url')->nullable(); // 완성 이미지 URL (완료 시)
        $table->timestamps();
    });
}
```

마이그레이션을 실행하세요:

```bash
php artisan migrate
```

다음으로 Commission 모델을 생성하세요:

```bash
php artisan make:model Commission
```

`app/Models/Commission.php`를 열고 fillable 필드를 정의하세요:

```php
protected $fillable = [
    'client_name',
    'client_email',
    'purpose',
    'character_description',
    'background_request',
    'reference_image_url',
    'budget_range',
    'status',
    'completed_image_url',
];
```

커미션 의뢰서 작성 폼을 구현합니다.

먼저 CommissionController를 생성하세요:

```bash
php artisan make:controller CommissionController
```

`app/Http/Controllers/CommissionController.php`를 열고 다음 메서드를 작성하세요:

```php
use App\Models\Commission;
use Inertia\Inertia;
use Illuminate\Http\Request;

public function create()
{
    return Inertia::render('Commissions/Create');
}

public function store(Request $request)
{
    $validated = $request->validate([
        'client_name' => 'required|string|max:255',
        'client_email' => 'required|email',
        'purpose' => 'required|string|max:255',
        'character_description' => 'required|string',
        'background_request' => 'nullable|string',
        'reference_image_url' => 'nullable|url',
        'budget_range' => 'required|string|max:255',
    ]);

    Commission::create($validated);

    return redirect()->route('commissions.index')->with('success', '의뢰서가 성공적으로 제출되었습니다!');
}
```

`routes/web.php`에 라우트를 추가하세요:

```php
use App\Http\Controllers\CommissionController;

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

이제 React 컴포넌트를 생성합니다. `resources/js/Pages/Commissions/Create.jsx` 파일을 만들고 다음과 같이 작성하세요:

```jsx
import { useForm } from '@inertiajs/react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';

export default function Create() {
    const { data, setData, post, processing, errors } = useForm({
        client_name: '',
        client_email: '',
        purpose: '',
        character_description: '',
        background_request: '',
        reference_image_url: '',
        budget_range: '',
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        post(route('commissions.store'));
    };

    return (
        <AuthenticatedLayout>
            <div className="max-w-2xl mx-auto p-6">
                <h1 className="text-3xl font-bold mb-6">커미션 의뢰서 작성</h1>
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
                        <label className="block text-sm font-medium mb-1">이름</label>
                        <input
                            type="text"
                            value={data.client_name}
                            onChange={(e) => setData('client_name', e.target.value)}
                            className="w-full border rounded px-3 py-2"
                        />
                        {errors.client_name && <p className="text-red-500 text-sm">{errors.client_name}</p>}
                    </div>
                    <div>
                        <label className="block text-sm font-medium mb-1">이메일</label>
                        <input
                            type="email"
                            value={data.client_email}
                            onChange={(e) => setData('client_email', e.target.value)}
                            className="w-full border rounded px-3 py-2"
                        />
                        {errors.client_email && <p className="text-red-500 text-sm">{errors.client_email}</p>}
                    </div>
                    <div>
                        <label className="block text-sm font-medium mb-1">작성 목적</label>
                        <select
                            value={data.purpose}
                            onChange={(e) => setData('purpose', e.target.value)}
                            className="w-full border rounded px-3 py-2"
                        >
                            <option value="">선택하세요</option>
                            <option value="프로필">프로필</option>
                            <option value="SNS">SNS</option>
                            <option value="굿즈">굿즈</option>
                            <option value="기타">기타</option>
                        </select>
                        {errors.purpose && <p className="text-red-500 text-sm">{errors.purpose}</p>}
                    </div>
                    <div>
                        <label className="block text-sm font-medium mb-1">캐릭터 설명</label>
                        <textarea
                            value={data.character_description}
                            onChange={(e) => setData('character_description', e.target.value)}
                            className="w-full border rounded px-3 py-2 h-32"
                            placeholder="캐릭터의 외모, 성격, 포즈 등을 상세히 작성해주세요"
                        />
                        {errors.character_description && <p className="text-red-500 text-sm">{errors.character_description}</p>}
                    </div>
                    <div>
                        <label className="block text-sm font-medium mb-1">배경 요청사항 (선택)</label>
                        <textarea
                            value={data.background_request}
                            onChange={(e) => setData('background_request', e.target.value)}
                            className="w-full border rounded px-3 py-2 h-20"
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium mb-1">참고 이미지 URL (선택)</label>
                        <input
                            type="url"
                            value={data.reference_image_url}
                            onChange={(e) => setData('reference_image_url', e.target.value)}
                            className="w-full border rounded px-3 py-2"
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium mb-1">예산 범위</label>
                        <input
                            type="text"
                            value={data.budget_range}
                            onChange={(e) => setData('budget_range', e.target.value)}
                            className="w-full border rounded px-3 py-2"
                            placeholder="예: 10-20만원"
                        />
                        {errors.budget_range && <p className="text-red-500 text-sm">{errors.budget_range}</p>}
                    </div>
                    <button
                        type="submit"
                        disabled={processing}
                        className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition"
                    >
                        의뢰서 제출
                    </button>
                </form>
            </div>
        </AuthenticatedLayout>
    );
}
```

브라우저에서 `/commissions/create`에 접속하여 폼이 정상적으로 표시되고 제출되는지 확인하세요.

제출된 커미션 의뢰 목록 페이지를 구현합니다.

`CommissionController`에 `index` 메서드를 추가하세요:

```php
public function index(Request $request)
{
    $status = $request->query('status', 'all');

    $query = Commission::query()->orderBy('created_at', 'desc');

    if ($status !== 'all') {
        $query->where('status', $status);
    }

    $commissions = $query->paginate(12);

    return Inertia::render('Commissions/Index', [
        'commissions' => $commissions,
        'currentStatus' => $status,
    ]);
}
```

`routes/web.php`에 라우트를 추가하세요:

```php
Route::get('/commissions', [CommissionController::class, 'index'])->name('commissions.index');
```

`resources/js/Pages/Commissions/Index.jsx` 파일을 만들고 다음과 같이 작성하세요:

```jsx
import { Link } from '@inertiajs/react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';

export default function Index({ commissions, currentStatus }) {
    const statusLabels = {
        all: '전체',
        pending: '대기중',
        in_progress: '진행중',
        completed: '완료',
    };

    const statusColors = {
        pending: 'bg-yellow-100 text-yellow-800',
        in_progress: 'bg-blue-100 text-blue-800',
        completed: 'bg-green-100 text-green-800',
    };

    return (
        <AuthenticatedLayout>
            <div className="max-w-6xl mx-auto p-6">
                <div className="flex justify-between items-center mb-6">
                    <h1 className="text-3xl font-bold">커미션 의뢰 목록</h1>
                    <Link
                        href={route('commissions.create')}
                        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition"
                    >
                        새 의뢰 작성
                    </Link>
                </div>

                <div className="flex gap-2 mb-6">
                    {Object.entries(statusLabels).map(([key, label]) => (
                        <Link
                            key={key}
                            href={route('commissions.index', { status: key })}
                            className={`px-4 py-2 rounded transition ${
                                currentStatus === key
                                    ? 'bg-blue-500 text-white'
                                    : 'bg-gray-200 hover:bg-gray-300'
                            }`}
                        >
                            {label}
                        </Link>
                    ))}
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {commissions.data.map((commission) => (
                        <Link
                            key={commission.id}
                            href={route('commissions.show', commission.id)}
                            className="border rounded-lg p-4 hover:shadow-lg transition transform hover:-translate-y-1"
                        >
                            <div className="flex justify-between items-start mb-2">
                                <h3 className="font-bold text-lg">{commission.client_name}</h3>
                                <span className={`px-2 py-1 rounded text-xs font-semibold ${statusColors[commission.status]}`}>
                                    {statusLabels[commission.status]}
                                </span>
                            </div>
                            <p className="text-sm text-gray-600 mb-2">{commission.purpose}</p>
                            <p className="text-sm text-gray-700 line-clamp-3">{commission.character_description}</p>
                            <p className="text-xs text-gray-500 mt-2">예산: {commission.budget_range}</p>
                        </Link>
                    ))}
                </div>

                {commissions.links.length > 3 && (
                    <div className="flex justify-center gap-2 mt-6">
                        {commissions.links.map((link, index) => (
                            <Link
                                key={index}
                                href={link.url || '#'}
                                className={`px-3 py-1 rounded ${
                                    link.active
                                        ? 'bg-blue-500 text-white'
                                        : 'bg-gray-200 hover:bg-gray-300'
                                } ${!link.url && 'opacity-50 cursor-not-allowed'}`}
                                dangerouslySetInnerHTML={{ __html: link.label }}
                            />
                        ))}
                    </div>
                )}
            </div>
        </AuthenticatedLayout>
    );
}
```

브라우저에서 `/commissions`에 접속하여 의뢰 목록이 카드 형태로 표시되고, 상태별 필터링이 작동하는지 확인하세요.

커미션 의뢰 상세 페이지를 구현하고, 일러스트레이터가 상태를 변경할 수 있도록 합니다.

`CommissionController`에 `show`와 `update` 메서드를 추가하세요:

```php
public function show(Commission $commission)
{
    return Inertia::render('Commissions/Show', [
        'commission' => $commission,
    ]);
}

public function update(Request $request, Commission $commission)
{
    $validated = $request->validate([
        'status' => 'required|in:pending,in_progress,completed',
        'completed_image_url' => 'nullable|url',
    ]);

    $commission->update($validated);

    return redirect()->route('commissions.show', $commission->id)
        ->with('success', '상태가 업데이트되었습니다!');
}
```

`routes/web.php`에 라우트를 추가하세요:

```php
Route::get('/commissions/{commission}', [CommissionController::class, 'show'])->name('commissions.show');
Route::patch('/commissions/{commission}', [CommissionController::class, 'update'])->name('commissions.update');
```

`resources/js/Pages/Commissions/Show.jsx` 파일을 만들고 다음과 같이 작성하세요:

```jsx
import { useForm } from '@inertiajs/react';
import { useState } from 'react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';

export default function Show({ commission }) {
    const { data, setData, patch, processing } = useForm({
        status: commission.status,
        completed_image_url: commission.completed_image_url || '',
    });

    const [showToast, setShowToast] = useState(false);

    const handleSubmit = (e) => {
        e.preventDefault();
        patch(route('commissions.update', commission.id), {
            onSuccess: () => {
                setShowToast(true);
                setTimeout(() => setShowToast(false), 3000);
            },
        });
    };

    const statusLabels = {
        pending: '대기중',
        in_progress: '진행중',
        completed: '완료',
    };

    return (
        <AuthenticatedLayout>
            <div className="max-w-4xl mx-auto p-6">
                <h1 className="text-3xl font-bold mb-6">커미션 의뢰 상세</h1>

                <div className="bg-white border rounded-lg p-6 mb-6">
                    <div className="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <p className="text-sm text-gray-500">의뢰자</p>
                            <p className="font-semibold">{commission.client_name}</p>
                        </div>
                        <div>
                            <p className="text-sm text-gray-500">이메일</p>
                            <p className="font-semibold">{commission.client_email}</p>
                        </div>
                        <div>
                            <p className="text-sm text-gray-500">작성 목적</p>
                            <p className="font-semibold">{commission.purpose}</p>
                        </div>
                        <div>
                            <p className="text-sm text-gray-500">예산 범위</p>
                            <p className="font-semibold">{commission.budget_range}</p>
                        </div>
                    </div>

                    <div className="mb-4">
                        <p className="text-sm text-gray-500 mb-1">캐릭터 설명</p>
                        <p className="whitespace-pre-wrap">{commission.character_description}</p>
                    </div>

                    {commission.background_request && (
                        <div className="mb-4">
                            <p className="text-sm text-gray-500 mb-1">배경 요청사항</p>
                            <p className="whitespace-pre-wrap">{commission.background_request}</p>
                        </div>
                    )}

                    {commission.reference_image_url && (
                        <div className="mb-4">
                            <p className="text-sm text-gray-500 mb-1">참고 이미지</p>
                            <img
                                src={commission.reference_image_url}
                                alt="참고 이미지"
                                className="max-w-md rounded border"
                            />
                        </div>
                    )}
                </div>

                <div className="bg-white border rounded-lg p-6">
                    <h2 className="text-xl font-bold mb-4">상태 관리</h2>
                    <form onSubmit={handleSubmit} className="space-y-4">
                        <div>
                            <label className="block text-sm font-medium mb-1">상태</label>
                            <select
                                value={data.status}
                                onChange={(e) => setData('status', e.target.value)}
                                className="w-full border rounded px-3 py-2"
                            >
                                {Object.entries(statusLabels).map(([key, label]) => (
                                    <option key={key} value={key}>
                                        {label}
                                    </option>
                                ))}
                            </select>
                        </div>

                        {data.status === 'completed' && (
                            <div>
                                <label className="block text-sm font-medium mb-1">완성 이미지 URL</label>
                                <input
                                    type="url"
                                    value={data.completed_image_url}
                                    onChange={(e) => setData('completed_image_url', e.target.value)}
                                    className="w-full border rounded px-3 py-2"
                                    placeholder="완성된 작품 이미지 URL을 입력하세요"
                                />
                            </div>
                        )}

                        <button
                            type="submit"
                            disabled={processing}
                            className="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 transition"
                        >
                            상태 업데이트
                        </button>
                    </form>
                </div>

                {showToast && (
                    <div className="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded shadow-lg animate-fade-in">
                        ✓ 상태가 업데이트되었습니다!
                    </div>
                )}
            </div>
        </AuthenticatedLayout>
    );
}
```

`resources/css/app.css`에 토스트 애니메이션을 추가하세요:

```css
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}
```

브라우저에서 의뢰 목록에서 카드를 클릭하여 상세 페이지로 이동하고, 상태를 변경한 후 저장하면 토스트 알림이 표시되는지 확인하세요.

완료된 커미션 작품을 포트폴리오 갤러리로 표시하는 페이지를 구현합니다.

`CommissionController`에 `portfolio` 메서드를 추가하세요:

```php
public function portfolio()
{
    $completedCommissions = Commission::where('status', 'completed')
        ->whereNotNull('completed_image_url')
        ->orderBy('updated_at', 'desc')
        ->get();

    return Inertia::render('Commissions/Portfolio', [
        'commissions' => $completedCommissions,
    ]);
}
```

`routes/web.php`에 라우트를 추가하세요:

```php
Route::get('/portfolio', [CommissionController::class, 'portfolio'])->name('commissions.portfolio');
```

`resources/js/Pages/Commissions/Portfolio.jsx` 파일을 만들고 다음과 같이 작성하세요:

```jsx
import { useState } from 'react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';

export default function Portfolio({ commissions }) {
    const [selectedCommission, setSelectedCommission] = useState(null);

    return (
        <AuthenticatedLayout>
            <div className="max-w-6xl mx-auto p-6">
                <h1 className="text-3xl font-bold mb-6">포트폴리오 갤러리</h1>

                {commissions.length === 0 ? (
                    <div className="text-center text-gray-500 py-12">
                        <p className="text-lg">아직 완료된 작품이 없습니다.</p>
                        <p className="text-sm mt-2">커미션 의뢰를 완료하고 포트폴리오에 추가하세요!</p>
                    </div>
                ) : (
                    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                        {commissions.map((commission) => (
                            <div
                                key={commission.id}
                                onClick={() => setSelectedCommission(commission)}
                                className="cursor-pointer group overflow-hidden rounded-lg border hover:shadow-xl transition transform hover:scale-105"
                            >
                                <img
                                    src={commission.completed_image_url}
                                    alt={commission.purpose}
                                    className="w-full h-64 object-cover group-hover:opacity-90 transition"
                                />
                                <div className="p-2 bg-white">
                                    <p className="text-sm font-semibold truncate">{commission.purpose}</p>
                                    <p className="text-xs text-gray-500 truncate">{commission.client_name}</p>
                                </div>
                            </div>
                        ))}
                    </div>
                )}

                {selectedCommission && (
                    <div
                        className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4 animate-fade-in"
                        onClick={() => setSelectedCommission(null)}
                    >
                        <div
                            className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-auto"
                            onClick={(e) => e.stopPropagation()}
                        >
                            <div className="relative">
                                <button
                                    onClick={() => setSelectedCommission(null)}
                                    className="absolute top-4 right-4 bg-white rounded-full p-2 shadow-lg hover:bg-gray-100 transition"
                                >
                                    ✕
                                </button>
                                <img
                                    src={selectedCommission.completed_image_url}
                                    alt={selectedCommission.purpose}
                                    className="w-full max-h-[60vh] object-contain"
                                />
                            </div>
                            <div className="p-6">
                                <h2 className="text-2xl font-bold mb-2">{selectedCommission.purpose}</h2>
                                <p className="text-gray-600 mb-4">의뢰자: {selectedCommission.client_name}</p>
                                <div className="mb-4">
                                    <p className="text-sm text-gray-500 mb-1">캐릭터 설명</p>
                                    <p className="whitespace-pre-wrap">{selectedCommission.character_description}</p>
                                </div>
                                {selectedCommission.background_request && (
                                    <div>
                                        <p className="text-sm text-gray-500 mb-1">배경 요청사항</p>
                                        <p className="whitespace-pre-wrap">{selectedCommission.background_request}</p>
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                )}
            </div>
        </AuthenticatedLayout>
    );
}
```

네비게이션에 포트폴리오 링크를 추가하세요. `resources/js/Layouts/AuthenticatedLayout.jsx`를 열고 네비게이션 메뉴에 다음을 추가하세요:

```jsx
<Link
    href={route('commissions.portfolio')}
    className="text-gray-700 hover:text-gray-900"
>
    포트폴리오
</Link>
```

브라우저에서 `/portfolio`에 접속하여 완료된 작품들이 그리드로 표시되고, 썸네일 클릭 시 모달로 상세 정보가 표시되는지 확인하세요.