🎵 인디 음반 프리오더 플랫폼 - 한정판 바이닐 예약 판매

mkdir indie-vinyl-preorder-platform && cd indie-vinyl-preorder-platform

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

다음 명령어로 Laravel Breeze (React + Inertia) starter kit를 설치하세요:

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

이후 `.env` 파일에서 데이터베이스를 SQLite로 설정:

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

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

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

이제 `php artisan serve`로 서버를 실행하고 `http://localhost:8000`에서 Laravel Breeze 기본 화면이 나오는지 확인하세요.

완료되면 다음 단계로 진행합니다.

이제 데이터베이스 스키마를 설계합니다. 다음 3개 테이블을 생성하세요:

1. **albums** 테이블: 음반 정보
   - id (primary key)
   - title (앨범명)
   - artist (아티스트명)
   - description (앨범 소개, text)
   - cover_image (커버 이미지 경로)
   - price (가격, decimal 10,2)
   - stock (재고 수량, integer)
   - preorder_deadline (프리오더 마감일, date)
   - release_date (정식 발매일, date)
   - tracklist (트랙리스트 JSON, text)
   - streaming_links (스트리밍 링크 JSON, text)
   - timestamps

2. **orders** 테이블: 주문 정보
   - id (primary key)
   - order_number (주문 번호, unique)
   - customer_name (구매자명)
   - customer_email (이메일)
   - shipping_address (배송지, text)
   - total_amount (총 금액, decimal 10,2)
   - status (주문 상태: pending, confirmed, shipped, delivered)
   - timestamps

3. **order_items** 테이블: 주문 상세 (다대다 관계)
   - id (primary key)
   - order_id (foreign key -> orders.id)
   - album_id (foreign key -> albums.id)
   - quantity (수량, integer)
   - unit_price (단가, decimal 10,2)
   - options (옵션 JSON, text - 예: 바이닐 컬러)
   - timestamps

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

```bash
php artisan make:migration create_albums_table
php artisan make:migration create_orders_table
php artisan make:migration create_order_items_table
```

각 마이그레이션 파일에 위 스키마를 구현하고 `php artisan migrate`로 실행하세요.

또한 Album, Order, OrderItem 모델을 생성하고 관계를 설정하세요:

```bash
php artisan make:model Album
php artisan make:model Order
php artisan make:model OrderItem
```

- Album 모델: `hasMany(OrderItem::class)`
- Order 모델: `hasMany(OrderItem::class)`
- OrderItem 모델: `belongsTo(Album::class)`, `belongsTo(Order::class)`

Seeder로 샘플 앨범 데이터 3~5개를 생성하세요 (AlbumSeeder 생성 후 `php artisan db:seed`).

음반 목록 페이지를 구현합니다. 다음 작업을 수행하세요:

1. **라우트 설정** (`routes/web.php`):
   - `GET /albums` -> `AlbumController@index` (음반 목록)
   - `GET /albums/{id}` -> `AlbumController@show` (음반 상세)

2. **컨트롤러 생성** (`php artisan make:controller AlbumController`):
   - `index()`: 프리오더 마감일이 지나지 않은 앨범만 필터링하여 `Inertia::render('Albums/Index', ['albums' => $albums])`로 전달
   - `show($id)`: 특정 앨범 상세 정보를 `Inertia::render('Albums/Show', ['album' => $album])`로 전달

3. **React 컴포넌트 생성**:
   - `resources/js/Pages/Albums/Index.jsx`: 앨범 카드 그리드 레이아웃
     - 각 카드: 앨범 커버 이미지, 아티스트명, 앨범명, 가격, 남은 수량, "상세 보기" 버튼
     - 재고가 0이면 "매진" 배지 표시 (빨간색 배경)
     - Tailwind CSS로 반응형 그리드 (모바일 1열, 태블릿 2열, 데스크탑 3열)
   - `resources/js/Pages/Albums/Show.jsx`: 앨범 상세 페이지 (다음 단계에서 구현)

4. **네비게이션 추가**: `resources/js/Layouts/AuthenticatedLayout.jsx` (또는 GuestLayout)에 "음반 목록" 링크 추가

5. **이미지 업로드 준비**:
   - `php artisan storage:link`로 심볼릭 링크 생성
   - Seeder에서 샘플 이미지 경로를 `storage/app/public/covers/sample.jpg` 형태로 설정

완료 후 `http://localhost:8000/albums`에서 앨범 목록이 표시되는지 확인하세요.

음반 상세 페이지와 프리오더 신청 폼을 구현합니다:

1. **React 컴포넌트 작성** (`resources/js/Pages/Albums/Show.jsx`):
   - 레이아웃: 왼쪽에 큰 앨범 커버 이미지, 오른쪽에 정보 및 주문 폼
   - 표시 정보:
     - 앨범명, 아티스트명, 가격, 프리오더 마감일 카운트다운 (react-countdown 라이브러리 활용)
     - 앨범 소개 (description)
     - 트랙리스트 (tracklist JSON 파싱하여 리스트 표시)
     - 스트리밍 링크 버튼 (Spotify, Apple Music 등)
   - **주문 폼**:
     - 구매자명 (input)
     - 이메일 (input)
     - 배송지 (textarea)
     - 수량 선택 (number input, 최소 1, 최대 재고 수량)
     - 옵션 선택 (select - 예: "블랙 바이닐", "투명 바이닐", "CD")
     - "프리오더 신청" 버튼 (재고 0이면 비활성화)
   - 폼 제출 시 `Inertia.post('/orders', formData)`로 주문 생성

