🎸 인디 밴드 공식 굿즈샵 - 한정판 머치 판매 페이지

mkdir indie-band-merch-shop && cd indie-band-merch-shop

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

**요구사항:**
1. Laravel 13.x 프로젝트를 생성하세요 (composer create-project laravel/laravel . 명령 사용)
2. `.env` 파일에서 데이터베이스를 SQLite로 설정하세요:
   - DB_CONNECTION=sqlite
   - DB_DATABASE 경로를 `database/database.sqlite`로 지정
3. `database/database.sqlite` 파일을 생성하세요 (touch 명령 또는 빈 파일 생성)
4. Tailwind CSS를 설치하고 Vite 설정을 완료하세요:
   - `npm install -D tailwindcss postcss autoprefixer`
   - `npx tailwindcss init -p`
   - tailwind.config.js에서 content 경로 설정: `['./resources/**/*.blade.php', './resources/**/*.js']`
   - resources/css/app.css에 Tailwind 디렉티브 추가 (`@tailwind base; @tailwind components; @tailwind utilities;`)
5. `php artisan serve` 및 `npm run dev`로 개발 서버를 실행했을 때 "Welcome to Laravel" 페이지가 Tailwind 스타일로 표시되는지 확인하세요.

모든 설정이 완료되면 다음 단계로 진행할 준비가 된 상태여야 합니다.

**요구사항:**
1. `Product` 모델과 마이그레이션을 생성하세요 (`php artisan make:model Product -m`)
2. 마이그레이션 파일에서 `products` 테이블에 다음 컬럼을 추가하세요:
   - name (string): 상품명
   - description (text): 상품 설명
   - price (decimal, 8,2): 가격
   - image_url (string): 상품 이미지 URL (외부 링크 또는 더미 이미지)
   - stock (integer, default 0): 재고 수량
   - category (string, nullable): 카테고리 (예: 티셔츠, 후디, 포스터)
   - is_featured (boolean, default false): 인기 상품 여부
   - timestamps
3. `Order` 모델과 마이그레이션을 생성하세요 (`php artisan make:model Order -m`)
4. 마이그레이션 파일에서 `orders` 테이블에 다음 컬럼을 추가하세요:
   - order_number (string, unique): 주문 번호 (예: ORD-20240101-XXXX)
   - customer_name (string): 고객 이름
   - customer_email (string): 고객 이메일
   - customer_phone (string): 고객 전화번호
   - shipping_address (text): 배송지 주소
   - total_price (decimal, 8,2): 총 주문 금액
   - items (json): 주문 상품 정보 (상품명, 수량, 가격 등을 JSON으로 저장)
   - timestamps
