🎨 일러스트 작품 판매샵 - 디지털 아트 마켓플레이스

mkdir illustration-art-shop-platform && cd illustration-art-shop-platform

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

Laravel 13.x 백엔드 API 프로젝트를 생성해주세요.

요구사항:
- Laravel 13.x 최신 버전 설치
- SQLite 데이터베이스 설정 (.env 파일에서 DB_CONNECTION=sqlite 설정)
- CORS 미들웨어 설정 (React 프론트엔드와 통신 가능하도록)
- artworks 테이블 마이그레이션 생성:
  - id (primary key)
  - title (string, 작품 제목)
  - description (text, 작품 설명)
  - price (decimal, 가격)
  - image_url (string, 이미지 URL)
  - category (string, 카테고리 - 예: 일러스트, 디지털페인팅, 캐릭터디자인)
  - size (string, 사이즈 정보 - 예: 3000x4000px)
  - created_at, updated_at
- Artwork 모델 생성 (fillable 속성 설정)
- 시더 파일 생성하여 샘플 작품 5개 추가 (이미지는 Lorem Picsum 또는 Unsplash API 사용)
- API 라우트 설정 (routes/api.php):
  - GET /api/artworks - 전체 작품 목록
  - GET /api/artworks/{id} - 작품 상세 정보
- ArtworkController 생성하여 index(), show() 메서드 구현
- JSON 응답 형식으로 데이터 반환

실행 명령:
- php artisan migrate
- php artisan db:seed
- php artisan serve (포트 8000에서 실행)

같은 폴더(illustration-art-shop-platform) 내에 React 19 프론트엔드 프로젝트를 생성해주세요.

요구사항:
- Vite를 사용한 React 19 프로젝트 생성 (frontend 폴더에)
- Tailwind CSS 설치 및 설정
- React Router 설치 (react-router-dom)
- 기본 폴더 구조:
  - src/components/ (컴포넌트 폴더)
  - src/pages/ (페이지 컴포넌트)
  - src/services/ (API 호출 함수)
- API 서비스 파일 생성 (src/services/api.js):
  - fetchArtworks() - 전체 작품 목록 가져오기
  - fetchArtworkById(id) - 작품 상세 정보 가져오기
  - fetch API 사용, Laravel 백엔드(http://localhost:8000/api) 연결
- 기본 라우팅 설정:
  - / - 작품 갤러리 페이지
  - /artwork/:id - 작품 상세 페이지
  - /cart - 장바구니 페이지
- App.jsx에 기본 레이아웃 및 네비게이션 바 구현:
  - 로고, 갤러리 링크, 장바구니 아이콘 (장바구니 아이템 개수 표시)
  - Tailwind CSS로 스타일링 (반응형 디자인)

실행 명령:
- npm run dev (포트 5173에서 실행)

작품 갤러리 페이지(src/pages/Gallery.jsx)를 구현해주세요.

요구사항:
- useEffect와 useState를 사용하여 컴포넌트 마운트 시 API에서 작품 목록 가져오기
- 로딩 상태 표시 (스피너 또는 "Loading..." 텍스트)
- 작품 목록을 그리드 레이아웃으로 표시:
  - 반응형 그리드 (모바일 1열, 태블릿 2열, 데스크톱 3열)
  - 각 작품 카드:
    - 썸네일 이미지 (object-cover로 비율 유지)
    - 작품 제목
    - 가격 (원화 표시, 천 단위 콤마)
    - 카테고리 배지
    - 호버 시 확대 효과 (transform scale)
  - 카드 클릭 시 상세 페이지로 이동 (React Router Link 사용)
- 에러 처리 (API 호출 실패 시 에러 메시지 표시)
- Tailwind CSS로 세련된 디자인:
  - 카드 그림자 효과
  - 부드러운 애니메이션 (transition)
  - 카테고리 배지 색상 구분

스타일 가이드:
- 메인 컬러: 파스텔 톤 (예: 연보라, 연핑크)
- 폰트: 깔끔한 sans-serif
- 여백: 넉넉한 padding/margin

작품 상세 페이지(src/pages/ArtworkDetail.jsx)와 장바구니 기능을 구현해주세요.

요구사항:

### 작품 상세 페이지
- useParams로 URL에서 작품 ID 가져오기
- useEffect로 해당 작품 정보 API 호출
- 레이아웃:
  - 왼쪽: 큰 작품 이미지 (클릭 시 모달로 확대 - 선택사항)
  - 오른쪽: 작품 정보
    - 제목 (큰 폰트)
    - 카테고리 배지
    - 가격 (강조 스타일)
    - 사이즈 정보
    - 작품 설명 (여러 줄)
    - "장바구니에 추가" 버튼 (눈에 띄는 색상)
    - "갤러리로 돌아가기" 링크
- 장바구니 추가 버튼 클릭 시:
  - localStorage에 장바구니 아이템 저장 (배열 형태)
  - 알림 메시지 표시 ("장바구니에 추가되었습니다!")
  - 네비게이션 바의 장바구니 아이콘 개수 업데이트

### 장바구니 Context 또는 상태 관리
- App.jsx 또는 별도 Context 파일에 장바구니 상태 관리:
  - cartItems (배열)
  - addToCart(item) 함수
  - removeFromCart(id) 함수
  - getCartCount() 함수
  - getTotalPrice() 함수
- localStorage와 동기화 (새로고침 시에도 장바구니 유지)

스타일:
- 큰 이미지는 최대 너비 제한
- 버튼은 호버 시 색상 변경
- 반응형: 모바일에서는 세로 레이아웃

장바구니 페이지(src/pages/Cart.jsx)를 구현하고 최종 마무리를 해주세요.

요구사항:

### 장바구니 페이지
- localStorage에서 장바구니 아이템 불러오기
- 장바구니가 비어있을 때:
  - "장바구니가 비어있습니다" 메시지
  - "갤러리 둘러보기" 링크
- 장바구니 아이템 목록:
  - 각 아이템:
    - 썸네일 이미지 (작은 크기)
    - 작품 제목
    - 가격
    - 삭제 버튼 (X 아이콘)
  - 테이블 또는 카드 형태로 표시
- 하단에 총 금액 표시:
  - 소계 (작품 가격 합계)
  - 배송비 (예: 무료 또는 3,000원)
  - 총 결제 금액 (강조 스타일)
- "주문하기" 버튼 (클릭 시 alert로 "주문이 완료되었습니다!" 메시지 - 실제 결제 연동은 하지 않음)
- 주문 완료 후 장바구니 비우기

### 최종 마무리
- 모든 페이지에서 반응형 디자인 확인
- 로딩 상태와 에러 처리 개선
- 코드 정리 및 주석 추가
- README.md 작성:
  - 프로젝트 소개
  - 실행 방법 (Laravel 백엔드, React 프론트엔드 각각)
  - 기능 목록
  - 스크린샷 (선택사항)

스타일:
- 장바구니 아이템 사이 구분선
- 삭제 버튼 호버 시 빨간색
- 총 금액은 큰 폰트로 강조
- "주문하기" 버튼은 눈에 띄는 색상 (예: 초록색)