코드 패널

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

Pro 플랜 이상에서 코드 편집이 가능합니다. Free 플랜에서는 읽기 전용입니다.

---

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가 여기서 시작됩니다.

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

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

export default App;

App.css

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

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

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

package.json

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

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

---

코드 편집 (Pro)

직접 편집

1. 파일 트리에서 파일 선택

2. 에디터에서 코드 수정

3. 변경 사항이 자동으로 Preview에 반영

주의사항

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

"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. 업로드 완료 후 코드에서 참조

// 업로드한 이미지 사용
<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

• 에러 메시지에서 파일과 라인 번호 확인

• 해당 위치의 코드 수정

---

팁

AI에게 코드 수정 요청

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

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

파일 구조 참고

새로운 기능을 요청할 때 기존 파일 구조를 참고하면 일관성 있는 코드가 생성됩니다.