🎨 온라인 작품 전시회 초대장 플랫폼 - RSVP & 관람 예약

mkdir art-exhibition-invitation-rsvp && cd art-exhibition-invitation-rsvp

이 폴더에서 Laravel 13.x + React 19 풀스택 프로젝트를 시작합니다.

**Laravel 백엔드 설정:**
1. Laravel 13.x 프로젝트 생성: `composer create-project laravel/laravel:^13.0 backend`
2. `backend` 폴더로 이동하여 `.env` 파일에서 DB_CONNECTION을 sqlite로 변경
3. `database/database.sqlite` 파일 생성
4. 마이그레이션 파일 2개 생성:
   - `exhibitions` 테이블: id, title, artist_name, start_date, end_date, location, description, image_url, timestamps
   - `rsvps` 테이블: id, exhibition_id (foreign key), name, email, attendance (enum: 'attending', 'not_attending'), guests_count, timeslot (enum: 'morning', 'afternoon', 'evening'), visit_date, timestamps
5. 마이그레이션 실행: `php artisan migrate`
6. Seeder 생성하여 샘플 전시회 데이터 1개 삽입 (제목: "Modern Art Showcase", 아티스트: "Jane Doe", 기간: 2025-02-01 ~ 2025-02-15, 장소: "Downtown Gallery", 이미지 URL: placeholder)
7. API 라우트 설정 (`routes/api.php`):
   - GET `/api/exhibition` → 전시회 정보 반환
   - POST `/api/rsvp` → RSVP 저장
   - GET `/api/attendees` → 참석자 목록 반환
