> For the complete documentation index, see [llms.txt](https://docs.waveon.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.waveon.io/editor/preview-panel.md).

# 프리뷰 패널

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 %}