나만의 팟캐스트 에피소드 북마크 - 들은 에피소드 & 메모 관리

Laravel 12.x 백엔드 API 프로젝트를 생성하고 기본 설정을 완료해주세요.

요구사항:
1. Laravel 12.x 프로젝트 생성
2. SQLite 데이터베이스 설정 (.env 파일에서 DB_CONNECTION=sqlite)
3. database/database.sqlite 파일 생성
4. CORS 설정 추가 (config/cors.php에서 localhost:5173 허용)
5. Podcast Episodes 테이블 마이그레이션 생성:
   - id (primary key)
   - podcast_title (string, 팟캐스트 이름)
   - episode_title (string, 에피소드 제목)
   - episode_url (string, nullable, 에피소드 링크)
   - listened_date (date, nullable, 청취 날짜)
   - notes (text, nullable, 메모)
   - is_listened (boolean, default false, 청취 여부)
   - timestamps
6. 마이그레이션 실행
7. PodcastEpisode 모델 생성 (fillable 속성 포함)

프로젝트 구조와 설정 파일을 보여주세요.

Laravel API 라우트와 컨트롤러를 구현해주세요.

요구사항:
1. PodcastEpisodeController 생성 (API 리소스 컨트롤러)
2. routes/api.php에 RESTful API 라우트 정의:
   - GET /api/episodes - 모든 에피소드 조회 (최신순 정렬)
   - POST /api/episodes - 새 에피소드 추가
   - PUT /api/episodes/{id} - 에피소드 수정 (메모, 청취 상태 변경)
   - DELETE /api/episodes/{id} - 에피소드 삭제
3. 컨트롤러 메서드 구현:
   - index(): 모든 에피소드를 JSON으로 반환
   - store(): 요청 데이터 검증 후 새 에피소드 생성
   - update(): 에피소드 정보 수정
   - destroy(): 에피소드 삭제
4. 유효성 검증 규칙:
   - podcast_title: required, string, max:255
   - episode_title: required, string, max:255
   - episode_url: nullable, url
   - listened_date: nullable, date
   - notes: nullable, string
   - is_listened: boolean

API 응답은 모두 JSON 형식으로 반환하고, 적절한 HTTP 상태 코드를 사용하세요.

React 19 프론트엔드 프로젝트를 생성하고 기본 구조를 만들어주세요.

요구사항:
1. Vite를 사용하여 React 19 프로젝트 생성 (npm create vite@latest podcast-frontend -- --template react)
2. Tailwind CSS 설치 및 설정
3. Axios 설치 (npm install axios)
4. src 폴더 구조:
   - components/ (React 컴포넌트)
   - App.jsx (메인 앱 컴포넌트)
   - main.jsx (엔트리 포인트)
5. App.jsx에 기본 레이아웃 구성:
   - 헤더: "나만의 팟캐스트 북마크" 제목
   - 에피소드 추가 폼 영역 (나중에 구현)
   - 에피소드 목록 영역 (나중에 구현)
6. Tailwind CSS로 기본 스타일링 (배경색, 컨테이너, 반응형 그리드)
7. axios 인스턴스 생성 (baseURL을 http://localhost:8000/api로 설정)

개발 서버를 실행하면 기본 레이아웃이 보여야 합니다.

React 앱에서 에피소드 목록 조회 및 표시 기능을 구현해주세요.

요구사항:
1. App.jsx에서 useState로 episodes 상태 관리
2. useEffect를 사용하여 컴포넌트 마운트 시 GET /api/episodes 호출
3. axios로 API 데이터를 가져와 episodes 상태에 저장
4. components/EpisodeCard.jsx 컴포넌트 생성:
   - props: episode 객체, onDelete 함수, onToggleListened 함수
   - 카드 디자인 (Tailwind CSS):
     - 팟캐스트 제목 (굵은 글씨)
     - 에피소드 제목
     - 청취 날짜 (있으면 표시)
     - 메모 (있으면 표시)
     - 청취 상태 배지 (들음/나중에)
     - URL 링크 버튼 (있으면 표시)
     - 삭제 버튼
5. App.jsx에서 episodes 배열을 map으로 순회하며 EpisodeCard 렌더링
6. 로딩 상태 및 에러 처리 추가
7. 에피소드가 없을 때 "아직 저장된 에피소드가 없습니다" 메시지 표시

카드는 그리드 레이아웃으로 표시하고, 반응형으로 만드세요 (모바일: 1열, 태블릿: 2열, 데스크톱: 3열).

에피소드 추가 폼과 삭제 기능을 구현해주세요.

요구사항:
1. components/AddEpisodeForm.jsx 컴포넌트 생성:
   - 입력 필드:
     - 팟캐스트 제목 (required)
     - 에피소드 제목 (required)
     - 에피소드 URL (optional)
     - 청취 날짜 (date picker)
     - 메모 (textarea)
   - "추가하기" 버튼
   - Tailwind CSS로 폼 스타일링 (입력 필드, 버튼)
2. 폼 제출 시:
   - POST /api/episodes로 데이터 전송 (axios)
   - 성공하면 폼 초기화 및 목록 새로고침 (onAdd 콜백 호출)
   - 에러 처리 (alert 또는 에러 메시지 표시)
3. App.jsx에서 AddEpisodeForm 컴포넌트 추가
4. EpisodeCard에서 삭제 버튼 클릭 시:
   - DELETE /api/episodes/{id} 호출
   - 성공하면 목록에서 해당 에피소드 제거 (상태 업데이트)
   - 확인 다이얼로그 추가 ("정말 삭제하시겠습니까?")

폼은 카드 형태로 디자인하고, 목록 위에 배치하세요.

청취 상태 토글 기능과 메모 편집 기능을 추가해주세요.

요구사항:
1. EpisodeCard에 청취 상태 토글 버튼 추가:
   - 현재 상태에 따라 "들음" 또는 "나중에" 배지 표시 (색상 구분)
   - 배지 클릭 시 is_listened 값 반전
   - PUT /api/episodes/{id} 호출하여 상태 업데이트
2. EpisodeCard에 메모 편집 기능 추가:
   - "메모 편집" 버튼 클릭 시 textarea 입력창 표시
   - 메모 저장 버튼 클릭 시 PUT /api/episodes/{id}로 메모 업데이트
   - 취소 버튼으로 편집 모드 종료
3. 상태 업데이트 후 목록 자동 새로고침
4. 로딩 인디케이터 추가 (API 호출 중)
5. 최종 스타일링 개선:
   - 카드 호버 효과
   - 버튼 색상 및 간격 조정
   - 반응형 디자인 최종 점검

모든 기능이 부드럽게 작동하도록 사용자 경험을 개선하세요.