# 에디터 설명

에디터는 AI와 대화하며 React 기반 웹 앱을 만드는 Waveon의 핵심 도구입니다.

***

### 에디터 접근 방법

#### 새 앱 생성 시

1. [waveon.io](https://waveon.io) 메인 화면에서 프롬프트 입력
2. 자동으로 에디터가 열림

#### 기존 앱 편집 시

1. 대시보드에서 앱 선택
2. **\[편집]** 버튼 클릭

***

### 에디터 구조

#### 전체 레이아웃

```
┌─────────────────────────────────────────────────────────────┐
│                        Header                                │
├─────────────┬─────────────────┬─────────────────────────────┤
│             │                 │                             │
│    Chat     │      Code       │         Preview             │
│   Panel     │     Panel       │          Panel              │
│             │   (Pro 전용)     │                             │
│             │                 │                             │
├─────────────┴─────────────────┴─────────────────────────────┤
│                    Right Panel (Visual Edit 시)              │
└─────────────────────────────────────────────────────────────┘
```

***

### 구성 요소

#### 1. Header

| 요소               | 설명            |
| ---------------- | ------------- |
| **앱 이름**         | 클릭하여 변경 가능    |
| **PC/Mobile 토글** | Preview 뷰 전환  |
| **Code 토글**      | Code 패널 표시/숨김 |
| **Tips 버튼**      | 에디터 사용 팁 모달   |
| **배포 버튼**        | 앱 배포          |

#### 2. Chat Panel

AI와 대화하는 공간입니다.

* 프롬프트 입력
* 대화 내역 확인
* 파일 업로드
* Visual Edit 토글

| 기능                 | 설명              |
| ------------------ | --------------- |
| **대화 내역**          | 이전 요청과 AI 응답 확인 |
| **프롬프트 입력**        | 새로운 요청 입력       |
| **파일 업로드**         | 이미지, PDF 등 첨부   |
| **Visual Edit 토글** | 요소 선택 모드 활성화    |
| **현재 페이지 표시**      | 작업 중인 페이지 경로    |

**프롬프트 입력 팁**

{% hint style="info" %}
**구체적으로 설명할수록** AI가 원하는 결과를 만들어냅니다.
{% endhint %}

```
❌ 나쁜 예: "폼 만들어줘"

✅ 좋은 예: "직원 등록 폼을 만들어줘.
이름(필수), 이메일(필수), 부서(드롭다운), 입사일(날짜선택) 필드가 필요해.
제출 버튼은 파란색으로."
```

#### 3. Code Panel

생성된 React 코드를 확인하고 편집합니다.

* 파일 트리
* 코드 에디터
* 파일 관리 (생성, 삭제, 이동)

→ Code Panel 상세

{% hint style="warning" %}
Code 패널 편집은 **Pro 플랜 이상**에서 가능합니다.
{% endhint %}

#### 4. Preview Panel

실시간으로 앱을 미리봅니다.

* 실시간 렌더링
* PC/Mobile 뷰 전환
* 상호작용 테스트
* Visual Edit 요소 선택

→ Preview Panel 상세

#### 5. Right Panel

Visual Edit 모드에서 선택한 요소의 정보를 표시합니다.

→ Visual Edit Mode 상세

***

### 기본 워크플로우

```
┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  프롬프트    │ ──→ │  AI 코드    │ ──→ │  Preview    │
│    입력     │     │    생성     │     │    확인     │
└─────────────┘     └─────────────┘     └─────────────┘
       ↑                                       │
       │                                       │
       └──────────── 수정 요청 ←───────────────┘
```

1. **Chat 패널**에서 원하는 기능 설명
2. AI가 코드를 생성하면 **Preview 패널**에서 확인
3. 수정이 필요하면 **추가 요청** 또는 **Visual Edit**으로 특정 요소 선택
4. 만족하면 **배포**

***

### 플랜별 기능

| 기능          | Free      | Pro |
| ----------- | --------- | --- |
| Chat 패널     | ✅         | ✅   |
| Preview 패널  | ✅         | ✅   |
| Visual Edit | ✅         | ✅   |
| 파일 업로드      | ✅         | ✅   |
| Code 패널 보기  | ✅ (읽기 전용) | ✅   |
| Code 패널 편집  | ❌         | ✅   |
| 파일 생성/삭제    | ❌         | ✅   |

***

### 다음 단계

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Chat Panel</strong></td><td>AI와 효과적으로 대화하기</td><td></td></tr><tr><td><strong>Visual Edit Mode</strong></td><td>요소 선택하여 수정하기</td><td></td></tr><tr><td><strong>Code Panel</strong></td><td>코드 직접 편집하기</td><td></td></tr></tbody></table>


---

# 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/overview.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.