🎸 밴드 멤버 모집 공고판 - 포지션별 지원서 접수 & 오디션 일정 관리

mkdir band-member-recruitment-board && cd band-member-recruitment-board

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

# 프로젝트 초기 설정

다음 명령으로 Laravel Breeze (React + Inertia.js) starter kit을 설치하세요:

```bash
composer create-project laravel/laravel .
composer require laravel/breeze --dev
php artisan breeze:install react
npm install
npm run dev
```

설정 요구사항:
1. `.env` 파일에서 데이터베이스를 SQLite로 설정:
   - `DB_CONNECTION=sqlite`
   - `DB_DATABASE` 항목 주석 처리 또는 삭제
   - `database/database.sqlite` 파일 생성: `touch database/database.sqlite`

2. Tailwind CSS가 Breeze와 함께 자동 설치되었는지 확인

3. 프로젝트 구조 확인:
   - `resources/js/Pages/` - React 페이지 컴포넌트
   - `resources/js/Components/` - 재사용 컴포넌트
   - `app/Http/Controllers/` - Inertia 컨트롤러

4. 개발 서버 실행:
   - 터미널 1: `php artisan serve`
   - 터미널 2: `npm run dev`

5. 브라우저에서 `http://localhost:8000` 접속하여 Laravel Breeze 기본 화면(Welcome 페이지) 확인

완료 후 다음 단계를 진행할 준비가 되었다고 알려주세요.

# 데이터베이스 마이그레이션 및 모델 생성

밴드 멤버 모집 공고판의 핵심 데이터 모델을 설계합니다. 3개의 주요 모델(Band, Recruitment, Application)과 관계를 설정하세요.

## 1. 마이그레이션 파일 생성

```bash
php artisan make:model Band -m
php artisan make:model Recruitment -m
php artisan make:model Application -m
```

## 2. 마이그레이션 스키마 작성

### `database/migrations/xxxx_create_bands_table.php`
```php
Schema::create('bands', function (Blueprint $table) {
    $table->id();
    $table->string('name'); // 밴드명
    $table->string('genre'); // 장르 (록, 재즈, 힙합 등)
    $table->string('region'); // 활동 지역
    $table->text('description'); // 밴드 소개
    $table->string('logo_url')->nullable(); // 로고 이미지 URL (선택)
    $table->timestamps();
});
```

### `database/migrations/xxxx_create_recruitments_table.php`
```php
Schema::create('recruitments', function (Blueprint $table) {
    $table->id();
    $table->foreignId('band_id')->constrained()->onDelete('cascade');
    $table->json('positions'); // 모집 포지션 배열 (보컬, 기타, 베이스 등)
    $table->text('details'); // 상세 모집 내용
    $table->string('practice_frequency'); // 연습 빈도 (주 1회, 주 2회 등)
    $table->date('deadline'); // 모집 마감일
    $table->enum('status', ['open', 'closed', 'audition'])->default('open'); // 모집 상태
    $table->integer('views')->default(0); // 조회수
    $table->timestamps();
});
```

### `database/migrations/xxxx_create_applications_table.php`
```php
Schema::create('applications', function (Blueprint $table) {
    $table->id();
    $table->foreignId('recruitment_id')->constrained()->onDelete('cascade');
    $table->string('name'); // 지원자 이름
    $table->string('email'); // 연락처
    $table->string('phone');
    $table->string('position'); // 지원 포지션
    $table->text('experience'); // 경력 사항
    $table->text('introduction'); // 자기소개
    $table->json('genres'); // 연주 가능 장르 배열
    $table->string('portfolio_url')->nullable(); // 포트폴리오 링크
    $table->json('preferred_dates')->nullable(); // 선호 오디션 일정 배열
    $table->enum('status', ['pending', 'reviewed', 'accepted', 'rejected'])->default('pending');
    $table->timestamps();
});
```

## 3. 모델 관계 설정

### `app/Models/Band.php`
```php
public function recruitments()
{
    return $this->hasMany(Recruitment::class);
}
```

### `app/Models/Recruitment.php`
```php
protected $casts = [
    'positions' => 'array',
    'deadline' => 'date',
];

public function band()
{
    return $this->belongsTo(Band::class);
}

public function applications()
{
    return $this->hasMany(Application::class);
}
```

