🎓 온라인 튜터링 세션 예약 플랫폼

mkdir tutoring-session-booking-platform && cd tutoring-session-booking-platform

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

# Laravel API 백엔드 설정

1. Laravel 13.x 프로젝트를 'backend' 폴더에 생성해주세요:
   ```bash
   composer create-project laravel/laravel:^13.0 backend
   cd backend
   ```

2. .env 파일을 SQLite로 설정:
   ```
   DB_CONNECTION=sqlite
   DB_DATABASE=database/database.sqlite
   ```

3. SQLite 데이터베이스 파일 생성:
   ```bash
   touch database/database.sqlite
   ```

4. 튜터(Tutor)와 예약(Booking) 모델 및 마이그레이션 생성:
   - Tutor 모델: 이름, 전문 분야, 시간당 수업료, 소개
   - Booking 모델: 학생 이름, 이메일, 예약 날짜, 예약 시간, 요청 사항, 상태(pending/confirmed)

5. 마이그레이션 파일 작성:
   - tutors 테이블: name(string), specialty(string), hourly_rate(integer), bio(text)
   - bookings 테이블: tutor_id(foreignId), student_name(string), student_email(string), booking_date(date), booking_time(string), message(text, nullable), status(string, default 'pending')

6. 마이그레이션 실행:
   ```bash
   php artisan migrate
   ```

7. Tutor 시더 작성하여 샘플 튜터 2~3명 추가 (DatabaseSeeder.php 또는 별도 TutorSeeder 생성)

8. 시더 실행:
   ```bash
   php artisan db:seed
   ```

완료 후 'Laravel API 백엔드 기본 설정 완료'라고 알려주세요.

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

backend 폴더에서 작업합니다.

1. API 라우트 정의 (routes/api.php):
   - GET /api/tutors: 모든 튜터 목록 조회
   - GET /api/tutors/{id}: 특정 튜터 상세 정보 조회
   - GET /api/tutors/{id}/bookings: 특정 튜터의 예약 목록 조회
   - POST /api/bookings: 새로운 예약 생성

2. TutorController 생성 및 메서드 구현:
   ```bash
   php artisan make:controller Api/TutorController
   ```
   - index(): 모든 튜터 반환 (JSON)
   - show($id): 특정 튜터 반환 (JSON)
   - bookings($id): 특정 튜터의 예약 목록 반환 (최신순 정렬)

3. BookingController 생성 및 메서드 구현:
   ```bash
   php artisan make:controller Api/BookingController
   ```
   - store(Request $request): 새로운 예약 생성
     - 유효성 검사: student_name, student_email(이메일 형식), booking_date(날짜 형식), booking_time, tutor_id 필수
     - 예약 저장 후 JSON 응답 반환

4. CORS 설정 (config/cors.php):
   - 'paths' => ['api/*']
   - 'allowed_origins' => ['http://localhost:5173'] (Vite 기본 포트)
   - 'allowed_methods' => ['*']

5. API 테스트:
   ```bash
   php artisan serve
   ```
   브라우저 또는 Postman으로 http://localhost:8000/api/tutors 접속하여 JSON 응답 확인

완료 후 'Laravel API 라우트 및 컨트롤러 구현 완료'라고 알려주세요.

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

tutoring-session-booking-platform 루트 폴더에서 작업합니다.

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

2. Axios 및 Tailwind CSS 설치:
   ```bash
   npm install axios
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   ```

3. Tailwind 설정 (tailwind.config.js):
   ```js
   content: ['./index.html', './src/**/*.{js,jsx}'],
   ```

4. Tailwind CSS 임포트 (src/index.css):
   ```css
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   ```

5. Axios 기본 설정 (src/api/axios.js 파일 생성):
   ```js
   import axios from 'axios';
   const api = axios.create({
     baseURL: 'http://localhost:8000/api',
   });
   export default api;
   ```

6. 개발 서버 실행:
   ```bash
   npm run dev
   ```
   브라우저에서 http://localhost:5173 접속하여 Vite 기본 화면 확인

완료 후 'React 프론트엔드 프로젝트 설정 완료'라고 알려주세요.

