풀스택 간단 영단어 암기장

mkdir vocabulary-flashcard-app && cd vocabulary-flashcard-app

이 폴더에서 풀스택 영단어 암기장 프로젝트를 시작합니다.

## 백엔드 (Laravel 13.x API) 설정

1. `backend` 폴더를 만들고 Laravel 13.x 프로젝트를 생성하세요.
2. SQLite 데이터베이스를 사용하도록 `.env` 파일을 설정하세요 (`DB_CONNECTION=sqlite`, `database/database.sqlite` 파일 생성).
3. `vocabularies` 테이블을 생성하는 마이그레이션 파일을 만드세요. 필드: `id`, `word` (string, 영단어), `meaning` (text, 한글 뜻), `timestamps`.
4. 마이그레이션을 실행하여 테이블을 생성하세요.
5. `Vocabulary` 모델을 생성하세요 (fillable: word, meaning).
6. CORS를 설정하여 React 프론트엔드(http://localhost:5173)에서 API 호출이 가능하도록 하세요 (`config/cors.php`에서 `'allowed_origins' => ['http://localhost:5173']` 설정).

백엔드 폴더 구조:
```
backend/
├── app/Models/Vocabulary.php
├── database/migrations/xxxx_create_vocabularies_table.php
├── database/database.sqlite
├── .env (SQLite 설정)
└── config/cors.php (CORS 설정)
```

명령어 예시를 포함하여 상세히 안내해주세요.

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

`backend` 폴더에서 작업합니다.

1. `VocabularyController`를 생성하세요.
2. 다음 RESTful API 엔드포인트를 구현하세요:
   - `GET /api/vocabularies`: 모든 단어 목록 반환 (JSON)
   - `POST /api/vocabularies`: 새 단어 저장 (요청 body: word, meaning)
   - `DELETE /api/vocabularies/{id}`: 특정 단어 삭제
3. `routes/api.php`에 라우트를 등록하세요.
4. 각 API는 JSON 형식으로 응답하도록 구현하세요.
5. POST 요청 시 유효성 검사를 추가하세요 (word, meaning 필수).

API 응답 예시:
```json
// GET /api/vocabularies
[
  {"id": 1, "word": "apple", "meaning": "사과", "created_at": "...", "updated_at": "..."},
  {"id": 2, "word": "book", "meaning": "책", "created_at": "...", "updated_at": "..."}
]

// POST /api/vocabularies (성공)
{"id": 3, "word": "cat", "meaning": "고양이", "created_at": "...", "updated_at": "..."}
```

Postman이나 curl로 API 테스트가 가능하도록 Laravel 개발 서버를 실행하세요 (`php artisan serve`).

## 프론트엔드 (React 19 + Vite) 설정

프로젝트 루트 폴더로 돌아와서 작업합니다.

1. `frontend` 폴더를 만들고 React 19 + Vite 프로젝트를 생성하세요 (`npm create vite@latest frontend -- --template react`).
2. `frontend` 폴더로 이동하여 의존성을 설치하세요 (`npm install`).
3. Tailwind CSS를 설치하고 설정하세요.
4. `src/App.jsx`를 다음과 같이 구성하세요:
   - 상단에 단어 입력 폼 (영단어, 한글 뜻 입력 필드와 추가 버튼)
   - 하단에 단어 카드 목록 (그리드 레이아웃)
   - useState로 단어 목록 상태 관리
5. 개발 서버를 실행하세요 (`npm run dev`, http://localhost:5173).

초기 UI 구조만 만들고, API 연동은 다음 단계에서 진행합니다. 입력 폼과 카드 레이아웃이 보이도록 더미 데이터를 사용하세요.

Tailwind CSS로 깔끔하게 스타일링하세요 (카드는 그림자와 둥근 모서리 적용).

## React에서 Laravel API 연동

`frontend/src/App.jsx`에서 작업합니다.

1. 컴포넌트가 마운트될 때 Laravel API (`http://localhost:8000/api/vocabularies`)에서 단어 목록을 가져와 상태에 저장하세요 (useEffect + fetch).
2. 입력 폼에서 새 단어를 추가할 때 POST 요청을 보내고, 성공하면 상태를 업데이트하여 화면에 즉시 반영하세요.
3. 각 카드에 삭제 버튼을 추가하고, 클릭 시 DELETE 요청을 보낸 후 상태에서 해당 단어를 제거하세요.
4. 에러 처리를 추가하세요 (API 호출 실패 시 콘솔 에러 로그 또는 알림 표시).

API 호출 예시:
```javascript
// GET
fetch('http://localhost:8000/api/vocabularies')
  .then(res => res.json())
  .then(data => setVocabularies(data));

// POST
fetch('http://localhost:8000/api/vocabularies', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ word: '...', meaning: '...' })
})
  .then(res => res.json())
  .then(newVocab => setVocabularies([...vocabularies, newVocab]));

// DELETE
fetch(`http://localhost:8000/api/vocabularies/${id}`, { method: 'DELETE' })
  .then(() => setVocabularies(vocabularies.filter(v => v.id !== id)));
```

백엔드 서버(http://localhost:8000)와 프론트엔드 서버(http://localhost:5173)를 모두 실행하여 CRUD 기능이 정상 작동하는지 확인하세요.

## 카드 플립 효과 구현

`frontend/src` 폴더에 `VocabularyCard.jsx` 컴포넌트를 생성하세요.

1. 카드를 클릭하면 앞면(영단어)과 뒷면(한글 뜻)이 뒤집히는 플립 애니메이션을 구현하세요.
2. useState로 각 카드의 플립 상태를 관리하세요 (isFlipped).
3. CSS transform과 transition을 사용하여 3D 플립 효과를 만드세요.
4. 앞면에는 영단어만, 뒷면에는 한글 뜻만 표시하세요.
5. 삭제 버튼은 카드 우측 상단에 작은 X 아이콘으로 배치하세요.

CSS 예시:
```css
.card {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.card.flipped {
  transform: rotateY(180deg);
}
.card-front, .card-back {
  backface-visibility: hidden;
}
.card-back {
  transform: rotateY(180deg);
}
```

`App.jsx`에서 VocabularyCard 컴포넌트를 사용하여 카드 목록을 렌더링하세요.

카드 클릭 시 부드러운 플립 애니메이션이 작동하는지 확인하세요.