포켓 어휘 카드 - 단어장 만들고 퀴즈로 복습하기

mkdir pocket-vocab-quiz-app && cd pocket-vocab-quiz-app

이 폴더에서 Laravel 백엔드와 React 프론트엔드를 별도로 구성하는 풀스택 어휘 카드 앱을 만듭니다.

## 1단계: Laravel 13.x API 백엔드 설정

### 프로젝트 생성 및 기본 설정
1. `backend` 폴더에 Laravel 13.x 프로젝트를 생성하세요.
2. 데이터베이스는 SQLite를 사용합니다. `.env` 파일에서 `DB_CONNECTION=sqlite`로 설정하고, `database/database.sqlite` 파일을 생성하세요.
3. CORS 설정: `config/cors.php`에서 `'paths' => ['api/*']`, `'allowed_origins' => ['http://localhost:5173']` (React Vite 기본 포트) 설정. `php artisan config:cache` 실행.

### 데이터베이스 마이그레이션
`cards` 테이블을 생성하는 마이그레이션 파일을 작성하세요.
- 컬럼: `id`, `front` (단어, string), `back` (뜻, text), `created_at`, `updated_at`
- 마이그레이션 실행: `php artisan migrate`

### Card 모델 생성
`app/Models/Card.php` 모델을 생성하고, `$fillable = ['front', 'back'];`로 설정하세요.

### API 라우트 및 컨트롤러
`routes/api.php`에 다음 라우트를 추가하세요:
- `GET /api/cards` - 모든 카드 목록 반환 (JSON)
- `POST /api/cards` - 새 카드 생성 (front, back 필드 받기)
- `DELETE /api/cards/{id}` - 카드 삭제
- `GET /api/cards/random` - 랜덤 카드 1개 반환 (퀴즈용)

`app/Http/Controllers/CardController.php`를 생성하고 위 라우트에 대응하는 메서드를 구현하세요.
- `index()`: `Card::all()` 반환
- `store(Request $request)`: `$request->validate(['front' => 'required', 'back' => 'required'])`로 검증 후 `Card::create()` 저장
- `destroy($id)`: `Card::findOrFail($id)->delete()`
- `random()`: `Card::inRandomOrder()->first()` 반환 (카드가 없으면 404)

### 서버 실행
`php artisan serve --port=8000`로 Laravel API 서버를 실행하세요. `http://localhost:8000/api/cards`에서 빈 배열 `[]`이 반환되면 성공입니다.

## 2단계: React 19 프론트엔드 설정 및 단어 목록 페이지

### React 프로젝트 생성
1. 루트 폴더(`pocket-vocab-quiz-app`)에서 `npm create vite@latest frontend -- --template react`로 React 프로젝트를 생성하세요.
2. `cd frontend && npm install` 실행.
3. Tailwind CSS 설치:
   - `npm install -D tailwindcss postcss autoprefixer`
   - `npx tailwindcss init -p`
   - `tailwind.config.js`에서 `content: ['./index.html', './src/**/*.{js,jsx}']` 설정
   - `src/index.css`에 `@tailwind base; @tailwind components; @tailwind utilities;` 추가
4. React Router 설치: `npm install react-router-dom`

### 프로젝트 구조
`src` 폴더 구조:
- `src/pages/CardList.jsx` - 단어 목록 페이지
- `src/pages/Quiz.jsx` - 퀴즈 페이지 (다음 단계에서 구현)
- `src/App.jsx` - 라우터 설정

### App.jsx 라우터 설정
`App.jsx`에서 React Router로 다음 라우트를 설정하세요:
- `/` - CardList 컴포넌트 (단어 목록)
- `/quiz` - Quiz 컴포넌트 (퀴즈 모드)

상단에 네비게이션 바를 추가하여 "단어 목록"과 "퀴즈" 링크를 제공하세요 (Tailwind로 스타일링).

### CardList.jsx 구현
단어 목록 페이지를 구현하세요.

