🎨 웹툰 작가 포트폴리오 & 커미션 접수 플랫폼

mkdir webtoon-portfolio-commission-platform && cd webtoon-portfolio-commission-platform

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

Laravel 13.x + Inertia.js + React 19 프로젝트를 생성하세요. Laravel Breeze (React + Inertia) starter kit을 사용합니다.

```bash
npx create laravel webtoon-portfolio-commission-platform
cd webtoon-portfolio-commission-platform
composer require laravel/breeze --dev
php artisan breeze:install react
npm install
npm run dev
```

데이터베이스는 SQLite를 사용합니다. `.env` 파일을 수정하여:
```
DB_CONNECTION=sqlite
```

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

프로젝트가 정상적으로 실행되는지 확인하세요 (`php artisan serve`).

작품(Portfolio) 모델과 마이그레이션을 생성하세요.

```bash
php artisan make:model Portfolio -m
```

마이그레이션 파일(`database/migrations/xxxx_create_portfolios_table.php`)을 다음과 같이 작성:
```php
public function up()
{
    Schema::create('portfolios', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id')->constrained()->onDelete('cascade');
        $table->string('title');
        $table->text('description')->nullable();
        $table->string('image_path');
        $table->string('type'); // 예: 'character', 'background', 'webtoon'
        $table->integer('likes_count')->default(0);
        $table->timestamps();
    });
}
```

태그(Tag) 모델과 마이그레이션 생성:
```bash
php artisan make:model Tag -m
```

마이그레이션 파일:
```php
public function up()
{
    Schema::create('tags', function (Blueprint $table) {
        $table->id();
        $table->string('name')->unique();
        $table->timestamps();
    });
}
```

작품-태그 중간 테이블 마이그레이션 생성:
```bash
php artisan make:migration create_portfolio_tag_table
```

마이그레이션 파일:
```php
public function up()
{
    Schema::create('portfolio_tag', function (Blueprint $table) {
        $table->foreignId('portfolio_id')->constrained()->onDelete('cascade');
        $table->foreignId('tag_id')->constrained()->onDelete('cascade');
        $table->primary(['portfolio_id', 'tag_id']);
    });
}
```

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

Portfolio 모델에 관계 설정:
```php
class Portfolio extends Model
{
    protected $fillable = ['user_id', 'title', 'description', 'image_path', 'type', 'likes_count'];

    public function user()
    {
        return $this->belongsTo(User::class);
    }

    public function tags()
    {
        return $this->belongsToMany(Tag::class);
    }
}
```

Tag 모델:
```php
class Tag extends Model
{
    protected $fillable = ['name'];

    public function portfolios()
    {
        return $this->belongsToMany(Portfolio::class);
    }
}
```

작품 갤러리 페이지를 구현하세요.

PortfolioController 생성:
```bash
php artisan make:controller PortfolioController
```

`app/Http/Controllers/PortfolioController.php`:
```php
use App\Models\Portfolio;
use Inertia\Inertia;

class PortfolioController extends Controller
{
    public function index(Request $request)
    {
        $query = Portfolio::with(['user', 'tags']);

        if ($request->has('type') && $request->type !== 'all') {
            $query->where('type', $request->type);
        }

        if ($request->has('tag')) {
            $query->whereHas('tags', function($q) use ($request) {
                $q->where('name', $request->tag);
            });
        }

        $portfolios = $query->latest()->paginate(12);
        $tags = \App\Models\Tag::all();

        return Inertia::render('Portfolio/Index', [
            'portfolios' => $portfolios,
            'tags' => $tags,
            'filters' => $request->only(['type', 'tag'])
        ]);
    }
}
```

라우트 추가 (`routes/web.php`):
```php
use App\Http\Controllers\PortfolioController;

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

React 컴포넌트 생성 (`resources/js/Pages/Portfolio/Index.jsx`):
```jsx
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link } from '@inertiajs/react';
import { useState } from 'react';

