풀스택 스터디룸 예약 시스템

mkdir study-room-booking-system && cd study-room-booking-system

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

먼저 Laravel 13.x API 백엔드를 구축합니다:

1. `backend` 폴더에 Laravel 13.x 프로젝트를 생성하세요.
2. SQLite 데이터베이스를 사용하도록 `.env` 파일을 설정하세요.
3. 다음 마이그레이션을 생성하세요:
   - `rooms` 테이블: id, name (방 이름), capacity (수용 인원), price_per_hour (시간당 가격), description (설명), created_at, updated_at
   - `bookings` 테이블: id, room_id (외래키), customer_name (예약자 이름), customer_phone (연락처), booking_date (예약 날짜), start_time (시작 시간, 9-21시 중 선택), end_time (종료 시간), status (예약 상태: confirmed/cancelled), created_at, updated_at
4. 마이그레이션을 실행하세요.
5. 시더를 만들어 샘플 스터디룸 3개를 추가하세요 (예: 조용한 방, 화이트보드 방, 대형 회의실).
6. API 라우트를 설정하세요:
   - GET `/api/rooms` - 모든 스터디룸 목록
   - GET `/api/rooms/{id}/available-slots` - 특정 방의 날짜별 예약 가능 시간대
   - POST `/api/bookings` - 새 예약 생성
   - GET `/api/bookings` - 모든 예약 내역 (쿼리 파라미터로 customer_phone 필터링 가능)
   - DELETE `/api/bookings/{id}` - 예약 취소
7. CORS 설정을 추가하여 React 앱(http://localhost:5173)에서 접근 가능하도록 하세요.
8. 컨트롤러 로직을 구현하세요 (예약 시간 중복 검증 포함).

완료 후 `php artisan serve`로 서버를 실행하고 API 엔드포인트를 테스트하세요.

이제 React 19 프론트엔드를 구축합니다:

1. `study-room-booking-system` 폴더에서 `frontend` 폴더를 만들고, Vite로 React 19 프로젝트를 생성하세요.
2. Tailwind CSS를 설치하고 설정하세요.
3. Axios를 설치하세요 (`npm install axios`).
4. `src/api/client.js` 파일을 만들어 Axios 인스턴스를 설정하세요 (baseURL: http://localhost:8000/api).
5. 다음 컴포넌트를 생성하세요:
   - `RoomList.jsx`: 스터디룸 목록을 카드 형태로 표시 (방 이름, 수용 인원, 시간당 가격, "예약하기" 버튼)
   - `BookingForm.jsx`: 예약 폼 (이름, 연락처, 날짜 선택, 시간대 선택 - 9:00-21:00 중 1시간 단위)
   - `MyBookings.jsx`: 내 예약 내역 조회 (연락처 입력 후 조회, 예약 취소 버튼)
6. `App.jsx`에서 간단한 탭 UI를 만들어 "스터디룸 예약", "내 예약 내역" 탭을 전환하세요.
7. useState를 사용하여 상태를 관리하세요 (rooms, bookings, selectedRoom 등).
8. API 호출 함수를 만들어 백엔드와 연동하세요.

완료 후 `npm run dev`로 개발 서버를 실행하고 http://localhost:5173에서 확인하세요.

예약 기능을 완성하고 UI를 개선합니다:

1. `BookingForm.jsx`에서 날짜와 시간대를 선택하면, 해당 방의 예약 가능 시간대를 백엔드 API(`/api/rooms/{id}/available-slots?date=YYYY-MM-DD`)에서 가져와 시각적으로 표시하세요.
   - 예약 가능한 시간은 초록색 버튼, 이미 예약된 시간은 회색 비활성화 버튼으로 표시
2. 예약 폼 제출 시 POST `/api/bookings`로 데이터를 전송하고, 성공 시 알림 메시지를 표시하세요.
3. `MyBookings.jsx`에서 연락처를 입력하면 해당 번호의 예약 내역을 GET `/api/bookings?customer_phone=XXX`로 조회하세요.
4. 각 예약 항목에 "예약 취소" 버튼을 추가하고, 클릭 시 DELETE `/api/bookings/{id}`를 호출하여 취소하세요 (확인 다이얼로그 포함).
5. 전체 UI를 Tailwind CSS로 깔끔하게 스타일링하세요:
   - 카드 레이아웃, 그림자 효과, 호버 애니메이션
   - 반응형 그리드 (모바일에서는 1열, 태블릿 2열, 데스크톱 3열)
   - 버튼 색상 구분 (예약 가능: green, 예약됨: gray, 취소: red)
6. 로딩 상태와 에러 처리를 추가하세요 (API 호출 중 스피너 표시, 에러 시 메시지).

완료 후 전체 예약 플로우를 테스트하세요: 방 선택 → 날짜/시간 선택 → 예약 → 내 예약 확인 → 취소.