mkdir gym-pt-booking-platform && cd gym-pt-booking-platform

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

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

1. Laravel 프로젝트 생성:
   - `backend` 폴더에 Laravel 13.x 프로젝트 생성
   - SQLite 데이터베이스 사용 설정 (.env 파일 수정)

2. 데이터베이스 마이그레이션 생성:
   - `trainers` 테이블: id, name, specialty, profile_image, bio
   - `time_slots` 테이블: id, trainer_id, date, start_time, end_time, is_available
   - `bookings` 테이블: id, trainer_id, time_slot_id, customer_name, customer_phone, status (pending/confirmed/cancelled)

3. 모델 생성:
   - Trainer, TimeSlot, Booking 모델 생성
   - 관계 설정 (Trainer hasMany TimeSlots, TimeSlot hasOne Booking 등)

4. 시더(Seeder) 생성:
   - 3명의 샘플 트레이너 데이터
   - 각 트레이너당 오늘부터 7일간의 시간대 데이터 (09:00~18:00, 1시간 단위)

5. API 라우트 설계 (routes/api.php):
   - GET /api/trainers - 트레이너 목록
   - GET /api/trainers/{id}/time-slots - 트레이너별 예약 가능 시간대
   - POST /api/bookings - 예약 생성
   - GET /api/bookings - 예약 목록
   - DELETE /api/bookings/{id} - 예약 취소

6. CORS 설정:
   - React 개발 서버(localhost:5173)에서 API 호출 허용

모든 설정 후 `php artisan migrate --seed` 실행하여 데이터베이스 준비.

# Laravel API 컨트롤러 구현

1. TrainerController 생성:
   - `index()` 메서드: 모든 트레이너 목록 반환 (JSON)
   - `show($id)` 메서드: 특정 트레이너 정보 반환
   - `timeSlots($id)` 메서드: 특정 트레이너의 예약 가능한 시간대 반환 (is_available = true인 것만)

2. BookingController 생성:
   - `store(Request $request)` 메서드:
     - 예약 정보 유효성 검사 (customer_name, customer_phone, time_slot_id 필수)
     - 해당 시간대가 예약 가능한지 확인
     - 예약 생성 후 시간대 is_available을 false로 업데이트
     - 생성된 예약 정보 반환
   - `index()` 메서드: 모든 예약 목록 반환 (트레이너, 시간대 정보 포함)
   - `destroy($id)` 메서드:
     - 예약 삭제
     - 해당 시간대 is_available을 true로 복구

3. 각 메서드에서 적절한 HTTP 상태 코드 반환:
   - 성공: 200 (조회), 201 (생성), 204 (삭제)
   - 실패: 400 (잘못된 요청), 404 (찾을 수 없음)

4. API 테스트:
   - Postman 또는 curl로 각 엔드포인트 테스트
   - 예약 생성 → 시간대 unavailable 확인
   - 예약 취소 → 시간대 available 복구 확인

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

1. `frontend` 폴더에 React + Vite 프로젝트 생성:
   - `npm create vite@latest frontend -- --template react`
   - `cd frontend && npm install`

2. Tailwind CSS 설치 및 설정:
   - `npm install -D tailwindcss postcss autoprefixer`
   - `npx tailwindcss init -p`
   - tailwind.config.js에 content 경로 설정
   - src/index.css에 Tailwind 디렉티브 추가

3. Axios 설치:
   - `npm install axios`

4. 프로젝트 구조 설정:
   - src/components 폴더 생성
   - src/services 폴더 생성 (API 호출 함수 모음)
   - src/pages 폴더 생성

5. API 서비스 함수 작성 (src/services/api.js):
   - `getTrainers()` - GET /api/trainers
   - `getTimeSlots(trainerId)` - GET /api/trainers/{id}/time-slots
   - `createBooking(data)` - POST /api/bookings
   - `getBookings()` - GET /api/bookings
   - `cancelBooking(id)` - DELETE /api/bookings/{id}
   - axios baseURL을 http://localhost:8000으로 설정

6. 기본 레이아웃 컴포넌트 생성:
   - Header 컴포넌트 (로고, 네비게이션)
   - Footer 컴포넌트

`npm run dev` 실행하여 개발 서버 시작 (localhost:5173).

# 트레이너 목록 페이지 구현

1. TrainerList 컴포넌트 생성 (src/components/TrainerList.jsx):
   - useEffect로 컴포넌트 마운트 시 getTrainers() 호출
   - useState로 트레이너 목록 상태 관리
   - 로딩 상태 표시 (데이터 fetch 중)
   - 트레이너 카드 형태로 목록 표시:
     - 프로필 이미지 (placeholder 이미지 사용)
     - 이름, 전문분야, 간단한 소개
     - "예약하기" 버튼 (클릭 시 해당 트레이너의 시간대 선택 화면으로 이동)