export default function Index({ portfolios, tags, filters }) {
    const [selectedType, setSelectedType] = useState(filters.type || 'all');
    const [selectedTag, setSelectedTag] = useState(filters.tag || '');

    return (
        <AuthenticatedLayout>
            <Head title="작품 갤러리" />
            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <h1 className="text-3xl font-bold mb-8">작품 갤러리</h1>

                    {/* 필터 */}
                    <div className="mb-6 flex gap-4 flex-wrap">
                        <div>
                            <label className="block text-sm font-medium mb-2">작품 유형</label>
                            <select
                                value={selectedType}
                                onChange={(e) => window.location.href = `/portfolios?type=${e.target.value}`}
                                className="border rounded px-3 py-2"
                            >
                                <option value="all">전체</option>
                                <option value="character">캐릭터</option>
                                <option value="background">배경</option>
                                <option value="webtoon">웹툰 컷</option>
                            </select>
                        </div>
                        <div>
                            <label className="block text-sm font-medium mb-2">태그</label>
                            <select
                                value={selectedTag}
                                onChange={(e) => window.location.href = `/portfolios?tag=${e.target.value}`}
                                className="border rounded px-3 py-2"
                            >
                                <option value="">전체</option>
                                {tags.map(tag => (
                                    <option key={tag.id} value={tag.name}>{tag.name}</option>
                                ))}
                            </select>
                        </div>
                    </div>

                    {/* 갤러리 그리드 */}
                    <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
                        {portfolios.data.map(portfolio => (
                            <div key={portfolio.id} className="bg-white rounded-lg shadow hover:shadow-lg transition">
                                <img
                                    src={`/storage/${portfolio.image_path}`}
                                    alt={portfolio.title}
                                    className="w-full h-48 object-cover rounded-t-lg"
                                />
                                <div className="p-4">
                                    <h3 className="font-bold text-lg mb-2">{portfolio.title}</h3>
                                    <p className="text-sm text-gray-600 mb-2">{portfolio.description}</p>
                                    <div className="flex gap-2 flex-wrap mb-2">
                                        {portfolio.tags.map(tag => (
                                            <span key={tag.id} className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
                                                #{tag.name}
                                            </span>
                                        ))}
                                    </div>
                                    <div className="flex items-center justify-between">
                                        <span className="text-sm text-gray-500">by {portfolio.user.name}</span>
                                        <button className="text-red-500">❤️ {portfolio.likes_count}</button>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>

                    {/* 페이지네이션 */}
                    <div className="mt-6 flex justify-center gap-2">
                        {portfolios.links.map((link, index) => (
                            <Link
                                key={index}
                                href={link.url}
                                className={`px-3 py-2 border rounded ${link.active ? 'bg-blue-500 text-white' : 'bg-white'}`}
                                dangerouslySetInnerHTML={{ __html: link.label }}
                            />
                        ))}
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

네비게이션 메뉴에 '작품 갤러리' 링크 추가 (`resources/js/Layouts/AuthenticatedLayout.jsx`).

작품 업로드 기능을 구현하세요. (작가만 사용 가능)

PortfolioController에 create, store 메서드 추가:
```php
public function create()
{
    $tags = \App\Models\Tag::all();
    return Inertia::render('Portfolio/Create', ['tags' => $tags]);
}

public function store(Request $request)
{
    $request->validate([
        'title' => 'required|max:255',
        'description' => 'nullable',
        'image' => 'required|image|max:2048',
        'type' => 'required|in:character,background,webtoon',
        'tags' => 'array'
    ]);

    $path = $request->file('image')->store('portfolios', 'public');

    $portfolio = Portfolio::create([
        'user_id' => auth()->id(),
        'title' => $request->title,
        'description' => $request->description,
        'image_path' => $path,
        'type' => $request->type
    ]);

    if ($request->has('tags')) {
        $portfolio->tags()->sync($request->tags);
    }

    return redirect()->route('portfolios.index')->with('success', '작품이 업로드되었습니다.');
}
```

라우트 추가:
```php
Route::middleware('auth')->group(function () {
    Route::get('/portfolios/create', [PortfolioController::class, 'create'])->name('portfolios.create');
    Route::post('/portfolios', [PortfolioController::class, 'store'])->name('portfolios.store');
});
```

React 컴포넌트 (`resources/js/Pages/Portfolio/Create.jsx`):
```jsx
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, useForm } from '@inertiajs/react';

export default function Create({ tags }) {
    const { data, setData, post, processing, errors } = useForm({
        title: '',
        description: '',
        image: null,
        type: 'character',
        tags: []
    });

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

    return (
        <AuthenticatedLayout>
            <Head title="작품 업로드" />
            <div className="py-12">
                <div className="max-w-2xl mx-auto sm:px-6 lg:px-8">
                    <h1 className="text-3xl font-bold mb-8">작품 업로드</h1>
                    <form onSubmit={handleSubmit} className="bg-white p-6 rounded-lg shadow">
                        <div className="mb-4">
                            <label className="block font-medium mb-2">제목</label>
                            <input
                                type="text"
                                value={data.title}
                                onChange={e => setData('title', e.target.value)}
                                className="w-full border rounded px-3 py-2"
                            />
                            {errors.title && <p className="text-red-500 text-sm mt-1">{errors.title}</p>}
                        </div>

                        <div className="mb-4">
                            <label className="block font-medium mb-2">설명</label>
                            <textarea
                                value={data.description}
                                onChange={e => setData('description', e.target.value)}
                                className="w-full border rounded px-3 py-2"
                                rows="4"
                            />
                        </div>

                        <div className="mb-4">
                            <label className="block font-medium mb-2">이미지</label>
                            <input
                                type="file"
                                onChange={e => setData('image', e.target.files[0])}
                                className="w-full border rounded px-3 py-2"
                            />
                            {errors.image && <p className="text-red-500 text-sm mt-1">{errors.image}</p>}
                        </div>

                        <div className="mb-4">
                            <label className="block font-medium mb-2">작품 유형</label>
                            <select
                                value={data.type}
                                onChange={e => setData('type', e.target.value)}
                                className="w-full border rounded px-3 py-2"
                            >
                                <option value="character">캐릭터</option>
                                <option value="background">배경</option>
                                <option value="webtoon">웹툰 컷</option>
                            </select>
                        </div>

                        <div className="mb-4">
                            <label className="block font-medium mb-2">태그 (복수 선택 가능)</label>
                            <div className="flex flex-wrap gap-2">
                                {tags.map(tag => (
                                    <label key={tag.id} className="flex items-center">
                                        <input
                                            type="checkbox"
                                            value={tag.id}
                                            checked={data.tags.includes(tag.id)}
                                            onChange={e => {
                                                if (e.target.checked) {
                                                    setData('tags', [...data.tags, tag.id]);
                                                } else {
                                                    setData('tags', data.tags.filter(t => t !== tag.id));
                                                }
                                            }}
                                            className="mr-2"
                                        />
                                        {tag.name}
                                    </label>
                                ))}
                            </div>
                        </div>

                        <button
                            type="submit"
                            disabled={processing}
                            className="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 disabled:opacity-50"
                        >
                            업로드
                        </button>
                    </form>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

Storage 링크 생성:
```bash
php artisan storage:link
```

커미션 의뢰 모델과 폼을 구현하세요.

Commission 모델 생성:
```bash
php artisan make:model Commission -m
```

마이그레이션 파일:
```php
public function up()
{
    Schema::create('commissions', function (Blueprint $table) {
        $table->id();
        $table->foreignId('user_id')->constrained()->onDelete('cascade'); // 의뢰인
        $table->string('commission_type'); // 예: 'character', 'illustration', 'webtoon'
        $table->decimal('budget', 10, 2);
        $table->text('details');
        $table->string('status')->default('pending'); // pending, in_progress, completed
        $table->timestamps();
    });
}
```

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

Commission 모델:
```php
class Commission extends Model
{
    protected $fillable = ['user_id', 'commission_type', 'budget', 'details', 'status'];

    public function user()
    {
        return $this->belongsTo(User::class);
    }
}
```

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

`app/Http/Controllers/CommissionController.php`:
```php
use App\Models\Commission;
use Inertia\Inertia;

class CommissionController extends Controller
{
    public function create()
    {
        return Inertia::render('Commission/Create');
    }

    public function store(Request $request)
    {
        $request->validate([
            'commission_type' => 'required',
            'budget' => 'required|numeric|min:0',
            'details' => 'required'
        ]);

        Commission::create([
            'user_id' => auth()->id(),
            'commission_type' => $request->commission_type,
            'budget' => $request->budget,
            'details' => $request->details
        ]);

        return redirect()->route('commissions.index')->with('success', '커미션 의뢰가 접수되었습니다.');
    }

    public function index()
    {
        $commissions = Commission::with('user')->latest()->paginate(10);
        return Inertia::render('Commission/Index', ['commissions' => $commissions]);
    }
}
```

라우트 추가:
```php
Route::middleware('auth')->group(function () {
    Route::get('/commissions/create', [CommissionController::class, 'create'])->name('commissions.create');
    Route::post('/commissions', [CommissionController::class, 'store'])->name('commissions.store');
    Route::get('/commissions', [CommissionController::class, 'index'])->name('commissions.index');
});
```

React 컴포넌트 (`resources/js/Pages/Commission/Create.jsx`):
```jsx
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, useForm } from '@inertiajs/react';

export default function Create() {
    const { data, setData, post, processing, errors } = useForm({
        commission_type: 'character',
        budget: '',
        details: ''
    });

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

    return (
        <AuthenticatedLayout>
            <Head title="커미션 의뢰" />
            <div className="py-12">
                <div className="max-w-2xl mx-auto sm:px-6 lg:px-8">
                    <h1 className="text-3xl font-bold mb-8">커미션 의뢰하기</h1>
                    <form onSubmit={handleSubmit} className="bg-white p-6 rounded-lg shadow">
                        <div className="mb-4">
                            <label className="block font-medium mb-2">작업 유형</label>
                            <select
                                value={data.commission_type}
                                onChange={e => setData('commission_type', e.target.value)}
                                className="w-full border rounded px-3 py-2"
                            >
                                <option value="character">캐릭터 디자인</option>
                                <option value="illustration">일러스트</option>
                                <option value="webtoon">웹툰 컷</option>
                            </select>
                        </div>

                        <div className="mb-4">
                            <label className="block font-medium mb-2">예산 (원)</label>
                            <input
                                type="number"
                                value={data.budget}
                                onChange={e => setData('budget', e.target.value)}
                                className="w-full border rounded px-3 py-2"
                            />
                            {errors.budget && <p className="text-red-500 text-sm mt-1">{errors.budget}</p>}
                        </div>

                        <div className="mb-4">
                            <label className="block font-medium mb-2">상세 요구사항</label>
                            <textarea
                                value={data.details}
                                onChange={e => setData('details', e.target.value)}
                                className="w-full border rounded px-3 py-2"
                                rows="6"
                                placeholder="원하는 스타일, 캐릭터 특징, 배경 요소 등을 자세히 적어주세요."
                            />
                            {errors.details && <p className="text-red-500 text-sm mt-1">{errors.details}</p>}
                        </div>

                        <button
                            type="submit"
                            disabled={processing}
                            className="bg-green-500 text-white px-6 py-2 rounded hover:bg-green-600 disabled:opacity-50"
                        >
                            의뢰 접수
                        </button>
                    </form>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

의뢰 관리 페이지와 좋아요 기능을 구현하세요.

의뢰 목록 페이지 (`resources/js/Pages/Commission/Index.jsx`):
```jsx
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link } from '@inertiajs/react';

export default function Index({ commissions }) {
    const statusLabels = {
        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>
            <Head title="커미션 의뢰 목록" />
            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <h1 className="text-3xl font-bold mb-8">받은 커미션 의뢰</h1>
                    <div className="bg-white rounded-lg shadow overflow-hidden">
                        <table className="min-w-full">
                            <thead className="bg-gray-50">
                                <tr>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">의뢰인</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">작업 유형</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">예산</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">상태</th>
                                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">접수일</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-gray-200">
                                {commissions.data.map(commission => (
                                    <tr key={commission.id}>
                                        <td className="px-6 py-4">{commission.user.name}</td>
                                        <td className="px-6 py-4">{commission.commission_type}</td>
                                        <td className="px-6 py-4">{commission.budget.toLocaleString()}원</td>
                                        <td className="px-6 py-4">
                                            <span className={`px-2 py-1 rounded text-xs ${statusColors[commission.status]}`}>
                                                {statusLabels[commission.status]}
                                            </span>
                                        </td>
                                        <td className="px-6 py-4">{new Date(commission.created_at).toLocaleDateString()}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

좋아요 기능 구현 (PortfolioController에 메서드 추가):
```php
public function like(Portfolio $portfolio)
{
    $portfolio->increment('likes_count');
    return back();
}
```

라우트 추가:
```php
Route::post('/portfolios/{portfolio}/like', [PortfolioController::class, 'like'])->name('portfolios.like');
```

갤러리 페이지에서 좋아요 버튼 수정 (`resources/js/Pages/Portfolio/Index.jsx`):
```jsx
import { useForm } from '@inertiajs/react';

// 컴포넌트 내부
const { post } = useForm();

const handleLike = (portfolioId) => {
    post(route('portfolios.like', portfolioId));
};

// 좋아요 버튼
<button
    onClick={() => handleLike(portfolio.id)}
    className="text-red-500 hover:text-red-600"
>
    ❤️ {portfolio.likes_count}
</button>
```

네비게이션에 '커미션 의뢰', '의뢰 목록' 링크 추가.