모달 폼

모달 창에서의 폼 생성 및 관리.

소개

모달은 사용자가 현재 페이지를 떠나지 않고도 폼을 열 수 있게 해 주는 UI 기능입니다.

모달을 사용하면 페이지를 새로 고치거나 현재 화면의 컨텍스트를 잃지 않고 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 수행할 수 있어 사용자 경험(UX)이 크게 향상됩니다.

Netuno는 백엔드와의 통신 및 필요한 HTML 주입을 자동으로 관리합니다.

사전 요구 사항

예제를 구현하려면 다음이 필요합니다:

Netuno 애플리케이션의 개발 환경에 대한 접근 권한.
Netuno 관리자 패널(백오피스)에 적절히 구성된 폼.
JavaScript 및 DOM 이벤트 처리에 대한 기본 지식.

다음 예제에서는 **"테스트"**라는 일반 폼을 사용합니다.

이 단계에서 궁금한 점이 있으면 다음을 참고하세요: 폼.

기본 구조

Netuno에서 모달 생성 및 조작은 netuno.modal 객체에 집중되어 있습니다.

netuno.modal.create() 메서드는 인터페이스에 모달의 기본 구조를 생성합니다. 다음 속성을 가진 구성 객체를 받습니다:

name (String): 모달의 기반이 될 폼의 이름(백오피스에서 생성됨).
callback (Function): 모달 구조가 DOM에 주입된 직후(표시되기 전) 실행되는 함수이며, 생성된 모달 요소를 매개변수로 받습니다.

콜백 함수

콜백 함수 내에서 네이티브 로딩 함수를 사용해 폼의 상태(모드)를 정의해야 합니다:

목록 모드 - netuno.loadForm(): 해당 폼의 레코드를 검색하고 나열하는 테이블을 렌더링합니다.
편집/생성 모드 - netuno.loadFormEdit(): 폼의 입력 필드를 렌더링합니다. 새 레코드를 삽입하거나 기존 레코드를 편집하는 데 사용할 수 있습니다.

구현

아래에서는 가장 일반적인 세 가지 사용 시나리오를 자세히 설명합니다.

1. 목록 모드

netuno.loadForm()는 사용자가 폼의 모든 데이터를 검색 테이블(grid) 형식으로 볼 수 있게 할 때 사용됩니다.

netuno.modal.create({
  name: '테스트',
  callback: function (모달) {
    // 1. 폼을 받을 내부 컨테이너를 찾습니다
    let 폼컨테이너 = 모달.find('[netuno-form]');
    // 2. 폼의 데이터 목록을 컨테이너에 주입합니다
    netuno.loadForm(폼컨테이너); 
    // 3. 사용자에게 모달을 표시합니다
    netuno.modal.show(모달);
  }
});

2. 생성 모드

netuno.loadFormEdit()는 "새로 추가" 유형의 버튼에 사용됩니다. 데이터 입력이 준비된 빈 폼을 엽니다.

netuno.modal.create({
  name: '테스트',
  callback: function (모달) {
    let 폼컨테이너 = 모달.find('[netuno-form]');
    // 삽입 모드(새 레코드)로 폼을 로드합니다
    netuno.loadFormEdit(폼컨테이너); 
    netuno.modal.show(모달);
  }
});

정보

netuno.loadFormEdit()를 ID 없이 사용하면 Netuno는 처음부터 "편집 화면"을 사용하려는 것으로 이해합니다. 빈 입력 필드가 있는 인터페이스를 로드하여 새 레코드를 생성할 준비를 합니다. 이 시나리오에서 Netuno는 내부적으로 netuno:new 이벤트를 발생시킵니다.

3. 편집 모드

모달이 변경할 특정 레코드를 로드하도록 하려면 로딩 함수의 두 번째 매개변수로 레코드의 UID 또는 ID를 전달해야 합니다.

// 예제: ID 1234의 레코드 편집
const 레코드ID = 1234; 

netuno.modal.create({
  name: '테스트',
  callback: function (모달) {
    let 폼컨테이너 = 모달.find('[netuno-form]');
    // ID 1234 레코드의 데이터를 폼 필드에 주입합니다
    netuno.loadFormEdit(폼컨테이너, 레코드ID); 
    netuno.modal.show(모달);
  }
});

이벤트

폼 컨테이너([netuno-form])는 사용자 상호작용의 생애 주기를 따라 사용자 정의 이벤트를 발생시킵니다.

이러한 이벤트를 사용해 프런트엔드의 특정 비즈니스 로직(예: 백그라운드에서 테이블 업데이트, 알림 표시 등)을 트리거하는 것이 권장됩니다.

이벤트 유형	설명
`netuno:new`	새 항목 생성 화면이 표시될 때 발생합니다.
`netuno:edit`	기존 항목 편집 화면이 표시될 때 발생합니다.
`netuno:save`	새 항목이 추가될 때 발생합니다.
`netuno:back`	뒤로 가기 버튼을 클릭한 후 발생합니다.
`netuno:delete`	항목이 삭제된 후 발생합니다.

예제: 여러 이벤트 가로채기

이 프로덕션 준비 예제에서는 모달을 생성하고 사용자 작업의 성공을 추적하는 리스너를 추가합니다:

netuno.modal.create({
  name: '테스트',
  callback: function (모달) {
    let 폼컨테이너 = 모달.find('[netuno-form]');
    
    // 삽입 화면 모니터링
    폼컨테이너.on('netuno:new', function(이벤트) {
       console.info("생성 인터페이스가 로드되었습니다.");
    });

    // 성공적인 저장 모니터링
    폼컨테이너.on('netuno:save', function(이벤트) {
       console.success("레코드가 성공적으로 저장되었습니다!");
       // 예제: 저장 후 모달 자동 닫기
       netuno.modal.hide(모달); 
    });

    // 모달을 목록 모드로 렌더링하고 표시
    netuno.loadForm(폼컨테이너);
    netuno.modal.show(모달);
  }
});

어려움이 있거나 개선 제안이 있으면 연락해 주세요. 저희 팀과 커뮤니티가 기꺼이 도와드리겠습니다.

즐거운 개발 되세요!

소개​

사전 요구 사항​

기본 구조​

콜백 함수​

구현​

1. 목록 모드​

2. 생성 모드​

3. 편집 모드​

이벤트​

예제: 여러 이벤트 가로채기​

소개