mkdir portfolio-builder-drag-drop && cd portfolio-builder-drag-drop

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

다음 명령어를 실행하세요:

```bash
npx create-laravel@latest .
```

설치 중 다음 옵션을 선택하세요:
- Starter kit: Breeze
- Stack: React with Inertia
- Dark mode support: Yes
- TypeScript: No (선택사항)
- Database: SQLite

설치 완료 후 다음을 확인하세요:

1. `php artisan migrate` 실행하여 기본 테이블 생성
2. `npm install` 및 `npm run dev` 실행하여 Vite 개발 서버 시작
3. `php artisan serve` 실행하여 Laravel 서버 시작
4. 브라우저에서 http://localhost:8000 접속하여 Breeze 기본 화면 확인

프로젝트 구조가 다음과 같이 생성되었는지 확인:

- `app/Models/User.php` (기본 User 모델)
- `resources/js/Pages/` (Inertia React 페이지 컴포넌트)
- `routes/web.php` (웹 라우트)
- `database/migrations/` (마이그레이션 파일)

이제 포트폴리오 빌더를 위한 기본 세팅이 완료되었습니다.

포트폴리오 빌더를 위한 데이터베이스 구조를 설계합니다.

다음 두 개의 마이그레이션 파일을 생성하세요:

```bash
php artisan make:migration create_portfolios_table
php artisan make:migration create_sections_table
```

**portfolios 테이블 스키마** (`database/migrations/xxxx_create_portfolios_table.php`):

```php
Schema::create('portfolios', function (Blueprint $table) {
    $table->id();
    $table->foreignId('user_id')->constrained()->onDelete('cascade');
    $table->string('title'); // 포트폴리오 제목
    $table->string('slug')->unique(); // 공개 URL 슬러그 (예: johndoe)
    $table->text('description')->nullable(); // 간단한 소개
    $table->string('theme')->default('default'); // 테마 프리셋 (default, dark, colorful)
    $table->boolean('is_published')->default(false); // 공개 여부
    $table->timestamps();
});
```

**sections 테이블 스키마** (`database/migrations/xxxx_create_sections_table.php`):

```php
Schema::create('sections', function (Blueprint $table) {
    $table->id();
    $table->foreignId('portfolio_id')->constrained()->onDelete('cascade');
    $table->string('type'); // hero, about, projects, skills, contact
    $table->integer('order')->default(0); // 드래그 앤 드롭 순서
    $table->json('content'); // 섹션별 데이터 (제목, 설명, 이미지 URL 등)
    $table->boolean('is_visible')->default(true); // 섹션 표시 여부
    $table->timestamps();
});
```

마이그레이션 실행:

```bash
php artisan migrate
```

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

```bash
php artisan make:model Portfolio
php artisan make:model Section
```

**Portfolio 모델** (`app/Models/Portfolio.php`):

```php
class Portfolio extends Model
{
    protected $fillable = ['user_id', 'title', 'slug', 'description', 'theme', 'is_published'];

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

    public function sections()
    {
        return $this->hasMany(Section::class)->orderBy('order');
    }
}
```

**Section 모델** (`app/Models/Section.php`):

```php
class Section extends Model
{
    protected $fillable = ['portfolio_id', 'type', 'order', 'content', 'is_visible'];
    protected $casts = ['content' => 'array'];

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

데이터베이스 구조가 완성되었습니다!

포트폴리오 편집기의 핵심 컨트롤러와 라우트를 설정합니다.

**컨트롤러 생성**:

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

**PortfolioController** (`app/Http/Controllers/PortfolioController.php`):

```php
use App\Models\Portfolio;
use App\Models\Section;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Illuminate\Support\Str;

class PortfolioController extends Controller
{
    // 편집기 메인 페이지
    public function edit()
    {
        $portfolio = auth()->user()->portfolio ?? auth()->user()->portfolio()->create([
            'title' => 'My Portfolio',
            'slug' => Str::slug(auth()->user()->name . '-' . Str::random(5)),
            'description' => 'Welcome to my portfolio',
        ]);

        return Inertia::render('Portfolio/Edit', [
            'portfolio' => $portfolio->load('sections'),
        ]);
    }

