mkdir travel-expense-split-calculator && cd travel-expense-split-calculator

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

# 1단계: Laravel 13.x API 백엔드 프로젝트 생성

`laravel-api` 폴더에 Laravel 13.x 프로젝트를 생성하고 기본 설정을 완료하세요.

## 요구사항

1. Laravel 13.x 최신 버전으로 `laravel-api` 폴더에 프로젝트 생성
2. SQLite 데이터베이스 설정 (.env 파일 수정)
3. 데이터베이스 마이그레이션 파일 생성:
   - `trips` 테이블: id, title, created_at, updated_at
   - `participants` 테이블: id, trip_id, name, created_at, updated_at
   - `expenses` 테이블: id, trip_id, participant_id (지불자), description, amount, created_at, updated_at
4. 모델 생성: Trip, Participant, Expense (Eloquent 관계 설정)
   - Trip hasMany Participants
   - Trip hasMany Expenses
   - Expense belongsTo Participant
5. CORS 설정: `php artisan install:api` 실행하여 API 라우트 활성화 및 CORS 미들웨어 설정
6. `.env` 파일에서 `APP_URL=http://localhost:8000` 확인

## 실행 명령어 예시

```bash
composer create-project laravel/laravel laravel-api
cd laravel-api
php artisan install:api
# .env 파일 수정: DB_CONNECTION=sqlite, DB_DATABASE=database/database.sqlite
touch database/database.sqlite
php artisan make:model Trip -m
php artisan make:model Participant -m
php artisan make:model Expense -m
# 마이그레이션 파일 작성 후
php artisan migrate
```

마이그레이션 파일 작성 시 외래키 제약조건도 추가해주세요.

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

여행 경비 분담 계산기의 핵심 API 엔드포인트를 구현하세요.

## 요구사항

1. API 라우트 설계 (`routes/api.php`):
   - POST `/api/trips` - 여행 생성
   - GET `/api/trips/{id}` - 여행 상세 조회 (참가자, 경비 포함)
   - POST `/api/trips/{id}/participants` - 참가자 추가
   - POST `/api/trips/{id}/expenses` - 경비 항목 추가
   - GET `/api/trips/{id}/settlement` - 정산 계산 결과 조회

2. 컨트롤러 생성 및 구현:
   - `TripController`: 여행 생성, 조회
   - `ParticipantController`: 참가자 추가
   - `ExpenseController`: 경비 항목 추가
   - `SettlementController`: 정산 계산 로직

3. 정산 계산 로직 구현 (SettlementController):
   - 각 참가자의 총 지출 금액 계산
   - 전체 경비를 참가자 수로 나눈 1/n 금액 계산
   - 각 참가자의 지출 금액 - 1/n 금액 = 차액 계산
   - 차액이 양수(더 많이 냄)인 사람과 음수(덜 냄)인 사람을 매칭하여 송금 내역 생성
   - JSON 형식으로 반환: `[{"from": "참가자A", "to": "참가자B", "amount": 10000}]`

4. JSON 응답 형식:
   - 성공: `{"success": true, "data": {...}}`
   - 실패: `{"success": false, "message": "에러 메시지"}`

5. 유효성 검증 (Validation):
   - 여행 제목 필수
   - 참가자 이름 필수
   - 경비 금액은 양수, 지불자 ID 필수

## 실행 명령어 예시

```bash
php artisan make:controller Api/TripController
php artisan make:controller Api/ParticipantController
php artisan make:controller Api/ExpenseController
php artisan make:controller Api/SettlementController
```

정산 알고리즘은 간단한 그리디 방식으로 구현하세요.

# 3단계: React 19 프론트엔드 프로젝트 생성 및 기본 구조

`react-frontend` 폴더에 React 19 + Vite 프로젝트를 생성하고 Tailwind CSS를 설정하세요.

## 요구사항

1. Vite를 사용하여 React 19 프로젝트 생성 (`react-frontend` 폴더)
2. Tailwind CSS 설치 및 설정
3. 프로젝트 폴더 구조:
   ```
   src/
     components/
       TripForm.jsx         (여행 생성 폼)
       ParticipantList.jsx  (참가자 목록)
       ExpenseForm.jsx      (경비 입력 폼)
       ExpenseList.jsx      (경비 내역)
       SettlementResult.jsx (정산 결과)
     App.jsx
     main.jsx
   ```
4. `App.jsx`에 기본 레이아웃 구성:
   - 헤더: "여행 경비 분담 계산기" 제목
   - 여행 생성 폼
   - 참가자 추가 섹션
   - 경비 입력 섹션
   - 정산 결과 섹션