5. 마이그레이션을 실행하세요 (`php artisan migrate`)
6. `DatabaseSeeder.php`에서 더미 상품 데이터를 5~10개 생성하세요:
   - 다양한 카테고리 (티셔츠, 후디, 포스터, 스티커 등)
   - 일부 상품은 재고 0으로 설정 (품절 상태)
   - 일부 상품은 is_featured를 true로 설정 (인기 상품)
   - 이미지 URL은 Unsplash 또는 Placeholder 이미지 사용 (예: https://via.placeholder.com/400x400)
7. 시더를 실행하세요 (`php artisan db:seed`)

데이터베이스 테이블이 생성되고 더미 데이터가 삽입되었는지 확인하세요 (`php artisan tinker`로 Product::all() 실행).

**요구사항:**
1. `web.php` 라우트 파일에 다음 라우트를 추가하세요:
   - GET `/` : 메인 페이지 (상품 목록)
   - GET `/products/{id}` : 상품 상세 페이지
   - POST `/cart/add` : 장바구니에 상품 추가
   - GET `/cart` : 장바구니 페이지
   - POST `/cart/update` : 장바구니 수량 업데이트
   - POST `/cart/remove` : 장바구니에서 상품 삭제
   - GET `/checkout` : 주문서 작성 페이지
   - POST `/order` : 주문 완료 처리
   - GET `/order/{orderNumber}/complete` : 주문 완료 페이지
2. `ProductController`를 생성하고 (`php artisan make:controller ProductController`) 다음 메서드를 구현하세요:
   - `index()`: 모든 상품을 가져와 메인 페이지 뷰로 전달
   - `show($id)`: 특정 상품 상세 정보를 가져와 상세 페이지 뷰로 전달
3. `CartController`를 생성하고 (`php artisan make:controller CartController`) 다음 메서드를 구현하세요:
   - `add(Request $request)`: 세션에 상품 추가 (상품 ID, 이름, 가격, 수량을 배열로 저장)
   - `index()`: 세션에서 장바구니 데이터를 가져와 뷰로 전달
   - `update(Request $request)`: 특정 상품의 수량 업데이트
   - `remove(Request $request)`: 특정 상품을 장바구니에서 삭제
4. `OrderController`를 생성하고 (`php artisan make:controller OrderController`) 다음 메서드를 구현하세요:
   - `checkout()`: 장바구니 데이터를 확인하고 주문서 작성 페이지로 이동
   - `store(Request $request)`: 주문 정보를 검증하고 DB에 저장, 주문 번호 생성 (예: ORD-20240101-XXXX), 세션 장바구니 초기화
   - `complete($orderNumber)`: 주문 완료 페이지 표시

컨트롤러 메서드는 아직 뷰를 연결하지 않아도 됩니다. 다음 단계에서 Blade 뷰를 작성할 예정입니다.

**요구사항:**
1. `resources/views/layouts/app.blade.php` 파일을 생성하고 공통 레이아웃을 작성하세요:
   - HTML 기본 구조 (head, body)
   - Tailwind CSS 링크 (`@vite(['resources/css/app.css', 'resources/js/app.js'])`)
   - 네비게이션 바: 로고(밴드명), 홈 링크, 장바구니 링크 (장바구니 아이템 개수 배지 표시)
   - `@yield('content')` 섹션으로 본문 영역 지정
   - 푸터: 저작권 정보 및 소셜 미디어 링크 (더미)
2. `resources/views/products/index.blade.php` 파일을 생성하고 메인 페이지를 작성하세요:
   - 히어로 섹션: 밴드 이름, 슬로건 (예: "Official Merch Shop"), 배경 이미지 또는 그라디언트
   - 인기 상품 섹션: `is_featured`가 true인 상품만 표시 (가로 스크롤 또는 그리드)
   - 전체 상품 목록: 그리드 레이아웃 (3~4열), 각 상품 카드에 이미지, 이름, 가격, 재고 상태 배지 표시
   - 재고가 0이면 "품절" 배지, 재고가 10 이하면 "한정 수량" 배지 표시
   - 각 상품 카드 클릭 시 상세 페이지로 이동
3. Tailwind CSS로 스타일링:
   - 카드 호버 효과 (shadow, scale 등)
   - 반응형 그리드 (모바일: 1열, 태블릿: 2열, 데스크톱: 3~4열)
   - 배지 색상 (품절: 빨강, 한정 수량: 노랑, 정상: 초록)

메인 페이지에 접속했을 때 상품 목록이 그리드로 표시되고, 재고 상태가 배지로 표시되는지 확인하세요.

**요구사항:**
1. `resources/views/products/show.blade.php` 파일을 생성하고 상품 상세 페이지를 작성하세요:
   - 왼쪽: 상품 이미지 (큰 사이즈)
   - 오른쪽: 상품 정보 (이름, 가격, 설명, 카테고리)
   - 사이즈/색상 선택 (드롭다운 또는 버튼 그룹, 더미 옵션으로 "S, M, L, XL" 또는 "Black, White, Gray")
   - 수량 선택 (+ / - 버튼으로 조절, 기본값 1)
   - "장바구니 담기" 버튼 (재고가 0이면 비활성화)
   - 재고 상태 표시 ("재고: X개 남음" 또는 "품절")
2. "장바구니 담기" 버튼 클릭 시:
   - POST `/cart/add` 라우트로 폼 제출
   - 상품 ID, 이름, 가격, 수량, 선택한 옵션(사이즈/색상)을 전달
   - 성공 시 알림 메시지 표시 ("장바구니에 추가되었습니다!") 및 장바구니 페이지로 리다이렉트
3. Tailwind CSS로 스타일링:
   - 2열 레이아웃 (모바일에서는 1열로 변경)
   - 버튼 호버 효과 및 비활성화 스타일
   - 수량 조절 버튼 (+/-) 스타일링

상품 상세 페이지에서 장바구니에 상품을 추가할 수 있는지 확인하세요.

**요구사항:**
1. `resources/views/cart/index.blade.php` 파일을 생성하고 장바구니 페이지를 작성하세요:
   - 장바구니가 비어있으면 "장바구니가 비어있습니다" 메시지 표시 및 쇼핑 계속하기 버튼
   - 장바구니에 상품이 있으면 테이블 또는 카드 형태로 표시:
     - 각 상품: 이미지, 이름, 선택한 옵션(사이즈/색상), 가격, 수량 조절 버튼 (+/-), 삭제 버튼
   - 수량 변경 시 POST `/cart/update` 라우트로 폼 제출하여 세션 업데이트
   - 삭제 버튼 클릭 시 POST `/cart/remove` 라우트로 폼 제출하여 세션에서 제거
   - 하단에 총 주문 금액 표시 (모든 상품의 가격 × 수량 합계)
   - "주문하기" 버튼 (클릭 시 `/checkout` 페이지로 이동)
2. Tailwind CSS로 스타일링:
   - 테이블 또는 카드 레이아웃 (모바일 친화적으로)
   - 삭제 버튼 (빨간색, 호버 효과)
   - 총 금액 강조 (큰 폰트, 굵은 글씨)

장바구니 페이지에서 수량 조절 및 삭제 기능이 정상 작동하는지 확인하세요.

**요구사항:**
1. `resources/views/orders/checkout.blade.php` 파일을 생성하고 주문서 작성 페이지를 작성하세요:
   - 주문 상품 요약: 장바구니 내용을 읽기 전용으로 표시 (상품명, 수량, 가격)
   - 총 주문 금액 표시
   - 고객 정보 입력 폼:
     - 이름 (required)
     - 이메일 (required, email 형식)
     - 전화번호 (required)
     - 배송지 주소 (required, textarea)
   - "주문 완료" 버튼 (클릭 시 POST `/order` 라우트로 폼 제출)
2. `OrderController@store` 메서드에서:
   - 입력 데이터 검증 (Validation)
   - 주문 번호 생성 (예: ORD-{날짜}-{랜덤숫자})
   - 장바구니 데이터를 JSON으로 변환하여 `items` 컬럼에 저장
   - 총 금액 계산 및 저장
   - 세션 장바구니 초기화 (`session()->forget('cart')`)
   - 주문 완료 페이지로 리다이렉트 (`/order/{orderNumber}/complete`)
3. `resources/views/orders/complete.blade.php` 파일을 생성하고 주문 완료 페이지를 작성하세요:
   - "주문이 완료되었습니다!" 메시지
   - 주문 번호 표시 (큰 폰트로 강조)
   - 주문 내역 요약 (상품명, 수량, 총 금액)
   - "쇼핑 계속하기" 버튼 (메인 페이지로 이동)
4. Tailwind CSS로 스타일링:
   - 폼 필드 스타일링 (input, textarea)
   - 주문 완료 페이지에 성공 메시지 아이콘 추가 (체크마크 등)

주문서 작성부터 주문 완료까지 전체 플로우가 정상 작동하는지 확인하세요.