🎟️ 공연 티켓 위시리스트 - 보고 싶은 공연 담아두기

mkdir show-wishlist-tracker && cd show-wishlist-tracker

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

# Step 1: Laravel 13.x API 백엔드 초기 설정

Laravel 13.x 프로젝트를 생성하고 SQLite 데이터베이스를 설정해주세요.

## 요구사항

1. `backend` 폴더에 Laravel 13.x 프로젝트 생성
2. `.env` 파일에서 DB_CONNECTION을 sqlite로 변경
3. `database/database.sqlite` 빈 파일 생성
4. `shows` 테이블 마이그레이션 생성:
   - id (primary key)
   - title (공연명, string)
   - venue (장소, string)
   - date (공연 날짜, date)
   - price (가격, integer, nullable)
   - genre (장르, string: 뮤지컬/콘서트/전시/연극 등)
   - booking_url (예매 링크, string, nullable)
   - is_watched (관람 완료 여부, boolean, default false)
   - notes (메모, text, nullable)
   - timestamps
5. 마이그레이션 실행
6. `Show` 모델 생성 (fillable 설정 포함)

## 명령어 예시

```bash
cd show-wishlist-tracker
composer create-project laravel/laravel:^13.0 backend
cd backend
touch database/database.sqlite
php artisan migrate
```

모든 설정이 완료되면 "Laravel 백엔드 초기 설정 완료"라고 알려주세요.

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

공연 위시리스트 CRUD API를 만들어주세요.

## 요구사항

1. `ShowController` 생성 (API 리소스 컨트롤러)
2. `routes/api.php`에 다음 라우트 등록:
   - GET `/api/shows` - 전체 공연 목록 조회 (날짜 순 정렬)
   - POST `/api/shows` - 새 공연 추가
   - PUT `/api/shows/{id}` - 공연 정보 수정 (관람 완료 체크 포함)
   - DELETE `/api/shows/{id}` - 공연 삭제
3. 컨트롤러 메서드 구현:
   - index(): 모든 공연을 날짜 오름차순으로 반환 (JSON)
   - store(): 요청 데이터를 검증하고 새 공연 생성 (title, venue, date, genre 필수)
   - update(): 공연 정보 업데이트 (is_watched 토글 포함)
   - destroy(): 공연 삭제
4. CORS 설정: `config/cors.php`에서 `'paths' => ['api/*']`, `'allowed_origins' => ['http://localhost:5173']` 설정 (React Vite 기본 포트)
5. `.env`에서 `APP_URL=http://localhost:8000` 확인

## 검증

Postman이나 curl로 API 테스트:

```bash
# 공연 추가
curl -X POST http://localhost:8000/api/shows \
  -H "Content-Type: application/json" \
  -d '{"title":"오페라의 유령","venue":"샬롯데씨어터","date":"2025-06-15","genre":"뮤지컬","price":150000}'

# 공연 목록 조회
curl http://localhost:8000/api/shows
```

모든 API 엔드포인트가 정상 작동하면 "API 구현 완료"라고 알려주세요.

# Step 3: React 19 프론트엔드 초기 설정 및 기본 UI

`frontend` 폴더에 React 19 + Vite + Tailwind CSS 프로젝트를 생성하고 기본 레이아웃을 만들어주세요.

## 요구사항

1. 프로젝트 루트에서 `frontend` 폴더 생성 후 React + Vite 프로젝트 초기화:
   ```bash
   npm create vite@latest frontend -- --template react
   cd frontend
   npm install
   ```
2. Tailwind CSS 설치 및 설정:
   ```bash
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   ```
   - `tailwind.config.js`에서 `content: ["./index.html", "./src/**/*.{js,jsx}"]` 설정
   - `src/index.css`에 Tailwind 지시어 추가:
     ```css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     ```
3. `src/App.jsx` 기본 레이아웃 작성:
   - 헤더: "🎟️ 공연 위시리스트" 타이틀
   - 공연 추가 폼 영역 (title, venue, date, price, genre 선택, booking_url, notes 입력 필드)
   - 장르 필터 버튼 (전체/뮤지컬/콘서트/전시/연극)
   - 공연 목록 카드 영역 (빈 상태 메시지: "아직 등록된 공연이 없습니다")
4. Tailwind CSS로 스타일링:
   - 헤더: 그라데이션 배경, 큰 폰트
   - 폼: 그리드 레이아웃, 인풋 필드 스타일링
   - 카드: 그림자, 호버 효과
