에디터 설명

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

---

에디터 접근 방법

새 앱 생성 시

1. 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 토글	요소 선택 모드 활성화
현재 페이지 표시	작업 중인 페이지 경로

프롬프트 입력 팁

구체적으로 설명할수록 AI가 원하는 결과를 만들어냅니다.

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

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

3. Code Panel

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

• 파일 트리

• 코드 에디터

• 파일 관리 (생성, 삭제, 이동)

→ Code Panel 상세

Code 패널 편집은 Pro 플랜 이상에서 가능합니다.

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 패널 편집	❌	✅
파일 생성/삭제	❌	✅

---

다음 단계

Chat Panel

AI와 효과적으로 대화하기

Visual Edit Mode

요소 선택하여 수정하기

Code Panel

코드 직접 편집하기