    // 포트폴리오 기본 정보 업데이트
    public function update(Request $request)
    {
        $validated = $request->validate([
            'title' => 'required|string|max:255',
            'description' => 'nullable|string',
            'theme' => 'required|in:default,dark,colorful',
            'is_published' => 'boolean',
        ]);

        $portfolio = auth()->user()->portfolio;
        $portfolio->update($validated);

        return back();
    }

    // 섹션 추가
    public function addSection(Request $request)
    {
        $validated = $request->validate([
            'type' => 'required|in:hero,about,projects,skills,contact',
        ]);

        $portfolio = auth()->user()->portfolio;
        $maxOrder = $portfolio->sections()->max('order') ?? 0;

        $portfolio->sections()->create([
            'type' => $validated['type'],
            'order' => $maxOrder + 1,
            'content' => $this->getDefaultContent($validated['type']),
        ]);

        return back();
    }

    // 섹션 순서 업데이트 (드래그 앤 드롭)
    public function reorderSections(Request $request)
    {
        $validated = $request->validate([
            'sections' => 'required|array',
            'sections.*.id' => 'required|exists:sections,id',
            'sections.*.order' => 'required|integer',
        ]);

        foreach ($validated['sections'] as $section) {
            Section::where('id', $section['id'])->update(['order' => $section['order']]);
        }

        return back();
    }

    // 섹션 내용 업데이트
    public function updateSection(Request $request, Section $section)
    {
        $validated = $request->validate([
            'content' => 'required|array',
        ]);

        $section->update(['content' => $validated['content']]);

        return back();
    }

    // 섹션 삭제
    public function deleteSection(Section $section)
    {
        $section->delete();
        return back();
    }

    // 공개 포트폴리오 페이지
    public function show($slug)
    {
        $portfolio = Portfolio::where('slug', $slug)
            ->where('is_published', true)
            ->with('sections')
            ->firstOrFail();

        return Inertia::render('Portfolio/Show', [
            'portfolio' => $portfolio,
        ]);
    }

    private function getDefaultContent($type)
    {
        return match($type) {
            'hero' => ['title' => 'Welcome', 'subtitle' => 'I am a developer'],
            'about' => ['text' => 'About me...'],
            'projects' => ['items' => []],
            'skills' => ['items' => []],
            'contact' => ['email' => '', 'phone' => ''],
        };
    }
}
```

**라우트 설정** (`routes/web.php`):

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

Route::middleware('auth')->group(function () {
    Route::get('/portfolio/edit', [PortfolioController::class, 'edit'])->name('portfolio.edit');
    Route::patch('/portfolio', [PortfolioController::class, 'update'])->name('portfolio.update');
    Route::post('/portfolio/sections', [PortfolioController::class, 'addSection'])->name('portfolio.sections.add');
    Route::patch('/portfolio/sections/reorder', [PortfolioController::class, 'reorderSections'])->name('portfolio.sections.reorder');
    Route::patch('/portfolio/sections/{section}', [PortfolioController::class, 'updateSection'])->name('portfolio.sections.update');
    Route::delete('/portfolio/sections/{section}', [PortfolioController::class, 'deleteSection'])->name('portfolio.sections.delete');
});

Route::get('/portfolio/{slug}', [PortfolioController::class, 'show'])->name('portfolio.show');
```

이제 백엔드 로직이 완성되었습니다!

React 편집기 페이지를 구현합니다. 드래그 앤 드롭 기능을 위해 @dnd-kit 라이브러리를 설치하세요.

**라이브러리 설치**:

```bash
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
```

**편집기 페이지** (`resources/js/Pages/Portfolio/Edit.jsx`):

