mkdir hair-salon-style-booking && cd hair-salon-style-booking

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

다음 명령을 실행하여 Laravel Breeze React+Inertia starter kit으로 프로젝트를 초기화하세요:

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

프로젝트 구조를 확인하고, `resources/js/Pages` 폴더에 React 컴포넌트가 있는지 확인하세요. `.env` 파일에서 DB_CONNECTION을 sqlite로 설정하고, `database/database.sqlite` 파일을 생성하세요.

마이그레이션을 실행하여 기본 테이블을 생성하세요:

```bash
php artisan migrate
```

프로젝트가 정상적으로 실행되는지 확인하세요:

```bash
php artisan serve
```

ブラウザ에서 http://localhost:8000 접속 시 Laravel 기본 페이지가 보이면 성공입니다.

헤어샵 스타일북 데이터베이스 스키마를 설계하고 마이그레이션을 생성합니다.

다음 테이블을 생성하세요:

1. **designers** 테이블 (디자이너 정보)
   - id (PK)
   - name (디자이너 이름)
   - bio (자기소개)
   - specialty (전문 분야: 커트/펌/염색 등)
   - experience_years (경력 년수)
   - profile_image (프로필 사진 경로)
   - timestamps

2. **styles** 테이블 (헤어 스타일 포트폴리오)
   - id (PK)
   - designer_id (FK -> designers)
   - title (스타일 제목)
   - description (시술 설명)
   - category (카테고리: 커트/펌/염색/클리닉)
   - price (가격)
   - duration_minutes (시술 소요 시간)
   - image_path (대표 이미지 경로)
   - timestamps

3. **bookings** 테이블 (예약 정보)
   - id (PK)
   - style_id (FK -> styles)
   - designer_id (FK -> designers)
   - customer_name (고객 이름)
   - customer_phone (고객 전화번호)
   - customer_email (고객 이메일)
   - booking_date (예약 날짜)
   - booking_time (예약 시간)
   - status (상태: pending/confirmed/completed/cancelled)
   - note (요청 사항)
   - timestamps

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

```bash
php artisan make:migration create_designers_table
php artisan make:migration create_styles_table
php artisan make:migration create_bookings_table
```

각 마이그레이션 파일의 `up()` 메서드에 위 스키마를 반영하세요. 외래키 제약조건도 추가하세요 (onDelete('cascade')).

마이그레이션 실행:

```bash
php artisan migrate
```

Eloquent 모델도 생성하세요:

```bash
php artisan make:model Designer
php artisan make:model Style
php artisan make:model Booking
```

각 모델에 관계를 정의하세요:
- Designer hasMany Styles, hasMany Bookings
- Style belongsTo Designer, hasMany Bookings
- Booking belongsTo Style, belongsTo Designer

시더(Seeder)를 사용하여 샘플 디자이너와 스타일 데이터를 생성합니다.

다음 명령으로 시더 파일을 생성하세요:

```bash
php artisan make:seeder DesignerSeeder
php artisan make:seeder StyleSeeder
```

**DesignerSeeder**에서 3명의 디자이너를 생성하세요 (이름, 자기소개, 전문 분야, 경력, 프로필 이미지 더미 경로).

**StyleSeeder**에서 각 디자이너당 4~5개의 헤어 스타일을 생성하세요 (제목, 설명, 카테고리, 가격, 시술 시간, 이미지 더미 경로). 카테고리는 '커트', '펌', '염색', '클리닉' 중 랜덤하게 배정하세요.

`database/seeders/DatabaseSeeder.php`에서 두 시더를 호출하도록 설정하세요:

```php
public function run()
{
    $this->call([
        DesignerSeeder::class,
        StyleSeeder::class,
    ]);
}
```

시더 실행:

```bash
php artisan db:seed
```

데이터가 정상적으로 삽입되었는지 확인하세요 (Tinker 또는 DB 브라우저 사용).

헤어 스타일 포트폴리오 갤러리 페이지를 구현합니다.

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

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

Route::get('/', [StyleController::class, 'index'])->name('styles.index');
Route::get('/styles/{style}', [StyleController::class, 'show'])->name('styles.show');
```

**컨트롤러 생성**:

```bash
php artisan make:controller StyleController
```

**StyleController**의 `index()` 메서드:
- 모든 스타일을 페이지네이션으로 가져오기 (with 'designer' eager loading)
- 카테고리 필터링 쿼리 파라미터 지원 (?category=커트)
- Inertia::render('Styles/Index', ['styles' => $styles, 'categories' => ['전체', '커트', '펌', '염색', '클리닉']])로 데이터 전달

**StyleController**의 `show()` 메서드:
- 특정 스타일 상세 정보 가져오기 (with 'designer')
- Inertia::render('Styles/Show', ['style' => $style])로 데이터 전달

**React 컴포넌트 생성** (`resources/js/Pages/Styles/Index.jsx`):
- Tailwind CSS로 그리드 레이아웃 (모바일: 1열, 태블릿: 2열, 데스크톱: 3열)
- 각 스타일 카드: 이미지, 제목, 디자이너 이름, 카테고리 배지, 가격, 시술 시간 표시
- 카테고리 필터 버튼 (전체/커트/펌/염색/클리닉)
- 카드 클릭 시 상세 페이지로 이동 (Inertia Link 사용)

**React 컴포넌트 생성** (`resources/js/Pages/Styles/Show.jsx`):
- 스타일 대표 이미지 크게 표시
- 제목, 디자이너 이름, 카테고리, 가격, 시술 시간, 상세 설명 표시
- "예약하기" 버튼 (다음 단계에서 구현)
- "목록으로" 버튼 (Inertia Link로 index 페이지 이동)

더미 이미지는 https://via.placeholder.com/400x500?text=Hair+Style 같은 플레이스홀더 사용.

브라우저에서 http://localhost:8000 접속 시 스타일 갤러리가 보이고, 카테고리 필터링 및 상세 페이지 이동이 작동하는지 확인하세요.

예약 시스템을 구현합니다.

**라우트 추가** (`routes/web.php`):

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

Route::get('/styles/{style}/book', [BookingController::class, 'create'])->name('bookings.create');
Route::post('/bookings', [BookingController::class, 'store'])->name('bookings.store');
Route::get('/bookings', [BookingController::class, 'index'])->name('bookings.index');
```

