팀 코드 리뷰 게시판 - 피드백 & 토론 플랫폼

Laravel 12.x 프로젝트를 생성하고 코드 리뷰 게시판을 위한 RESTful API를 구축하세요.

요구사항:
1. 프로젝트명: team-code-review-api
2. 두 개의 모델 생성:
   - CodeReview 모델: title(string), language(string), code(text), description(text), status(enum: 'pending', 'approved', 'needs_revision'), created_at, updated_at
   - Comment 모델: code_review_id(foreign key), author(string), content(text), created_at, updated_at
3. 마이그레이션 파일 생성 및 관계 설정 (CodeReview hasMany Comments)
4. API 라우트 구성 (routes/api.php):
   - GET /api/code-reviews (전체 목록, 필터링/검색 쿼리 파라미터 지원)
   - POST /api/code-reviews (새 리뷰 생성)
   - GET /api/code-reviews/{id} (상세 보기)
   - PUT /api/code-reviews/{id} (수정)
   - DELETE /api/code-reviews/{id} (삭제)
   - POST /api/code-reviews/{id}/comments (댓글 추가)
   - GET /api/code-reviews/{id}/comments (댓글 목록)
5. Controller 생성 (CodeReviewController, CommentController)
6. 검증 규칙 (Form Request) 추가
7. CORS 미들웨어 설정 (모든 origin 허용)
8. API 리소스 클래스로 JSON 응답 포맷 정리

데이터베이스는 SQLite 사용하고, .env 파일 설정도 포함해주세요.

React 19 + Vite 프로젝트를 생성하고 코드 리뷰 게시판의 메인 페이지를 구축하세요.

요구사항:
1. Vite로 React 프로젝트 생성 (프로젝트명: team-code-review-frontend)
2. Tailwind CSS 설치 및 설정
3. 폴더 구조:
   - src/components/ (컴포넌트)
   - src/services/ (API 호출 함수)
   - src/hooks/ (커스텀 훅)
4. API 서비스 파일 생성 (src/services/api.js):
   - axios 또는 fetch로 Laravel API 호출
   - BASE_URL은 http://localhost:8000
   - fetchCodeReviews, createCodeReview, fetchCodeReviewById, updateCodeReview, deleteCodeReview, addComment 함수 구현
5. 메인 페이지 컴포넌트 (App.jsx):
   - 코드 리뷰 목록 표시 (카드 형식)
   - 각 카드에 제목, 언어, 상태, 작성일 표시
   - 필터 UI (언어 선택, 상태 선택)
   - 검색 입력창
   - "새 리뷰 작성" 버튼
6. useState, useEffect 사용하여 데이터 로드 및 상태 관리
7. 반응형 그리드 레이아웃 (모바일: 1열, 태블릿: 2열, 데스크톱: 3열)

아직 상세 페이지나 작성 폼은 만들지 말고, 목록 보기와 필터링만 구현하세요.

코드 리뷰 작성 폼과 상세 보기 페이지를 추가하세요.

요구사항:
1. 새로운 컴포넌트 생성:
   - CodeReviewForm.jsx: 새 리뷰 작성/수정 폼
   - CodeReviewDetail.jsx: 리뷰 상세 보기 + 댓글 섹션
2. CodeReviewForm 컴포넌트:
   - 입력 필드: 제목, 언어(select - JavaScript, Python, Java, PHP, Go, Rust 등), 코드(textarea), 설명(textarea)
   - 제출 버튼, 취소 버튼
   - form validation (빈 값 체크)
   - 제출 시 API 호출하여 새 리뷰 생성
   - 성공 시 목록으로 돌아가기
3. CodeReviewDetail 컴포넌트:
   - 리뷰 정보 표시 (제목, 언어, 상태, 작성일)
   - 코드 블록 표시 (Prism.js 또는 Highlight.js 사용하여 구문 강조)
   - 설명 표시
   - 상태 변경 버튼 (검토 중 → 승인됨 / 수정 필요)
   - 수정/삭제 버튼
   - 댓글 목록 표시
   - 댓글 작성 폼 (작성자명, 내용)
4. 간단한 라우팅 구현:
   - 목록 보기 (기본)
   - 작성 폼 (/create)
   - 상세 보기 (/review/:id)
   - useState로 현재 뷰 관리 또는 React Router 사용
5. Prism.js 설치 및 설정하여 코드 하이라이팅 적용

모든 컴포넌트는 Tailwind CSS로 스타일링하고, 반응형 디자인을 유지하세요.

사용자 경험을 개선하기 위한 추가 기능을 구현하세요.

요구사항:
1. 로딩 상태 표시:
   - API 호출 중일 때 로딩 스피너 또는 스켈레톤 UI 표시
   - 각 컴포넌트에서 loading 상태 관리
2. 에러 핸들링:
   - API 호출 실패 시 에러 메시지 표시
   - 네트워크 오류, 404 오류 등 다양한 케이스 처리
   - 에러 바운더리 추가 (선택사항)
3. 토스트 알림:
   - 리뷰 생성/수정/삭제 성공 시 알림 표시
   - 댓글 추가 성공 시 알림 표시
   - react-hot-toast 또는 유사 라이브러리 사용
4. 빈 상태 UI:
   - 리뷰가 없을 때 "아직 리뷰가 없습니다" 메시지와 일러스트 표시
   - 댓글이 없을 때 "첫 댓글을 작성해보세요" 메시지 표시
5. 코드 복사 버튼:
   - 상세 페이지의 코드 블록 옆에 "복사" 버튼 추가
   - 클릭 시 클립보드에 코드 복사
6. 확인 다이얼로그:
   - 리뷰 삭제 시 확인 다이얼로그 표시
   - "정말 삭제하시겠습니까?" 메시지
7. 페이지네이션 또는 무한 스크롤 (선택):
   - 리뷰가 많을 경우를 대비한 페이지네이션

모든 기능은 접근성과 사용성을 고려하여 구현하세요.

최종 완성도를 높이기 위한 마무리 작업을 수행하세요.

요구사항:
1. 코드 정리 및 리팩토링:
   - 중복 코드 제거
   - 커스텀 훅 분리 (useCodeReviews, useCodeReviewDetail 등)
   - 컴포넌트 분리 (CodeReviewCard, CommentItem, FilterBar 등)
2. 성능 최적화:
   - React.memo로 불필요한 리렌더링 방지
   - useMemo, useCallback 활용
   - 이미지 최적화 (있는 경우)
3. 접근성 개선:
   - 시맨틱 HTML 사용
   - ARIA 레이블 추가
   - 키보드 네비게이션 지원
4. 반응형 디자인 최종 점검:
   - 모바일, 태블릿, 데스크톱에서 모두 테스트
   - 작은 화면에서 햄버거 메뉴 추가 (필요시)
5. README 작성:
   - 프로젝트 설명
   - 설치 및 실행 방법 (백엔드/프론트엔드)
   - 사용 기술 스택
   - 주요 기능 스크린샷
   - API 엔드포인트 문서
6. 환경 변수 설정:
   - .env.example 파일 생성
   - API URL 등 환경 변수로 관리
7. 보너스 기능 중 하나 추가 (선택):
   - 코드 diff 비교 뷰어
   - 좋아요/투표 시스템
   - 마크다운 지원

프로덕션 배포를 고려한 최종 점검을 완료하세요.