```jsx
import { useState } from 'react';
import { Head, useForm, router } from '@inertiajs/react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import SortableSection from '@/Components/SortableSection';

export default function Edit({ auth, portfolio }) {
    const [sections, setSections] = useState(portfolio.sections);
    const { data, setData, patch } = useForm({
        title: portfolio.title,
        description: portfolio.description,
        theme: portfolio.theme,
        is_published: portfolio.is_published,
    });

    const sensors = useSensors(useSensor(PointerSensor));

    const handleDragEnd = (event) => {
        const { active, over } = event;
        if (active.id !== over.id) {
            setSections((items) => {
                const oldIndex = items.findIndex((i) => i.id === active.id);
                const newIndex = items.findIndex((i) => i.id === over.id);
                const newItems = arrayMove(items, oldIndex, newIndex);

                // 순서 업데이트 API 호출
                router.patch('/portfolio/sections/reorder', {
                    sections: newItems.map((item, index) => ({ id: item.id, order: index })),
                });

                return newItems;
            });
        }
    };

    const addSection = (type) => {
        router.post('/portfolio/sections', { type }, {
            onSuccess: () => router.reload({ only: ['portfolio'] }),
        });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        patch('/portfolio');
    };

    return (
        <AuthenticatedLayout user={auth.user}>
            <Head title="Edit Portfolio" />
            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg p-6">
                        <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Portfolio Editor</h2>

                        {/* 기본 정보 폼 */}
                        <form onSubmit={handleSubmit} className="mb-8 space-y-4">
                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Title</label>
                                <input
                                    type="text"
                                    value={data.title}
                                    onChange={(e) => setData('title', e.target.value)}
                                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
                                <textarea
                                    value={data.description}
                                    onChange={(e) => setData('description', e.target.value)}
                                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Theme</label>
                                <select
                                    value={data.theme}
                                    onChange={(e) => setData('theme', e.target.value)}
                                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                >
                                    <option value="default">Default</option>
                                    <option value="dark">Dark</option>
                                    <option value="colorful">Colorful</option>
                                </select>
                            </div>
                            <div className="flex items-center">
                                <input
                                    type="checkbox"
                                    checked={data.is_published}
                                    onChange={(e) => setData('is_published', e.target.checked)}
                                    className="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                                />
                                <label className="ml-2 text-sm text-gray-700 dark:text-gray-300">Publish Portfolio</label>
                            </div>
                            <button type="submit" className="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
                                Save Settings
                            </button>
                        </form>

                        {/* 섹션 추가 버튼 */}
                        <div className="mb-6 flex gap-2 flex-wrap">
                            {['hero', 'about', 'projects', 'skills', 'contact'].map((type) => (
                                <button
                                    key={type}
                                    onClick={() => addSection(type)}
                                    className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 capitalize"
                                >
                                    Add {type}
                                </button>
                            ))}
                        </div>

                        {/* 드래그 앤 드롭 섹션 리스트 */}
                        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
                            <SortableContext items={sections.map((s) => s.id)} strategy={verticalListSortingStrategy}>
                                <div className="space-y-4">
                                    {sections.map((section) => (
                                        <SortableSection key={section.id} section={section} />
                                    ))}
                                </div>
                            </SortableContext>
                        </DndContext>

                        {/* 공개 URL 안내 */}
                        {data.is_published && (
                            <div className="mt-8 p-4 bg-green-50 dark:bg-green-900 rounded-md">
                                <p className="text-sm text-green-800 dark:text-green-200">
                                    Your portfolio is live at:{' '}
                                    <a
                                        href={`/portfolio/${portfolio.slug}`}
                                        target="_blank"
                                        className="font-medium underline"
                                    >
                                        /portfolio/{portfolio.slug}
                                    </a>
                                </p>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
```

다음 단계에서 SortableSection 컴포넌트를 구현합니다.

드래그 가능한 섹션 컴포넌트와 섹션별 편집 폼을 구현합니다.

**SortableSection 컴포넌트** (`resources/js/Components/SortableSection.jsx`):

