Creating a custom drag-and-drop layout builder involves several steps and components. Below are some key code snippets for creating this application. Note that this example uses the GridStack library, but you can use other front-end libraries as well.

1. Custom Layout DocType

Create a new DocType called "Custom Layout" with the following fields:

* `doctype`: Link field for the target DocType.
* `name`: Data field for a unique layout name.
* `layout_json`: Text field to store the layout information in JSON format.
1. Add GridStack library

Download GridStack and add it to your app's public folder. Include the necessary CSS and JS files in your page template.

1. Layout Builder Page

Create a new Page or Web Template in your custom app. Include the necessary HTML, CSS, and JS files for the GridStack library. Add the following HTML structure for the layout builder container:
```html
<div class="grid-stack" id="layout-builder"></div>
```
1. Layout Builder JavaScript

Write the JavaScript code to initialize GridStack and load the fields of the selected DocType as draggable placeholder objects. Save the custom layout when the user finishes customizing it.
```javascript
frappe.pages['your-page-name'].on_page_load = function(wrapper) {
  const page = frappe.ui.make_app_page({
    parent: wrapper,
    title: 'Drag and Drop Layout Builder',
    single_column: true
  });

  const doctype = 'Your Target DocType';
  let layout_builder;

  frappe.require([
    '/assets/your_app/css/gridstack.min.css',
    '/assets/your_app/js/gridstack-h5.js'
  ], () => {
    layout_builder = new LayoutBuilder(page, doctype);
  });
};

class LayoutBuilder {
  constructor(page, doctype) {
    this.page = page;
    this.doctype = doctype;
    this.init();
  }

  async init() {
    this.fields = await this.fetch_fields();
    this.init_gridstack();
    this.load_fields();
  }

  async fetch_fields() {
    const { fields } = await frappe.call({
      method: 'frappe.desk.form.meta.get_meta',
      args: { doctype: this.doctype }
    });

    return fields.filter(field => !field.hidden);
  }

  init_gridstack() {
    const gridstack_options = {
      cellHeight: 80,
      verticalMargin: 10
    };
    this.grid = GridStack.init(gridstack_options, this.page.main.find('#layout-builder'));
  }

  load_fields() {
    this.fields.forEach(field => {
      const field_html = `<div class="grid-stack-item" data-gs-id="${field.fieldname}">
                            <div class="grid-stack-item-content">${field.label}</div>
                          </div>`;
      this.grid.addWidget(field_html, { width: 2, height: 1 });
    });
  }

  // Add a method to save the layout when the user is done customizing it.
}
```
1. Saving and Loading Custom Layouts

Add methods to save and load custom layouts to/from the "Custom Layout" DocType. You can also add buttons to trigger these actions.

1. Apply Custom Layouts

Override the default rendering of the target DocType using a custom script or by modifying its controller. Load the custom layout JSON and apply the saved layout information while rendering the form.

1. Include the custom app in your site's build

Add your custom app to the `apps.txt` file in the `sites` directory.

This outline provides a starting point for creating a custom drag-and-drop layout builder for Frappe DocTypes.
사용자 지정 드래그 앤 드롭 레이아웃 빌더를 만들려면 몇 가지 단계와 구성 요소가 필요합니다. 다음은 이 애플리케이션을 만들기 위한 몇 가지 주요 코드 조각입니다. 이 예제에서는 GridStack 라이브러리를 사용하지만 다른 프런트엔드 라이브러리도 사용할 수 있습니다.

1. 사용자 정의 레이아웃 문서 유형

다음 필드를 사용하여 "사용자 지정 레이아웃"이라는 새 문서 유형을 만듭니다:

* `도큐타입`: 대상 DocType의 링크 필드입니다.
* `이름`: 고유한 레이아웃 이름을 위한 데이터 필드입니다.
* `layout_json`: 레이아웃 정보를 JSON 형식으로 저장하는 텍스트 필드입니다.
1. GridStack 라이브러리 추가하기

GridStack을 다운로드하여 앱의 공용 폴더에 추가합니다. 페이지 템플릿에 필요한 CSS 및 JS 파일을 포함합니다.

1. 레이아웃 빌더 페이지

사용자 지정 앱에서 새 페이지 또는 웹 템플릿을 만듭니다. GridStack 라이브러리에 필요한 HTML, CSS 및 JS 파일을 포함합니다. 레이아웃 빌더 컨테이너에 다음 HTML 구조를 추가합니다:
```html
<div class="grid-stack" id="layout-builder"></div>
```
1. 레이아웃 빌더 자바스크립트

자바스크립트 코드를 작성하여 그리드스택을 초기화하고 선택한 문서 유형의 필드를 드래그 가능한 플레이스홀더 객체로 로드합니다. 사용자가 사용자 지정 레이아웃을 완료하면 사용자 지정 레이아웃을 저장합니다.
```javascript
frappe.pages['your-page-name'].on_page_load = function(wrapper) {
  const page = frappe.ui.make_app_page({
    부모: 래퍼,
    title: '드래그 앤 드롭 레이아웃 빌더',
    single_column: true
  });

  const doctype = '타겟 문서 유형';
  LET 레이아웃 빌더;

  frappe.require([[
    '/assets/your_app/css/gridstack.min.css',
    '/assets/your_app/js/gridstack-h5.js'
  ], () => {
    layout_builder = 새로운 레이아웃 빌더(페이지, 도큐타입);
  });
};

class LayoutBuilder {
  constructor(page, doctype) {
    this.page = page;
    this.doctype = doctype;
    this.init();
  }

  async init() {
    this.fields = await this.fetch_fields();
    this.init_gridstack();
    this.load_fields();
  }

  async fetch_fields() {
    const { fields } = await frappe.call({
      메서드: 'frappe.desk.form.meta.get_meta',
      args: { doctype: this.doctype }
    });

    return fields.filter(field => !field.hidden);
  }

  init_gridstack() {
    const gridstack_options = {
      cellHeight: 80,
      verticalMargin: 10
    };
    this.grid = GridStack.init(gridstack_options, this.page.main.find('#layout-builder'));
  }

  load_fields() {
    this.fields.forEach(field => {
      const field_html = `<div class="grid-stack-item" data-gs-id="${field.fieldname}">'
                            <div class="grid-stack-item-content">${field.label}</div>
                          </div>`;
      this.grid.addWidget(field_html, { width: 2, height: 1 });
    });
  }

  // 사용자가 사용자 지정을 완료하면 레이아웃을 저장하는 메서드를 추가합니다.
}
```
1. 사용자 정의 레이아웃 저장 및 로드

사용자 정의 레이아웃을 "사용자 정의 레이아웃" 문서 유형에 저장하고 로드하는 메서드를 추가합니다. 이러한 작업을 트리거하는 버튼을 추가할 수도 있습니다.

1. 사용자 지정 레이아웃 적용

사용자 지정 스크립트를 사용하거나 컨트롤러를 수정하여 대상 문서 유형의 기본 렌더링을 재정의합니다. 사용자 지정 레이아웃 JSON을 로드하고 양식을 렌더링하는 동안 저장된 레이아웃 정보를 적용합니다.

1. 사이트 빌드에 사용자 정의 앱 포함하기

사이트` 디렉터리의 `apps.txt` 파일에 사용자 정의 앱을 추가합니다.

이 개요는 Frappe 문서 유형에 대한 사용자 정의 드래그 앤 드롭 레이아웃 빌더를 만들기 위한 시작점을 제공합니다.