### `app/Models/Application.php`
```php
protected $casts = [
    'genres' => 'array',
    'preferred_dates' => 'array',
];

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

## 4. 마이그레이션 실행

```bash
php artisan migrate
```

## 5. 시더 데이터 생성 (선택)

`database/seeders/DatabaseSeeder.php`에 샘플 데이터 추가:

```php
use App\Models\Band;
use App\Models\Recruitment;

Band::factory()->create([
    'name' => 'The Rolling Codes',
    'genre' => '록',
    'region' => '서울 홍대',
    'description' => '2000년대 브릿팝을 지향하는 4인조 밴드입니다.',
]);

// Recruitment 샘플 데이터도 추가
```

마이그레이션이 성공적으로 완료되면 다음 단계로 진행하세요.

# 모집 공고 목록 페이지 구현

메인 화면에서 모든 모집 공고를 카드 형태로 표시하고, 검색/필터링 기능을 추가합니다.

## 1. 컨트롤러 생성

```bash
php artisan make:controller RecruitmentController
```

### `app/Http/Controllers/RecruitmentController.php`

```php
use App\Models\Recruitment;
use Inertia\Inertia;

public function index(Request $request)
{
    $query = Recruitment::with('band')
        ->where('status', 'open')
        ->orderBy('created_at', 'desc');

    // 검색 필터
    if ($request->genre) {
        $query->whereHas('band', function($q) use ($request) {
            $q->where('genre', $request->genre);
        });
    }

    if ($request->region) {
        $query->whereHas('band', function($q) use ($request) {
            $q->where('region', 'like', '%' . $request->region . '%');
        });
    }

    if ($request->position) {
        $query->whereJsonContains('positions', $request->position);
    }

    // 정렬
    if ($request->sort === 'views') {
        $query->orderBy('views', 'desc');
    }

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

    return Inertia::render('Recruitments/Index', [
        'recruitments' => $recruitments,
        'filters' => $request->only(['genre', 'region', 'position', 'sort']),
    ]);
}
```

## 2. 라우트 설정

### `routes/web.php`

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

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

## 3. React 페이지 컴포넌트 생성

### `resources/js/Pages/Recruitments/Index.jsx`

```jsx
import { Head, Link, router } from '@inertiajs/react';
import { useState } from 'react';