5. API 호출을 위한 기본 fetch 함수 준비 (utils/api.js 또는 App.jsx 내부)
6. `.env` 파일 생성: `VITE_API_URL=http://localhost:8000/api`

## 실행 명령어 예시

```bash
cd ..
npm create vite@latest react-frontend -- --template react
cd react-frontend
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# tailwind.config.js 설정
npm run dev
```

Tailwind CSS는 간단하고 깔끔한 카드 기반 레이아웃으로 디자인하세요.

# 4단계: 여행 생성 및 참가자 추가 기능 구현

React 프론트엔드에서 여행을 생성하고 참가자를 추가하는 기능을 구현하세요.

## 요구사항

1. `TripForm.jsx` 컴포넌트:
   - 여행 제목 입력 필드
   - "여행 만들기" 버튼
   - 버튼 클릭 시 `POST /api/trips` 호출하여 여행 생성
   - 생성 성공 시 tripId를 상태로 저장하고 다음 단계(참가자 추가) UI 표시

2. `ParticipantList.jsx` 컴포넌트:
   - 참가자 이름 입력 필드
   - "참가자 추가" 버튼
   - 버튼 클릭 시 `POST /api/trips/{tripId}/participants` 호출
   - 추가된 참가자 목록을 카드 형태로 표시 (이름과 삭제 버튼은 보너스)
   - 최소 2명 이상 추가해야 다음 단계 진행 가능

3. 상태 관리 (App.jsx):
   - `tripId`: 생성된 여행 ID
   - `participants`: 참가자 배열
   - useState를 사용하여 관리

4. 에러 핸들링:
   - API 호출 실패 시 alert 또는 에러 메시지 표시
   - 입력 필드 비어있을 때 경고

5. UI/UX:
   - Tailwind CSS로 폼 스타일링 (input, button, card)
   - 참가자 추가 시 부드러운 애니메이션 (선택 사항)

## fetch 예시

```javascript
const createTrip = async (title) => {
  const response = await fetch(`${import.meta.env.VITE_API_URL}/trips`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title })
  });
  const data = await response.json();
  return data;
};
```

Laravel 백엔드가 실행 중이어야 합니다 (`php artisan serve`).

# 5단계: 경비 항목 추가 및 정산 결과 표시

경비 항목을 입력하고 자동으로 정산 결과를 계산하여 표시하는 기능을 구현하세요.

## 요구사항

1. `ExpenseForm.jsx` 컴포넌트:
   - 경비 항목명 입력 필드 (예: "숙박비")
   - 금액 입력 필드 (숫자만 입력 가능)
   - 지불자 선택 드롭다운 (participants 배열에서 선택)
   - "경비 추가" 버튼
   - 버튼 클릭 시 `POST /api/trips/{tripId}/expenses` 호출

2. `ExpenseList.jsx` 컴포넌트:
   - 추가된 경비 항목을 테이블 또는 리스트로 표시
   - 항목명, 금액, 지불자 이름 표시
   - 총 경비 금액 합계 표시

3. `SettlementResult.jsx` 컴포넌트:
   - "정산 계산하기" 버튼
   - 버튼 클릭 시 `GET /api/trips/{tripId}/settlement` 호출
   - 정산 결과를 "A가 B에게 10,000원 송금" 형태로 표시
   - 결과가 없으면 "모두 정산 완료!" 메시지 표시

4. 상태 관리 (App.jsx):
   - `expenses`: 경비 항목 배열
   - `settlement`: 정산 결과 배열
   - useState로 관리

5. UI/UX:
   - Tailwind CSS로 테이블 스타일링
   - 금액은 천 단위 콤마 표시 (toLocaleString())
   - 정산 결과는 강조 색상(예: 초록색 배경)으로 표시

6. 에러 핸들링:
   - 경비 추가 시 필수 필드 검증
   - API 호출 실패 시 에러 메시지 표시

## fetch 예시

```javascript
const addExpense = async (tripId, expenseData) => {
  const response = await fetch(`${import.meta.env.VITE_API_URL}/trips/${tripId}/expenses`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(expenseData)
  });
  return await response.json();
};

const getSettlement = async (tripId) => {
  const response = await fetch(`${import.meta.env.VITE_API_URL}/trips/${tripId}/settlement`);
  return await response.json();
};
```

정산 알고리즘은 Laravel 백엔드에서 처리하므로 프론트엔드는 결과만 표시하면 됩니다.