# 스테이지 선택 화면 업데이트 가이드 (3개 스테이지 + 이미지)

## 🎮 새로운 기능

1. **3개의 스테이지** - Stage 1, 2, 3
2. **스테이지 이미지** - 잠금/해제/클리어 상태별 이미지 변경
3. **순차적 잠금** - 이전 스테이지 클리어해야 다음 스테이지 플레이 가능

---

## 📋 Unity 에디터 설정

### 1단계: Stage 3 씬 생성

1. **Project 창에서 Assets/Scenes 폴더**
   - Stage2.unity 복제 → 이름: `Stage3`

2. **Stage3.unity 열기**

3. **Hierarchy에서 LevelGenerator 선택**
   - **Level Data**: Stage3 (아래에서 생성)

---

### 2단계: Stage 3 레벨 데이터 생성

1. **Hierarchy에서 빈 GameObject 생성**
   - 이름: `LevelDataCreator`

2. **LevelDataCreator 컴포넌트 추가**
   - Add Component → `LevelDataCreator`

3. **Inspector 우측 메뉴 (⋮) → Create Stage 3 Data**
   - Console에 "Stage 3 saved..." 메시지 확인

4. **LevelGenerator에 연결**:
   - Stage3 씬의 LevelGenerator 선택
   - Level Data: `Stage3` 드래그 (Assets/Resources/Levels/Stage3.asset)

---

### 3단계: 스테이지 버튼에 이미지 추가

#### 스테이지 이미지 준비 (필요한 이미지):

각 스테이지마다 3개의 이미지가 필요합니다:
- **Locked**: 잠금 상태 이미지 (회색, 자물쇠 등)
- **Unlocked**: 잠금 해제 상태 이미지 (스테이지 미리보기)
- **Completed**: 클리어 상태 이미지 (별, 체크 표시 등)

#### Unity에서 설정:

1. **Stage1Button 선택**

2. **버튼 구조 변경**:
   - Stage1Button 우클릭 → UI → Image
   - 이름: `StageImage`
   - Stage1Button의 자식으로 배치

3. **StageImage 설정**:
   - **Rect Transform**: Stretch (Alt+클릭)
   - **Left, Top, Right, Bottom**: 모두 **10** (여백)
   - **Image 컴포넌트**:
     - Source Image: 스테이지 이미지 드래그
     - Preserve Aspect: ✓

4. **StageButton 컴포넌트에 연결**:
   - Stage1Button 선택 → StageButton 컴포넌트
   - **Stage Image**: StageImage 드래그
   - **Locked Sprite**: 잠금 이미지
   - **Unlocked Sprite**: 해제 이미지
   - **Completed Sprite**: 클리어 이미지

5. **Stage2Button, Stage3Button도 같은 방식으로 설정**

---

### 4단계: Stage 3 버튼 추가

1. **Hierarchy에서 Stage2Button 복제**
   - 이름: `Stage3Button`

2. **Stage3Button 설정**:
   - **Rect Transform**:
     - Pos X: 적절한 위치 (예: 0, 중앙)
     - Pos Y: Stage2Button 아래
   - **StageButton 컴포넌트**:
     - **Stage Number**: **3**
     - **Scene Name**: **Stage3**
     - **Stage Image**: Stage3Button의 StageImage
     - **Locked/Unlocked/Completed Sprite**: 각각 설정

---

### 5단계: StageSelectManager 업데이트

1. **StageSelectManager 선택**

2. **Inspector에서**:
   - **Stage Buttons**: Size를 **3**으로 변경
     - Element 0: Stage1Button
     - Element 1: Stage2Button
     - Element 2: Stage3Button (새로 추가)

---

### 6단계: Build Settings 업데이트

1. **File → Build Settings**

2. **Stage3.unity 추가**:
   - Stage3 씬 열린 상태에서 **Add Open Scenes**

3. **씬 순서**:
   - TitleScreen (index 0)
   - StageSelect (index 1)
   - Stage1 (index 2)
   - Stage2 (index 3)
   - **Stage3 (index 4)** ← 새로 추가

---

## 🎨 이미지가 없는 경우 (임시 방법)

이미지가 아직 없다면 색상으로 구분:

1. **StageImage 설정**:
   - Source Image: None
   - **Color**:
     - Locked: 회색 (R:100, G:100, B:100)
     - Unlocked: 파란색 (R:100, G:150, B:255)
     - Completed: 초록색 (R:100, G:255, B:100)

2. **StageButton 컴포넌트**:
   - Locked/Unlocked/Completed Sprite는 비워두기
   - 스크립트가 색상만 변경합니다

---

## 🎮 테스트하기

### 진행도 테스트:

1. **TitleScreen에서 시작**

2. **StageSelect 확인**:
   - ✓ Stage 1: 잠금 해제 (플레이 가능)
   - ✓ Stage 2, 3: 잠금 (회색, 클릭 불가)

3. **Stage 1 플레이 → Goal 도달**

4. **StageSelect로 복귀**:
   - ✓ Stage 1: 클리어 표시 (완료 이미지)
   - ✓ Stage 2: 잠금 해제 (플레이 가능)
   - ✓ Stage 3: 여전히 잠금

5. **Stage 2 클리어 → Stage 3 잠금 해제 확인**

---

## 🐛 문제 해결

### Stage 3가 안 보인다면?
- Build Settings에 Stage3.unity 추가 확인
- StageSelectManager의 Stage Buttons 배열 크기 확인 (3개)

### 이미지가 안 바뀐다면?
- StageButton 컴포넌트의 Sprite 필드 확인
- Play 모드에서 테스트 (Edit 모드에서는 안 바뀜)

### Stage 2가 잠금 해제 안 된다면?
- Stage 1의 Goal에 도달했는지 확인
- Console에서 "Stage 1 marked as completed!" 메시지 확인

---

## ✅ 완성!

**게임 흐름:**
1. Stage 1만 플레이 가능
2. Stage 1 클리어 → Stage 2 잠금 해제
3. Stage 2 클리어 → Stage 3 잠금 해제
4. 각 스테이지 클리어 시 이미지 변경

**다음 단계:**
- 스테이지별 미리보기 이미지 제작
- 별점 시스템 추가
- 최고 기록 저장