**컨트롤러 생성**:

```bash
php artisan make:controller BookingController
```

**BookingController**의 `create()` 메서드:
- 특정 스타일 정보 가져오기 (with 'designer')
- 예약 가능한 날짜/시간대 배열 생성 (예: 오늘부터 30일간, 09:00~18:00, 1시간 단위)
- Inertia::render('Bookings/Create', ['style' => $style, 'availableDates' => $dates, 'availableTimes' => $times])로 데이터 전달

**BookingController**의 `store()` 메서드:
- 예약 폼 데이터 검증 (customer_name, customer_phone, customer_email, booking_date, booking_time 필수)
- Booking 모델 생성 (status는 'pending'으로 초기화)
- 성공 메시지와 함께 예약 목록 페이지로 리다이렉트

**BookingController**의 `index()` 메서드:
- 모든 예약 목록 가져오기 (with 'style', 'designer', 최신순 정렬)
- Inertia::render('Bookings/Index', ['bookings' => $bookings])로 데이터 전달

**React 컴포넌트 생성** (`resources/js/Pages/Bookings/Create.jsx`):
- 스타일 정보 요약 표시 (이미지, 제목, 가격, 시술 시간)
- 예약 폼: 고객 이름, 전화번호, 이메일 입력 필드
- 날짜 선택 (드롭다운 또는 date picker)
- 시간대 선택 (버튼 그리드 형태로 시간대 표시)
- 요청 사항 텍스트 영역
- "예약 신청" 버튼 (Inertia useForm 훅 사용하여 POST 요청)
- 에러 메시지 표시 (validation errors)

**React 컴포넌트 생성** (`resources/js/Pages/Bookings/Index.jsx`):
- 예약 목록을 테이블 또는 카드 형태로 표시
- 각 예약: 스타일 제목, 디자이너 이름, 고객 이름, 예약 날짜/시간, 상태 배지 (대기/확정/완료/취소)
- 상태별 색상 구분 (pending: 노란색, confirmed: 파란색, completed: 초록색, cancelled: 회색)

**Styles/Show.jsx 수정**:
- "예약하기" 버튼에 Inertia Link 연결 (href={route('bookings.create', style.id)})

브라우저에서 스타일 상세 페이지 → 예약하기 → 폼 작성 → 예약 목록 확인 플로우가 작동하는지 테스트하세요.

디자이너 프로필 페이지와 이미지 업로드 기능을 구현합니다.

**라우트 추가** (`routes/web.php`):

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

Route::get('/designers/{designer}', [DesignerController::class, 'show'])->name('designers.show');
Route::post('/styles', [StyleController::class, 'store'])->name('styles.store')->middleware('auth');
```

**컨트롤러 생성**:

```bash
php artisan make:controller DesignerController
```

**DesignerController**의 `show()` 메서드:
- 특정 디자이너 정보 가져오기
- 해당 디자이너의 스타일 목록 가져오기 (with 'styles')
- 평균 리뷰 평점 계산 (보너스 기능이므로 일단 더미 값 4.5로 설정)
- Inertia::render('Designers/Show', ['designer' => $designer, 'styles' => $styles])로 데이터 전달

**React 컴포넌트 생성** (`resources/js/Pages/Designers/Show.jsx`):
- 디자이너 프로필 이미지, 이름, 자기소개, 전문 분야, 경력, 평균 평점 표시
- 해당 디자이너의 스타일 포트폴리오 그리드 (Index와 유사한 레이아웃)
- 각 스타일 카드 클릭 시 상세 페이지로 이동

**StyleController**의 `store()` 메서드 (이미지 업로드):
- 인증된 사용자만 접근 가능 (middleware('auth'))
- 스타일 등록 폼 데이터 검증 (title, description, category, price, duration_minutes, image 필수)
- 이미지 업로드 처리:
  ```php
  $imagePath = $request->file('image')->store('styles', 'public');
  ```
- Style 모델 생성 (designer_id는 현재 로그인한 사용자의 designer_id로 설정, 또는 고정값 사용)
- 성공 메시지와 함께 스타일 목록 페이지로 리다이렉트

**React 컴포넌트 생성** (`resources/js/Pages/Styles/Create.jsx`):
- 스타일 등록 폼: 제목, 설명, 카테고리(드롭다운), 가격, 시술 시간, 이미지 파일 업로드 필드
- Inertia useForm 훅 사용하여 POST 요청 (multipart/form-data)
- "등록하기" 버튼

**라우트 추가**:

```php
Route::get('/styles/create', [StyleController::class, 'create'])->name('styles.create')->middleware('auth');
```

**StyleController**의 `create()` 메서드:
- Inertia::render('Styles/Create')로 빈 폼 페이지 렌더링

**Styles/Index.jsx 수정**:
- 상단에 "스타일 등록" 버튼 추가 (Inertia Link, auth 사용자만 보이도록 조건부 렌더링)

**심볼릭 링크 생성** (업로드된 이미지 접근 가능하도록):

```bash
php artisan storage:link
```

브라우저에서 스타일 등록 → 이미지 업로드 → 갤러리에 새 스타일 표시 → 디자이너 프로필 페이지 확인 플로우를 테스트하세요.