5. 개발 서버 실행: `npm run dev` (http://localhost:5173)

## 기대 결과

브라우저에서 헤더와 폼, 빈 목록 영역이 보이는 기본 UI가 렌더링됩니다. 아직 API 연동은 하지 않습니다.

완료되면 "React 프론트엔드 기본 UI 완성"이라고 알려주세요.

# Step 4: React에서 Laravel API 연동 - 공연 목록 조회 및 추가

`App.jsx`에서 useState와 fetch를 사용하여 Laravel API와 연동하고, 공연 목록을 불러오고 새 공연을 추가하는 기능을 구현해주세요.

## 요구사항

1. `useState`로 상태 관리:
   - `shows`: 공연 목록 배열
   - `formData`: 폼 입력 데이터 (title, venue, date, price, genre, booking_url, notes)
   - `filter`: 현재 선택된 장르 필터 (기본값 '전체')
2. `useEffect`로 컴포넌트 마운트 시 API에서 공연 목록 fetch:
   ```javascript
   useEffect(() => {
     fetch('http://localhost:8000/api/shows')
       .then(res => res.json())
       .then(data => setShows(data));
   }, []);
   ```
3. 폼 제출 핸들러 (`handleSubmit`):
   - POST 요청으로 `http://localhost:8000/api/shows`에 formData 전송
   - 성공 시 새 공연을 `shows` 배열에 추가하고 폼 초기화
4. 장르 필터 버튼 클릭 시 `filter` 상태 변경
5. 공연 목록 렌더링:
   - `filter`가 '전체'면 모든 공연 표시, 그렇지 않으면 해당 장르만 필터링
   - 각 공연을 카드 형태로 표시 (제목, 장소, 날짜, 가격, 장르, 예매 링크 버튼)
   - 관람 완료된 공연은 회색 배경 + 체크 아이콘 표시
6. 빈 상태 처리: 공연이 없으면 "아직 등록된 공연이 없습니다" 메시지 표시

## 기대 결과

- 폼에서 공연 정보를 입력하고 "추가" 버튼을 누르면 즉시 목록에 추가됩니다.
- 장르 필터 버튼을 클릭하면 해당 장르 공연만 보입니다.
- Laravel 백엔드(`php artisan serve`)와 React 프론트엔드(`npm run dev`)가 모두 실행 중이어야 합니다.

완료되면 "공연 목록 조회 및 추가 기능 완성"이라고 알려주세요.

# Step 5: 관람 완료 체크 및 삭제 기능 구현

각 공연 카드에 "관람 완료" 체크박스와 "삭제" 버튼을 추가하고, API와 연동하여 상태를 업데이트하고 항목을 삭제하는 기능을 완성해주세요.

## 요구사항

1. **관람 완료 체크박스**:
   - 각 공연 카드에 체크박스 추가 (checked 속성은 `show.is_watched`)
   - 체크박스 클릭 시 `handleToggleWatched(id)` 함수 호출
   - `handleToggleWatched` 함수:
     - PUT 요청으로 `http://localhost:8000/api/shows/{id}` 호출
     - 요청 body에 `{is_watched: !currentWatchedStatus}` 전송
     - 성공 시 `shows` 배열에서 해당 공연의 `is_watched` 값 토글
   - 관람 완료된 공연은 카드 배경을 회색(`bg-gray-100`)으로 변경하고, 제목에 취소선 추가
2. **삭제 버튼**:
   - 각 공연 카드에 "삭제" 버튼 추가 (빨간색 배경)
   - 버튼 클릭 시 `handleDelete(id)` 함수 호출
   - `handleDelete` 함수:
     - DELETE 요청으로 `http://localhost:8000/api/shows/{id}` 호출
     - 성공 시 `shows` 배열에서 해당 공연 제거 (filter 사용)
3. **UI 개선**:
   - 관람 완료 체크박스 옆에 "✅ 관람 완료" 라벨 표시
   - 삭제 버튼은 카드 우측 상단에 배치 (호버 시 더 진한 빨간색)
4. **에러 핸들링**:
   - fetch 실패 시 console.error로 에러 메시지 출력
   - 사용자에게 간단한 alert로 "작업 실패" 알림 (선택 사항)

## 기대 결과

- 체크박스를 클릭하면 공연이 관람 완료 상태로 전환되고, 카드 스타일이 회색으로 변합니다.
- 삭제 버튼을 클릭하면 해당 공연이 목록에서 즉시 사라집니다.
- 모든 변경 사항이 Laravel 데이터베이스에 반영됩니다.

완료되면 "관람 완료 체크 및 삭제 기능 완성, 프로젝트 완료!"라고 알려주세요.