2. **라우트 추가** (`routes/web.php`):
   - `POST /orders` -> `OrderController@store`

3. **컨트롤러 생성** (`php artisan make:controller OrderController`):
   - `store(Request $request)`: 
     - 유효성 검사 (customer_name, customer_email, shipping_address, album_id, quantity 필수)
     - 재고 확인 (요청 수량이 재고보다 많으면 에러)
     - DB 트랜잭션으로 주문 생성:
       - Order 레코드 생성 (order_number는 "ORD-" + 날짜 + 일련번호 형식)
       - OrderItem 레코드 생성
       - Album 재고 감소 (`stock -= quantity`)
     - 성공 시 주문 번호와 함께 `/orders/{order_number}` 페이지로 리다이렉트

4. **에러 처리**: React 컴포넌트에서 Inertia 에러를 표시 (`usePage().props.errors` 활용)

완료 후 음반 상세 페이지에서 주문 폼이 작동하는지 테스트하세요.

주문 확인 페이지와 주문 조회 기능을 구현합니다:

1. **라우트 추가** (`routes/web.php`):
   - `GET /orders/{order_number}` -> `OrderController@show`

2. **컨트롤러 메서드 추가** (`OrderController`):
   - `show($orderNumber)`: 
     - Order 모델에서 `where('order_number', $orderNumber)->with('orderItems.album')->firstOrFail()`로 주문 정보 조회
     - `Inertia::render('Orders/Show', ['order' => $order])`로 전달

3. **React 컴포넌트 작성** (`resources/js/Pages/Orders/Show.jsx`):
   - 주문 완료 메시지 ("프리오더 신청이 완료되었습니다!" + 축하 아이콘)
   - 주문 정보 카드:
     - 주문 번호 (굵은 글씨)
     - 구매자명, 이메일, 배송지
     - 주문한 앨범 목록 (앨범명, 수량, 단가, 옵션)
     - 총 금액
     - 주문 상태 (pending, confirmed, shipped, delivered - 배지로 표시)
   - "주문 내역 저장" 버튼 (페이지를 PDF로 저장하거나 스크린샷 촬영 안내)
   - "음반 목록으로 돌아가기" 버튼

4. **주문 조회 페이지 추가** (선택):
   - `GET /orders` -> 주문 번호 입력 폼
   - 입력 후 `/orders/{order_number}`로 리다이렉트

완료 후 주문 완료 후 확인 페이지가 정상 표시되는지 테스트하세요.

관리자 대시보드를 구현합니다 (간단한 CRUD):

1. **라우트 추가** (`routes/web.php`):
   - `GET /admin/albums` -> `AdminAlbumController@index` (앨범 목록 관리)
   - `GET /admin/albums/create` -> `AdminAlbumController@create` (앨범 등록 폼)
   - `POST /admin/albums` -> `AdminAlbumController@store` (앨범 저장)
   - `GET /admin/albums/{id}/edit` -> `AdminAlbumController@edit` (앨범 수정 폼)
   - `PUT /admin/albums/{id}` -> `AdminAlbumController@update` (앨범 업데이트)
   - `DELETE /admin/albums/{id}` -> `AdminAlbumController@destroy` (앨범 삭제)
   - `GET /admin/orders` -> `AdminOrderController@index` (주문 목록 관리)
   - `PATCH /admin/orders/{id}` -> `AdminOrderController@updateStatus` (배송 상태 변경)

2. **컨트롤러 생성**:
   - `php artisan make:controller Admin/AdminAlbumController --resource`
   - `php artisan make:controller Admin/AdminOrderController`

3. **React 컴포넌트 작성**:
   - `resources/js/Pages/Admin/Albums/Index.jsx`: 앨범 목록 테이블 (제목, 아티스트, 재고, 수정/삭제 버튼)
   - `resources/js/Pages/Admin/Albums/Create.jsx`: 앨범 등록 폼 (모든 필드 입력, 이미지 업로드)
   - `resources/js/Pages/Admin/Albums/Edit.jsx`: 앨범 수정 폼
   - `resources/js/Pages/Admin/Orders/Index.jsx`: 주문 목록 테이블 (주문 번호, 구매자명, 상태, 상태 변경 드롭다운)

4. **이미지 업로드 처리** (`AdminAlbumController@store`):
   - `$request->file('cover_image')->store('covers', 'public')`로 저장
   - 저장된 경로를 DB에 기록

5. **인증 미들웨어 적용** (선택):
   - 관리자 라우트에 `auth` 미들웨어 추가
   - 또는 간단히 `/admin` 경로 자체를 비밀번호로 보호

완료 후 `/admin/albums`에서 앨범을 추가/수정하고, `/admin/orders`에서 주문 상태를 변경할 수 있는지 테스트하세요.