SDGs 8. 양질의 일자리와 경제성장 관련 - 자원채굴 게임

Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.

1. 제품 요구사항 문서 (PRD)
프로젝트 개요
명칭: 자원채굴 게임 (Resource Mining Game)
목적: 사용자가 맨손 노동(1단계)과 도구 활용(2단계)의 생산성 차이를 직접 체험하며 기술 발전의 가치를 학습하는 교육용 시뮬레이션 게임.
핵심 가치: 몰입감 있는 타격감, 명확한 성과 비교, 직관적인 UI.
주요 기능
게임 단계 (Game Stages):
시작(Start): 게임 소개 및 1단계 시작 버튼.
1단계(Stage 1): 30초간 맨손으로 광물 채굴 (클릭당 +1).
도구 선택(Tool Selection): 1단계 종료 후 도구 목록 전시 및 랜덤 뽑기 기능.
2단계(Stage 2): 30초간 획득한 도구로 채굴 (도구별 가치 적용).
결과(Result): 1, 2단계 점수 비교 및 교육적 메시지 출력.
도구 시스템 (Tool System):
뾰족한 돌: +3 생산성
호미: +5 생산성
곡괭이: +10 생산성
전동 드릴: +20 생산성 (특수 애니메이션: 강한 진동)
상호작용 및 피드백:
시각 효과: 클릭 시 광물 흔들림, 파편(Particle) 효과, 부유 텍스트(Floating Text).
커스텀 커서: 2단계에서 마우스 포인터가 선택된 도구 아이콘으로 변경되며, 클릭 시 휘두르는 애니메이션 재생.
사운드: 채굴음, 레벨업, 결과 발표 사운드.
기술 스택
Frontend: React, TypeScript, Tailwind CSS.
Animation: Framer Motion (motion/react).
Icons: Lucide React.

---------------------

<시스템 프롬프트>
당신은 숙련된 게임 개발자이자 UI/UX 디자이너입니다. 다음 요구사항에 맞춰 React 기반의 '자원채굴 게임'을 제작해주세요.

### 1. 기술 스택
- React, TypeScript, Tailwind CSS, Framer Motion (motion/react), Lucide React를 사용하세요.

### 2. 게임 로직 및 단계
- **상태 관리**: START, STAGE1, TOOL_SELECTION, STAGE2, RESULT 단계를 관리하세요.
- **시간 제한**: 각 단계는 30초입니다.
- **1단계**: 맨손 채굴 단계로 클릭당 1점씩 획득합니다.
- **도구 선택**: 
  - 1단계 종료 후 '도구 선택' 화면으로 전환됩니다.
  - 4가지 도구(돌(+3), 호미(+5), 곡괭이(+10), 전동 드릴(+20))를 그리드 형태로 보여주세요.
  - [랜덤 도구 뽑기] 버튼을 누르면 셔플 애니메이션 후 하나가 최종 선택됩니다.
- **2단계**: 
  - 선택된 도구로 채굴하며 클릭당 도구의 가치만큼 점수를 얻습니다.
  - **중요**: 마우스 커서를 숨기고 선택된 도구 아이콘이 마우스를 따라다니게 하세요. (Ref를 사용하여 지연 없는 성능 구현)
  - 클릭 시 도구가 -30도 회전하며 휘두르는 효과를 주어야 합니다.
- **결과**: 1단계와 2단계를 비교하는 보고서 형태의 UI를 제공하고 다시하기 기능을 넣으세요.

### 3. 시각 및 인터렉션 디자인
- **테마**: 어두운 광산 느낌의 다크 모드 (radial-gradient 배경).
- **광물**: 중앙에 에메랄드 형태의 광석을 배치하고 클릭 시 scale 및 shake 애니메이션을 적용하세요.
- **피드백**:
  - 클릭 지점에 '+점수'가 위로 솟구치는 Floating Text 효과.
  - 클릭 시 사방으로 튀는 파편(Particle) 효과 (도구가 좋을수록 파편 양 증가).
- **커서**: 2단계 커서는 `pointer-events: none`과 높은 `z-index`를 가져야 하며, 실제 클릭 위치와 아이콘 중심이 일치해야 합니다.

### 4. 컴포넌트 구조 제안
- `App.tsx`: 전체 게임 상태 및 타이머 관리.
- `Mineral.tsx`: 광물 렌더링 및 클릭 애니메이션.
- `FloatingText.tsx`: 점수 부유 효과.
- `Particle.tsx`: 채굴 파편 효과.
- `constants.ts`: 도구 데이터 및 게임 설정값.

이 모든 기능을 포함하여 코드의 가독성이 높고 성능이 최적화된 전체 소스 코드를 작성해 주세요.