```jsx
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { useState } from 'react';
import { router } from '@inertiajs/react';

export default function SortableSection({ section }) {
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: section.id });
    const [isEditing, setIsEditing] = useState(false);
    const [content, setContent] = useState(section.content);

    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
    };

    const handleSave = () => {
        router.patch(`/portfolio/sections/${section.id}`, { content }, {
            onSuccess: () => setIsEditing(false),
        });
    };

    const handleDelete = () => {
        if (confirm('Delete this section?')) {
            router.delete(`/portfolio/sections/${section.id}`);
        }
    };

    return (
        <div ref={setNodeRef} style={style} className="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600">
            <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-3">
                    <button {...listeners} {...attributes} className="cursor-grab text-gray-500 hover:text-gray-700">
                        ☰
                    </button>
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white capitalize">{section.type}</h3>
                </div>
                <div className="flex gap-2">
                    <button
                        onClick={() => setIsEditing(!isEditing)}
                        className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
                    >
                        {isEditing ? 'Cancel' : 'Edit'}
                    </button>
                    <button
                        onClick={handleDelete}
                        className="px-3 py-1 text-sm bg-red-600 text-white rounded hover:bg-red-700"
                    >
                        Delete
                    </button>
                </div>
            </div>

            {isEditing ? (
                <div className="space-y-3">
                    {section.type === 'hero' && (
                        <>
                            <input
                                type="text"
                                placeholder="Title"
                                value={content.title || ''}
                                onChange={(e) => setContent({ ...content, title: e.target.value })}
                                className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                            />
                            <input
                                type="text"
                                placeholder="Subtitle"
                                value={content.subtitle || ''}
                                onChange={(e) => setContent({ ...content, subtitle: e.target.value })}
                                className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                            />
                        </>
                    )}
                    {section.type === 'about' && (
                        <textarea
                            placeholder="About text"
                            value={content.text || ''}
                            onChange={(e) => setContent({ ...content, text: e.target.value })}
                            className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                            rows="4"
                        />
                    )}
                    {section.type === 'projects' && (
                        <div>
                            <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">Projects (JSON array of objects with title, description, image, link)</p>
                            <textarea
                                value={JSON.stringify(content.items || [], null, 2)}
                                onChange={(e) => {
                                    try {
                                        setContent({ ...content, items: JSON.parse(e.target.value) });
                                    } catch {}
                                }}
                                className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 font-mono text-sm"
                                rows="6"
                            />
                        </div>
                    )}
                    {section.type === 'skills' && (
                        <div>
                            <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">Skills (JSON array of objects with name, level)</p>
                            <textarea
                                value={JSON.stringify(content.items || [], null, 2)}
                                onChange={(e) => {
                                    try {
                                        setContent({ ...content, items: JSON.parse(e.target.value) });
                                    } catch {}
                                }}
                                className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 font-mono text-sm"
                                rows="6"
                            />
                        </div>
                    )}
                    {section.type === 'contact' && (
                        <>
                            <input
                                type="email"
                                placeholder="Email"
                                value={content.email || ''}
                                onChange={(e) => setContent({ ...content, email: e.target.value })}
                                className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                            />
                            <input
                                type="tel"
                                placeholder="Phone"
                                value={content.phone || ''}
                                onChange={(e) => setContent({ ...content, phone: e.target.value })}
                                className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                            />
                        </>
                    )}
                    <button
                        onClick={handleSave}
                        className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700"
                    >
                        Save Changes
                    </button>
                </div>
            ) : (
                <div className="text-sm text-gray-600 dark:text-gray-400">
                    <pre className="whitespace-pre-wrap">{JSON.stringify(content, null, 2)}</pre>
                </div>
            )}
        </div>
    );
}
```

이제 편집기에서 섹션을 드래그하여 순서를 변경하고, 각 섹션의 내용을 편집할 수 있습니다!

공개 포트폴리오 페이지를 구현합니다. 사용자가 설정한 테마와 섹션 순서에 따라 포트폴리오를 렌더링합니다.

**공개 페이지** (`resources/js/Pages/Portfolio/Show.jsx`):