**기능:**
1. **단어 추가 폼**: 상단에 입력 폼 (front, back 필드)과 "추가" 버튼. 제출 시 `POST http://localhost:8000/api/cards`로 데이터 전송.
2. **단어 목록 표시**: `GET http://localhost:8000/api/cards`로 카드 목록을 가져와 리스트로 표시. 각 카드는 "앞면 (단어)" / "뒷면 (뜻)" 형식으로 표시.
3. **삭제 버튼**: 각 카드 옆에 "삭제" 버튼. 클릭 시 `DELETE http://localhost:8000/api/cards/{id}` 호출 후 목록 새로고침.
4. **로딩 상태**: 데이터 로딩 중에는 "로딩 중..." 메시지 표시.
5. **에러 핸들링**: API 요청 실패 시 에러 메시지 표시.

**상태 관리** (useState 사용):
- `cards` (배열): 카드 목록
- `front`, `back` (문자열): 입력 폼 상태
- `loading` (boolean): 로딩 상태
- `error` (문자열): 에러 메시지

**스타일링**: Tailwind CSS로 깔끔한 카드 레이아웃, 버튼, 입력 폼을 구현하세요. 반응형 디자인 (모바일 대응).

### 실행
`npm run dev`로 React 앱을 실행하고 `http://localhost:5173`에서 확인하세요. Laravel API가 `http://localhost:8000`에서 실행 중이어야 합니다.

## 3단계: 퀴즈 페이지 구현 - 카드 뒤집기 & 진행 상태

### Quiz.jsx 구현
`src/pages/Quiz.jsx` 파일을 생성하고 퀴즈 모드를 구현하세요.

**기능:**
1. **랜덤 카드 불러오기**: 컴포넌트가 마운트되면 `GET http://localhost:8000/api/cards/random`으로 랜덤 카드 1개를 가져옵니다.
2. **카드 표시**: 화면 중앙에 큰 카드를 표시합니다. 초기에는 앞면(front, 단어)만 보입니다.
3. **카드 뒤집기**: 카드를 클릭하면 뒷면(back, 뜻)이 표시됩니다. 다시 클릭하면 앞면으로 돌아갑니다. CSS `transform: rotateY(180deg)` 애니메이션으로 뒤집기 효과를 구현하세요.
4. **다음 카드 버튼**: "다음 카드" 버튼을 클릭하면 새로운 랜덤 카드를 불러옵니다. 카드는 자동으로 앞면 상태로 초기화됩니다.
5. **진행 상태**: 상단에 "복습한 카드: X개"를 표시합니다. 다음 카드 버튼을 누를 때마다 카운트가 증가합니다.
6. **카드 없음 처리**: 등록된 카드가 없으면 "아직 등록된 단어가 없습니다. 단어 목록에서 추가해주세요!" 메시지와 함께 "/"로 이동하는 링크를 표시합니다.

**상태 관리** (useState 사용):
- `currentCard` (객체 또는 null): 현재 표시 중인 카드
- `isFlipped` (boolean): 카드가 뒤집혔는지 여부
- `reviewedCount` (숫자): 복습한 카드 개수
- `loading`, `error`: 로딩 및 에러 상태

**스타일링**:
- Tailwind CSS로 카드 디자인: 그림자, 둥근 모서리, 큰 폰트
- 카드 뒤집기 애니메이션: `transition-transform duration-500 transform-style-preserve-3d` 클래스 사용. 앞면/뒷면을 `absolute`로 겹쳐 배치하고, 뒷면은 `rotateY(180deg)` 초기 상태. 부모 요소에 `isFlipped` 상태에 따라 `rotateY(180deg)` 클래스 토글.
- "다음 카드" 버튼: 카드 아래 중앙 배치, 눈에 띄는 색상 (예: 파란색)
- 진행 상태: 상단 우측에 배지 형태로 표시

### 테스트
1. CardList 페이지에서 단어를 여러 개 추가하세요.
2. Quiz 페이지로 이동하여 랜덤 카드가 표시되는지 확인하세요.
3. 카드를 클릭하여 뒤집기 애니메이션이 작동하는지 확인하세요.
4. "다음 카드" 버튼을 눌러 새 카드가 로드되고 복습 카운트가 증가하는지 확인하세요.
5. 모든 카드를 삭제한 후 Quiz 페이지에서 "카드 없음" 메시지가 표시되는지 확인하세요.