🎸 인디 아티스트 팬 레터 수신함 - 팬과의 소통 공간

mkdir indie-artist-fanmail-inbox && cd indie-artist-fanmail-inbox

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

Laravel 13.x 백엔드 API 서버를 생성하세요.

1. `backend` 폴더에 Laravel 13.x 프로젝트 생성
2. SQLite 데이터베이스 설정 (.env 파일에서 DB_CONNECTION=sqlite)
3. `letters` 테이블 마이그레이션 생성:
   - id (Primary Key)
   - nickname (string, 팬 닉네임)
   - title (string, 레터 제목)
   - content (text, 레터 내용)
   - email (string, nullable, 선택적 이메일)
   - emoji_reaction (string, nullable, 이모지 반응: heart/star/clap)
   - is_read (boolean, default false, 읽음 여부)
   - reply (text, nullable, 아티스트 답장)
   - timestamps
4. 마이그레이션 실행 (`php artisan migrate`)
5. CORS 설정 (프론트엔드 http://localhost:5173에서 접근 허용)
6. API 라우트 설정 (routes/api.php):
   - GET /api/letters (모든 레터 조회)
   - POST /api/letters (새 레터 작성)
   - GET /api/letters/{id} (레터 상세 조회)
   - PUT /api/letters/{id}/reply (답장 작성)
   - PATCH /api/letters/{id}/emoji (이모지 반응 추가)
   - PATCH /api/letters/{id}/read (읽음 표시)
7. LetterController 생성 및 각 엔드포인트 구현
8. 개발 서버 실행 (`php artisan serve`)

모든 API 엔드포인트가 정상 작동하는지 확인하세요.

React 19 프론트엔드 프로젝트를 생성하세요.

1. 프로젝트 루트에서 `frontend` 폴더에 Vite + React 19 프로젝트 생성
2. Tailwind CSS 설치 및 설정
3. 기본 폴더 구조 생성:
   - src/components (재사용 컴포넌트)
   - src/pages (페이지 컴포넌트)
   - src/api (API 호출 함수)
4. axios 설치 및 API 베이스 URL 설정 (http://localhost:8000/api)
5. 기본 레이아웃 컴포넌트 생성:
   - 헤더: "💌 팬 레터함" 타이틀, 아티스트 프로필 영역
   - 메인 컨텐츠 영역
   - 푸터: 간단한 저작권 정보
6. Tailwind로 따뜻하고 감성적인 디자인 적용 (파스텔 톤, 부드러운 그라데이션)
7. 개발 서버 실행 (`npm run dev`)

React 앱이 http://localhost:5173에서 실행되고 기본 레이아웃이 표시되는지 확인하세요.

팬 레터 작성 폼 컴포넌트를 구현하세요.

1. `src/components/LetterForm.jsx` 생성
2. 입력 필드:
   - 닉네임 (필수)
   - 제목 (필수)
   - 내용 (textarea, 필수)
   - 이메일 (선택)
3. useState로 폼 상태 관리
4. 제출 버튼 클릭 시 POST /api/letters API 호출
5. 제출 성공 시:
   - 폼 초기화
   - 성공 메시지 표시 (3초 후 자동 사라짐)
   - 레터 목록 새로고침
6. 유효성 검사:
   - 필수 필드 비어있으면 에러 메시지
   - 이메일 형식 검증 (선택 필드이지만 입력 시)
7. Tailwind로 아름다운 폼 디자인:
   - 부드러운 인풋 스타일
   - 호버/포커스 효과
   - 제출 버튼 애니메이션
8. App.jsx에 LetterForm 컴포넌트 추가

팬 레터 작성 폼이 화면에 표시되고, 레터를 제출하면 백엔드 API로 데이터가 전송되는지 확인하세요.

팬 레터 목록 및 상세 보기 컴포넌트를 구현하세요.

1. `src/components/LetterList.jsx` 생성:
   - useEffect로 컴포넌트 마운트 시 GET /api/letters 호출
   - useState로 레터 목록 상태 관리
   - 레터를 카드 형태로 리스트 렌더링
   - 각 카드에 닉네임, 제목, 작성 날짜, 읽음 여부 배지 표시
   - 카드 클릭 시 상세 보기로 이동
2. `src/components/LetterDetail.jsx` 생성:
   - 레터 ID를 props로 받아 GET /api/letters/{id} 호출
   - 레터 전문 표시 (닉네임, 제목, 내용, 이메일, 작성 날짜)
   - 이모지 반응 버튼 (하트/별/박수) 추가
   - 이모지 클릭 시 PATCH /api/letters/{id}/emoji 호출
   - 답장 작성 폼 (textarea + 제출 버튼)
   - 답장 제출 시 PUT /api/letters/{id}/reply 호출
   - 답장이 있으면 레터 아래에 표시
   - 뒤로가기 버튼 (목록으로 돌아가기)
3. 목록과 상세 보기를 조건부 렌더링으로 전환 (useState로 선택된 레터 ID 관리)
4. Tailwind로 카드 디자인:
   - 호버 시 살짝 떠오르는 효과
   - 읽음/안읽음 상태에 따라 배지 색상 변경
   - 이모지 반응 버튼 애니메이션

레터 목록이 표시되고, 카드 클릭 시 상세 보기로 전환되며, 이모지 반응과 답장 작성이 가능한지 확인하세요.