export default function Index({ recruitments, filters }) {
    const [search, setSearch] = useState({
        genre: filters.genre || '',
        region: filters.region || '',
        position: filters.position || '',
        sort: filters.sort || 'latest',
    });

    const handleFilter = () => {
        router.get('/', search, { preserveState: true });
    };

    const positions = ['보컬', '기타', '베이스', '드럼', '키보드'];
    const genres = ['록', '재즈', '힙합', '인디', '메탈', 'R&B'];

    return (
        <>
            <Head title="밴드 멤버 모집" />
            
            <div className="min-h-screen bg-gray-50">
                {/* 헤더 */}
                <header className="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-12">
                    <div className="container mx-auto px-4">
                        <h1 className="text-4xl font-bold mb-2">🎸 밴드 멤버 모집</h1>
                        <p className="text-lg opacity-90">당신의 음악을 함께 만들 동료를 찾아보세요</p>
                    </div>
                </header>

                {/* 필터 섹션 */}
                <div className="bg-white shadow-sm border-b">
                    <div className="container mx-auto px-4 py-6">
                        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <select
                                value={search.genre}
                                onChange={(e) => setSearch({...search, genre: e.target.value})}
                                className="rounded-lg border-gray-300"
                            >
                                <option value="">모든 장르</option>
                                {genres.map(g => <option key={g} value={g}>{g}</option>)}
                            </select>

                            <input
                                type="text"
                                placeholder="지역 검색"
                                value={search.region}
                                onChange={(e) => setSearch({...search, region: e.target.value})}
                                className="rounded-lg border-gray-300"
                            />

                            <select
                                value={search.position}
                                onChange={(e) => setSearch({...search, position: e.target.value})}
                                className="rounded-lg border-gray-300"
                            >
                                <option value="">모든 포지션</option>
                                {positions.map(p => <option key={p} value={p}>{p}</option>)}
                            </select>

                            <button
                                onClick={handleFilter}
                                className="bg-purple-600 text-white rounded-lg px-6 py-2 hover:bg-purple-700"
                            >
                                검색
                            </button>
                        </div>
                    </div>
                </div>

                {/* 공고 목록 */}
                <div className="container mx-auto px-4 py-8">
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {recruitments.data.map((recruitment) => (
                            <Link
                                key={recruitment.id}
                                href={`/recruitments/${recruitment.id}`}
                                className="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow p-6 border-l-4 border-purple-500"
                            >
                                <div className="flex justify-between items-start mb-3">
                                    <h3 className="text-xl font-bold text-gray-800">
                                        {recruitment.band.name}
                                    </h3>
                                    <span className="text-sm text-gray-500">👁️ {recruitment.views}</span>
                                </div>

                                <div className="flex gap-2 mb-3">
                                    <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">
                                        {recruitment.band.genre}
                                    </span>
                                    <span className="px-3 py-1 bg-pink-100 text-pink-700 rounded-full text-sm">
                                        📍 {recruitment.band.region}
                                    </span>
                                </div>

                                <div className="mb-4">
                                    <p className="text-sm text-gray-600 mb-2">모집 포지션:</p>
                                    <div className="flex flex-wrap gap-2">
                                        {recruitment.positions.map((pos, i) => (
                                            <span key={i} className="px-2 py-1 bg-gray-100 text-gray-700 rounded text-sm">
                                                {pos}
                                            </span>
                                        ))}
                                    </div>
                                </div>

                                <div className="text-sm text-gray-500 flex justify-between">
                                    <span>⏰ {recruitment.practice_frequency}</span>
                                    <span>📅 마감: {new Date(recruitment.deadline).toLocaleDateString()}</span>
                                </div>
                            </Link>
                        ))}
                    </div>

                    {/* 페이지네이션 */}
                    <div className="mt-8 flex justify-center gap-2">
                        {recruitments.links.map((link, i) => (
                            <Link
                                key={i}
                                href={link.url}
                                className={`px-4 py-2 rounded ${
                                    link.active ? 'bg-purple-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'
                                }`}
                                dangerouslySetInnerHTML={{ __html: link.label }}
                            />
                        ))}
                    </div>
                </div>
            </div>
        </>
    );
}
```

브라우저에서 메인 페이지를 확인하고, 필터링이 작동하는지 테스트하세요. (데이터가 없다면 Tinker나 시더로 샘플 데이터를 추가하세요.)

# 공고 상세 페이지 및 지원서 제출 폼 구현

특정 모집 공고를 클릭하면 상세 정보를 보여주고, 하단에 지원서 제출 폼을 배치합니다.

## 1. 컨트롤러 메서드 추가

### `app/Http/Controllers/RecruitmentController.php`

```php
public function show(Recruitment $recruitment)
{
    // 조회수 증가
    $recruitment->increment('views');

    $recruitment->load('band', 'applications');

    return Inertia::render('Recruitments/Show', [
        'recruitment' => $recruitment,
        'applicationCount' => $recruitment->applications->count(),
    ]);
}
```

## 2. 라우트 추가

### `routes/web.php`

```php
Route::get('/recruitments/{recruitment}', [RecruitmentController::class, 'show'])->name('recruitments.show');
```

## 3. React 상세 페이지 컴포넌트

### `resources/js/Pages/Recruitments/Show.jsx`

```jsx
import { Head, Link, useForm } from '@inertiajs/react';
import { useState } from 'react';

