🎟️ 공연 티켓 양도 게시판 - 못 가는 공연 티켓 나눔하기

mkdir concert-ticket-giveaway-board && cd concert-ticket-giveaway-board

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

## Laravel 13.x API 백엔드 설정

`backend` 폴더에 Laravel 13.x 프로젝트를 생성하고 초기 설정을 해주세요:

1. Laravel 13.x 프로젝트 생성 (composer create-project laravel/laravel backend)
2. .env 파일에서 DB_CONNECTION=sqlite로 설정
3. database/database.sqlite 파일 생성
4. tickets 테이블 마이그레이션 생성:
   - 컬럼: id, title(공연명), date(공연날짜), venue(장소), quantity(매수), price(가격), contact(연락처), status(양도중/완료, 기본값 '양도중'), description(상세설명, nullable), timestamps
5. php artisan migrate 실행
6. Ticket 모델 생성 (app/Models/Ticket.php)
7. CORS 설정: config/cors.php에서 'paths' => ['api/*']로 설정하고, 'supports_credentials' => true 추가

완료 후 `php artisan serve`로 서버 실행 확인 (http://localhost:8000)

## Laravel API 라우트 및 컨트롤러 구현

backend 프로젝트에서 티켓 양도 글 CRUD API를 구현해주세요:

1. TicketController 생성 (php artisan make:controller Api/TicketController --api)
2. routes/api.php에 RESTful 라우트 등록:
   ```php
   Route::apiResource('tickets', \App\Http\Controllers\Api\TicketController::class);
   Route::patch('tickets/{ticket}/toggle-status', [\App\Http\Controllers\Api\TicketController::class, 'toggleStatus']);
   Route::get('tickets/search/{keyword}', [\App\Http\Controllers\Api\TicketController::class, 'search']);
   ```
3. TicketController에 다음 메서드 구현:
   - index(): 모든 티켓 목록 반환 (최신순 정렬)
   - store(): 새 티켓 등록 (validation 포함: title, date, venue, quantity, price, contact 필수)
   - show($id): 특정 티켓 상세 정보
   - update($id): 티켓 정보 수정
   - destroy($id): 티켓 삭제
   - toggleStatus($id): 상태를 '양도중' ↔ '양도완료' 토글
   - search($keyword): 공연명(title)으로 검색 (LIKE 쿼리)

모든 응답은 JSON 형식으로 반환하고, 적절한 HTTP 상태 코드 사용 (201 Created, 204 No Content 등)

## React 19 프론트엔드 프로젝트 설정

프로젝트 루트에 `frontend` 폴더를 만들고 React 19 + Vite 프로젝트를 생성해주세요:

1. npm create vite@latest frontend -- --template react
2. cd frontend && npm install
3. Tailwind CSS 설치 및 설정:
   ```bash
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   ```
4. tailwind.config.js에서 content 경로 설정:
   ```js
   content: ["./index.html", "./src/**/*.{js,jsx}"],
   ```
5. src/index.css에 Tailwind directives 추가:
   ```css
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   ```
6. axios 설치: npm install axios
7. src/App.jsx를 초기화하고 기본 레이아웃 구성:
   - 헤더: "🎟️ 공연 티켓 양도 게시판" 타이틀
   - 검색 바 영역
   - 티켓 목록 영역
   - 티켓 등록 버튼 (모달 트리거)

완료 후 npm run dev로 개발 서버 실행 (http://localhost:5173)

## 티켓 목록 조회 및 카드 UI 구현

frontend 프로젝트에서 Laravel API로부터 티켓 목록을 가져와 화면에 표시해주세요:

1. src/App.jsx에서 useState와 useEffect 사용:
   - tickets 상태로 티켓 목록 관리
   - useEffect에서 axios.get('http://localhost:8000/api/tickets')로 API 호출
2. 티켓 카드 컴포넌트 구현 (그리드 레이아웃):
   - 각 카드에 공연명, 날짜, 장소, 매수, 가격 표시
   - 상태 배지: 양도 중(초록색), 양도 완료(회색, 반투명)
   - 카드 호버 시 살짝 올라오는 애니메이션 (hover:scale-105 transition)
3. 양도 완료된 티켓은 opacity-50 클래스로 시각적 구분
4. 반응형 그리드: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
5. 로딩 상태 처리: 데이터 로딩 중 "티켓 불러오는 중..." 메시지 표시

Tailwind CSS로 깔끔한 카드 디자인 (그라데이션 배경, 둥근 모서리, 그림자 효과)

## 티켓 등록 폼 및 검색 기능 구현

frontend 프로젝트에서 새 티켓 등록 폼과 검색 기능을 추가해주세요:

1. 티켓 등록 모달 구현:
   - useState로 모달 열림/닫힘 상태 관리
   - 폼 필드: 공연명, 날짜(date input), 장소, 매수(number input), 가격(number input), 연락처, 상세설명(textarea)
   - 폼 제출 시 axios.post('http://localhost:8000/api/tickets', formData)로 API 호출
   - 등록 성공 시 모달 닫고 티켓 목록 새로고침
2. 검색 기능 구현:
   - 검색어 입력 필드 (상단에 배치)
   - 검색 버튼 클릭 시 axios.get(`http://localhost:8000/api/tickets/search/${keyword}`)로 검색 결과 가져오기
   - 검색어가 비어있으면 전체 목록 표시
3. 상태 토글 버튼:
   - 각 티켓 카드에 "양도 완료" 버튼 추가
   - 클릭 시 axios.patch(`http://localhost:8000/api/tickets/${id}/toggle-status`)로 상태 변경
   - 상태 변경 후 목록 새로고침

모달은 Tailwind CSS로 중앙 정렬, 배경 어둡게 처리 (backdrop)