8. Controller 생성 (`ExhibitionController`, `RsvpController`)하여 각 엔드포인트 로직 구현
9. CORS 설정: `config/cors.php`에서 React 개발 서버(http://localhost:5173) 허용
10. Laravel 개발 서버 실행: `php artisan serve` (http://localhost:8000)

**React 프론트엔드 설정:**
1. 프로젝트 루트에서 React + Vite 프로젝트 생성: `npm create vite@latest frontend -- --template react`
2. `frontend` 폴더로 이동하여 Tailwind CSS 설치 및 설정
3. `frontend/src` 폴더 구조:
   - `App.jsx` (메인 컴포넌트)
   - `components/ExhibitionInfo.jsx` (전시회 정보 표시)
   - `components/RsvpForm.jsx` (RSVP 폼)
   - `components/AttendeeList.jsx` (참석자 목록)
4. `App.jsx`에서 `useState`로 전시회 데이터, 참석자 목록 상태 관리
5. `useEffect`로 컴포넌트 마운트 시 `/api/exhibition`, `/api/attendees` 호출하여 데이터 로드
6. React 개발 서버 실행: `npm run dev` (http://localhost:5173)

**출력 확인:**
- Laravel API 엔드포인트 테스트 (Postman/curl로 GET /api/exhibition 호출 시 전시회 정보 반환)
- React 앱에서 전시회 정보 표시 확인

**전시회 정보 페이지 & RSVP 폼 UI 구현:**

1. `frontend/src/components/ExhibitionInfo.jsx` 컴포넌트:
   - props로 전시회 데이터 받기 (title, artist_name, start_date, end_date, location, description, image_url)
   - Tailwind CSS로 카드 형태 디자인 (이미지 상단, 제목/아티스트/기간/장소 정보 표시)
   - 전시 기간 포맷팅 (예: "2025년 2월 1일 ~ 2월 15일")

2. `frontend/src/components/RsvpForm.jsx` 컴포넌트:
   - 폼 필드: 이름(text), 이메일(email), 참석 여부(라디오 버튼: 참석/불참), 동반 인원(number, 0~5), 관람 날짜(date picker, 전시 기간 내), 시간대(select: 오전/오후/저녁)
   - `useState`로 폼 상태 관리 (name, email, attendance, guests_count, visit_date, timeslot)
   - 제출 버튼 클릭 시 `handleSubmit` 함수 호출
   - 폼 유효성 검사: 필수 필드 확인, 이메일 형식 확인, 참석 시 날짜/시간대 필수
   - Tailwind CSS로 깔끔한 폼 디자인 (라벨, 인풋, 버튼 스타일링)

3. `frontend/src/App.jsx`에서:
   - `ExhibitionInfo` 컴포넌트에 전시회 데이터 전달
   - `RsvpForm` 컴포넌트 렌더링
   - 레이아웃: 전시회 정보 상단, RSVP 폼 중앙 배치

**출력 확인:**
- 전시회 정보가 카드 형태로 예쁘게 표시
- RSVP 폼이 화면에 렌더링되며, 필드 입력 가능
- 아직 제출 기능은 동작하지 않음 (다음 단계에서 구현)

**RSVP 제출 기능 & 백엔드 연동:**

1. `frontend/src/components/RsvpForm.jsx`에서 `handleSubmit` 함수 구현:
   - `e.preventDefault()`로 기본 폼 제출 방지
   - 폼 유효성 검사 (필수 필드, 이메일 형식, 참석 시 날짜/시간대 확인)
   - 유효성 검사 실패 시 에러 메시지 표시 (useState로 errorMessage 상태 관리)
   - 유효성 검사 통과 시 `fetch` 또는 `axios`로 POST `/api/rsvp` 호출
   - 요청 body: `{ exhibition_id: 1, name, email, attendance, guests_count, timeslot, visit_date }`
   - 응답 성공 시: 성공 메시지 표시 ("참석 응답이 완료되었습니다!"), 폼 초기화, 부모 컴포넌트에 참석자 목록 새로고침 요청
   - 응답 실패 시: 에러 메시지 표시 ("제출 중 오류가 발생했습니다. 다시 시도해주세요.")

2. `backend/app/Http/Controllers/RsvpController.php`에서 `store` 메서드 구현:
   - 요청 데이터 유효성 검사 (Laravel Validation): name, email, attendance, guests_count, timeslot, visit_date 필수
   - 타임슬롯 정원 확인 로직:
     - 해당 날짜/시간대의 기존 RSVP 수 확인 (attendance='attending'인 레코드만 카운트)
     - 정원 설정: morning=20, afternoon=20, evening=15
     - 현재 예약 수 + 신규 동반 인원 수가 정원 초과 시 에러 반환 ("해당 시간대는 예약이 마감되었습니다.")
   - 정원 내라면 RSVP 레코드 저장
   - 성공 응답 반환: `{ message: 'RSVP submitted successfully', rsvp: $rsvp }`

3. `frontend/src/App.jsx`에서:
   - `RsvpForm`에 `onSubmitSuccess` 콜백 props 전달
   - RSVP 제출 성공 시 참석자 목록 재조회 (`fetchAttendees` 함수 호출)

**출력 확인:**
- RSVP 폼 제출 시 Laravel API로 데이터 전송
- 정원 내라면 성공 메시지 표시, 정원 초과 시 에러 메시지 표시
- 성공 시 폼 초기화

**참석자 목록 & 실시간 잔여석 표시:**

1. `frontend/src/components/AttendeeList.jsx` 컴포넌트:
   - props로 참석자 배열 받기 (name, timeslot, visit_date)
   - 참석자 리스트를 카드 형태로 렌더링 (이름, 관람 날짜, 시간대 표시)
   - 참석자가 없으면 "아직 참석자가 없습니다." 메시지 표시
   - Tailwind CSS로 리스트 스타일링 (그리드 또는 플렉스 레이아웃)

2. `backend/app/Http/Controllers/RsvpController.php`에서 `index` 메서드 구현:
   - attendance='attending'인 RSVP 레코드만 조회
   - 이름, 시간대, 관람 날짜만 반환 (이메일 등 민감 정보 제외)
   - JSON 응답: `{ attendees: [ { name, timeslot, visit_date }, ... ] }`

3. `frontend/src/App.jsx`에서:
   - `useEffect`로 컴포넌트 마운트 시 `/api/attendees` 호출하여 참석자 목록 로드
   - `attendees` 상태 관리 (useState)
   - `AttendeeList` 컴포넌트에 attendees 전달

4. **실시간 잔여석 표시 기능 추가:**
   - `backend/app/Http/Controllers/ExhibitionController.php`에서 `show` 메서드 수정:
     - 전시회 정보와 함께 각 타임슬롯별 잔여석 정보 반환
     - 로직: 각 날짜/시간대별로 현재 예약 수를 집계하고, 정원에서 뺀 값을 반환
     - 예: `{ exhibition: {...}, availability: { '2025-02-01': { morning: 15, afternoon: 10, evening: 5 }, ... } }`
   - `frontend/src/components/RsvpForm.jsx`에서:
     - props로 availability 데이터 받기
     - 날짜/시간대 선택 시 해당 슬롯의 잔여석 표시 ("남은 좌석: 15명")
     - 잔여석이 0이면 해당 시간대 선택 불가 처리 (disabled)

**출력 확인:**
- 참석자 목록이 화면에 표시 (이름, 날짜, 시간대)
- RSVP 폼에서 날짜/시간대 선택 시 실시간 잔여석 표시
- 잔여석 0인 시간대는 선택 불가