export default function Show({ recruitment, applicationCount }) {
    const [showForm, setShowForm] = useState(false);

    const { data, setData, post, processing, errors, reset } = useForm({
        name: '',
        email: '',
        phone: '',
        position: '',
        experience: '',
        introduction: '',
        genres: [],
        portfolio_url: '',
        preferred_dates: [],
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        post(`/recruitments/${recruitment.id}/apply`, {
            onSuccess: () => {
                reset();
                setShowForm(false);
                alert('지원서가 성공적으로 제출되었습니다!');
            },
        });
    };

    const positionColors = {
        '보컬': 'bg-blue-500',
        '기타': 'bg-red-500',
        '베이스': 'bg-green-500',
        '드럼': 'bg-yellow-500',
        '키보드': 'bg-purple-500',
    };

    return (
        <>
            <Head title={`${recruitment.band.name} - 멤버 모집`} />

            <div className="min-h-screen bg-gray-50">
                {/* 헤더 */}
                <div className="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8">
                    <div className="container mx-auto px-4">
                        <Link href="/" className="text-sm hover:underline mb-2 block">← 목록으로</Link>
                        <h1 className="text-3xl font-bold">{recruitment.band.name}</h1>
                    </div>
                </div>

                <div className="container mx-auto px-4 py-8">
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        {/* 메인 컨텐츠 */}
                        <div className="lg:col-span-2 space-y-6">
                            {/* 밴드 정보 */}
                            <div className="bg-white rounded-lg shadow-md p-6">
                                <h2 className="text-2xl font-bold mb-4">밴드 소개</h2>
                                <div className="flex gap-3 mb-4">
                                    <span className="px-4 py-2 bg-purple-100 text-purple-700 rounded-full">
                                        {recruitment.band.genre}
                                    </span>
                                    <span className="px-4 py-2 bg-pink-100 text-pink-700 rounded-full">
                                        📍 {recruitment.band.region}
                                    </span>
                                </div>
                                <p className="text-gray-700 leading-relaxed">{recruitment.band.description}</p>
                            </div>

                            {/* 모집 상세 */}
                            <div className="bg-white rounded-lg shadow-md p-6">
                                <h2 className="text-2xl font-bold mb-4">모집 내용</h2>
                                <div className="mb-4">
                                    <h3 className="font-semibold text-gray-700 mb-2">모집 포지션</h3>
                                    <div className="flex flex-wrap gap-3">
                                        {recruitment.positions.map((pos, i) => (
                                            <span
                                                key={i}
                                                className={`px-4 py-2 ${positionColors[pos] || 'bg-gray-500'} text-white rounded-lg font-semibold`}
                                            >
                                                {pos}
                                            </span>
                                        ))}
                                    </div>
                                </div>

                                <div className="space-y-3 text-gray-700">
                                    <p><strong>연습 빈도:</strong> {recruitment.practice_frequency}</p>
                                    <p><strong>모집 마감:</strong> {new Date(recruitment.deadline).toLocaleDateString()}</p>
                                    <div>
                                        <strong>상세 내용:</strong>
                                        <p className="mt-2 whitespace-pre-wrap">{recruitment.details}</p>
                                    </div>
                                </div>
                            </div>

                            {/* 지원 버튼 */}
                            {!showForm && (
                                <button
                                    onClick={() => setShowForm(true)}
                                    className="w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white py-4 rounded-lg font-bold text-lg hover:opacity-90 transition"
                                >
                                    🎸 지원하기
                                </button>
                            )}

                            {/* 지원서 폼 */}
                            {showForm && (
                                <div className="bg-white rounded-lg shadow-md p-6">
                                    <h2 className="text-2xl font-bold mb-6">지원서 작성</h2>
                                    <form onSubmit={handleSubmit} className="space-y-4">
                                        <div>
                                            <label className="block text-sm font-semibold mb-1">이름 *</label>
                                            <input
                                                type="text"
                                                value={data.name}
                                                onChange={(e) => setData('name', e.target.value)}
                                                className="w-full rounded-lg border-gray-300"
                                                required
                                            />
                                            {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
                                        </div>

                                        <div className="grid grid-cols-2 gap-4">
                                            <div>
                                                <label className="block text-sm font-semibold mb-1">이메일 *</label>
                                                <input
                                                    type="email"
                                                    value={data.email}
                                                    onChange={(e) => setData('email', e.target.value)}
                                                    className="w-full rounded-lg border-gray-300"
                                                    required
                                                />
                                            </div>
                                            <div>
                                                <label className="block text-sm font-semibold mb-1">연락처 *</label>
                                                <input
                                                    type="tel"
                                                    value={data.phone}
                                                    onChange={(e) => setData('phone', e.target.value)}
                                                    className="w-full rounded-lg border-gray-300"
                                                    required
                                                />
                                            </div>
                                        </div>

                                        <div>
                                            <label className="block text-sm font-semibold mb-1">지원 포지션 *</label>
                                            <select
                                                value={data.position}
                                                onChange={(e) => setData('position', e.target.value)}
                                                className="w-full rounded-lg border-gray-300"
                                                required
                                            >
                                                <option value="">선택하세요</option>
                                                {recruitment.positions.map((pos, i) => (
                                                    <option key={i} value={pos}>{pos}</option>
                                                ))}
                                            </select>
                                        </div>

                                        <div>
                                            <label className="block text-sm font-semibold mb-1">경력 사항 *</label>
                                            <textarea
                                                value={data.experience}
                                                onChange={(e) => setData('experience', e.target.value)}
                                                className="w-full rounded-lg border-gray-300"
                                                rows="3"
                                                placeholder="연주 경력, 이전 밴드 활동 등"
                                                required
                                            />
                                        </div>

                                        <div>
                                            <label className="block text-sm font-semibold mb-1">자기소개 *</label>
                                            <textarea
                                                value={data.introduction}
                                                onChange={(e) => setData('introduction', e.target.value)}
                                                className="w-full rounded-lg border-gray-300"
                                                rows="4"
                                                placeholder="음악 스타일, 지향점, 각오 등"
                                                required
                                            />
                                        </div>

                                        <div>
                                            <label className="block text-sm font-semibold mb-1">포트폴리오 링크</label>
                                            <input
                                                type="url"
                                                value={data.portfolio_url}
                                                onChange={(e) => setData('portfolio_url', e.target.value)}
                                                className="w-full rounded-lg border-gray-300"
                                                placeholder="유튜브, 사운드클라우드 등"
                                            />
                                        </div>

                                        <div className="flex gap-4">
                                            <button
                                                type="submit"
                                                disabled={processing}
                                                className="flex-1 bg-purple-600 text-white py-3 rounded-lg font-semibold hover:bg-purple-700 disabled:opacity-50"
                                            >
                                                {processing ? '제출 중...' : '지원서 제출'}
                                            </button>
                                            <button
                                                type="button"
                                                onClick={() => setShowForm(false)}
                                                className="px-6 py-3 border border-gray-300 rounded-lg hover:bg-gray-50"
                                            >
                                                취소
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            )}
                        </div>

                        {/* 사이드바 */}
                        <div className="space-y-6">
                            <div className="bg-white rounded-lg shadow-md p-6">
                                <h3 className="font-bold text-lg mb-3">📊 지원 현황</h3>
                                <p className="text-3xl font-bold text-purple-600">{applicationCount}명</p>
                                <p className="text-sm text-gray-500 mt-1">현재까지 지원자 수</p>
                            </div>

                            <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg p-6">
                                <h3 className="font-bold text-lg mb-3">💡 지원 팁</h3>
                                <ul className="text-sm text-gray-700 space-y-2">
                                    <li>✓ 포트폴리오 링크를 꼭 첨부하세요</li>
                                    <li>✓ 밴드의 음악 스타일을 미리 확인하세요</li>
                                    <li>✓ 진솔한 자기소개가 중요합니다</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}
```

다음 단계에서 지원서 제출 처리 로직을 구현하겠습니다.

# 지원서 제출 처리 및 유효성 검사

지원서 폼 제출을 처리하고, Laravel의 Form Request를 활용하여 유효성 검사를 구현합니다.

## 1. Form Request 생성

```bash
php artisan make:request StoreApplicationRequest
```

### `app/Http/Requests/StoreApplicationRequest.php`

```php
namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreApplicationRequest extends FormRequest
{
    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        return [
            'name' => 'required|string|max:100',
            'email' => 'required|email|max:255',
            'phone' => 'required|string|max:20',
            'position' => 'required|string',
            'experience' => 'required|string|min:50',
            'introduction' => 'required|string|min:100',
            'genres' => 'nullable|array',
            'portfolio_url' => 'nullable|url',
            'preferred_dates' => 'nullable|array',
        ];
    }

    public function messages()
    {
        return [
            'name.required' => '이름을 입력해주세요.',
            'email.required' => '이메일을 입력해주세요.',
            'email.email' => '올바른 이메일 형식이 아닙니다.',
            'phone.required' => '연락처를 입력해주세요.',
            'position.required' => '지원 포지션을 선택해주세요.',
            'experience.required' => '경력 사항을 입력해주세요.',
            'experience.min' => '경력 사항은 최소 50자 이상 작성해주세요.',
            'introduction.required' => '자기소개를 입력해주세요.',
            'introduction.min' => '자기소개는 최소 100자 이상 작성해주세요.',
            'portfolio_url.url' => '올바른 URL 형식이 아닙니다.',
        ];
    }
}
```

## 2. Application 컨트롤러 생성

```bash
php artisan make:controller ApplicationController
```

### `app/Http/Controllers/ApplicationController.php`

```php
namespace App\Http\Controllers;

use App\Models\Recruitment;
use App\Models\Application;
use App\Http\Requests\StoreApplicationRequest;
use Illuminate\Http\Request;

class ApplicationController extends Controller
{
    public function store(StoreApplicationRequest $request, Recruitment $recruitment)
    {
        // 마감일 체크
        if ($recruitment->deadline < now()) {
            return back()->withErrors(['error' => '이미 마감된 공고입니다.']);
        }

        // 지원서 생성
        $application = $recruitment->applications()->create([
            'name' => $request->name,
            'email' => $request->email,
            'phone' => $request->phone,
            'position' => $request->position,
            'experience' => $request->experience,
            'introduction' => $request->introduction,
            'genres' => $request->genres ?? [],
            'portfolio_url' => $request->portfolio_url,
            'preferred_dates' => $request->preferred_dates ?? [],
            'status' => 'pending',
        ]);

        // 이메일 알림 시뮬레이션 (실제 발송은 Mailtrap 등으로 구현 가능)
        \Log::info('지원서 제출 알림', [
            'recruitment_id' => $recruitment->id,
            'applicant' => $request->name,
            'email' => $request->email,
        ]);

        return redirect()->route('recruitments.show', $recruitment)
            ->with('success', '지원서가 성공적으로 제출되었습니다! 곧 연락드리겠습니다.');
    }
}
```

## 3. 라우트 추가

### `routes/web.php`

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

Route::post('/recruitments/{recruitment}/apply', [ApplicationController::class, 'store'])
    ->name('applications.store');
```

## 4. Show 페이지에 성공 메시지 표시

### `resources/js/Pages/Recruitments/Show.jsx` 상단에 추가

```jsx
import { Head, Link, useForm, usePage } from '@inertiajs/react';

export default function Show({ recruitment, applicationCount }) {
    const { flash } = usePage().props;
    
    // ... 기존 코드 ...

    return (
        <>
            {/* ... 기존 헤더 ... */}

            <div className="container mx-auto px-4 py-8">
                {/* 성공 메시지 */}
                {flash.success && (
                    <div className="bg-green-100 border border-green-400 text-green-700 px-6 py-4 rounded-lg mb-6">
                        ✓ {flash.success}
                    </div>
                )}

                {/* 에러 메시지 */}
                {flash.error && (
                    <div className="bg-red-100 border border-red-400 text-red-700 px-6 py-4 rounded-lg mb-6">
                        ✗ {flash.error}
                    </div>
                )}

                {/* ... 기존 컨텐츠 ... */}
            </div>
        </>
    );
}
```

## 5. 테스트

1. 브라우저에서 공고 상세 페이지 접속
2. '지원하기' 버튼 클릭
3. 폼 작성 (유효성 검사 테스트: 이메일 형식 오류, 최소 글자 수 미달 등)
4. 제출 후 성공 메시지 확인
5. `storage/logs/laravel.log`에서 지원서 제출 로그 확인

다음 단계에서 지원서 관리 대시보드를 구현합니다.

# 지원서 관리 대시보드 구현

밴드 운영자가 제출된 지원서를 확인하고, 상태를 변경(검토중/합격/불합격)할 수 있는 관리 페이지를 만듭니다.

## 1. 컨트롤러 메서드 추가

### `app/Http/Controllers/RecruitmentController.php`

```php
public function applications(Recruitment $recruitment)
{
    $recruitment->load(['band', 'applications' => function($query) {
        $query->latest();
    }]);

    // 포지션별 통계
    $stats = $recruitment->applications
        ->groupBy('position')
        ->map(fn($group) => $group->count());

    return Inertia::render('Recruitments/Applications', [
        'recruitment' => $recruitment,
        'applications' => $recruitment->applications,
        'stats' => $stats,
    ]);
}
```

### `app/Http/Controllers/ApplicationController.php`에 추가

```php
public function updateStatus(Request $request, Application $application)
{
    $request->validate([
        'status' => 'required|in:pending,reviewed,accepted,rejected',
    ]);

    $application->update([
        'status' => $request->status,
    ]);

    return back()->with('success', '지원 상태가 업데이트되었습니다.');
}
```

## 2. 라우트 추가

### `routes/web.php`

```php
Route::get('/recruitments/{recruitment}/applications', [RecruitmentController::class, 'applications'])
    ->name('recruitments.applications');

Route::patch('/applications/{application}/status', [ApplicationController::class, 'updateStatus'])
    ->name('applications.update-status');
```

## 3. React 지원서 관리 페이지

### `resources/js/Pages/Recruitments/Applications.jsx`

```jsx
import { Head, Link, router, usePage } from '@inertiajs/react';
import { useState } from 'react';

export default function Applications({ recruitment, applications, stats }) {
    const { flash } = usePage().props;
    const [filter, setFilter] = useState('all');
    const [selectedApp, setSelectedApp] = useState(null);

    const statusColors = {
        pending: 'bg-yellow-100 text-yellow-800',
        reviewed: 'bg-blue-100 text-blue-800',
        accepted: 'bg-green-100 text-green-800',
        rejected: 'bg-red-100 text-red-800',
    };

    const statusLabels = {
        pending: '검토 대기',
        reviewed: '검토 완료',
        accepted: '✓ 합격',
        rejected: '✗ 불합격',
    };

    const filteredApplications = filter === 'all'
        ? applications
        : applications.filter(app => app.status === filter);

    const handleStatusChange = (applicationId, newStatus) => {
        if (confirm(`상태를 "${statusLabels[newStatus]}"로 변경하시겠습니까?`)) {
            router.patch(`/applications/${applicationId}/status`, {
                status: newStatus,
            }, {
                preserveScroll: true,
            });
        }
    };

    return (
        <>
            <Head title={`${recruitment.band.name} - 지원서 관리`} />

            <div className="min-h-screen bg-gray-50">
                {/* 헤더 */}
                <div className="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-8">
                    <div className="container mx-auto px-4">
                        <Link href={`/recruitments/${recruitment.id}`} className="text-sm hover:underline mb-2 block">
                            ← 공고 상세로
                        </Link>
                        <h1 className="text-3xl font-bold">{recruitment.band.name} - 지원서 관리</h1>
                        <p className="text-sm opacity-90 mt-1">총 {applications.length}명의 지원자</p>
                    </div>
                </div>

                <div className="container mx-auto px-4 py-8">
                    {/* 성공 메시지 */}
                    {flash.success && (
                        <div className="bg-green-100 border border-green-400 text-green-700 px-6 py-4 rounded-lg mb-6">
                            ✓ {flash.success}
                        </div>
                    )}

                    {/* 통계 카드 */}
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
                        <div className="bg-white rounded-lg shadow p-6">
                            <p className="text-sm text-gray-600">전체 지원자</p>
                            <p className="text-3xl font-bold text-purple-600">{applications.length}</p>
                        </div>
                        <div className="bg-white rounded-lg shadow p-6">
                            <p className="text-sm text-gray-600">검토 대기</p>
                            <p className="text-3xl font-bold text-yellow-600">
                                {applications.filter(a => a.status === 'pending').length}
                            </p>
                        </div>
                        <div className="bg-white rounded-lg shadow p-6">
                            <p className="text-sm text-gray-600">합격</p>
                            <p className="text-3xl font-bold text-green-600">
                                {applications.filter(a => a.status === 'accepted').length}
                            </p>
                        </div>
                        <div className="bg-white rounded-lg shadow p-6">
                            <p className="text-sm text-gray-600">불합격</p>
                            <p className="text-3xl font-bold text-red-600">
                                {applications.filter(a => a.status === 'rejected').length}
                            </p>
                        </div>
                    </div>

                    {/* 포지션별 통계 */}
                    <div className="bg-white rounded-lg shadow p-6 mb-8">
                        <h2 className="text-xl font-bold mb-4">📊 포지션별 지원 현황</h2>
                        <div className="flex flex-wrap gap-4">
                            {Object.entries(stats).map(([position, count]) => (
                                <div key={position} className="px-4 py-2 bg-purple-100 text-purple-700 rounded-lg">
                                    <span className="font-semibold">{position}</span>: {count}명
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* 필터 버튼 */}
                    <div className="bg-white rounded-lg shadow p-4 mb-6">
                        <div className="flex gap-2">
                            {['all', 'pending', 'reviewed', 'accepted', 'rejected'].map(status => (
                                <button
                                    key={status}
                                    onClick={() => setFilter(status)}
                                    className={`px-4 py-2 rounded-lg transition ${
                                        filter === status
                                            ? 'bg-purple-600 text-white'
                                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                                    }`}
                                >
                                    {status === 'all' ? '전체' : statusLabels[status]}
                                </button>
                            ))}
                        </div>
                    </div>

                    {/* 지원서 목록 */}
                    <div className="space-y-4">
                        {filteredApplications.length === 0 ? (
                            <div className="bg-white rounded-lg shadow p-12 text-center text-gray-500">
                                지원서가 없습니다.
                            </div>
                        ) : (
                            filteredApplications.map((app) => (
                                <div key={app.id} className="bg-white rounded-lg shadow hover:shadow-lg transition p-6">
                                    <div className="flex justify-between items-start mb-4">
                                        <div>
                                            <h3 className="text-xl font-bold text-gray-800">{app.name}</h3>
                                            <p className="text-sm text-gray-600">
                                                {app.email} | {app.phone}
                                            </p>
                                        </div>
                                        <div className="flex gap-2 items-center">
                                            <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full font-semibold">
                                                {app.position}
                                            </span>
                                            <span className={`px-3 py-1 rounded-full text-sm font-semibold ${statusColors[app.status]}`}>
                                                {statusLabels[app.status]}
                                            </span>
                                        </div>
                                    </div>

                                    <div className="mb-4 space-y-2">
                                        <div>
                                            <p className="text-sm font-semibold text-gray-700">경력 사항:</p>
                                            <p className="text-gray-600 text-sm whitespace-pre-wrap">{app.experience}</p>
                                        </div>
                                        <div>
                                            <p className="text-sm font-semibold text-gray-700">자기소개:</p>
                                            <p className="text-gray-600 text-sm whitespace-pre-wrap">{app.introduction}</p>
                                        </div>
                                        {app.portfolio_url && (
                                            <div>
                                                <p className="text-sm font-semibold text-gray-700">포트폴리오:</p>
                                                <a
                                                    href={app.portfolio_url}
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    className="text-purple-600 hover:underline text-sm"
                                                >
                                                    {app.portfolio_url}
                                                </a>
                                            </div>
                                        )}
                                    </div>

                                    {/* 상태 변경 버튼 */}
                                    <div className="flex gap-2 pt-4 border-t">
                                        <button
                                            onClick={() => handleStatusChange(app.id, 'reviewed')}
                                            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm"
                                        >
                                            검토 완료
                                        </button>
                                        <button
                                            onClick={() => handleStatusChange(app.id, 'accepted')}
                                            className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 text-sm"
                                        >
                                            합격
                                        </button>
                                        <button
                                            onClick={() => handleStatusChange(app.id, 'rejected')}
                                            className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 text-sm"
                                        >
                                            불합격
                                        </button>
                                    </div>

                                    <p className="text-xs text-gray-400 mt-3">
                                        지원일: {new Date(app.created_at).toLocaleDateString()}
                                    </p>
                                </div>
                            ))
                        )}
                    </div>
                </div>
            </div>
        </>
    );
}
```

## 4. Show 페이지에 관리 버튼 추가

### `resources/js/Pages/Recruitments/Show.jsx` 사이드바에 추가

```jsx
{/* 사이드바 내부에 추가 */}
<Link
    href={`/recruitments/${recruitment.id}/applications`}
    className="block w-full bg-purple-600 text-white text-center py-3 rounded-lg font-semibold hover:bg-purple-700"
>
    📋 지원서 관리
</Link>
```

브라우저에서 지원서 관리 페이지에 접속하여 필터링, 상태 변경 기능을 테스트하세요. 이제 완성된 풀스택 애플리케이션입니다!