# 코드 패널

Code 패널에서는 AI가 생성한 React 코드를 확인하고 직접 편집할 수 있습니다.

{% hint style="warning" %}
**Pro 플랜 이상**에서 코드 편집이 가능합니다. Free 플랜에서는 읽기 전용입니다.
{% endhint %}

***

### Code 패널 열기

1. Header의 **Code 토글** 버튼 클릭
2. 또는 키보드 단축키 사용

***

### 구성 요소

#### 1. 파일 트리

프로젝트의 모든 파일과 폴더를 표시합니다.

```
/
├── src/
│   ├── App.js           # 메인 컴포넌트
│   ├── App.css          # 전역 스타일
│   └── components/      # 컴포넌트 폴더
│       ├── Header.js
│       ├── Form.js
│       └── Table.js
├── public/
│   └── index.html
└── package.json
```

#### 2. 코드 에디터

선택한 파일의 내용을 표시하고 편집합니다.

* **문법 강조**: JavaScript, JSX, CSS 지원
* **라인 번호**: 코드 위치 확인
* **자동 완성**: 기본 코드 완성 지원

#### 3. 파일 관리 메뉴

파일 트리에서 우클릭하면 메뉴가 표시됩니다.

| 메뉴         | 설명          |
| ---------- | ----------- |
| **새 파일**   | 파일 생성       |
| **새 폴더**   | 폴더 생성       |
| **이름 변경**  | 파일/폴더 이름 변경 |
| **삭제**     | 파일/폴더 삭제    |
| **파일 업로드** | 로컬 파일 업로드   |

***

### 주요 파일 설명

#### App.js

앱의 메인 컴포넌트입니다. 모든 UI가 여기서 시작됩니다.

```jsx
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      {/* 앱 내용 */}
    </div>
  );
}

export default App;
```

#### App.css

전역 스타일을 정의합니다.

```css
.App {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  padding: 20px;
}

.button-primary {
  background-color: #2563eb;
  color: white;
  /* ... */
}
```

#### package.json

프로젝트 의존성을 정의합니다. AI가 자동으로 관리합니다.

```json
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
```

***

### 코드 편집 (Pro)

#### 직접 편집

1. 파일 트리에서 파일 선택
2. 에디터에서 코드 수정
3. 변경 사항이 자동으로 Preview에 반영

#### 주의사항

{% hint style="warning" %}
직접 편집한 코드는 AI가 이후 요청에서 덮어쓸 수 있습니다. 중요한 변경은 AI에게 명시적으로 알려주세요.
{% endhint %}

```
"App.js의 Header 컴포넌트는 수정하지 말고,
Table 컴포넌트만 수정해줘"
```

***

### 파일 생성

#### 새 파일 만들기

1. 파일 트리에서 **우클릭** → **새 파일**
2. 파일 이름 입력 (예: `components/Modal.js`)
3. Enter

#### 새 폴더 만들기

1. 파일 트리에서 **우클릭** → **새 폴더**
2. 폴더 이름 입력
3. Enter

***

### 파일 업로드

로컬 파일을 프로젝트에 추가합니다.

#### 지원 파일

* 이미지: PNG, JPG, GIF, SVG
* 폰트: TTF, WOFF, WOFF2
* 기타: JSON, TXT

#### 업로드 방법

1. 파일 트리에서 **우클릭** → **파일 업로드**
2. 파일 선택
3. 업로드 완료 후 코드에서 참조

```jsx
// 업로드한 이미지 사용
<img src="/images/logo.png" alt="Logo" />
```

***

### Read-only 모드 (Free)

Free 플랜에서는 Code 패널이 읽기 전용입니다.

#### 할 수 있는 것

* ✅ 코드 보기
* ✅ 파일 구조 확인
* ✅ 코드 복사

#### 할 수 없는 것

* ❌ 코드 편집
* ❌ 파일 생성/삭제
* ❌ 파일 업로드

→ Pro 플랜 업그레이드

***

### Preview 패널과 연동

Code에서 수정한 내용은 **실시간으로** Preview에 반영됩니다.

#### 에러 발생 시

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

```
Error: Unexpected token
  at App.js:15:8
```

* 에러 메시지에서 파일과 라인 번호 확인
* 해당 위치의 코드 수정

***

### 팁

{% hint style="info" %}
**AI에게 코드 수정 요청**

직접 편집보다 AI에게 요청하는 것이 더 안전합니다. AI는 전체 컨텍스트를 이해하고 수정합니다.

```
"App.js 42번 라인의 버튼 색상을 빨간색으로 바꿔줘"
```

{% endhint %}

{% hint style="info" %}
**파일 구조 참고**

새로운 기능을 요청할 때 기존 파일 구조를 참고하면 일관성 있는 코드가 생성됩니다.
{% 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/code-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.