MSUB/ui
컴포넌트/Code Editor

Code Editor

모던한 코드 에디터 컴포넌트입니다. 파일 탐색기, 탭, 구문 강조, 로딩 상태 등을 지원합니다.

설치

Terminal
npx @msub-core/ui-cli add code-editor

사용법

TSX
import { CodeEditor, type FileData, type FileTreeNode } from "@/components/code-editor"

const [files, setFiles] = useState<Record<string, FileData>>({
  "main.ts": {
    name: "main.ts",
    language: "typescript",
    content: "..."
  }
})

const fileTree: FileTreeNode[] = [
  {
    id: "root",
    name: "project",
    type: "folder",
    children: [
      { id: "main", name: "main.ts", type: "file", language: "typescript" }
    ]
  }
]

<CodeEditor
  files={files}
  fileTree={fileTree}
  activeFile="main.ts"
  openFiles={["main.ts"]}
  onFileChange={...}
  onFileSelect={...}
  onFileClose={...}
/>

기본 예제

탐색기
App.tsx
Button.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
main
0 문제
Ln 18, Col 1UTF-8
TypeScript React

사이드바 없이 사용

App.tsx
Button.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
main
0 문제
Ln 18, Col 1UTF-8
TypeScript React

로딩 상태

탐색기
App.tsx
Button.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
main
0 문제
Ln 18, Col 1UTF-8
TypeScript React

Props

PropTypeDefaultRequiredDescription
filesRecord<string, FileData>-Yes파일 데이터 객체
fileTreeFileTreeNode[]-No파일 트리 구조 (사이드바용)
activeFilestring | null-Yes현재 활성화된 파일 이름
openFilesstring[]-Yes열려있는 파일 탭 목록
onFileChange(fileName, content) => void-Yes파일 내용 변경 핸들러
onFileSelect(fileName) => void-Yes파일 선택 핸들러
onFileClose(fileName) => void-Yes파일 탭 닫기 핸들러
showSidebarbooleantrueNo사이드바 표시 여부
showLineNumbersbooleantrueNo라인 넘버 표시 여부
isLoadingbooleanfalseNo로딩 상태
classNamestring-No추가 스타일 클래스

FileData 타입

TSX
interface FileData {
  name: string      // 파일 이름
  language: string  // 언어 (typescript, javascript, css, html, json 등)
  content: string   // 파일 내용
}

FileTreeNode 타입

TSX
interface FileTreeNode {
  id: string                   // 고유 ID
  name: string                 // 표시 이름
  type: "file" | "folder"      // 노드 타입
  language?: string            // 파일인 경우 언어
  children?: FileTreeNode[]    // 폴더인 경우 자식 노드
}