# React 컴포넌트 구현 - 튜터 목록 페이지

frontend/src 폴더에서 작업합니다.

1. 튜터 목록 컴포넌트 생성 (src/components/TutorList.jsx):
   - useState로 tutors 상태 관리
   - useEffect로 컴포넌트 마운트 시 API 호출 (GET /api/tutors)
   - Axios로 데이터 가져와서 tutors 상태에 저장
   - 튜터 카드 형식으로 표시:
     - 이름, 전문 분야, 시간당 수업료, 소개 문구
     - '예약하기' 버튼 (클릭 시 튜터 ID를 부모 컴포넌트로 전달)
   - Tailwind CSS로 카드 스타일링 (그리드 레이아웃, 카드 hover 효과)

2. App.jsx 수정:
   - TutorList 컴포넌트 임포트 및 렌더링
   - 간단한 헤더 추가 ('온라인 튜터링 예약 플랫폼')

3. 스타일링:
   - 헤더: 배경색, 중앙 정렬, 패딩
   - 튜터 카드: 그림자, 둥근 모서리, 호버 시 확대 효과

완료 후 브라우저에서 튜터 목록이 카드 형식으로 표시되는지 확인하고 '튜터 목록 페이지 구현 완료'라고 알려주세요.

# React 컴포넌트 구현 - 예약 폼

frontend/src/components 폴더에서 작업합니다.

1. 예약 폼 컴포넌트 생성 (BookingForm.jsx):
   - props로 tutorId, tutorName 받기
   - useState로 폼 입력 상태 관리:
     - studentName, studentEmail, bookingDate, bookingTime, message
   - 폼 필드:
     - 학생 이름 (텍스트 입력)
     - 학생 이메일 (이메일 입력)
     - 예약 날짜 (date 타입 input)
     - 예약 시간 (select 드롭다운: 09:00, 10:00, 11:00, 14:00, 15:00, 16:00, 19:00, 20:00)
     - 요청 사항 (textarea, 선택 사항)
   - 폼 제출 시:
     - Axios로 POST /api/bookings 요청
     - 요청 본문: { tutor_id: tutorId, student_name, student_email, booking_date, booking_time, message }
     - 성공 시 '예약이 완료되었습니다!' 알림 표시 및 폼 초기화
     - 실패 시 에러 메시지 표시
   - Tailwind CSS로 폼 스타일링 (라벨, 입력 필드, 버튼)

2. App.jsx 수정:
   - selectedTutor 상태 추가 (null 또는 튜터 객체)
   - TutorList에서 '예약하기' 클릭 시 selectedTutor 설정
   - selectedTutor가 있으면 BookingForm 표시, 없으면 TutorList 표시
   - '뒤로 가기' 버튼 추가하여 selectedTutor를 null로 설정

완료 후 '예약 폼 구현 완료'라고 알려주세요.

# 예약 목록 조회 기능 추가

frontend/src/components 폴더에서 작업합니다.

1. 예약 목록 컴포넌트 생성 (BookingList.jsx):
   - props로 tutorId 받기
   - useState로 bookings 상태 관리
   - useEffect로 컴포넌트 마운트 시 API 호출 (GET /api/tutors/{tutorId}/bookings)
   - 예약 목록 테이블 또는 카드 형식으로 표시:
     - 학생 이름, 이메일, 예약 날짜, 예약 시간, 상태(pending/confirmed)
   - 상태별 색상 표시 (pending: 노란색, confirmed: 초록색)
   - 예약이 없으면 '아직 예약이 없습니다' 메시지 표시
   - Tailwind CSS로 테이블 스타일링

2. App.jsx 수정:
   - viewBookings 상태 추가 (boolean)
   - TutorList에 '예약 목록 보기' 버튼 추가
   - viewBookings가 true이면 BookingList 표시
   - '뒤로 가기' 버튼으로 viewBookings를 false로 설정

3. 최종 테스트:
   - 튜터 목록 조회
   - 예약 생성
   - 예약 목록 조회
   - 모든 기능이 정상 작동하는지 확인

완료 후 '예약 목록 조회 기능 추가 완료 및 전체 프로젝트 완성'이라고 알려주세요.