공동구매 모집 플랫폼 - 함께 사면 더 저렴해요

mkdir group-buy-recruitment-platform && cd group-buy-recruitment-platform

이 폴더에서 공동구매 모집 플랫폼 프로젝트를 시작합니다.

먼저 Laravel 13.x 백엔드 API 서버를 설정해주세요:

1. `backend` 폴더에 Laravel 13.x 프로젝트 생성
2. SQLite 데이터베이스 설정 (.env 파일에서 DB_CONNECTION=sqlite)
3. `group_buys` 테이블 마이그레이션 생성:
   - id (primary key)
   - title (상품명, string)
   - description (설명, text)
   - image_url (상품 이미지 URL, string, nullable)
   - target_count (목표 인원, integer)
   - current_count (현재 참여 인원, integer, default 0)
   - deadline (마감일, date)
   - status (상태: 'active' 또는 'closed', string, default 'active')
   - timestamps
4. 마이그레이션 실행
5. API 라우트 설정 (routes/api.php):
   - GET /api/group-buys - 전체 목록 조회
   - POST /api/group-buys - 새 공동구매 생성
   - GET /api/group-buys/{id} - 상세 조회
   - POST /api/group-buys/{id}/join - 참여하기
6. GroupBuyController 생성 및 기본 메서드 구현
7. CORS 설정 (React 개발 서버 http://localhost:5173 허용)

모든 설정이 완료되면 `php artisan serve`로 서버를 실행했을 때 http://localhost:8000/api/group-buys 접근이 가능해야 합니다.

이제 GroupBuyController의 비즈니스 로직을 구현해주세요:

1. index() 메서드:
   - 모든 공동구매 목록을 최신순으로 반환
   - 마감일이 지난 항목은 자동으로 status를 'closed'로 업데이트
   - JSON 형태로 반환

2. store() 메서드:
   - Request 유효성 검사 (title, description, target_count, deadline 필수)
   - 새 공동구매 생성 (current_count는 0, status는 'active'로 자동 설정)
   - 생성된 데이터 JSON 반환

3. show($id) 메서드:
   - 특정 공동구매 상세 정보 반환
   - 존재하지 않으면 404 에러

4. join($id) 메서드:
   - current_count를 1 증가
   - current_count >= target_count 이면 status를 'closed'로 변경
   - 업데이트된 데이터 반환

5. GroupBuy 모델에 $fillable 속성 설정

테스트를 위해 Seeder를 만들어 더미 데이터 3~5개를 생성해주세요 (다양한 상태의 공동구매).

이제 React 19 프론트엔드를 설정해주세요:

1. 프로젝트 루트에서 `frontend` 폴더에 React + Vite 프로젝트 생성
2. Tailwind CSS 설치 및 설정
3. axios 설치 (`npm install axios`)
4. src/api/groupBuys.js 파일 생성:
   - axios 인스턴스 설정 (baseURL: http://localhost:8000/api)
   - getGroupBuys() - 전체 목록 가져오기
   - getGroupBuy(id) - 상세 정보 가져오기
   - createGroupBuy(data) - 새 공동구매 생성
   - joinGroupBuy(id) - 참여하기

5. App.jsx에서 기본 레이아웃 구성:
   - 헤더 ("공동구매 모집 플랫폼" 제목)
   - 메인 컨테이너
   - Tailwind CSS로 깔끔한 디자인

6. 개발 서버 실행 시 http://localhost:5173 접근 가능하도록 설정

vite.config.js에서 포트를 5173으로 명시하고, React 프로젝트가 정상 실행되는지 확인해주세요.

공동구매 목록을 보여주는 컴포넌트를 만들어주세요:

1. src/components/GroupBuyList.jsx 컴포넌트 생성:
   - useState로 groupBuys 상태 관리
   - useEffect에서 getGroupBuys() API 호출하여 데이터 로드
   - 로딩 상태 표시
   - 공동구매 카드 형태로 목록 렌더링:
     * 상품 이미지 (image_url이 있으면 표시, 없으면 기본 이미지)
     * 제목 (title)
     * 목표 인원 / 현재 인원 (예: "5명 / 10명")
     * 달성률 퍼센트 표시
     * 마감일 (deadline)
     * 상태 배지 (active: 초록색 "모집중", closed: 회색 "마감")
     * 목표 달성 시 "성공" 배지 추가 표시
   - 카드 클릭 시 상세 페이지로 이동 (나중에 구현)

2. Tailwind CSS로 그리드 레이아웃 (grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3)
3. 각 카드에 hover 효과 추가
4. App.jsx에서 GroupBuyList 컴포넌트 렌더링

목록이 예쁘게 표시되고 데이터가 정상적으로 로드되는지 확인해주세요.

공동구매 상세 페이지와 참여하기 기능을 구현해주세요:

1. src/components/GroupBuyDetail.jsx 컴포넌트 생성:
   - URL에서 id를 받아와 해당 공동구매 상세 정보 로드
   - 상품 이미지 (크게 표시)
   - 제목, 설명 전체 내용
   - 프로그레스 바로 달성률 시각화 (Tailwind로 구현)
   - 현재 인원 / 목표 인원 숫자 표시
   - 마감일까지 남은 일수 계산하여 표시
   - "참여하기" 버튼:
     * status가 'active'일 때만 활성화
     * 클릭 시 joinGroupBuy(id) API 호출
     * 참여 후 데이터 새로고침하여 인원 증가 반영
     * 목표 달성 시 "성공" 메시지 표시
   - "목록으로 돌아가기" 버튼

2. React Router 설치 및 설정:
   - App.jsx에서 라우팅 설정
   - / : GroupBuyList
   - /group-buy/:id : GroupBuyDetail

3. GroupBuyList에서 카드 클릭 시 상세 페이지로 이동하도록 Link 추가

참여하기 버튼을 누르면 실시간으로 인원이 증가하고, 목표 달성 시 UI가 변경되는지 확인해주세요.

새 공동구매를 작성하는 폼을 만들어주세요:

1. src/components/CreateGroupBuy.jsx 컴포넌트 생성:
   - useState로 폼 입력 상태 관리 (title, description, image_url, target_count, deadline)
   - 폼 필드:
     * 상품명 (text input)
     * 설명 (textarea)
     * 상품 이미지 URL (text input, 선택사항)
     * 목표 인원 (number input, min=2)
     * 마감일 (date input, 오늘 이후만 선택 가능)
   - "공동구매 등록하기" 버튼:
     * 클릭 시 createGroupBuy(data) API 호출
     * 성공 시 목록 페이지로 리다이렉트
     * 실패 시 에러 메시지 표시
   - Tailwind CSS로 깔끔한 폼 디자인

2. App.jsx에 라우트 추가: /create
3. GroupBuyList 상단에 "+ 새 공동구매 만들기" 버튼 추가하여 /create로 이동

4. 전체 앱 테스트:
   - 새 공동구매 생성
   - 목록에서 확인
   - 상세 페이지 접근
   - 참여하기 기능
   - 목표 달성 시 상태 변화

모든 기능이 연결되어 작동하는지 최종 확인해주세요. README.md에 프로젝트 설명과 실행 방법을 작성해주세요.