```jsx
import { Head } from '@inertiajs/react';

export default function Show({ portfolio }) {
    const themeClasses = {
        default: 'bg-white text-gray-900',
        dark: 'bg-gray-900 text-white',
        colorful: 'bg-gradient-to-br from-purple-500 to-pink-500 text-white',
    };

    return (
        <>
            <Head title={portfolio.title} />
            <div className={`min-h-screen ${themeClasses[portfolio.theme]}`}>
                {/* Header */}
                <header className="py-8 px-6 text-center border-b border-gray-200 dark:border-gray-700">
                    <h1 className="text-4xl font-bold">{portfolio.title}</h1>
                    <p className="mt-2 text-lg opacity-80">{portfolio.description}</p>
                </header>

                {/* Sections */}
                <main className="max-w-5xl mx-auto py-12 px-6 space-y-16">
                    {portfolio.sections.map((section) => (
                        <section key={section.id} className="animate-fade-in">
                            {section.type === 'hero' && (
                                <div className="text-center">
                                    <h2 className="text-5xl font-bold mb-4">{section.content.title}</h2>
                                    <p className="text-2xl opacity-80">{section.content.subtitle}</p>
                                </div>
                            )}

                            {section.type === 'about' && (
                                <div>
                                    <h2 className="text-3xl font-bold mb-4">About Me</h2>
                                    <p className="text-lg leading-relaxed">{section.content.text}</p>
                                </div>
                            )}

                            {section.type === 'projects' && (
                                <div>
                                    <h2 className="text-3xl font-bold mb-6">Projects</h2>
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        {section.content.items?.map((project, idx) => (
                                            <div key={idx} className="border border-gray-300 dark:border-gray-700 rounded-lg p-6 hover:shadow-lg transition">
                                                {project.image && (
                                                    <img src={project.image} alt={project.title} className="w-full h-48 object-cover rounded-md mb-4" />
                                                )}
                                                <h3 className="text-xl font-semibold mb-2">{project.title}</h3>
                                                <p className="opacity-80 mb-3">{project.description}</p>
                                                {project.link && (
                                                    <a href={project.link} target="_blank" className="text-blue-500 underline hover:text-blue-600">
                                                        View Project →
                                                    </a>
                                                )}
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}

                            {section.type === 'skills' && (
                                <div>
                                    <h2 className="text-3xl font-bold mb-6">Skills</h2>
                                    <div className="space-y-4">
                                        {section.content.items?.map((skill, idx) => (
                                            <div key={idx}>
                                                <div className="flex justify-between mb-1">
                                                    <span className="font-medium">{skill.name}</span>
                                                    <span className="opacity-80">{skill.level}%</span>
                                                </div>
                                                <div className="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-3">
                                                    <div
                                                        className="bg-blue-600 h-3 rounded-full transition-all duration-500"
                                                        style={{ width: `${skill.level}%` }}
                                                    />
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}

                            {section.type === 'contact' && (
                                <div className="text-center">
                                    <h2 className="text-3xl font-bold mb-6">Contact Me</h2>
                                    <div className="space-y-2">
                                        {section.content.email && (
                                            <p>
                                                <span className="font-medium">Email:</span>{' '}
                                                <a href={`mailto:${section.content.email}`} className="text-blue-500 underline hover:text-blue-600">
                                                    {section.content.email}
                                                </a>
                                            </p>
                                        )}
                                        {section.content.phone && (
                                            <p>
                                                <span className="font-medium">Phone:</span> {section.content.phone}
                                            </p>
                                        )}
                                    </div>
                                </div>
                            )}
                        </section>
                    ))}
                </main>

                {/* Footer */}
                <footer className="py-6 text-center border-t border-gray-200 dark:border-gray-700 opacity-60">
                    <p>© {new Date().getFullYear()} {portfolio.title}. Built with Portfolio Builder.</p>
                </footer>
            </div>
        </>
    );
}
```

**애니메이션 추가** (`resources/css/app.css`):

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .animate-fade-in {
        animation: fadeIn 0.8s ease-in-out;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
```

이제 `/portfolio/{slug}` 경로로 접속하면 공개 포트폴리오가 표시됩니다!