2. Tailwind CSS로 스타일링:
   - 그리드 레이아웃 (모바일: 1열, 태블릿: 2열, 데스크톱: 3열)
   - 카드 호버 효과 (shadow, scale 애니메이션)
   - 반응형 디자인

3. App.jsx에서 TrainerList 렌더링:
   - 간단한 헤더 추가 ("PT 수업 예약 시스템")
   - TrainerList 컴포넌트 배치

4. 에러 처리:
   - API 호출 실패 시 에러 메시지 표시
   - try-catch로 예외 처리

브라우저에서 localhost:5173 접속 시 트레이너 목록이 카드 형태로 보여야 합니다.

# 시간대 선택 및 예약 폼 구현

1. TimeSlotSelector 컴포넌트 생성 (src/components/TimeSlotSelector.jsx):
   - props로 trainerId 받기
   - useEffect로 getTimeSlots(trainerId) 호출하여 시간대 목록 가져오기
   - useState로 선택된 시간대 ID 관리
   - 시간대 목록을 날짜별로 그룹화하여 표시:
     - 날짜 헤더 (예: "2024년 1월 15일 월요일")
     - 해당 날짜의 시간대 버튼들 (예: "09:00-10:00", "10:00-11:00")
     - 선택된 시간대는 배경색 변경

2. BookingForm 컴포넌트 생성 (src/components/BookingForm.jsx):
   - props로 trainerId, selectedTimeSlotId 받기
   - 고객 정보 입력 폼:
     - 이름 (input)
     - 연락처 (input, type="tel")
   - 폼 제출 시:
     - createBooking() API 호출
     - 성공 시 성공 메시지 표시 및 예약 내역 페이지로 이동
     - 실패 시 에러 메시지 표시

3. App.jsx 라우팅 개선:
   - React Router 설치: `npm install react-router-dom`
   - 라우트 설정:
     - `/` - TrainerList
     - `/book/:trainerId` - TimeSlotSelector + BookingForm
     - `/my-bookings` - 예약 내역 페이지 (다음 단계에서 구현)

4. Tailwind CSS로 폼 스타일링:
   - 입력 필드 스타일 (border, padding, focus 효과)
   - 버튼 스타일 (primary color, hover 효과)
   - 시간대 버튼 (grid 레이아웃, 선택/비선택 상태 구분)

5. 유효성 검사:
   - 시간대 선택 여부 확인
   - 이름, 연락처 입력 여부 확인
   - 미입력 시 경고 메시지 표시

# 예약 내역 조회 및 취소 기능 구현

1. MyBookings 컴포넌트 생성 (src/components/MyBookings.jsx):
   - useEffect로 getBookings() 호출하여 예약 목록 가져오기
   - useState로 예약 목록 상태 관리
   - 예약 목록을 테이블 또는 카드 형태로 표시:
     - 트레이너 이름
     - 예약 날짜/시간
     - 고객 이름
     - 예약 상태 (pending/confirmed/cancelled)
     - "취소" 버튼 (status가 cancelled가 아닌 경우만 표시)

2. 예약 취소 기능:
   - "취소" 버튼 클릭 시 확인 다이얼로그 표시 (window.confirm)
   - 확인 시 cancelBooking(id) API 호출
   - 성공 시:
     - 예약 목록 다시 불러오기 (새로고침)
     - 성공 메시지 표시
   - 실패 시 에러 메시지 표시

3. 네비게이션 추가:
   - Header 컴포넌트에 "예약 내역" 링크 추가
   - React Router Link 컴포넌트 사용

4. 빈 상태 처리:
   - 예약 내역이 없을 경우 "아직 예약 내역이 없습니다" 메시지 표시
   - "트레이너 둘러보기" 버튼 추가 (TrainerList로 이동)

5. Tailwind CSS로 스타일링:
   - 테이블 스타일 (stripe 효과)
   - 상태 배지 (pending: 노란색, confirmed: 초록색, cancelled: 회색)
   - 취소 버튼 (빨간색 계열)

6. 최종 테스트:
   - 트레이너 선택 → 시간대 선택 → 예약 생성 → 예약 내역 확인 → 예약 취소
   - 취소 후 해당 시간대가 다시 예약 가능해지는지 확인

모든 기능이 정상 작동하는지 확인하고, README.md 파일에 프로젝트 실행 방법과 주요 기능 설명을 작성하세요.