# 프리뷰 패널

Preview 패널에서는 만들고 있는 앱을 실시간으로 확인하고 테스트할 수 있습니다.

***

### 주요 특징

#### 1. 실시간 렌더링

AI가 코드를 생성/수정하면 **즉시** Preview에 반영됩니다.

* 코드 변경 → 자동 새로고침
* 별도의 빌드 과정 없음
* 실제 앱과 동일한 동작

#### 2. 상호작용 가능

Preview에서 실제 앱처럼 동작합니다.

* 버튼 클릭
* 폼 입력
* 모달 열기/닫기
* 페이지 이동

#### 3. 반응형 확인

PC와 Mobile 뷰를 전환하여 반응형 디자인을 확인합니다.

***

### PC / Mobile 전환

Header의 토글 버튼으로 전환합니다.

| 모드         | 화면 크기    | 용도           |
| ---------- | -------- | ------------ |
| **PC**     | 전체 너비    | 데스크톱 레이아웃 확인 |
| **Mobile** | 375px 너비 | 모바일 레이아웃 확인  |

{% hint style="info" %}
Mobile 뷰에서 레이아웃이 깨지면 AI에게 반응형 수정을 요청하세요.

```
"모바일에서 레이아웃이 깨져.
작은 화면에서도 잘 보이게 반응형으로 수정해줘."
```

{% endhint %}

***

### Visual Edit 모드

Visual Edit 모드가 활성화되면 Preview에서 요소를 선택할 수 있습니다.

#### 활성화 방법

Chat 패널의 🎯 버튼 클릭

#### 선택 방법

1. Preview에서 수정할 요소 위에 마우스 오버
2. 요소가 하이라이트됨
3. 클릭하여 선택

#### 선택 후

* Chat에 선택된 요소 정보 표시
* Right 패널에 상세 정보 표시
* 해당 요소에 대한 수정 요청 가능

→ Visual Edit Mode 상세

***

### 데이터 테스트

Preview에서 입력한 데이터는 **임시 데이터**입니다.

#### 임시 데이터 특징

* 새로고침하면 사라짐 (데이터 저장 기능 추가 전)
* 에디터 내에서만 유지
* 테스트 목적으로 사용

#### 실제 데이터 저장

데이터를 영구 저장하려면 AI에게 요청하세요.

```
"데이터를 서버에 저장할 수 있게 해줘"
```

저장 기능 추가 후에는:

* 입력한 데이터가 서버에 저장
* 새로고침해도 유지
* 배포 후에도 동일하게 동작

***

### 페이지 네비게이션

다중 페이지 앱에서는 Preview 내에서 페이지를 이동할 수 있습니다.

#### 페이지 이동 방법

* 앱 내 링크/버튼 클릭
* URL 직접 입력 (Header의 URL 입력창)

#### 현재 페이지 확인

Chat 패널 하단의 페이지 칩에서 현재 경로를 확인합니다.

```
📄 /employees/detail
```

***

### 로딩 상태

AI가 코드를 생성하는 동안 로딩 오버레이가 표시됩니다.

* 스피너 애니메이션
* "Loading preview\..." 메시지
* 코드 생성 완료 시 자동으로 사라짐

***

### 에러 표시

코드에 오류가 있으면 Preview에 에러 메시지가 표시됩니다.

#### 에러 메시지 예시

```
Error: Cannot read property 'map' of undefined
  at EmployeeTable (src/components/EmployeeTable.js:15:23)
```

#### 에러 해결 방법

1. **AI에게 요청**: "Preview에서 에러가 나. 수정해줘"
2. **직접 수정** (Pro): Code 패널에서 해당 라인 수정

{% hint style="info" %}
에러 메시지를 그대로 복사해서 AI에게 전달하면 더 정확한 수정이 가능합니다.
{% endhint %}

***

### 새로고침

Preview를 수동으로 새로고침하려면:

* Header의 **새로고침 버튼** 클릭
* 키보드 단축키 사용

#### 새로고침이 필요한 경우

* Preview가 멈춘 것 같을 때
* 상태가 꼬인 것 같을 때
* 초기 상태로 돌아가고 싶을 때

***

### Preview 확대/축소

Code 패널이 열려 있을 때 Preview 패널 크기를 조절할 수 있습니다.

* **접기 버튼** (◀): Preview 숨김
* **펼치기 버튼** (▶): Preview 표시

***

### 팁

{% hint style="info" %}
**실제 사용 시나리오로 테스트**

Preview에서 실제 사용자처럼 앱을 사용해보세요. 예상치 못한 문제를 미리 발견할 수 있습니다.
{% endhint %}

{% hint style="info" %}
**Mobile 뷰 체크**

배포 전에 반드시 Mobile 뷰에서 레이아웃을 확인하세요. 실제 사용자의 절반 이상이 모바일로 접속합니다.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.waveon.io/editor/preview-panel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.