> 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/code-panel.md).

# 코드 패널

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