RwCodeEditor
코드와 구조화된 텍스트를 별도 창에서 확인하고 수정하는 구성요소입니다. 파일 경로와 초기 값을 전달해 편집 창을 열고, 저장한 내용을 호출 화면으로 돌려주는 흐름에 사용합니다.
화면 구성
편집 영역은 dock-vpanel 구조로 배치되며 본문 편집기와 하단 저장 작업으로 나뉩니다. 호출 화면에서는 @ref로 구성요소 인스턴스를 보관하고 필요한 시점에 Show를 호출합니다.
공개 기능
| 기능 | 형식 | 설명 |
|---|---|---|
Show(item, path) |
Task |
대상 객체와 경로를 지정해 편집 창 열기 |
SetValue(value) |
Task |
편집기에 표시할 문자열 교체 |
OnValueChanged |
EventCallback<string> |
저장한 최신 문자열을 호출 화면에 전달 |
| 저장 작업 | 내부 Save |
현재 편집값을 반환하고 창 닫기 |
편집 시작
대상 객체와 표시할 경로가 준비되면 Show(item, path)를 호출합니다. 경로는 사용자가 이해할 수 있는 대상 이름을 표시하기 위한 값으로 사용하고, 실제 서버 파일 경로를 그대로 노출하지 않습니다.
값 변경
편집 창을 연 뒤 값을 다시 채워야 하면 SetValue를 사용합니다. 비동기 조회가 끝나기 전에 빈 편집기를 먼저 열 수 있으므로 로딩 상태와 편집 가능 시점을 분명하게 구분합니다.
저장 처리
사용자가 저장하면 OnValueChanged로 문자열이 전달됩니다. 이 이벤트는 편집 결과를 전달할 뿐 서버 저장 성공을 보장하지 않습니다. 호출 화면에서 문법, 권한과 동시 수정 여부를 검증하고 API 저장 결과를 별도로 안내합니다.
사용 예
<RwCodeEditor @ref="codeEditor" OnValueChanged="SaveTemplate" />
@code {
private RwCodeEditor codeEditor;
private Task OpenTemplate()
=> codeEditor.Show(selectedItem, "templates/order.txt");
}
서버에서 내용을 읽는 구조라면 조회한 값을 SetValue로 넣고, 저장 이벤트에서는 대상 식별자를 기준으로 API를 호출합니다.
유효성 검사
문법 강조나 편집기 표시만으로 내용이 안전하다고 판단하지 않습니다. JSON, SQL, 스크립트와 템플릿은 각각의 파서로 검증하고, 실행 가능한 문자열은 허용된 명령과 변수만 사용할 수 있도록 제한합니다.
접근성과 사용성
저장 단축키를 제공하는 경우 버튼과 같은 결과를 내야 합니다. 창을 닫을 때 저장하지 않은 변경이 있으면 호출 화면의 업무 규칙에 따라 확인 절차를 제공합니다. 긴 한 줄과 대용량 문서는 렌더링 비용과 가로 스크롤을 확인합니다.
문제 확인
- 선택한 대상이 바뀐 뒤 이전 내용이 남지 않는지 확인합니다.
- 저장 도중 창을 닫거나 같은 작업을 반복해도 중복 저장되지 않도록 합니다.
- 서버 오류가 발생했을 때 편집 내용이 사라지지 않게 유지합니다.
- 사용자에게 로컬 또는 서버의 실제 경로를 불필요하게 노출하지 않습니다.
